Ganesh Chaturthi Celebration Website | HTML & CSS Tutorial 🎨

In this tutorial, we will build a festive website to celebrate Ganesh Chaturthi. The website features a sleek design that includes a black box at the top containing the name "Ganesha," two unknown facts about Lord Ganesha, and embedded images of Ganesha. Below this section, there will be more details about the specialty of Ganesh Chaturthi, including four additional unknown facts, more images, and a special video embedded to highlight the significance of the festival.

VIDEO TUTORIAL

Key Features of This Website

Black Box at the Top:
- At the top of the page, a black box will serve as the header section. This box will contain the name "Ganesha" in a stylish font to grab attention.
- Inside the black box, we will also display two unknown facts about Lord Ganesha, giving the audience something interesting to learn.
- The black box will feature a minimalist design, making it blend smoothly with the rest of the page while keeping the focus on the content.
Ganesha Images:
- Inside the black box, we will embed images of Lord Ganesha, which are a perfect fit for the festive vibe of the site.
- The images will be styled to blend with the overall design, using CSS for effects such as rounded corners, shadows, or hover effects to make them interactive.
Ganesh Chaturthi Specialty Section:
- Below the black box, we will provide a section dedicated to the specialty of Ganesh Chaturthi. This section will list four unknown facts about the festival, offering more insights into its significance.
- Each fact will be presented in a visually engaging way, using CSS styling to create a clean and informative layout.
Embedded Ganesha Images:
- This section will also feature three additional images of Lord Ganesha, further enhancing the festive look of the website.
- These images will be aligned beautifully with the content, and CSS will be used to add some hover effects, such as a soft glow or zoom effect, to make the website interactive and dynamic.
Special Ganesh Chaturthi Video:

A special video about Ganesh Chaturthi will be embedded into the page, providing users with a deeper understanding of the festival.
The video will be prominently placed, ensuring easy access for users to watch and enjoy as they explore the content.
The video player will be styled using CSS to fit the overall glassmorphism design of the website, making it both functional and visually appealing.

SOURCE CODE

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ganesha Chaturthi</title>

    <!-- external stylesheet -->
    <link rel="stylesheet" href="style.css">

    <!-- font package -->
    <link href='https://fonts.googleapis.com/css?family=Alice' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="body-text" id="blackbox">
        <h1 class="text-center">Ganesh</h1>
        <h2 class="text-center">Remover of Obstacles</h2>
        <h3 class="text-center">Son of Shiva and Parvati</h3>
        <img src="https://assets.askganesha.com/images/ganesha.jpg" alt="" class="ganesha-image img-responsive">
    </div>

    <!-- content -->
    <ul class="ul diya">
        <li>Ganesh wrote the Mahabharata as dictated by Vyasa</li>
        
        <li>According to the strict rules of Hindu iconography, Ganesh figures with only two hands are taboo. Hence, Ganesh figures are most commonly seen with four hands which signify their divinity. Some figures may be seen with six, some with eight, some
              with ten, some with twelve and some with fourteen hands, each hand carrying a symbol which differs from the symbols in other hands. There are about 57 symbols in all, according to the findings of research scholars.</li>
        
        <li>Ganesh created by his mother Parvati as the most handsome in the land was to guard her door from any who would enter had his head severed by his unknowing father Shiva. Upon learning that this was his son he sent his followers to bring the head of
              the first living creature they came in contact with. This is where the elephant head comes from.</li>
        
        
        <li>Shiva, after reviving his son decreed that ever more Ganesh would preceed all others in acts of devotion by his followers.</li>
    </ul>

    <!-- first image -->
    <div class="container">
        <div class="buttons">
            <a href="https://www.youtube.com/embed/hhfZ04NcnpE">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5ITyn1BBrZUv0sGUH0Eyl22oieiie7fRuDU-tMW6nknC_m2rX6QTaLJB9n7UzqvbbCWP5opie1Wc_4_rae5pePRCBa-fybUuh5FK_wW7hluYFaa8Yqj3qNXSWweTbVU97IHZ1WDG59Y/s1600/Homa-Ganesha.jpg">
            </a>
            <span>Watch a Ganesh Puja</span>
        </div>

        <!-- second image-->
        <div class="buttons">
            <a href="https://www.youtube.com/embed/yXv_FviFiBg">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5ITyn1BBrZUv0sGUH0Eyl22oieiie7fRuDU-tMW6nknC_m2rX6QTaLJB9n7UzqvbbCWP5opie1Wc_4_rae5pePRCBa-fybUuh5FK_wW7hluYFaa8Yqj3qNXSWweTbVU97IHZ1WDG59Y/s1600/Homa-Ganesha.jpg" alt="">
            </a>
            <span>More Facts about Ganesh</span>
        </div>

        <!-- third image -->
        <div class="buttons">
            <a href="https://www.youtube.com/embed/Os5ObuWjoOE">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5ITyn1BBrZUv0sGUH0Eyl22oieiie7fRuDU-tMW6nknC_m2rX6QTaLJB9n7UzqvbbCWP5opie1Wc_4_rae5pePRCBa-fybUuh5FK_wW7hluYFaa8Yqj3qNXSWweTbVU97IHZ1WDG59Y/s1600/Homa-Ganesha.jpg" alt="">
            </a>
            <span>Have a Puja performed for you</span>
        </div>
    </div>
</body>
</html>

CSS

 body
{
    background: #00bfff;
}

h1
{
    font-size: 100px;
}

.ganesha-image
{
    margin: 0 auto;
}

#blackbox
{
    background: rgb(0,0,0,100);
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    padding: 5%;
}

.body-text
{
    color: #00bfff;
    font-family: alice;
    text-align: center;
}

.ul
{
    font-weight: bold;
}

ul
{
    list-style-image: url('assets/diya.png');
}

li
{
    margin-bottom: 10px;
}

/* buttons images */
.buttons
{
    flex-basis: 33%;
    min-width: 180px;
    margin: 10px;
    padding: 8px;
}

.buttons span
{
    color: #fbfbfb;
    margin-top: 130px;
    position: absolute; 
    margin-left: -130px;
}

.container
{
    display: flex;
    flex-direction: row;
}

How to Use This Tutorial

Step-by-Step Creation: Follow the step-by-step instructions to create each section of the website, from the black box with unknown facts to embedding images and videos.
Customizable Design: After completing the tutorial, you can customize the content by adding your own facts, images, and video. You can also tweak the color scheme and layout to suit your personal style.
Perfect for Festive Occasions: This website design can be used to create pages dedicated to festivals or celebrations, making it a versatile project for both personal and professional use.

Conclusion

By the end of this tutorial, you'll have created a beautiful Ganesh Chaturthi website with an elegant design featuring images, facts, and a special video. The layout is designed to be both festive and informative, making it the perfect way to celebrate and share the joy of Ganesh Chaturthi online.

If you enjoyed this tutorial, don't forget to subscribe to Logusivam Academy for more exciting projects. Please like, share, and leave a comment with your thoughts. Happy Ganesh Chaturthi!

Search This Blog

Tutorials and Guides

Featured Post

Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation