Draw A Lord Ganesha Using CSS and HTML

Draw A Lord Ganesha Using CSS and HTML

Draw A Lord Ganesha Using CSS and HTML

Aapke liye HTML aur CSS code ko step-by-step samjha raha hoon:

HTML Code (HTML Code):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lord Ganesha</title>
</head>
<body>
    <div class="container">
        <div class="frame">
            <div class="crown">
                <div class="level-1"></div>
                <div class="level-2"></div>
                <div class="level-3"></div>
            </div>
            <div class="eye"></div>
            <div class="one"></div>
            <div class="two"></div>
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
            <div class="cleaner"></div>
        </div>
        <div class="text">Happy Ganesh Chaturthi</div>
        <div class="name">Meet</div>
    </div>
</body>
</html>
  • <html> tag se HTML document ka start hota hai.
  • <head> mein meta tags hain jo character encoding aur viewport ko set karte hain.
  • <title> tag se browser tab mein dikhane wala title set hota hai.
  • <body> mein Ganesha ki representation ke liye ek div element hai jiska class "container" hai.
  • Is div ke andar alag-alag body parts ke liye div elements hain jisme alag-alag class ka use kiya gaya hai.

CSS Styles (CSS Styles):

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fad5a5;
        }
        .frame{
            position: relative;
        }
        .crown{
            position: absolute;
            transform: rotate(-15deg);
            top: -28px;
            left: 48px;
        }
        .crown .level-1{
            width: 25px;
            height: 25px;
            background-color: #ff5f1f;
            border-radius: 50%;
            margin: auto;
            position: absolute;
            top: -38px;
            left: 45px;
        }
        .crown .level-2{
            width: 90px;
            height: 20px;
            background-color: #ff5f1f;
            border-radius: 50%;
            margin: auto;
            position: absolute;
            top: -15px;
            left: 14px;
        }
        .crown .level-3{
            width: 120px;
            height: 20px;
            background-color: #ff5f1f;
            border-radius: 50% 50% 3px 3px;
        }
        .eye{
            width: 50px;
            height: 50px;
            background-color: #ff5f1f;
            border-radius: 100% 0px;
            margin: 0 auto;
            position: absolute;
            transform: rotate(15deg);
            top: 60px;
            left: 56px;
        }
        .one{
            width: 220px;
            height: 350px;
            border: 12px solid #ff5f1f;
            border-width: 0 0 12px 12px;
            border-radius: 50% 0 50% 50%;
            z-index: 1;
        }
        .two{
            width: 155px;
            height: 120px;
            border: 12px solid #ff5f1f;
            border-width: 0 12px 12px 0;
            border-radius: 50% 40% 50% 50%;
            position: absolute;
            bottom: 12px;
            left: 50px;
            transform: rotate(-40deg);
            z-index: 3;
        }
        .line-1{
            width: 70px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent #ff5f1f;
            border-radius: 50%;
            transform: rotate(-10deg);
            position: absolute;
            left: 0px;
            top: 160px;
        }
        .line-2{
            width: 70px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent #ff5f1f;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            transform: rotate(-10deg);
            top: 180px;
        }
        .line-3{
            width: 60px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent#ff5f1f;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            transform: rotate(-10deg);
            top: 200px;
        }
        .cleaner{
            width: 40px;
            height: 120px;
            background-color: #fad5a5;
            position: absolute;
            bottom: 60px;
            right: 0px;
            transform: rotate(20deg);
            z-index: 2;
        }
        .text{
            position: absolute;
            color: #ff5f1f;
            font-size: xx-large;
            bottom: 50px;
            font-weight: bold;
        }
        .name{
            position: absolute;
            color: #ff5f1f;
            font-size: large;
            bottom: 520px;
            font-weight: bold;
            font-style: italic;
        }    
  </style>
  • body style se page ko center mein display kiya gaya hai.
  • .ganpati class se Ganesha ki representation ka container banaya gaya hai.
  • Alag alag body parts jaise sir, aankhein, sharir ko CSS styles se define kiya gaya hai.
Yeh code se aapko ek simple Ganesha ki representation banane mein madad milegi, aur aap isko apne hisab se customize karke aur bhi sundar bana sakte hain.

CSS (Cascading Style Sheets) ek style sheet language hai jo HTML elements ko style dene ke liye use hoti hai. CSS ke code mein hum styling properties aur unki values ka use karte hain jo web page ke elements ko design karne mein madad karte hain.

Full Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lord Ganesha</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fad5a5;
        }
        .frame{
            position: relative;
        }
        .crown{
            position: absolute;
            transform: rotate(-15deg);
            top: -28px;
            left: 48px;
        }
        .crown .level-1{
            width: 25px;
            height: 25px;
            background-color: #ff5f1f;
            border-radius: 50%;
            margin: auto;
            position: absolute;
            top: -38px;
            left: 45px;
        }
        .crown .level-2{
            width: 90px;
            height: 20px;
            background-color: #ff5f1f;
            border-radius: 50%;
            margin: auto;
            position: absolute;
            top: -15px;
            left: 14px;
        }
        .crown .level-3{
            width: 120px;
            height: 20px;
            background-color: #ff5f1f;
            border-radius: 50% 50% 3px 3px;
        }
        .eye{
            width: 50px;
            height: 50px;
            background-color: #ff5f1f;
            border-radius: 100% 0px;
            margin: 0 auto;
            position: absolute;
            transform: rotate(15deg);
            top: 60px;
            left: 56px;
        }
        .one{
            width: 220px;
            height: 350px;
            border: 12px solid #ff5f1f;
            border-width: 0 0 12px 12px;
            border-radius: 50% 0 50% 50%;
            z-index: 1;
        }
        .two{
            width: 155px;
            height: 120px;
            border: 12px solid #ff5f1f;
            border-width: 0 12px 12px 0;
            border-radius: 50% 40% 50% 50%;
            position: absolute;
            bottom: 12px;
            left: 50px;
            transform: rotate(-40deg);
            z-index: 3;
        }
        .line-1{
            width: 70px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent #ff5f1f;
            border-radius: 50%;
            transform: rotate(-10deg);
            position: absolute;
            left: 0px;
            top: 160px;
        }
        .line-2{
            width: 70px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent #ff5f1f;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            transform: rotate(-10deg);
            top: 180px;
        }
        .line-3{
            width: 60px;
            height: 10px;
            border: 5px solid;
            border-color: transparent transparent#ff5f1f;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            transform: rotate(-10deg);
            top: 200px;
        }
        .cleaner{
            width: 40px;
            height: 120px;
            background-color: #fad5a5;
            position: absolute;
            bottom: 60px;
            right: 0px;
            transform: rotate(20deg);
            z-index: 2;
        }
        .text{
            position: absolute;
            color: #ff5f1f;
            font-size: xx-large;
            bottom: 50px;
            font-weight: bold;
        }
        .name{
            position: absolute;
            color: #ff5f1f;
            font-size: large;
            bottom: 520px;
            font-weight: bold;
            font-style: italic;
        }    
    </style>
</head>
<body>
    <div class="container">
        <div class="frame">
            <div class="crown">
                <div class="level-1"></div>
                <div class="level-2"></div>
                <div class="level-3"></div>
            </div>
            <div class="eye"></div>
            <div class="one"></div>
            <div class="two"></div>
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
            <div class="cleaner"></div>
        </div>
        <div class="text">Happy Ganesh Chaturthi</div>
        <div class="name">Meet</div>
    </div>
</body>
</html>

Result:-

Draw A Lord Ganesha Using CSS and HTML
Video link:- Click me
Humari Website me aane ke liye apka Dhanyawaad!

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.