Animated Landing Page
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
📙Table Of Content
- Project Folder Structure
- Animated Landing Page HTML CODE
- Animated Landing PageCSS CODE
- Live Preview Of Animated Landing Page
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
Animated Landing Page HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shobhit Love Lisa</title>
</head>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap" rel="stylesheet">
<body>
<div class="main">
<div class="nav">
<h1 id="logo" class="text">CODEWITHSHOBHIT</h1>
<h2 class="text">Models</h2>
<h2 class="text">Women/Men</h2>
<h2 class="text">Agency/Blog/Information</h2>
<h2 class="text"><i class="ri-search-line"></i></h2>
</div>
<div class="video">
<video autoplay loop muted id="lisa" src="CWS Lisa Background.mp4"></video>
<div class="over">
<div class="overlay">
<div class="center-text">Photograpghy <br>and films</div>
<div class="circle">1</div>
</div>
<div class="overlay1">
<div class="center-bottom-text">Explore</div>
<div class="arrow"><i class="ri-arrow-right-line"></i></div>
</div>
</div>
</div>
<div class="scroll">
<div class="container">
<img id="img" src="https://imgs.search.brave.com/74ZH0JgL7650E4MLw3aYxJmuu7Ai28HQBGtCuG5YrcI/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy8w/LzAwL0JsYWNrcGlu/a19MaXNhXzE5MDYy/MV8yLnBuZw" alt="Lisa">
<img id="img" src="https://imgs.search.brave.com/Yq0kmtw1pIN_Ds68Xkbp72cKcazojV3CM6DgBSDd11c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy82/LzY1L0JMQUNLUElO/SydzX0xpc2FfZm9y/X0JVTEdBUklfSnVu/ZV8yMDIzXzAyXyhj/cm9wcGVkKS5qcGc" alt="Lisa">
<img id="img" src="https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2023/09/https-www-1695292938.jpg" alt="Lisa">
<img id="img" src="https://cdn.i-scmp.com/sites/default/files/styles/768x768/public/d8/images/methode/2019/03/27/dffa4156-4f80-11e9-8617-6babbcfb60eb_image_hires_141554.JPG?itok=FNC2TjNJ&v=1553667358" alt="Lisa">
<img id="img" src="https://prompthero.com/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaWxtTXpCbU5EbGtPUzAxT0dKaExUUTJNbUV0WWpSaFlpMDVNakl4T1RNME4yTXlabU1HT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6ImJsb2JfaWQifX0=--48535f1e09f45a149bc3de7a70604d42032cbbe1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDRG9MWm05eWJXRjBPZ2wzWldKd09oUnlaWE5wZW1WZmRHOWZiR2x0YVhSYkIya0NBQWhwQWdBSU9ncHpZWFpsY25zSk9oTnpkV0p6WVcxd2JHVmZiVzlrWlVraUIyOXVCam9HUlZRNkNuTjBjbWx3VkRvT2FXNTBaWEpzWVdObFZEb01jWFZoYkdsMGVXbGYiLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--beed8ed72637ca3712935f65de3d18ae25f2cc85/99167.jpeg" alt="Lisa">
<img id="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMxR6PNo7reXvtF0WahfF-9KyDNNv3FnERVQ&usqp=CAU" alt="Lisa">
<img id="img" src="data:image/jpeg;base64,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" alt="Lisa">
<img id="img" src="https://img.koreaboo.com/tr:n-lg/lisa-2-19.jpg" alt="Lisa">
<img id="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCqhGqMenQ9TNq5YVuQ84JmYat_lx0StEVbQ&usqp=CAU" alt="Lisa">
</div>
<div class="container">
<img id="img" src="https://imgs.search.brave.com/74ZH0JgL7650E4MLw3aYxJmuu7Ai28HQBGtCuG5YrcI/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy8w/LzAwL0JsYWNrcGlu/a19MaXNhXzE5MDYy/MV8yLnBuZw" alt="Lisa">
<img id="img" src="https://imgs.search.brave.com/Yq0kmtw1pIN_Ds68Xkbp72cKcazojV3CM6DgBSDd11c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy82/LzY1L0JMQUNLUElO/SydzX0xpc2FfZm9y/X0JVTEdBUklfSnVu/ZV8yMDIzXzAyXyhj/cm9wcGVkKS5qcGc" alt="Lisa">
<img id="img" src="https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2023/09/https-www-1695292938.jpg" alt="Lisa">
<img id="img" src="https://cdn.i-scmp.com/sites/default/files/styles/768x768/public/d8/images/methode/2019/03/27/dffa4156-4f80-11e9-8617-6babbcfb60eb_image_hires_141554.JPG?itok=FNC2TjNJ&v=1553667358" alt="Lisa">
<img id="img" src="https://prompthero.com/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaWxtTXpCbU5EbGtPUzAxT0dKaExUUTJNbUV0WWpSaFlpMDVNakl4T1RNME4yTXlabU1HT2daRlZBPT0iLCJleHAiOm51bGwsInB1ciI6ImJsb2JfaWQifX0=--48535f1e09f45a149bc3de7a70604d42032cbbe1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDRG9MWm05eWJXRjBPZ2wzWldKd09oUnlaWE5wZW1WZmRHOWZiR2x0YVhSYkIya0NBQWhwQWdBSU9ncHpZWFpsY25zSk9oTnpkV0p6WVcxd2JHVmZiVzlrWlVraUIyOXVCam9HUlZRNkNuTjBjbWx3VkRvT2FXNTBaWEpzWVdObFZEb01jWFZoYkdsMGVXbGYiLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--beed8ed72637ca3712935f65de3d18ae25f2cc85/99167.jpeg" alt="Lisa">
<img id="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMxR6PNo7reXvtF0WahfF-9KyDNNv3FnERVQ&usqp=CAU" alt="Lisa">
<img id="img" src="data:image/jpeg;base64,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" alt="Lisa">
<img id="img" src="https://img.koreaboo.com/tr:n-lg/lisa-2-19.jpg" alt="Lisa">
<img id="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCqhGqMenQ9TNq5YVuQ84JmYat_lx0StEVbQ&usqp=CAU" alt="Lisa">
</div>
</div>
<div class="alphabet">
<h5 class="all-text">All</h5>
<h6 class="abcd">A</h6>
<h6 class="abcd">B</h6>
<h6 class="abcd">C</h6>
<h6 class="abcd">D</h6>
<h6 class="abcd">E</h6>
<h6 class="abcd">F</h6>
<h6 class="abcd">G</h6>
<h6 class="abcd">H</h6>
<h6 class="abcd">I</h6>
<h6 class="abcd">J</h6>
<h6 class="abcd">K</h6>
<h6 class="abcd">L</h6>
<h6 class="abcd">M</h6>
<h6 class="abcd">N</h6>
<h6 class="abcd">O</h6>
<h6 class="abcd">P</h6>
<h6 class="abcd">Q</h6>
<h6 class="abcd">R</h6>
<h6 class="abcd">S</h6>
<h6 class="abcd">T</h6>
<h6 class="abcd">U</h6>
<h6 class="abcd">V</h6>
<h6 class="abcd">W</h6>
<h6 class="abcd">X</h6>
<h6 class="abcd">Y</h6>
<h6 class="abcd">Z</h6>
</div>
<div class="part-3">
<div class="part-3-1">
<img id="img-prt-3" src="https://i.pinimg.com/736x/3d/ea/da/3deada52665fe4d90021b19dbc80483a.jpg" alt="Lisa">
</div>
<div class="part-3-2">
<img id="img-prt-3" src="https://cdn.i-scmp.com/sites/default/files/styles/768x768/public/d8/images/methode/2019/03/27/dffa4156-4f80-11e9-8617-6babbcfb60eb_image_hires_141554.JPG?itok=FNC2TjNJ&v=1553667358" alt="Lisa">
<div class="part-3-3">
<div class="part-3-3-1">
<h4 id="part-3-heading">Lisa</h4>
</div>
<div class="part-3-3-2">
<p class="part-3-paragraph">
Lisa, a member of the K-pop group BLACKPINK, holds a special place in my heart as my first love. Her beauty and charm make her stand out, and my affection for her is evident in my heartfelt expression of love.
</p>
</div>
</div>
</div>
</div>
<div class="update">
<h1 class="update-heading">UPDATE</h1>
<div id="boxes-for-update-section" class="one">
<h4 class="text-for-update">Lisa</h4>
<img src="https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2023/09/https-www-1695292938.jpg" alt="" class="image-for-update">
<div class="last-text-in-update-section">
<h2 class="heading-for-update">Created with ♥ by </h2>
<h4 class="text-for-update">Codewithshobhit</h4>
</div>
</div>
<div id="boxes-for-update-section" class="two">
<h4 class="text-for-update">Lisa</h4>
<img src="https://imgs.search.brave.com/Yq0kmtw1pIN_Ds68Xkbp72cKcazojV3CM6DgBSDd11c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy82/LzY1L0JMQUNLUElO/SydzX0xpc2FfZm9y/X0JVTEdBUklfSnVu/ZV8yMDIzXzAyXyhj/cm9wcGVkKS5qcGc" alt="" class="image-for-update">
<div class="last-text-in-update-section">
<h2 class="heading-for-update">Created with ♥ by </h2>
<h4 class="text-for-update">Codewithshobhit</h4>
</div>
</div>
<div id="boxes-for-update-section" class="three">
<h4 class="text-for-update">Lisa</h4>
<img src="https://imgs.search.brave.com/74ZH0JgL7650E4MLw3aYxJmuu7Ai28HQBGtCuG5YrcI/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy8w/LzAwL0JsYWNrcGlu/a19MaXNhXzE5MDYy/MV8yLnBuZw" alt="" class="image-for-update">
<div class="last-text-in-update-section">
<h2 class="heading-for-update">Created with ♥ by </h2>
<h4 class="text-for-update">Codewithshobhit</h4>
</div>
</div>
<div class="last-border-in-upadte-section" id="boxes-for-update-section" class="four">
<h4 class="text-for-update">Lisa</h4>
<img src="https://imgs.search.brave.com/O_IJHx1-cz80Jgd982GbOOxm3ZW-7Qwivnu6A_vB_NM/rs:fit:860:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy9l/L2U5L0JsYWNrcGlu/a19MaXNhX1ZvZ3Vl/XzIwMjFfKDEpLmpw/Zw" alt="" class="image-for-update">
<div class="last-text-in-update-section">
<h2 class="heading-for-update">Created with ♥ by </h2>
<h4 class="text-for-update">Codewithshobhit</h4>
</div>
</div>
</div>
<div class="blank">
</div>
<div class="marquee">
<h1 class="marquee-text">Made with ♥ by Codewithshobhit</h1>
<h1 class="marquee-text">Made with ♥ by Codewithshobhit</h1>
<h1 class="marquee-text">Made with ♥ by Codewithshobhit</h1>
<h1 class="marquee-text">Made with ♥ by Codewithshobhit</h1>
<h1 class="marquee-text">Made with ♥ by Codewithshobhit</h1>
</div>
<div class="footer">Ⓒ 2023 Codewithshobhit. All rights reserved.</div>
</div>
</div>
Animated Landing Page CSS CODE
* {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
width: 100%;
height: 100%;
}
.main {
background-color: #fbf5fb;
width: 100%;
height: calc(100% - 1px);
position: relative;
padding-top: 1px;
}
.nav {
/* background-color: red; */
width: 100%;
height: 10vh;
margin-top: 40px;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.nav h2 {
/* background-color: yellow; */
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
border-right: 2px solid black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.nav h1 {
/* background-color: yellow; */
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
font-family: "Lemon", serif;
font-weight: 400;
font-style: normal;
font-size: 4.5vh;
padding-left: 40px;
}
.text {
font-size: 2.5vh;
}
.video {
display: flex;
justify-content: center;
align-items: center;
height: 570px;
position: relative;
}
#lisa {
width: 95%;
display: flex;
align-items: center;
height: 500px;
object-fit: cover;
}
.over {
position: absolute;
width: 95%;
height: 40%;
bottom: 20;
}
.overlay {
/* background-color: red; */
position: absolute;
width: 95%;
height: 20%;
bottom: 1;
display: flex;
justify-content: space-between;
color: #dac3da;
}
.center-text {
margin-left: 20px;
font-size: 12vh;
font-family: "Protest Revolution", sans-serif;
font-weight: 500;
font-style: normal;
}
.circle {
margin-right: 20px;
font-size: 5vh;
font-family: sans-serif;
font-weight: 500;
font-style: normal;
width: 100px;
height: 100px;
border: 2px solid rgb(168, 133, 133);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.overlay1 {
/* background-color: red; */
position: absolute;
width: 95%;
height: 10%;
bottom: 0;
display: flex;
justify-content: space-between;
color: #dac3da;
border-top: 2px solid black;
margin-left: 25px;
}
.center-bottom-text {
margin-left: 20px;
font-size: 3vh;
font-family: sans-serif;
font-weight: 500;
font-style: normal;
margin-top: 40px;
}
.arrow{
margin-right: 20px;
font-size: 4vh;
font-family: sans-serif;
font-weight: 500;
font-style: normal;
margin-top: 40px;
}
.scroll {
width: 100%;
height: 30vh;
/* background-color: yellow; */
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.scroll::-webkit-scrollbar{
overflow-x: hidden;
}
@keyframes scroll {
from{
transform: translate(0);
}
to{
transform: translate(-100%);
}
}
.container {
width: 100%;
height: 100%;
/* background: red; */
display: inline-block;
animation-name: scroll;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#img {
margin-top: 13px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid black;
margin-left: 10px;
object-fit: cover;
background-position: top;
}
.alphabet {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid black;
border-bottom: 2px solid black;
gap: 40px;
}
.abcd {
font-size: 2.5vh;
font-family: sans-serif;
font-weight: 500;
font-style: normal;
}
.abcd:hover {
width: 30px;
height: 30px;
padding: 10px;
border: 2px solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.all-text {
font-size: 3.5vh;
font-family: sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
}
.part-3 {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
/* align-items: center; */
padding: 2vw;
box-sizing: border-box;
}
.part-3-1 {
background-color: yellow;
width: 45%;
height: 100%;
object-fit: cover;
background-position: 0 0;
}
.part-3-2 {
background-color: red;
width: 50%;
height: 80%;
object-fit: cover;
background-position: top;
}
#img-prt-3 {
width: 100%;
height: 100%;
object-fit: cover;
background-position: top;
}
.part-3-3{
/* background-color: red; */
width: 100%;
height: 23%;
object-fit: cover;
background-position: top;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
}
#part-3-heading {
padding-right: 10px;
font-size: 12vh;
font-weight: 500;
}
.part-3-paragraph {
padding-right: 10px;
font-weight: 500;
margin-right: 10px;
}
.update {
width: 100%;
height: 100%;
/* background-color: red; */
display: flex;
padding-top: 5vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
.update>h1{
padding: 20px;
}
#boxes-for-update-section {
height: 20vh;
width: 80vw;
/* background-color: yellow; */
margin: 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid black;
}
.last-border-in-upadte-section{
border-bottom: 2px solid black;
}
.image-for-update {
width: 125px;
padding-top: 15px;
object-fit: cover;
background-position: top;
height: 125px;
border-radius: 50%;
position: absolute;
left: 20%;
opacity: 0;
/* transition: all ease 0.7; */
}
#boxes-for-update-section:hover img {
opacity: 1;
left: 40%;
transition: all ease 0.10;
}
.text-for-update{
font-size: 10vh;
font-weight: 400;
}
.blank {
width: 100%;
height: 10%;
}
.marquee {
width: 100%;
/* background-color: red; */
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.marquee h1{
display: inline-block;
color: transparent;
font-size: 4vw;
letter-spacing: 5px;
-webkit-text-stroke: 2px black;
font-weight: 900;
animation-name: marquee;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes marquee {
from{
transform: translate(0);
}
to{
transform: translate(-100%);
}
}
.footer{
width: 100%;
height: 10%;
display: flex;
justify-content: center;
align-items: flex-end;
}
Live Preview of Animated Landing Page
See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.
Star
Fork
Download
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram
if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉
No comments:
Post a Comment