Introduction
Here, we are going to make an interesting vertical sticky card. We will make it by the use of HTML and CSS only use their basic concepts. This is basically the design of the of the sticky card, and you can use it for different purposes to decorate any webpage.
Now let’s start making it together without wasting time with HTML and CSS. You just need to follow us. step by step.
HTML
First, we will make the structure of the Vertical Animation Css with the use of HTML. In it, we will make some divs with same class, and in divs, we will add some information. You can also add whatever you want.
<!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>Document</title>
</head>
<body>
<div class="card">
<h2>Iron Man</h2>
<p>Iron Man is the superhero persona of Anthony Edward "Tony" Stark, a businessman and engineer who runs the weapons manufacturer Stark Industries.</p>
</div>
<div class="card">
<h2>Captain America</h2>
<p>Steve Rogers was a would-be U.S. Army enlistee rejected by recruiters because of his small size. He volunteers to receive a top-secret serum and transforms into a “super-soldier.” Dubbed Captain America and clad in a red, white, and blue costume with a matching stars-and-stripes shield, Rogers joins the army.</p>
</div>
<div class="card">
<h2>Thanos</h2>
<p>Thanos was a genocidal warlord from Titan, whose objective was to bring stability to the universe by wiping out half of all life at every level, as he believed</p>
</div>
<div class="card">
<h2>Thor</h2>
<p>Thor is one of the gods of Asgard and the son of the Asgardian king Odin. In addition to his Asgardian strength and extended lifespan,</p>
</div>
<div class="card">
<h2>Hulk</h2>
<p>The Hulk is a superhero appearing in American comic books published by Marvel Comics. Created by writer Stan Lee and artist Jack Kirby, the character first</p>
</div>
</body>
</html>CSS
After making the structure of the Vertical Animation Css, we will make it disignable and sticky with the use of CSS (an external stylesheet attached to the HTML page). In it, first we will adjust the size and positions of div, and one card will be on the Other cards and the appearance of cards will be controlled by using the nth child property in CSS.
body {
margin-inline: max(0px, ((100% - 260px) / 2));
font: 90%/1.4 system-ui;
background: black;
}
.card {
position: sticky;
top: 0;
background: white;
padding: 1.5rem;
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.card:nth-child(1) {
top: 1rem;
rotate: 1deg;
}
.card:nth-child(2) {
top: 2rem;
rotate: 2deg;
}
.card:nth-child(3) {
top: 3rem;
rotate: 3deg;
}
.card:nth-child(4) {
top: 4rem;
rotate: 4deg;
}
.card:nth-child(5) {
top: 5rem;
rotate: 5deg;
}
.card:nth-child(6) {
top: 6rem;
rotate: 6deg;
}
.card:nth-child(7) {
top: 7rem;
rotate: 7deg;
}
.card:nth-child(8) {
top: 8rem;
rotate: 8deg;
}
.card:nth-child(9) {
top: 9rem;
rotate: 9deg;
}
.card:nth-child(10) {
top: 10rem;
rotate: 10deg;
}
.card:nth-child(11) {
top: 11rem;
rotate: 11deg;
}
.card:nth-child(12) {
top: 12rem;
rotate: 12deg;
}
.card:nth-child(13) {
top: 13rem;
rotate: 13deg;
}
.card:nth-child(14) {
top: 14rem;
rotate: 14deg;
}
.card:nth-child(15) {
top: 15rem;
rotate: 15deg;
}
.card:nth-child(16) {
top: 16rem;
rotate: 16deg;
}
.card:nth-child(17) {
top: 17rem;
rotate: 17deg;
}
.card:nth-child(18) {
top: 18rem;
rotate: 18deg;
}
.card:nth-child(19) {
top: 19rem;
rotate: 19deg;
}
.card:nth-child(20) {
top: 20rem;
rotate: 20deg;
}Finally, we made the vertical sticky card with the design by the use of HTML and CSS step-by-step. I hope you understood. all the concepts, and if you want, make such a card. then you can take ideas from here and enhance your creativity by making such types of projects.
If you want to see a video of the code , then click on the Like .
Press the download button to download the source code of Vertical Animation Css
