happy-diwali
HTML & CSS

Happy Diwali using HTML and Pure CSS

1 year ago
1 year ago
25 Views
0 Comments
happy-diwali

The provided code offers a delightful visual representation of the joyous occasion of Diwali using HTML and CSS. The webpage is elegantly structured with a title “Happy Diwali” adorned with an eye-catching text style, inviting visitors to join in the celebration.

Within a container, an unordered list is employed to host a series of animated fireworks. Each list item encapsulates a span element serving as the visual representation of a firework burst. The CSS styling brings these fireworks to life, imbuing them with dynamic animations and vibrant colors.

The background sets the stage with a warm hue, reminiscent of the festive ambiance of Diwali. The container’s positioning ensures a centered display, maintaining visual balance across different devices.

The title’s typography is carefully selected, utilizing the “Bungee Shade” font family to add a touch of elegance and festivity to the text. Its size and shadow effects enhance readability and contribute to the overall visual appeal.

The fireworks’ design is meticulously crafted, utilizing border-radius and box-shadow properties to create rounded shapes with a subtle glow effect. The animations simulate the dynamic motion of fireworks, with alternating gradients lending a sense of depth and movement.

By leveraging CSS animations and gradients, the fireworks exhibit a lifelike flickering effect, evoking the excitement and jubilation associated with Diwali celebrations. Each firework burst is uniquely timed, contributing to the immersive experience.

Overall, this code snippet encapsulates the essence of Diwali, offering a visually captivating representation of the festival’s spirit through creative web design. It serves as a fitting tribute to the joy and merriment shared during this auspicious occasion.

Video Tutorial of Happy Diwali using HTML and Pure CSS

To see a live demonstration of The Happy Diwali Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.

You may like this:

Happy Diwali using HTML and Pure CSS

HTML:

Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.

<!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>Happy Diwali</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="title">Happy Diwali</div>
    <ul class="fireworks">
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
      <li><span></span></li>
    </ul>
  </div>
</body>

</html>

This code snippet creates a simple yet festive greeting for Diwali, the Festival of Lights. Here’s a breakdown:

  • Structure: The code uses a div element as the container for the entire greeting. Inside, another div holds the title “Happy Diwali”.
  • Fireworks: An unordered list (ul) represents the fireworks display. Each list item (li) contains a span element, which can be styled using CSS to resemble firework sparks.

This basic structure allows for customization. You can use CSS to:

  • Change the font, color, and size of the “Happy Diwali” text.
  • Modify the size, color, and animation of the firework “sparks”.
  • Add background images or gradients for a more festive look.

With a little CSS magic, this code can be transformed into a visually appealing and interactive Diwali greeting!

CSS:

Main CSS Properties Explained:

@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Frijole&family=Monoton&display=swap');

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background-color: #666666;
  font-family: 'Bungee Shade', cursive;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.container .title {
  text-align: center;
  font-size: 8rem;
  margin-bottom: -65px;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 0px 2px 1px #FFA500, 0px 0px 6px #FF4500, 0px 5px 10px #000000,
    0px 2px 5px #FFA500, 0px 0px 12px #FF4500, 0px 5px 20px #000000,
    0px 2px 10px #FFA500, 0px 0px 22px #FF4500, 0px 5px 30px #000000;
}

.fireworks {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.fireworks li {
  position: relative;
  width: 100px;
  height: 100px;
  list-style-type: none;
  transform: translate(-50%);
  margin: 20px;
  border-radius: 500px;
  background: #866553;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.fireworks li::before {
  content: "";
  position: absolute;
  height: 100%;
  background: #666666;
  width: 100%;
  border-radius: 500px;
  top: -40%;
  left: -30%;
}

.fireworks li::after {
  content: "";
  position: absolute;
  height: 100%;
  background: #666666;
  width: 100%;
  border-radius: 500px;
  top: -40%;
  right: -30%;
}

.fireworks li span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  width: 40px;
  height: 40px;
  margin: auto;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  border-top-right-radius: 80px;
  transform: rotate(45deg);;
  z-index: 1;
  animation: fire 0.3s ease infinite;
}

