Happy Holi Animation 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.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Project.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the HTML code step by step:

Basic Structure:

  1. Creates a webpage celebrating Happy Holi 2024.

  2. Uses HTML for structure and Bootstrap for styling (navigation bar, buttons).

Navigation Bar:

  1. Fixed to the top for easy access.

  2. Links to Home, Contact, About, and a dropdown menu (More).

Main Content:

  1. Large headline ("Hey there!") and a message.

  2. Another animated heading ("Happy Holi!") with a message.

  3. Buttons for "contact" and "Login".

Background Video:

  1. Plays a muted video loop ("Happy Holi 2024 By CWS.mp4").

External Stylesheet (style.css):

  1. Likely defines colors, fonts, and layouts for the website.

  
    
<!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>Codewithshobhit Happy Holi 2024</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg fixed-top">
      <div class="container">
          <a class="navbar-brand text-white" href="#">
           <div class="log">Happy Holi By CWS</div>
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" >
        <span class="navbar-toggler-icon"></span>
      </button>
   
      <div class="collapse navbar-collapse" >
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="btn btn-light" href="#">Home <span class="sr-only">undefinedcurrent)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
           
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              More
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        
      </div>
      </div>
    </nav>

    <div class="myinfo">
      <h1 class="holi">Hey there!</h1>
      <h1>i am Shobhit</h1>
          <p>Wishing you and your loved ones a very colourful Holi<br>May you forget all your worries and enjoy this day to the fullest.<br> <h2 class="hue">Happy Holi!</h2></p>

              <a href="#" class="btn btn-danger mr-3 hue">contact</a>
              <a href="#" class="btn btn-light">Login</a>
      </div>

      <video autoplay loop play-inline muted  >
          <source src="Happy Holi 2024 By CWS.mp4">
              video is not load
          </video>

  
</body>

</html>

This is the basic structure of our tyre-fitting landing page using HTML, and now we can move on to styling it using CSS.

Step 2 (CSS Code):

"Next, let's enhance the visual appeal of our project by styling it with CSS. We'll make a separate file with a .css file to contain all our styling.

After making the file, just copy and paste the following CSS code into it. Remember to save your CSS document with a .css extension, ensuring it's properly linked to your HTML document for rendering in a web browser.

Let's break down the CSS code step by step:

  1. Resets styles: Makes all elements consistent for easier styling.

  2. Black background: Sets the background of the page to black.

  3. Navigation bar: Positions a navigation bar at the top.

  4. Logo: Defines a logo with a drop shadow.

  5. My information: Creates a section with white text and a shadow.

  6. Navigation links: Sets navigation link styles (white text).

  7. Buttons: Creates rounded buttons with white borders.

  8. Holiday text: Creates initially invisible text with a border revealing it on hover.

  9. Headings: Defines large, bold headings.

  10. Video (background): Positions a blurred video as the background.

  11. Animation: Creates an animation that smoothly changes an element's color. 


 


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: poppins, sans-serif;

}
body{
    overflow: hidden;
    background: rgbundefined0, 0, 0);
    background-size: cover;
    
}
.navbar{
    margin-top: 10px;
}
.logo{
    width: 40px;
    height: 40px;
    filter:drop-shadowundefined0 0 10px white);
}

.myinfo
{
    position: relative;
    top: 200px;
    left: 150px;
    width: 500px;
    color:white;
    text-shadow: 5px 5px 10px rgbaundefined0, 0, 0, 0.73);
   


}

.nav-link
{
    color:white;
}
.nav-item{
color: white;
margin-left: 20px;
}
.btn{
    border:none;
    color:white;
    background: transparent;
    border: 1px solid white;
    border-radius: 50px;
}
.holi{
   
    color:transparent;
    background-clip: border-box;
    color: whitesmoke;
    /* list-style: none; */
    font-size: 20px;
    font-weight: bold;
    /* position: relative; */
    /* top: 0; */
}
h1{
    font-size: 90px;
    font-weight: bold;
}

.nav-link:hover
{
   color: rgbundefined255, 0, 0);
   text-shadow: 0 0 20px black;
}
video
{
    position: absolute;
    left:00px;
    bottom: 00px;
    z-index: -2;
    height: auto;
    /* width: 100%; */
    min-width: 100%;
    min-height: 100%;
    filter: blurundefined100);
}
.hue{
    color: rgbundefined240, 81, 2);
    
    font-weight: bold;
    animation: hue 5s infinite;
}

@keyframes hue{
    0%{
        -webkit-filter: hue-rotateundefined0deg);
    }
    100%{

        -webkit-filter: hue-rotateundefined700deg);
    }
}

Happy Holi Animation Output

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. I can help!

Bye-bye