timeline(not yet completed fully)

index.html

@@ -334,6 +334,127 @@ <h2>Prizes</h2>
 
     <!-- ======= Schedule Section ======= -->
 
+    <section id="Schedule" class="services">
+      <div class="container">
+
+        <div class="section-title">
+          <span>Prizes</span>
+          <h2>Prizes</h2>
+          <p>More track prizes to be announced</p>
+        </div>
+
+
+        <div class="row">
+          <div class="" data-aos="fade-up">
+            <div class="icon-box">
+              <div class="icon"><i class="bi-trophy"></i></div>
+              <p style="font-size: 26px; font-weight: bold;">Best Hack (1st Place) x 6</p> <br>
+              <p style="font-size: 20px;">The team that achieves first place in <span style="font-style: italic; font-weight: bolder;">each domain</span> will be granted a trophy and a cash prize of Rs 20,000. </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="timeline">
+          <div class="timeline-item">
+            <div class="timeline-content">
+              <h3 class="timeline-title">Event Title</h3>
+              <p class="timeline-description">Registeration(team of 5)</p>
+            </div>
+            <span class="timeline-date">Event Date</span>
+          </div>
+
+          <div class="timeline-item">
+            <div class="timeline-content">
+              <h3 class="timeline-title">Idea submission</h3>
+              <p class="timeline-description">Event Description</p>
+            </div>
+            <span class="timeline-date">Event Date</span>
+          </div>
+          <div class="timeline">
+            <div class="timeline-item">
+              <div class="timeline-content">
+                <h3 class="timeline-title">Idea judging</h3>
+                <p class="timeline-description">Registeration(team of 5)</p>
+              </div>
+              <span class="timeline-date">Event Date</span>
+            </div>
+
+          <!-- Add more timeline items here -->
+        </div>
+        <style>
+          .timeline {
+  position: relative;
+  margin: 40px 0;
+  padding: 0;
+}
+
+.timeline-item {
+  position: relative;
+  padding: 40px 0;
+}
+
+.timeline-content {
+  margin-left: 50px;
+}
+
+.timeline-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.timeline-description {
+  margin: 10px 0 0;
+}
+
+.timeline-date {
+  position: absolute;
+  top: 0;
+  left: -150px;
+  width: 130px;
+  font-size: 14px;
+  text-align: right;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 9px;
+  width: 2px;
+  height: 100%;
+  background-color: #ccc;
+}
+
+.timeline-item:first-child {
+  padding-top: 0;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-date::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #ccc;
+}
+
+        </style>
+
+
+
+
+
+
+
+
 
 
     <!-- End of schedule -->