education site

faris-zak · Jul 11, 2024 · d21dd5b · d21dd5b
1 parent 5225c54
commit d21dd5b
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 2 deletions.
diff --git a/assets/css/education.css b/assets/css/education.css
@@ -22,6 +22,58 @@ main section.intro p{
     opacity: 0.8;
 }
 
+main section.timeline{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+}
+
+main section.timeline div.timeline-card{
+    height: auto;
+    width: auto;
+    border-radius: 12px;
+    padding: 0;
+    border-radius: 100px;
+    margin: 0 50px;
+}
+
+main section.timeline div.timeline-card:hover div.timeline-card-details{
+    margin: 40px 0;
+}
+
+main section.timeline div.timeline-card div.timeline-card-header h2{
+    font-size: 30px;
+    font-weight: 500;
+    margin: 0;
+    margin-bottom: 5px;
+}
+
+main section.timeline div.timeline-card div.timeline-card-header span{
+    font-size: 16px;
+    font-weight: 400;
+    opacity: 0.8;
+}
+
+main section.timeline div.timeline-card div.line::before{
+    content: '';
+    position: absolute;
+    background-color: #c4c4c4;
+    border-radius: 100px;
+    width: 130px;
+    height: 2.5px;
+    margin: 12px 0;
+}
+
+main section.timeline div.timeline-card div.timeline-card-details{
+    margin-top: 25px;
+}
+
+main section.timeline div.timeline-card div.timeline-card-details span{
+    font-size: 24px;
+    font-weight: 400;
+}
+
 footer div img{
     user-select: none;
     max-width: 800px;

diff --git a/assets/js/education.js b/assets/js/education.js
@@ -2,6 +2,7 @@ const userImage = document.getElementById('userImage');
 const shape = document.getElementById('shape');
 const mainContent = document.querySelector('main');
 const links = document.querySelectorAll('a.fade');
+const timelineanime = document.querySelector('section.timeline');
 
 links.forEach(link => {
   link.addEventListener('click', (event) => {
@@ -19,6 +20,7 @@ window.onload = () =>{
     userImage.style.maxWidth = '500px';
     shape.style.transform = 'translateX(-200px)';
     mainContent.style.opacity = '1';
+    timelineanime.style.transform = 'translateY(55px) translateX(-50px)';
 };
 
 userImage.addEventListener('mouseover', () => {

diff --git a/assets/js/experience.js b/assets/js/experience.js
@@ -20,7 +20,7 @@ window.onload = () =>{
     userImage.style.maxWidth = '500px';
     shape.style.transform = 'translateX(-200px)';
     mainContent.style.opacity = '1';
-    timelineanime.style.transform = 'translateY(55px)';
+    timelineanime.style.transform = 'translateY(55px) translateX(-50px)';
 };
 
 userImage.addEventListener('mouseover', () => {

diff --git a/education.html b/education.html
@@ -48,7 +48,40 @@
         </div>
 
         <main>
-
+            <section class="intro">
+                <div class="intro-header">
+                    <h3>Education</h3>
+                </div>
+                <div class="intro-info">
+                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat asperiores obcaecati laboriosam saepe dolorem ullam necessitatibus excepturi exercitationem repellat omnis est, consequuntur voluptas recusandae cupiditate id amet laborum, magni provident quisquam, sunt nostrum dignissimos atque. Neque enim officiis voluptatem tempore eum alias qui nam, ipsam magni quasi quae minus. Vel.</p>
+                </div>
+            </section>
+            <section class="timeline">
+                <div class="timeline-card">
+                    <div class="timeline-card-header">
+                        <h2>Technology</h2>
+                        <span>YouTube & Microsoft Edge for browsing</span>
+                    </div>
+                    <div class="line"></div>
+                    <div class="timeline-card-details">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis repellendus dolor provident in similique odit aperiam laborum ratione inventore magni.</p>
+                        <hr>
+                        <span class="year">2018</span>
+                    </div>
+                </div>
+                <div class="timeline-card">
+                    <div class="timeline-card-header">
+                        <h2>Software Engineer</h2>
+                        <span>YouTube</span>
+                    </div>
+                    <div class="line"></div>
+                    <div class="timeline-card-details">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis repellendus dolor provident in similique odit aperiam laborum ratione inventore magni.</p>
+                        <hr>
+                        <span class="year">2022</span>
+                    </div>
+                </div>
+            </section>
         </main>
 
         <footer>