.fireworks li:nth-child(1) span {
  animation-delay: 0.5s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(2) span {
  animation-delay: 1s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(3) span {
  animation-delay: 1.5s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(4) span {
  animation-delay: 2s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(5) span {
  animation-delay: 2.5s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(6) span {
  animation-delay: 3s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(7) span {
  animation-delay: 1s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(8) span {
  animation-delay: 1.5s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(9) span {
  animation-delay: 2.5s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

.fireworks li:nth-child(10) span {
  animation-delay: 1s;
  box-shadow: 0px 0px 1px #FFA500, 0px 0px 6px #FF4500;
}

@keyframes fire {

  0%,
  100% {
    transform: rotate(55deg);
    width: 40px;
    background: linear-gradient(90deg, #FFA500, #FF4500);
  }

  50% {
    transform: rotate(35deg);
    width: 40px;
    background: linear-gradient(90deg, #FF4500, #FFA500);
  }
}

1. Importing Fonts:

  • @import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Frijole&family=Monoton&display=swap');

This line imports three fonts from Google Fonts: Bungee Shade, Frijole, and Monoton.

2. Body Styling:

  • display: flex;
  • justify-content: center;
  • align-items: center;
  • min-height: 100vh;
  • overflow: hidden;
  • background-color: #666666;
  • font-family: 'Bungee Shade', cursive;

These properties define the overall layout and style of the document body. They center content both horizontally and vertically, set a minimum height, prevent scrolling, and set a dark gray background with the “Bungee Shade” font as the default.

3. Container:

  • .container { position: relative; width: 100%; height: 100%; }

This creates a container element that takes up the entire width and height of the viewport and allows for relative positioning of its children.

4. Title:

  • .container .title { text-align: center; font-size: 8rem; margin-bottom: -65px; color: rgba(255, 255, 255, 0.5); text-shadow: ... }

These styles format the title element within the container. They center the text, set a large font size, add a bottom margin, and create a multi-layered text shadow effect with orange and black colors.

5. Fireworks:

  • .fireworks { display: flex; justify-content: center; align-items: center; width: 100%; }

Similar to the body, these properties center the fireworks list horizontally and vertically, and set its width to 100%.

6. Individual Fireworks:

  • .fireworks li { ... }

These styles define the individual firework elements. They position them relatively within the list, set a fixed size and square shape, remove default bullet points, and apply a dark brown background with a slight shadow.

7. Inner Fireworks Elements:

  • .fireworks li::before { ... }
  • .fireworks li::after { ... }

These pseudo-elements create two dark gray circles positioned at the top corners of each firework, creating a layered effect.

8. Spark Animation:

  • .fireworks li span { ... }
  • @keyframes fire { ... }

These styles and animations define the appearance and movement of the spark within each firework. They set its position, size, shape, and apply a rotating fire animation with a color gradient that alternates between orange and red.

9. Individual Spark Delays:

  • .fireworks li:nth-child(1) span { ... }
  • …
  • .fireworks li:nth-child(10) span { ... }

These lines add delays to the animation of each individual spark, creating a staggered firing effect.

Summary:

This code snippet creates a visually appealing and interactive webpage that celebrates Diwali, the Festival of Lights. Here’s a breakdown of its key aspects:

  • Structure: It uses HTML elements to structure the webpage, including a container for the title and an unordered list for the fireworks.
  • CSS Styling: CSS styles are applied to customize the appearance of different elements, such as font, color, size, animation, and layout.
  • Fireworks Animation: The code utilizes CSS animations to create a flickering effect for the firework “sparks,” resembling the celebratory bursts of light associated with Diwali.
  • Customization: The code provides a basic template that can be easily customized with different colors, fonts, and animation effects to create a unique visual experience.
Tags:
Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *