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 Of Animated Landing Page USing HTML And CSS
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>Simple 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">
  <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=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
    rel="stylesheet">
</head>

<body>
  <main>
    <div class="top-left">
      <h1 class="top-left-text">
        Follow Me For More
      </h1>
    </div>
    <div class="bottom-left">
      <div class="capsool">
        <h2>Nancy</h2>
        <div class="circle" id="circle1"></div>
        <div class="circle" id="circle2"></div>
      </div>
      <div class="bottom-left-text">
         <h3>Details</h3>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptas unde sit eius expedita totam ipsa modi possimus nostrum! Sunt, distinctio sequi! Cum officia saepe repellendus, ipsum pariatur suscipit magnam temporibus cumque a natus tempora dolorum maiores officiis impedit earum.</p>
      </div>
    </div>
    <div class="right">
      <div class="image"></div>
      <h1>Nancy My Love</h1>
      <div class="l-f-text">
        <h2>Nancy</h2>
      <h3>Rating<i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><i class="ri-star-fill"></i><h2>
      </div>
     <div class="big-circle">CWS<br>LOve</div>
    </div>
  </main>
</body>

</html>

Animated Landing Page CSS CODE





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

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

main {
    background-color: rgba(189, 190, 169, 0.612);
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 60% 40%;
}

.top-left {
    /* background-color: red; */
    grid-row: 1;
    padding-left: 60px;
    align-self: flex-end;
    justify-self: center;
}

.top-left-text {
    font-size: 9vw;
    line-height: 10vw;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    align-self: center;
}

.top-left-text:hover {
    font-size: 9vw;
    line-height: 10vw;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    align-self: center;
    color: chocolate;
    text-decoration: wavy;
}



.capsool {
    /* background-color: red; */
    width: 200px;
    height: 50px;
    border: 2px solid black;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 20px;
}

.circle {
    /* background-color: red; */
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

#circle1 {
    background-color: gray;
}


.circle:hover {
    /* background-color: red; */
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

#circle1:hover {
    background-color: rgb(221, 15, 15);
}

#circle2:hover {
    background-color: rgb(107, 11, 167);
}


#circle2 {
    background-color: chartreuse;
}

.bottom-left {
    /* background-color: yellow; */
    grid-row: 2;
    padding: 70px;
}

.bottom-left-text {
    padding-top: 40px;
    font-family: sans-serif;
}

.right {
    /* background-color: blueviolet; */
    grid-row: 1/3;
    grid-column: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.image {
    background-image: url('https://yt3.googleusercontent.com/ytc/AIf8zZTtdKR6GRscmkyNm2Il-ZyOodyv5OpVsYP0al1TzQ=s900-c-k-c0x00ffffff-no-rj');
    height: 80%;
    width: 60%;
    object-fit: cover;
    background-position: 30% 50%;
}

.image:hover {
    background-image: url('https://w0.peakpx.com/wallpaper/671/123/HD-wallpaper-momoland-nancy-girls-kpop-queen.jpg');
    height: 80%;
    width: 60%;
    object-fit: cover;
    background-position: top; 
}

.right h1 {
    position: absolute;
    rotate: 270deg;
    bottom: 240px;
    font-size: 5vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    right: 520px;
}


.right h2 {
    position: absolute;
    /* rotate: 270deg; */
    bottom: 560px;
    font-size: 4vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    right: 530px;
    margin: 20px;
}


.right h3 {
    position: absolute;
    /* rotate: 270deg; */
    bottom: 560px;
    font-size: 4vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    right: 50px;
    margin: 20px;
}

.l-f-text {
    display: flex;
    display: inline-block;
}

.l-f-text h3 {
    font-size: 4vh;
    position: absolute;
    right: 130px;
}

.l-f-text i {
    color: yellow;
}

.big-circle {
    display: flex;
    font-size: 7vh;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 150px;
    height: 150px;
    color: red;
    border-radius: 50%;
    position: absolute;
    bottom: 170px;
    right: 80px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}













@media (max-width:600px) {

main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 30% 45% 60%;
    background-color: aliceblue;
}

.top-left {
    /* background-color: red; */
    grid-row: 1/2;
    padding-left: 30px;
    align-self: flex-end;
    justify-self: center;
}

.top-left-text {
    font-size: 10vh;
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    align-self: center;
    line-height: 20vw;
}

.bottom-left {
    /* background-color: yellow; */
    grid-row: 2/3;
    padding: 25px;
    padding-top: 50px;
}

.capsool {
    /* background-color: red; */
    width: 100px;
    height: 40px;
    border: 2px solid black;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;    
}

.capsool h2 {
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.circle {
    /* background-color: red; */
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

#circle1 {
    background-color: gray;
}

#circle2 {
    background-color: chartreuse;
}



.bottom-left-text {
    padding-top: 40px;
    font-family: sans-serif;
}

.right {
    /* background-color: blueviolet; */
    grid-row: 3/-2;
    /* grid-column: 2; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.image {
    background-image: url('https://yt3.googleusercontent.com/ytc/AIf8zZTtdKR6GRscmkyNm2Il-ZyOodyv5OpVsYP0al1TzQ=s900-c-k-c0x00ffffff-no-rj');
    position: absolute;
    display: flex;
    width: 90%;
    height: 60%;
    position: absolute;
    right: 20px;
    top: 546px;
}

.right h1 {
    position: absolute;
    rotate: 0deg;
    bottom: 146px;
    font-size: 4vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    right: 100px;
}


.right h2 {
    position: absolute;
    rotate: 0deg;
    bottom: -329px;
    font-size: 3vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    right: 293px;
    margin: 20px;
}


.right h3 {
    position: absolute;
    /* rotate: 0deg; */
    bottom: -329px;
    font-size: 2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    left: 176px;
    margin: 20px;
}

.l-f-text {
    display: flex;
    display: inline-block;
}

.l-f-text h3 {
    font-size: 3vh;
    position: absolute;
    right: 130px;
}

.l-f-text i {
    color: yellow;
}

.big-circle {
    display: flex;
    font-size: 3vh;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 100px;
    height: 45px;
    color: red;
    border-radius: 50%;
    position: absolute;
    bottom: 101px;
    right: 141px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


}

Live Preview of Animated Landing Page

See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.

Codewithshobhit

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. 🤞🎉

Codewithshobhit

Codewithshobhit

Animated Landing Page USing HTML And CSS

Animated Landing Page USing HTML And CSS

📙Table Of Content

Project Folder Structure:

Animated Landing Page HTML CODE

Animated Landing Page CSS CODE

Live Preview of Animated Landing Page

How to run this Html Css and Js Project in Our Browser?

Which Code Editor do you use to create those projects?

is this project responsive or not?

No comments:

Post a Comment