Introduction of Vertical Timeline HTML CSS
Hello! Guys, we are again here to present you our new Vertical Timeline HTML CSS with amazing creativity. Which is Vertical Timeline, which is made with the help of HTML, CSS, and JavaScript. In this code, there will be the heading of the project at the top, and below. The heading there will be a vertical line, and to the right and left sides there will be a card. In this card, a historical date will be given. The event that occurred at that time can be seen there. Along with some details about the incidents you can read to get some knowledge. This is a type of informative webpage where you can find some information about anything that happened at that time.
Let’s start making this project with the simple and easy code of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet), and JavaScript. This is going to be so helpful for you, as you can use it on your education-type website. Where you can provide knowledge of history to your students. I hope you will be interested in our project and try to make such a type of project your own. This is not going to be so complicated, we have used the basic concept of cod. That can be understood by every developer, no matter if he or she is a beginner or a professional.
HTML (Hypertext Markup Language)
First, we will make the structure of the page with the help of HTML . In this project, we will write the title of the project in the title tag. Then we will move toward the main content of the project. In which we will give a parent div in which . We will write the heading of the project in the h1 tag and a sentence in the P tag and some information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Responsive Vertical Timeline HTML CSS</title>
</head>
<body>
<section class="intro">
<div class="container">
<h1>MCU Vertical Timeline ↓</h1>
<p>
he Avengers: Directed by Joss Whedon. With Robert Downey Jr., Chris
Evans, Mark Ruffalo, Chris Hemsworth.
</p>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>2008</time> <span class="t">Iron Man </span> <br />
When Tony Stark, an industrialist, is captured, he constructs a
high-tech armoured suit to escape. Once he manages to escape, he
decides to use his suit to fight against evil forces to save the
world.
</div>
</li>
<li>
<div>
<time>2011</time> <span class="t">Thor </span> <br />
Thor is a 2011 American superhero film based on the Marvel Comics
character of the same name. Produced by Marvel Studios and
distributed by Paramount
</div>
</li>
<li>
<div>
<time>2011</time>
<span class="t">Captain America: The First Avenger </span> <br />
Steve Rogers, a rejected military soldier, transforms into Captain
America after taking a dose of a "Super-Soldier serum". But being
Captain America
</div>
</li>
<li>
<div>
<time>2012</time> <span class="t">The Avengers </span> <br />
The Avengers ... Nick Fury of S.H.I.E.L.D. brings together a team of
super humans to form The Avengers to ... Earth's mightiest heroes
must come together and learn
</div>
</li>
<li>
<div>
<time>2013</time> <span class="t">Iron Man 3 </span> <br />
Iron Man 3 is a 2013 American superhero film based on the Marvel
Comics character Iron Man, produced by Marvel Studios and
distributed by Walt Disney
</div>
</li>
<li>
<div>
<time>2014</time>
<span class="t">Captain America: The Winter Soldier </span> <br />
Captain America: The Winter Soldier is a 2014 American superhero
film based on the Marvel Comics character Captain America, produced
by Marvel Studios and ..
</div>
</li>
<li>
<div>
<time>2008</time> <span class="t">Iron Man </span> <br />
When Tony Stark, an industrialist, is captured, he constructs a
high-tech armoured suit to escape. Once he manages to escape, he
decides to use his suit to fight against evil forces to save the
world.
</div>
</li>
<li>
<div>
<time>2015</time> <span class="t">Guardians of the Galaxy </span>
<br />
A group of intergalactic criminals must pull together to stop a
fanatical warrior with plans to purge the universe.A group of
intergalactic criminals must pull ..
</div>
</li>
<li>
<div>
<time>2015</time> <span class="t">Ant-Man </span> <br />
Ant-Man is a 2015 American superhero film based on the Marvel Comics characters of the same name: Scott Lang and Hank Pym. Produced by Marvel Studios and .
</div>
</li>
<li>
<div>
<time>2016</time> <span class="t">Doctor Strange </span> <br />
Doctor Strange is a 2016 American superhero film based on the Marvel Comics character of the same name. Produced by Marvel Studios and distributed by Walt .
</div>
</li>
</ul>
</section>
<script>
(function () {
"use strict";
// define variables
var items = document.querySelectorAll(".timeline li");
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);
})();
</script>
</body>
</html>
CSS (Cascading Style Sheet)
After making the structure of the project. We will now give some styling using CSS. In this, we will give the background blue and then move toward the main content of the project. In this, we will first adjust the size and position of the heading and paragraph, like font size and color. Then we will design another parent div and their card. We will make a vertical line and then design the card. In which we will give the styling to the time and paragraph, like color, position and size.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
}
body {
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
color: #fff;
overflow-x: hidden;
}
/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
/* background: #f45b69; */
padding: 100px 0;
background-position: 50% 50%;
background-image: url("https://wallpapers.com/images/featured/avengers-logo-bc77lnmtpum2omcp.jpg");
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul {
background: rgb(63,94,251);
background: linear-gradient(322deg, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
padding: 50px 0;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.t{
color: white;
font-weight: 600;
}
.timeline ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: 1;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #f45b69;
}
.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 #f45b69 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 #f45b69;
}
time {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li::after {
transition: background 0.5s ease-in-out;
}
.timeline ul li.in-view::after {
background: #f45b69;
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all 0.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 #f45b69 transparent transparent;
}
}
/* EXTRA/CLIP PATH STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline-clippy ul li::after {
width: 40px;
height: 40px;
border-radius: 0;
}
.timeline-rhombus ul li::after {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.timeline-rhombus ul li div::before {
bottom: 12px;
}
.timeline-star ul li::after {
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
.timeline-heptagon ul li::after {
clip-path: polygon(
50% 0%,
90% 20%,
100% 60%,
75% 100%,
25% 100%,
0% 60%,
10% 20%
);
}
.timeline-infinite ul li::after {
animation: scaleAnimation 2s infinite;
}
@keyframes scaleAnimation {
0% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.25);
}
100% {
transform: translateX(-50%) scale(1);
}
}
JavaScript
In this, we will give it the logic to appear while scrolling after making the structure and design of the website using JavaScript . This, we will target the html element through the class and then make a function. In this function, we will use the javascript properties to make the animation on scrolling. There will be another function, and we will call it at the end.
<script>
(function () {
"use strict";
// define variables
var items = document.querySelectorAll(".timeline li");
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);
})();
</script>Output of Vertical Timeline HTML CSS
Finally, we have made this Responsive Vertical Timeline HTML CSS and JavaScript by following their simple and easy code step by step to make understanding easy for you. You can make such a project to increase your knowledge and enhance your practice of code. If you want the source code, then click on the button given below to download it.
For more explanation, click on the link given below to watch the full video.
You can also check:
