Hero Section

📘 Hero Section Kya Hai?

Hindi: Hero Section website ka sabse important starting section hota hai. Ye usually navbar ke neeche hota hai aur user ko website ke baare mein first impression deta hai.

English: A Hero Section is the main introductory section of a website. It is usually placed below the navbar.

💡 Hero Section Mein Kya Hota Hai?

Ek professional Hero Section mein generally:

• Main heading
• Short description
• Call-to-action button
• Background image ya color
• Kabhi-kabhi illustration ya video

1️⃣ Basic Hero Section

Sabse pehle ek simple HTML Hero Section banate hain.

<section class="hero">

    <h1>
        Welcome to OMI
    </h1>

    <p>
        We create modern websites.
    </p>

    <a href="contact.html">
        Contact Us
    </a>

</section>

2️⃣ Hero Section Ko Design Karna

CSS ki help se Hero Section ko attractive bana sakte hain.

.hero{
    padding:100px 7%;
    text-align:center;
    background:#07111f;
    color:white;
}

.hero h1{
    font-size:50px;
}

.hero p{
    color:#a9bac8;
    margin:15px 0 25px;
}

3️⃣ Hero Button

Hero Section mein CTA yani Call-to-Action button user ko next action lene ke liye guide karta hai.

.hero-btn{
    display:inline-block;
    padding:13px 22px;
    background:#00d9ff;
    color:#07111f;
    text-decoration:none;
    border-radius:9px;
    font-weight:bold;
}

4️⃣ Background Image

Hero Section mein background image bhi use kar sakte hain.

.hero{
    background:
    linear-gradient(
        rgba(7,17,31,.75),
        rgba(7,17,31,.75)
    ),
    url("hero.jpg")
    center/cover no-repeat;
}

Gradient overlay text ko background ke upar readable banane mein help karta hai.

5️⃣ Flexbox Se Hero Content

Hero content ko vertically aur horizontally align karne ke liye Flexbox use kar sakte hain.

.hero{
    min-height:500px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
}

6️⃣ Left Aligned Hero

Business websites mein heading ko left side par rakhna bhi common hai.

.hero{
    min-height:500px;
    padding:70px 7%;

    display:flex;
    align-items:center;
}

.hero-content{
    max-width:650px;
}

.hero h1{
    font-size:48px;
}

💻 Complete Professional Hero Example

Ab HTML aur CSS ko combine karke ek professional Hero Section banate hain.

<!DOCTYPE html>

<html>

<head>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.hero{
    min-height:500px;
    padding:70px 7%;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
        90deg,
        rgba(7,17,31,.95),
        rgba(7,17,31,.60)
    ),
    url("hero.jpg")
    center/cover no-repeat;

    color:white;
}

.hero-content{
    max-width:650px;
}

.hero h1{
    font-size:48px;
    margin-bottom:15px;
}

.hero p{
    color:#b6c5d2;
    line-height:1.8;
    margin-bottom:25px;
}

.hero-btn{
    display:inline-block;
    padding:13px 22px;

    background:#00d9ff;
    color:#07111f;

    text-decoration:none;
    border-radius:9px;
    font-weight:bold;
}

</style>

</head>

<body>

<section class="hero">

    <div class="hero-content">

        <h1>
            Build Your Digital Future
        </h1>

        <p>
            We create modern, responsive and
            professional websites for businesses.
        </p>

        <a href="contact.html"
        class="hero-btn">
            Contact Us
        </a>

    </div>

</section>

</body>

</html>

📱 Responsive Hero Section

Mobile devices par Hero Section ka font aur spacing adjust karna important hai.

@media(max-width:600px){

    .hero{
        min-height:420px;
        padding:50px 20px;
    }

    .hero h1{
        font-size:32px;
    }

    .hero p{
        font-size:14px;
    }

}

🌐 Real Website Mein Hero Section

Hero Section ka use business websites, portfolio, e-commerce, restaurant, beauty salon aur almost har modern website mein kiya ja sakta hai.

Hero Section ka main purpose user ko quickly batana hai ki website kis baare mein hai aur user ko next action ke liye guide karna hai.

⚠️ Important Note