Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding - All About Coding

Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding

Want to see Live Demo : Click here

Want to make this Type of Diwali Card , here is the code

Introduction: Diwali, the festival of lights, is a joyous occasion celebrated by millions of people worldwide. It signifies the triumph of light over darkness, good over evil, and knowledge over ignorance. During this festive season, exchanging heartfelt wishes is a cherished tradition, bringing loved ones together in a spirit of joy and unity. In this blog, we'll embark on a creative journey to design a Happy Diwali Wish Card using HTML, CSS, and JavaScript. Let's illuminate the digital realm with our heartfelt greetings and artistic flair.

Understanding the Essence of Diwali

Diwali, also known as Deepavali, is one of the most significant festivals in Hindu culture, celebrated with great fervor and enthusiasm. It symbolizes various aspects, including spiritual enlightenment, the victory of righteousness, and the renewal of life. During Diwali, homes and public spaces are adorned with colorful decorations, earthen lamps (diyas), and intricate rangoli patterns, creating a vibrant tapestry of light and color.

Embracing the Digital Celebration

In today's digital age, the exchange of wishes has transcended traditional boundaries, with virtual greetings becoming increasingly popular. Designing a Happy Diwali Wish Card allows us to blend tradition with modernity, infusing our digital interactions with warmth, love, and cultural significance. Through HTML, CSS, and JavaScript, we have the tools to create a visually appealing and interactive greeting card that embodies the spirit of Diwali.

Designing the Happy Diwali Wish Card

1. HTML Structure:

Begin by defining the structure of our Diwali Wish Card using HTML. We'll include elements such as headings, text content, and placeholders for dynamic elements like animations or personalized messages.

2. Styling with CSS:

Apply CSS styles to enhance the visual appeal of our Wish Card. We'll incorporate vibrant colors, decorative fonts, and festive motifs to evoke the ambiance of Diwali. CSS animations can also be utilized to add subtle movement and interactivity to the design.

3. Adding JavaScript Interactivity:

Use JavaScript to introduce interactive elements to our Wish Card. This could include features like a countdown timer to Diwali, interactive animations triggered by user actions, or the ability to personalize the greeting with custom messages.

Crafting a Heartfelt Message

The essence of any Diwali wish lies in the heartfelt message it conveys. Take the time to craft a warm and meaningful greeting that resonates with the recipient. Whether expressing wishes for prosperity, happiness, or spiritual enlightenment, let your words be a beacon of light and positivity, spreading joy and blessings to all.

Bringing the Wish Card to Life

Now, let's delve into the technical aspects of creating our Happy Diwali Wish Card using HTML, CSS, and JavaScript:

Step 1 HTML Code

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Diwali card | untoldcoding</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="cont">
      <div class="card">
        <img src="https://i.postimg.cc/GpB61hH5/background.png" alt="Avatar" />
        <div class="container">
          <div class="light">
            <div class="candle">
              <div class="flame"></div>
            </div>
          </div>
          <h1><b>UntoldCoding</b></h1>
          <h2>Wishing you</h2>
          <h1 class="ml15">
            <span class="word">Happy</span>
            <span class="word">Diwali</span>
          </h1>
          <h2>Jai Siya Ram</h2>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Step 2 Add CSS file

body {
  background: #fdc830;
  background: -webkit-linear-gradient(to right, #f37335, #fdc830);
  background: linear-gradient(to right, #f37335, #fdc830);
  font-family: "Dancing Script", cursive;
}
.cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 100px auto 10px auto;
  width: 100%;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.3s;
  width: 60%;
  justify-content: center;
  align-content: center;
  border-radius: 30px;
  background: linear-gradient(rgb(0, 204, 255), white);
}
.card > img {
  width: 90%;
  height: 350px;
  border-radius: 15px 15px 30px 30px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  margin: 0 5%;
  top: -80px;
  position: relative;
}

.container {
  padding: 2px 16px;
  text-align: center;
  color: #000;
}
@media screen and (max-width: 900px) {
  .card {
    width: 100%;
  }
}

.light {
  position: absolute;
  width: 250px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -125px;
}

.light > * {
  position: absolute;
}
.candle {
  background-color: #b6131e;
  width: 100px;
  height: 50px;
  border-radius: 8px / 4px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
  bottom: 40px;
  left: 40%;
  margin-left: -8px;
  z-index: 10;
}
.candle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 8px;
  border-radius: 50%;
  background-color: #ad030f;
}

