added keydate timeline

zaidnaseer · Sep 27, 2024 · c283583 · c283583
1 parent 8292855
commit c283583
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -136,43 +136,53 @@ <h2 id="papers-h2">Call for Papers</h2>
             <li>Cybersecurity Defense</li>
         </ul>
     </section>
+<!-- Key Dates Starts-->
 
-    <section id="section-dates">
-        <div class="h1-wrapper">
-            <h1>Key Dates</h1>
-        </div>
-        <table>
-            <tr>
-                <th>Event</th>
-                <th>Date</th>
-            </tr>
-            <tr>
-                <td>Paper Submission Deadline</td>
-                <td>1 January, 2025</td>
-            </tr>
-            <tr>
-                <td>Acceptance Notification</td>
-                <td>1 January, 2025</td>
-            </tr>
-            <tr>
-                <td>Revised Paper Submission Deadline</td>
-                <td>1 January, 2025</td>
-            </tr>
-            <tr>
-                <td>Author Registration Deadline</td>
-                <td>1 January, 2025</td>
-            </tr>
-            <tr>
-                <td>Pre-conference Workshop</td>
-                <td>1 January, 2025</td>
-            </tr>
-            <tr>
-                <td>Conference</td>
-                <td>1 January, 2025</td>
-            </tr>
-        </table>
-    </section>
+<!-- <div class="h1-wrapper"><h1>KEY DATES</h1></div> -->
 
+    <div class="timeline">   
+        <h2><center>KEY DATES</center></h2>     
+        <ul>
+            <li>
+                <span>1st October 2024</span>
+                <div class="Timeline-content">
+                    <h3>Paper Submission Deadline</h3>  
+                </div>
+            </li>
+            <li>
+                <span>20th October 2024</span>
+                <div class="Timeline-content">
+                    <h3>Acceptance Notification.</h3>
+                </div>
+            </li>
+            <li>
+                <span>25th October 2024</span>
+                <div class="Timeline-content">
+                    <h3>Submission deadline for revised papers.</h3>
+                </div>
+            </li>
+            <li>
+                <span>29th October 2024</span>
+                <div class="Timeline-content">
+                    <h3>Author  Registration Deadline.</h3>
+                </div>
+            </li>
+            <li>
+                <span>5th November 2024</span>
+                <div class="Timeline-content">
+                    <h3>Pre Conference Workshop.</h3>
+                </div>
+            </li> 
+            <li>
+                <span>14th January 2025</span>
+                <div class="Timeline-content">
+                    <h3>Conference Dates.</h3>
+                    <h5>Venue: KL University, Aziz Nagar, Hyd.</h5>
+                </div>
+            </li>
+        </ul>
+    </div>
+<!-- Key Dates Ends -->
     <section id="section-committee">
 
         <div class="h1-wrapper"><h1>Committee</h1></div>

diff --git a/styles/style.css b/styles/style.css
@@ -353,6 +353,7 @@ nav a {
   transform-origin: right;
   transition: transform 0.3s ease;
 } */
+
 /* Topic Card Starts */
 
 @keyframes slideInLeft {
@@ -415,6 +416,80 @@ section h1 {
 }
 /* Topic Card Ends*/
 
+/* Key Dates Starts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+.timeline {
+  width: 800px;
+  background-color: #072736;
+  color: #fff;
+  padding: 30px 50px;
+  width: 55%;
+
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  margin: 0 auto; /* Center horizontally */
+}
+.timeline h2{
+  margin-top: 10px;
+}
+.timeline ul{
+  list-style-type:none;
+  border-left:2px solid #094a68;
+  padding:10px 5px;
+}
+.timeline ul li{
+  padding:20px 20px;
+  position:relative;
+  cursor:pointer;
+  transition:.5s;
+}
+.timeline ul li span{
+  display:inline-block;
+  background-color:#1685b8;
+  border-radius:25px;
+  padding:2px 5px;
+  font-size:15px;
+  text-align:center;
+}
+.timeline ul li .Timeline-content h3{
+  color:#34ace0;
+  font-size:17px;
+  padding-top:11px;
+}
+.timeline ul li .Timeline-content h5 {
+    color: lightgray;
+    padding-top: 0.5px;
+}
+.timeline ul li:before{
+  position:absolute;
+  content:'';
+  width:10px;
+  height:10px;
+  background-color:#34ace0;
+  border-radius:50%;
+  left:-11px;
+  top:28px;
+  transition:.5s;
+}
+.timeline ul li:hover{
+  background-color:#071f2a;
+}
+.timeline ul li:hover:before{
+  background-color:#0F0;
+  box-shadow:0px 0px 10px 2px #0F0;
+}
+@media (max-width:300px){
+  .timeline{
+    width:100%;
+    padding:30px 5px 30px 10px;
+  }
+  .timeline ul li .Timeline-content h3{
+    color:#34ace0;
+    font-size:15px;
+  }
+
+}
+
+/* Key Dates Ends */
 /* Page scroll starts */
 #progress-bar {
   position: fixed;

diff --git a/testing/demo_keydates.html b/testing/demo_keydates.html
@@ -0,0 +1,36 @@
+
+<section id="section-dates">
+    <div class="h1-wrapper">
+        <h1>Key Dates</h1>
+    </div>
+    <table>
+        <tr>
+            <th>Event</th>
+            <th>Date</th>
+        </tr>
+        <tr>
+            <td>Paper Submission Deadline</td>
+            <td>1 January, 2025</td>
+        </tr>
+        <tr>
+            <td>Acceptance Notification</td>
+            <td>1 January, 2025</td>
+        </tr>
+        <tr>
+            <td>Revised Paper Submission Deadline</td>
+            <td>1 January, 2025</td>
+        </tr>
+        <tr>
+            <td>Author Registration Deadline</td>
+            <td>1 January, 2025</td>
+        </tr>
+        <tr>
+            <td>Pre-conference Workshop</td>
+            <td>1 January, 2025</td>
+        </tr>
+        <tr>
+            <td>Conference</td>
+            <td>1 January, 2025</td>
+        </tr>
+    </table>
+</section>