Featured Post

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

-

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

In this project, we create a stunning web design that features a Ganesha image with a chakra-like structure as the background, using HTML and CSS. The chakra structures rotate both clockwise and counterclockwise, giving a mesmerizing effect, while shadow effects are applied to enhance the visual appeal. This design is perfect for celebrating Ganesh Chaturthi and showcasing beautiful animations with minimal effort.

 VIDEO TUTORIAL

 

Key Features of This Design

  1. Ganesha Image with Indigo Background:

    • The main focal point of the design is a beautiful image of Lord Ganesha set against an indigo-colored background.
    • The indigo background provides a calming and divine feel, highlighting the spiritual significance of Lord Ganesha.

  2. Chakra-Like Rotating Structures:

    • Behind the Ganesha image, we add three chakra-like structures, each rotating in opposite directions: clockwise and counterclockwise. These rotating effects will be created using CSS animations.
    • Each chakra will have a smooth and continuous rotation, enhancing the aesthetic appeal of the design and adding an element of dynamism.

  3. Shadow Effects with Different Values:

    • Each chakra structure will also have a unique shadow effect, using different shadow values to create depth and a 3D illusion.
    • The shadow effects will vary subtly, giving each chakra a distinct appearance and making the design more engaging.

  4. Smooth Animations with CSS:

    • The entire design is built using CSS animations to achieve smooth and seamless transitions for the rotating chakras.
    • These animations will be applied using @keyframes and customized for the different elements to ensure perfect timing and synchronization.

  5. Responsive Design:

    • The layout will be fully responsive, ensuring that the Ganesha image, chakras, and animations adjust perfectly on all screen sizes, from mobile to desktop.
    • The CSS will be carefully crafted to maintain the elegance of the design across different devices, ensuring a user-friendly experience.

 HTML 

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

    <!-- externa; stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="img1">
            <img src="https://res.cloudinary.com/freecodez/image/upload/v1694949729/images/s7sweladttaja5ueyexx.webp" alt="">
        </div>

        <div class="img2">
            <img src="https://res.cloudinary.com/freecodez/image/upload/v1694949729/images/s7sweladttaja5ueyexx.webp" alt="">
        </div>

        <div class="img3">
            <img src="https://res.cloudinary.com/freecodez/image/upload/v1694949748/images/njofz6tzqdj5qsbb7kek.webp" alt="">
        </div>

        <div class="img4">
            <img src="https://res.cloudinary.com/freecodez/image/upload/v1694949769/images/b5rchwczwlfjkmiv4wbe.webp" alt="">
        </div>
    </div>
</body>
</html>

CSS 

 *
{
    margin: 0;
    padding: 0;
}

body
{
    background: linear-gradient(45deg, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

img
{
    width: 100%;
}

.container
{
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img2, .img3, .img4
{
    position: absolute;
    top: 0;
}

.img1
{
    animation: animate 8s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 81, 153));
}

.img2
{
    animation: animate2 10s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 64, 172));
    padding: 5%;
}

.img3
{
    animation: animate 15s linear infinite;
    filter: drop-shadow(0 0 5px rgba(200, 117, 117));
    padding: 10%;
}

@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

@keyframes animate2
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(-360deg);
    }
}

How to Use This Design

  • Step-by-Step Tutorial: The project guide will walk you through how to set up the HTML structure, style the elements with CSS, and apply the animations for the rotating chakras and shadow effects.
  • Customization: After completing the design, feel free to experiment with different chakra colors, shadow intensities, and animation speeds to suit your personal or branding style.
  • Perfect for Festive Celebrations: This design can be used for Ganesh Chaturthi or other festive websites to create an elegant, spiritual, and interactive experience.

Conclusion

This Ganesha-inspired project is a perfect example of combining art and code. By creating a beautiful design with an indigo background, rotating chakra structures, and shadow effects, we bring the divine presence of Lord Ganesha to life on the web. The CSS animations make the design interactive and visually appealing, ensuring a memorable user experience.

If you enjoyed this tutorial, don’t forget to subscribe to Logusivam Academy for more exciting projects and tutorials. Please like, share, and leave a comment to let us know how you’ve used this design. Happy Ganesh Chaturthi! 🌟🕉️ 

Comments

Post a Comment

Popular Post

Hacker Login Form Using HTML CSS

-
Image
  HACKER LOGIN FORM Project Overview In this project, you'll create a minimalist login form with a dark, matrix-like theme. The form will feature green, monospaced text on a black background, along with animated input fields and buttons to give it a futuristic, hacker vibe. Tech Stack Used HTML : To structure the login form, including input fields, labels, and buttons. CSS : To style the form, creating the dark theme and adding animations to enhance the "hacker" effect. How to Create the Hacker Login Form Set Up the HTML Structure : Create a simple HTML form with input fields for the username and password. Include a submit button labeled "Login" or something more hacker-themed, like "Access." Apply the Dark Theme with CSS : Set the background color of the page to black. Use a green color for the text, resembling the classic terminal look. Choose a monospaced font, like "Courier New" or "Monaco," to enhance the terminal effect. S...
Read more

Introduction to RESTful API

-
Table of Contents                               1. Introduction to RESTful APIs What is an API? Understanding REST (Representational State Transfer) Why Use RESTful APIs?                               2. Core Concepts of REST Resources and URIs (Uniform Resource Identifiers) HTTP Methods (GET, POST, PUT, DELETE, PATCH) Statelessness in REST Representation of Resources (JSON, XML)                               3. Designing a RESTful API Best Practices for RESTful API Design Defining Endpoints and Methods Versioning Your API Handling Errors and Responses                               4. Setting Up the Environment Required Tools and Sof...
Read more

Krishna Janmasthami effect using HTML CSS

-
Image
  Krishna Janmasthami effect using HTML CSS In this special Krishna Janmashtami tutorial, we'll be creating a beautiful animation featuring Lord Krishna, a pot, and a delightful splash effect using just HTML and CSS. This tutorial is perfect for those who want to blend creativity with coding, especially during festive occasions like Krishna Janmashtami. What You'll Learn In this tutorial, you'll learn how to create a visually appealing animation that captures the essence of Krishna Janmashtami. We'll animate Krishna playing with a pot, and you'll also see how to create a splash effect that adds a dynamic touch to the scene. This project is designed to be both fun and educational, making it a great way to practice your HTML and CSS skills while celebrating the festival. Tech Stack Used HTML : We'll use HTML to structure our page, including the elements that make up Krishna, the pot, and the splash effect. You'll see how to create a well-organized HTML structu...
Read more