Cool Animated Landing Page Using HTML And CSS

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:

  • 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.

HTML CODE

  
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Animated Landing Page By Codewithshobhit</title>
  <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
    rel="stylesheet"
/>
  <link rel="stylesheet" href="style.css">
</head>
<div id="main">
  <!-- <video controls autoplay muted loop src="Nancy _ Momoland _  2 Phut Hon KAIZ Remix  _ ROCKSTAR LIFESTYLE PRODUCTION.mp4"></video> -->
<div id="first-part">

   
  <div class="top-left">
    <h2>Menu</h2>
  </div>

  <div class="top-center">
    <div class="text"><h2 id="center-text">codewithshobhit</h2></div>
  </div>

 <div class="top-right">

   <div class="top-first-rite">
    <h2>Login</h2>
   </div>

   <div class="top-sec-right">
      <h2>Sign-up</h2>
   </div>

 </div>
</div>


<div id="second-part">
  <h1 class="center-text">Our Crush</h1>
    <img id="img1" class="center-image" src="Girl1.png" alt="">
    <img id="img2" class="center-image" src="Girl2.webp" alt="">
    <img id="img3" class="center-image" src="girl3.jpg" alt="">
    <img id="img4" class="center-image" src="Girl4.webp" alt="">
    <img id="img5" class="center-image" src="Girl1.png" alt="">
    <video autoplay="autoplay" loop muted id="img6" class="center-image"
    src="Nancy My Love.mp4"></video>
  </div>
  <div class="last-text">
   <center> <p id="last-text">Nancy is not just the most beautiful girl in the world;<br> she's my sweetheart, my love. Every time I see her, it's like the world stops,<br> and all I can focus on is the incredible person she is. <br>Her smile lights up my darkest days, and her presence brings a warmth to my heart <br>that I can't quite put into words. Nancy, I love you more than anything, and having you by my side makes every moment brighter.</p></center>
  </div>
</div>
</div>
</div>

<body>

</body>

</html>

CSS CODE





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
}

#main {
    background-color: rgb(228, 224, 207);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 15% 65% 20%;
}

#first-part {
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
}

.top-left {
    /* background-color: yellow; */
    width: fit-content;
    height: fit-content;
    border: 2px solid black;
    border-radius: 100px;
    padding: 5px 15px;
}

#first-part h2 {
    font-weight: 400;  
    font-size: 1.6vh;
}

.top-center {
  text-transform: uppercase;
}

.top-right {
    font-size: 1.6vh;
    display: flex;
    gap: 3px;
}

.top-first-rite {
    /* background-color: yellow; */
    width: fit-content;
    height: fit-content;
    border: 2px solid black;
    border-radius: 100px;
    padding: 5px 15px;
}

.top-sec-right {
    /* background-color: yellow; */
    width: fit-content;
    height: fit-content;
    border: 2px solid black;
    border-radius: 100px;
    padding: 5px 15px;
}

#second-part {
    /* background-color: gray; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#second-part h1 {
    /* background-color: red; */
    font-size: 19vw;
    font-weight: 600;
}

.center-image {
    position: absolute;
    width: 20%;
    height: 60%;
   object-fit: cover;
   border-radius: 10px;
}

#img2 {
 rotate: 5deg;
}


#img3 {
 rotate: -5deg;
}


#img4 {
 rotate: 7deg;
}




#img6 {
    background-position: top;
}

.last-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

#center-text:hover {
    color: red;
}

.last-text:hover {
    color: red;
    font-family: Georgia, 'Times New Roman', Times, serif;
}


@media (max-width:600px) {
    #main {
        background-color: rgb(228, 224, 207);
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 15% 65% 20%;
    }
    
    #first-part {
        /* background-color: red; */
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
    }
    
    .top-left {
        /* background-color: yellow; */
        width: fit-content;
        height: fit-content;
        border: 2px solid black;
        border-radius: 100px;
        padding: 5px 15px;
        font-size: 1.5vw;
    }
    
    #first-part h2 {
        font-weight: 400;  
    }
    
    .top-center {
      text-transform: uppercase;
    }
    
    .top-right {
        font-size: 1.5vh;
        display: flex;
        gap: 3px;
    }
    
    .top-first-rite {
        /* background-color: yellow; */
        width: fit-content;
        height: fit-content;
        border: 2px solid black;
        border-radius: 100px;
        padding: 5px 15px;
    }
    
    .top-sec-right {
        /* background-color: yellow; */
        width: fit-content;
        height: fit-content;
        border: 2px solid black;
        border-radius: 100px;
        padding: 5px 15px;
    }
    
    #second-part {
        /* background-color: gray; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #second-part h1 {
        /* background-color: red; */
        font-size: 19vw;
        font-weight: 600;
    }
    
    .center-image {
        position: absolute;
        width: 40%;
        height: 50%;
    }
      
}

Video Preview Of Cool Animated Landing Page

Codewithshobhit
Star Icon Star Fork Icon Fork Download Icon 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. 🤞🎉