Vertical Timeline - My life
How do I make an vertical timeline - my life?
Day: 45 of 100Building a Vertical Timeline With CSS and a Touch of JavaScript. I decide to make the story with the basic facts about my life.. What is a vertical timeline - my life? How do you make a vertical timeline - my life? This script and codes were developed by Eleftheria Batsou on 27 October 2022, Thursday.
Vertical Timeline - My life - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical Timeline - My life</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head></head> <body>
<section class="intro"> <div class="container"> <h1>My Life ↓</h1> <h5>Scroll Down</h5> </div>
</section>
<section class="timeline"> <ul> <li> <div> <time>1993</time><img id="meBaby" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/babyMe_zps3ku1takx.jpg"/><br>Born in Greece in a hot noon of mid-summer </div> </li> <li> <div> <time>1998-2011</time><img class="photos" src="http://www.westperry.org/cms/lib/PA09000117/Centricity/Domain/51/school.gif"/><br>Went to school in many different places in Greece. We had to move a lot due to mama's job. </div> </li> <li> <div> <time>2012-2016</time><img class="photos" src="https://eclass.uowm.gr/courses/theme_data/3/uowm-logo_1.png"/><br> Study at the university of Western Macedonia in Greece. </div> </li> <li> <div> <time>2016</time><img class="photos" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/3_eleftheria_zpsjwpxlvm7.jpg"/><br> Graduade as an Engineer of Informatics and Telecommunications </div> </li> <li> <div> <time>2017</time><img class="photos" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/IMG-20161208-WA0006_zpsnpvm7kko.jpg"/><br>Been for a couples of months in Amsterdam to internship in a cool start-up company! </div> </li> <li> <div> <time>Find me!</time><h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5> </div> </li> </ul>
</section> </body> </html> <script src="js/index.js"></script>
</body>
</html>
Vertical Timeline - My life - Script Codes CSS Codes
@charset "UTF-8";
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box;
}
/* dark pink for the bg-color */
/*dark cayn for the boxes */
/* light pink for the words*/
body { font: normal 16px/1.5 "Helvetica Neue", sans-serif; background: #AD1457; color: #F8BBD0; overflow-x: hidden; padding-bottom: 50px;
}
/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro { background: #00838F; padding: 100px 0;
}
.container { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center;
}
h1 { font-size: 2.5rem;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul { background: #AD1457; padding: 50px 0;
}
.timeline ul li { list-style-type: none; position: relative; width: 10px; margin: 0 auto; padding-top: 50px; background: #F8BBD0;
}
.timeline ul li::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: inherit;
}
.timeline ul li div { position: relative; bottom: 0; width: 400px; padding: 15px; background: #00838F;
}
.timeline ul li div::before { content: ''; position: absolute; bottom: 7px; width: 0; height: 0; border-style: solid;
}
.timeline ul li:nth-child(odd) div { left: 45px;
}
.timeline ul li:nth-child(odd) div::before { left: -15px; border-width: 8px 16px 8px 0; border-color: transparent #00838F transparent transparent;
}
.timeline ul li:nth-child(even) div { left: -439px;
}
.timeline ul li:nth-child(even) div::before { right: -15px; border-width: 8px 0 8px 16px; border-color: transparent transparent transparent #00838F;
}
time { display: block; font-size: 1.2rem; font-weight: bold; margin-bottom: 8px;
}
/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li::after { transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after { background: #00838F;
}
.timeline ul li div { visibility: hidden; opacity: 0; transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div { transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div { transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div { transform: none; visibility: visible; opacity: 1;
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) { .timeline ul li div { width: 250px; } .timeline ul li:nth-child(even) div { left: -289px; /*250+45-6*/ }
}
@media screen and (max-width: 600px) { .timeline ul li { margin-left: 20px; } .timeline ul li div { width: calc(100vw - 91px); } .timeline ul li:nth-child(even) div { left: 45px; } .timeline ul li:nth-child(even) div::before { left: -15px; border-width: 8px 16px 8px 0; border-color: transparent #00838F transparent transparent; }
}
#meBaby { width: 100px; height: 135px;
}
.photos { width: 100px; height: auto;
}
a:visited { color: #F8BBD0;
}
a:hover { color: #AD1457;
}
Vertical Timeline - My life - Script Codes JS Codes
(function() { 'use strict'; // define variables var items = document.querySelectorAll(".timeline li"); // check if an element is in viewport // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function callbackFunc() { for (var i = 0; i < items.length; i++) { if (isElementInViewport(items[i])) { items[i].classList.add("in-view"); } } } // listen for events window.addEventListener("load", callbackFunc); window.addEventListener("resize", callbackFunc); window.addEventListener("scroll", callbackFunc);
})();
Developer | Eleftheria Batsou |
Username | EleftheriaBatsou |
Uploaded | October 27, 2022 |
Rating | 3 |
Size | 4,888 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Draw Like Never Before | 2,372 Kb |
Music App Template - FlexBox | 3,132 Kb |
Postcode Finder and Map | 3,904 Kb |
Landing Page for an App | 3,320 Kb |
Calculate Calories and Macros | 7,925 Kb |
Sun, earth and code | 4,358 Kb |
Code Player | 3,290 Kb |
Clock with JS | 2,350 Kb |
Personal Portfolio Webpage | 8,863 Kb |
Animate Your Name | 2,722 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Loading animation | Codeams | 2,408 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Resume | Rottingroom | 5,483 Kb |
Price | Catcode | 2,623 Kb |
Hello People | Danburrows | 2,365 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!