improve timeline

ikramberroug · Oct 2, 2024 · 609f1f8 · 609f1f8
1 parent 04b3db7
commit 609f1f8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -66,6 +66,7 @@ <h1 class="title">Ikram Berroug</h1>
 
 
     <section id="Engineering_course">
+        <h1 class="title">Engineering course</h1>
         <div class="timeline">
             <div class="timeline-item">
                 <div class="timeline-content">
@@ -89,13 +90,6 @@ <h2>CPGE Lycée Mohamed V, Béni Mellal, Morocco</h2>
                     <p>1ère année, MPSI</p>
                 </div>
             </div>
-            <div class="timeline-item">
-                <div class="timeline-content">
-                    <h2>Lycée Hassan II, Béni Mellal, Morocco</h2>
-                    <p>Sept 2020 - Juin 2021</p>
-                    <p>Baccalauréat Sciences Mathématiques A - Mention Bien</p>
-                </div>
-            </div>
         </div>
     </section>
 

diff --git a/style.css b/style.css
@@ -251,45 +251,52 @@ section {
 
 .timeline {
     position: relative;
-    margin-left: 0;
+    margin: 0 auto;
     padding: 2rem 0;
+    max-width: 80%;
 }
 
 .timeline::before {
     content: '';
     position: absolute;
     top: 0;
-    right: 0; /* Ligne à droite */
-    width: 4px;
-    height: 100%;
-    background: rgb(85, 85, 85); /* Gris utilisé */
+    left: 0;
+    width: 2px;
+    height: 80%;
+    background: rgb(85, 85, 85);
 }
 
 .timeline-item {
     display: flex;
-    justify-content: flex-start;
+    justify-content: flex-end;
     position: relative;
     margin-bottom: 2rem;
-    padding-left: 2rem; /* Réduit l'espace entre les items et la ligne */
+    padding-right: 2rem;
 }
 
 .timeline-item::before {
     content: '';
     position: absolute;
     top: 0;
-    right: -8px;
+    left: -8px;
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: rgb(85, 85, 85); /* Gris utilisé */
+    background: rgb(85, 85, 85)
 }
 
 .timeline-content {
-    max-width: 300px;
+    max-width: 100%;
+    width: calc(100% - 4rem);
     background: white;
-    padding: 1rem;
-    border-radius: 4px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    padding: 1.5rem;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    transition: width 0.3s ease;
+}
+
+.timeline-content:hover {
+    width: calc(100% - 2rem);
 }
 
 .logo {
@@ -298,6 +305,26 @@ section {
     margin-bottom: 1rem;
 }
 
+@media (max-width: 768px) {
+    .timeline-item {
+        flex-direction: column;
+        padding-right: 0;
+    }
+
+    .timeline-content {
+        width: 100%;
+    }
+
+    .timeline::before {
+        left: 50%;
+    }
+
+    .timeline-item::before {
+        left: calc(50% - 8px);
+    }
+}
+
+
 
 /* INTERNATIONAL MOBILITY */