Featured Post

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

-
Image
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 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. Chakra-Like Rotating Structures : Behind the Ganesha image, we add three chakra-like structures, each rotating in opposite directions: clockwise and coun...
Post a Comment

Lord Ganesha with Neon Glowing Wishes | HTML & CSS Tutorial 🎨

-

Ganesha Chaturthi Special: Lord Ganesha with Neon Glowing Wishes | HTML & CSS Tutorial 🎨

In this Ganesha Chaturthi special tutorial, we will create a visually stunning animation that features an image of Lord Ganesha, accompanied by festive wishes styled with a neon glowing effect. Using HTML and CSS, you'll learn how to make your web page come alive with divine and elegant visuals that celebrate the spirit of the festival.

Key Features of This Tutorial

  1. Image of Lord Ganesha:

    • The central element of our design will be a beautiful image of Lord Ganesha placed at the center of the page. The image will serve as the focal point, creating a strong festive vibe.
    • We will add a subtle shadow around the image to give it a floating effect, making it stand out from the background.

  2. Ganesha Chaturthi Wishes:

    • Below the image of Lord Ganesha, we will display the message "Happy Ganesha Chaturthi" in large, bold text. This festive message will capture the attention of users and convey warm greetings.
    • The text will be positioned centrally to maintain balance and harmony in the design.

  3. Neon Glowing Effect:

    • The highlight of this tutorial is the neon glowing effect applied to the Ganesha Chaturthi wishes. The neon effect will give the text an eye-catching, futuristic glow, making it feel dynamic and festive.
    • Using CSS, we'll implement a glowing animation where the text softly pulses with different shades of neon colors, giving a captivating, lively effect.
    • We'll focus on using text-shadow and CSS animations to create this glowing effect, ensuring it appears smooth and continuous.

  4. Background and Visual Harmony:

    • To complement the neon effect, we will use a dark background. The contrasting colors between the background and the neon text will amplify the glowing effect, making it look even more vibrant.
    • We’ll use CSS gradients or solid colors to give the background a sleek, modern look that aligns with the glowing effect.

  5. Responsive Design:

    • The layout will be fully responsive, meaning that the image and the glowing text will adjust to different screen sizes, from desktops to mobile devices. This ensures that the festive wishes are easily viewable across all platforms.

Video Tutorial

How to Use This Tutorial

  • Step-by-Step Instructions: Follow the detailed steps as we go through the process of creating the image and text, applying the neon effect, and positioning everything perfectly.
  • Customize the Design: After completing the tutorial, feel free to customize the color of the glowing text, background, and overall design to match your preferences or brand.
  • Perfect for Festive Websites: This design can be used on festival-related websites, greeting pages, or personal blogs to bring festive joy to your users.

HTML 

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

    <!-- external stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Ganesha images -->
    <div class="ganesha">
        <img src="https://assets.codepen.io/4585393/4011464.jpg" alt="Gnaesha " width="600" />
    </div>

    <!-- wishing words -->
    <div class="other-div">
        <ul class="words">
            <li class="words-line">
                <p>&nbsp;</p>
                <p>Happy</p>
            </li>
            <li class="words-line">
                <p>Ganesh</p>
            </li>
            <li class="words-line">
                <p>Chaturthi</p>
            </li>
            <li class="words-line">
                <p>by</p>
            </li>
            <li class="words-line"> 
                <p>Logusivam</p>
            </li>
            <li class="words-line">
                <p>Academy</p>
            </li>
            <li class="words-line">
                <p>&nbsp;</p>
            </li>
        </ul>
    </div>
</body>
</html>

CSS 

 html
{
    background-color: #ffe9de;
    height: 100%;
}

body
{
    color: rgb(255, 0, 238);
    display: -webkit-box;
    display: flex;
}

/* image style */
.ganesha
{
    display: block;
    width: 100%;
    text-align: center;
}

/* words styles starts */
.other-div
{
    display: block;
    position: absolute;
    top: 32%;
    left: 32%;
}

.words
{
    margin: 0; margin-left: -300px;
    padding: 80px 0; 
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    font-size: 55px;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -webkit-font-kerning: normal; 
    font-kerning: normal; 
    -webkit-text-size-adjust: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #f0f, 0 0 60px #f0f, 0 0 80px #f0f;
    animation: neon-glow 1.5s ease-in-out infinite alternate;
}

/* words-line styling removed for neon effect */
.words-line
{
    display: inline-block;
}

/* Keyframes for the neon glowing effect */
@keyframes neon-glow {
    0% {
        text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #f0f, 0 0 60px #f0f, 0 0 80px rgb(0, 8, 255);
    }
    100% {
        text-shadow: 0 0 10px #fff, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 50px #ff0, 0 0 75px #ff0, 0 0 100px rgb(21, 255, 0);
    }
}

/* gradient text style */
p
{
    height: 50px;
    line-height: 40px;
    padding: 0 10px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    vertical-align: top;
    white-space: nowrap;
}

Conclusion 

Celebrate Ganesha Chaturthi with style by creating a unique animation featuring Lord Ganesha and glowing festive wishes. By following this tutorial, you'll not only learn how to implement a neon glowing effect but also create a responsive and visually appealing design perfect for special occasions. This festive animation is a great way to blend creativity with coding. Don't forget to subscribe to Logusivam Academy for more exciting tutorials, and if you enjoyed this video, please like, share, and leave a comment. Happy Ganesha Chaturthi, and happy coding!

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