Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "10K Followers" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "10K Followers" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
10K Followers [Source Code]
To get the following HTML, CSS & JS code for the 10K Followers project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10K Followers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="instagram">
<h1>
10K
</h1>
<p>
<span>F</span>
<span>o</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>w</span>
<span>e</span>
<span>r</span>
<span>s</span>
</p>
</div>
<div class="thankYou">
<p>Thank You All</p>
<p>అందరికి ధన్యవాదాలు</p>
<p>நன்றி</p>
<p>आप सभी को धन्यवाद</p>
<p>ಎಲ್ಲರಿಗೂ ಧನ್ಯವಾದಗಳು</p>
<p>എല്ലാവർക്കും നന്ദി</p>
<p>Merci à tous</p>
<p>Gracias a todos</p>
<p>Terima kasih semua</p>
<p>obrigado a todos</p>
</div>
</div>
<div class="fireworks"></div>
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- UNPKG -->
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- Usage -->
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: white;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.instagram {
text-align: center;
}
.instagram h1 {
font-size: 200px;
font-weight: bold;
margin-bottom: -70px;
color: transparent;
background-image: url("https://media1.giphy.com/media/WrHrrwqxCTTb7uKQQX/200w.webp?cid=ecf05e47fau7gqewearxys5dibd6wtx0ybcu5ytd1lggdcnl&ep=v1_gifs_search&rid=200w.webp&ct=g");
background-repeat: no-repeat;
background-size: cover;
background-clip: text;
}
.instagram p {
font-size: 100px;
text-transform: uppercase;
font-weight: bold;
}
p span {
animation: glowing 2.25s linear infinite;
}
p span:nth-child(1) {
animation-delay: 0s;
}
p span:nth-child(2) {
animation-delay: 0.25s;
}
p span:nth-child(3) {
animation-delay: 0.5s;
}
p span:nth-child(4) {
animation-delay: 0.75s;
}
p span:nth-child(5) {
animation-delay: 1s;
}
p span:nth-child(6) {
animation-delay: 1.25s;
}
p span:nth-child(7) {
animation-delay: 1.5s;
}
p span:nth-child(8) {
animation-delay: 1.75s;
}
p span:nth-child(9) {
animation-delay: 2s;
}
@keyframes glowing {
0%,
100% {
color: white;
text-shadow: 0 0 5px slateblue, 0 0 10px slateblue, 0 0 20px slateblue,
0 0 40px slateblue, 0 0 80px slateblue, 0 0 120px slateblue,
0 0 200px slateblue, 0 0 300px slateblue, 0 0 400px slateblue,
0 0 500px slateblue;
}
5%,
95% {
color: rgb(31, 27, 27);
text-shadow: none;
}
}
.thankYou {
background-color: slateblue;
color: white;
text-align: center;
width: 750px;
height: 100px;
line-height: 100px;
border-radius: 20px;
overflow: hidden;
}
.thankYou p {
font-size: 48px;
font-weight: 600;
text-transform: uppercase;
word-spacing: 3px;
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
transform: translateY(0px);
}
10% {
transform: translateY(-100px);
}
20% {
transform: translateY(-200px);
}
30% {
transform: translateY(-300px);
}
40% {
transform: translateY(-400px);
}
50% {
transform: translateY(-500px);
}
60% {
transform: translateY(-600px);
}
70% {
transform: translateY(-700px);
}
80% {
transform: translateY(-800px);
}
90% {
transform: translateY(-900px);
}
100% {
transform: translateY(100px);
}
}
/* Fireworks */
.fireworks {
position: absolute;
bottom: 0;
z-index: 100;
width: 100%;
height: 100%;
}
JavaScript
// FireWork.js (It is a javascript library)
// GitHub repository link
// https://github.com/crashmax-dev/fireworks-js
const container = document.querySelector('.fireworks')
const fireworks = new Fireworks.default(container, {
opacity: 0.5,
acceleration: 1.02,
friction: 0.97,
gravity: 1.5,
particles: 60,
traceLength: 3,
traceSpeed: 10,
explosion: 5,
intensity: 30,
flickering: 50,
lineStyle: 'round',
hue: {
min: 0,
max: 345
},
delay: {
min: 30,
max: 60
},
rocketsPoint: {
min: 50,
max: 50
},
lineWidth: {
explosion: {
min: 0.5,
max: 2
},
trace: {
min: 0.10,
max: 1
}
},
brightness: {
min: 50,
max: 80
},
decay: {
min: 0.015,
max: 0.03
},
mouse: {
click: false,
move: false,
max: 1
},
})
fireworks.start()
Generating Download Link...