.flame {
  position: absolute;
  background: linear-gradient(orange, red, rgb(212, 167, 19));
  width: 15px;
  height: 35px;
  border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
  top: -34px;
  left: 90%;
  margin-left: -7.5px;
  z-index: 10;
  filter: drop-shadow(0 0 4px #ffffff);
  transform-origin: 50% 90%;
  animation: flicker 1s ease-in-out alternate infinite;
}

@keyframes flicker {
  0% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.2),
      0 0 60px rgba(255, 165, 0, 0.2), 0 0 80px rgba(255, 165, 0, 0.2);
  }
  25% {
    transform: skewX(-5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5),
      0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
  50% {
    transform: skewX(10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3), 0 0 20px rgba(255, 165, 0, 0.3),
      0 0 60px rgba(255, 165, 0, 0.3), 0 0 80px rgba(255, 165, 0, 0.3);
  }
  75% {
    transform: skewX(-10deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.4), 0 0 20px rgba(255, 165, 0, 0.4),
      0 0 60px rgba(255, 165, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.4);
  }
  100% {
    transform: skewX(5deg);
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5),
      0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
}
.ml15 {
  font-weight: 800;
  font-size: 2.8em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-shadow: 2px 0px 5px rgba(15, 6, 4, 0.87);
  font-family: monospace;
}

.ml15 .word {
  display: inline-block;
  line-height: 1em;
}
img:hover {
  animation: untoldcoding 0.5s infinite;
}

@keyframes untoldcoding {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(0deg);
  }
}

Step 3 Add JavaScript

anime
  .timeline({ loop: true })
  .add({
    targets: ".ml15 .word",
    scale: [14, 1],
    opacity: [0, 1],
    easing: "easeOutCirc",
    duration: 800,
    delay: (el, i) => 800 * i,
  })
  .add({
    targets: ".ml15",
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000,
  });

Want to Download the Source Code : Click here

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ - Frequently Asked Questions

Q1: Can I customize the Diwali Wish Card with my own message?

Absolutely! You can customize the Diwali Wish Card by modifying the text content within the HTML file. Simply replace the existing greeting message with your own personalized message.

Q2: How can I add animations or decorative elements to the Diwali Wish Card?

To add animations or decorative elements, you can utilize CSS animations, transitions, and background images. For example, you can animate the appearance of the card or add decorative elements such as animated fireworks or glowing diya lamps.

Q3: Is it possible to integrate social media sharing functionality into the Diwali Wish Card?

Yes, you can integrate social media sharing functionality by adding share buttons linked to popular social media platforms such as Facebook, Twitter, or WhatsApp. You can achieve this by using their respective APIs or third-party sharing plugins.

Q4: Can I make the Diwali Wish Card responsive for different devices?

Certainly! You can ensure that the Diwali Wish Card is responsive by using CSS media queries to adjust the layout and styling based on the screen size of the device. This will ensure that the card displays optimally across a range of devices, including smartphones, tablets, and desktop computers.

Q5: Are there any additional resources available for further customization or inspiration?

Yes, there are plenty of online resources and tutorials available that provide additional guidance and inspiration for creating customized Diwali Wish Cards. You can explore online code repositories, web design forums, and tutorial websites for ideas and insights on enhancing your Diwali Wish Card with advanced features and designs.

Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding

Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding

Understanding the Essence of Diwali

Embracing the Digital Celebration

Designing the Happy Diwali Wish Card

1. HTML Structure:

2. Styling with CSS:

3. Adding JavaScript Interactivity:

Crafting a Heartfelt Message

Bringing the Wish Card to Life

Step 1 HTML Code

Want to Download the Source Code : Click here

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ - Frequently Asked Questions

Q1: Can I customize the Diwali Wish Card with my own message?

Q2: How can I add animations or decorative elements to the Diwali Wish Card?

Q3: Is it possible to integrate social media sharing functionality into the Diwali Wish Card?

Q4: Can I make the Diwali Wish Card responsive for different devices?

Q5: Are there any additional resources available for further customization or inspiration?

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts

Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding

Happy Diwali Wish | Happy Diwali Wish Card in HTML , CSS, Js | #untoldcoding

Understanding the Essence of Diwali

Embracing the Digital Celebration

Designing the Happy Diwali Wish Card

1. HTML Structure:

2. Styling with CSS:

3. Adding JavaScript Interactivity:

Crafting a Heartfelt Message

Bringing the Wish Card to Life

Step 1 HTML Code

Want to Download the Source Code : Click here

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ - Frequently Asked Questions

Q1: Can I customize the Diwali Wish Card with my own message?

Q2: How can I add animations or decorative elements to the Diwali Wish Card?

Q3: Is it possible to integrate social media sharing functionality into the Diwali Wish Card?

Q4: Can I make the Diwali Wish Card responsive for different devices?

Q5: Are there any additional resources available for further customization or inspiration?

Related Posts

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts