Tailwind CSS Academy · पाठ

हीरो और नेविगेशन सेक्शन

स्टिकी नेवबार वाला पेज हेडर और हेडलाइन, सहायक टेक्स्ट, CTA बटन तथा सजावटी बैकग्राउंड ग्रेडिएंट वाला हीरो सेक्शन बनाएँ।

पाठ 1, कुल 4 में से13 चरण

हीरो और नेविगेशन सेक्शन, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

लैंडिंग पेज के लेआउट की योजना

मार्केटिंग लैंडिंग पेज की संरचना आमतौर पर अनुमानित होती है: सबसे ऊपर स्थिर नेवबार, उसमें शीर्षक और CTA वाला हीरो अनुभाग, और उसके बाद सुविधाएँ, प्रशंसापत्र, मूल्य-निर्धारण तथा पादलेख। नेवबार और हीरो से शुरुआत करने पर आप पेज का दृश्य स्वर निर्धारित कर सकते हैं और आगे आने वाली सभी चीज़ों के लिए ऊर्ध्वाधर लय स्थापित कर सकते हैं।

<!-- Page structure overview -->
<body class="bg-white text-gray-900">
  <header><!-- Sticky navbar --></header>
  <main>
    <section><!-- Hero --></section>
    <section><!-- Features --></section>
    <section><!-- Testimonials --></section>
    <section><!-- Pricing --></section>
  </main>
  <footer><!-- Footer --></footer>
</body>

स्थिर नेवबार का ढाँचा बनाना

स्क्रॉल करते समय नेवबार को दिखाई देते रहने देने के लिए sticky top-0 z-50 का उपयोग करें। आधुनिक धुंधले काँच जैसा रूप देने के लिए bg-white/90 backdrop-blur-sm जोड़ें। border-b border-gray-200 पेज की सामग्री से एक हल्का विभाजक बनाता है। बड़े पर्दों पर नेवबार की चौड़ाई सीमित रखने के लिए हर चीज़ को max-w-7xl mx-auto px-4 कंटेनर में रखें।

<header class="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur-sm">
  <nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
    <!-- Logo -->
    <!-- Nav links -->
    <!-- CTA button -->
  </nav>
</header>

लोगो और नेविगेशन लिंक जोड़ना

flex items-center gap-2 का उपयोग करके लोगो को बाईं ओर रखें। नेविगेशन लिंक बीच में फ्लेक्स पंक्ति के रूप में रहते हैं और hidden md:flex gap-6 का उपयोग करते हैं — मोबाइल पर छिपे रहते हैं और मध्यम आकार के पर्दों से आगे दिखाई देते हैं। साफ़-सुथरा इंटरैक्टिव अनुभव देने के लिए प्रत्येक लिंक में text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors का उपयोग करें।

<nav class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
  <!-- Logo -->
  <a href="/" class="flex items-center gap-2 font-bold text-gray-900">
    <div class="h-8 w-8 rounded-lg bg-blue-600"></div>
    Launchify
  </a>

  <!-- Nav links (hidden on mobile) -->
  <div class="hidden gap-8 md:flex">
    <a href="#features" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Features</a>
    <a href="#pricing" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">Pricing</a>
    <a href="#about" class="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900">About</a>
  </div>
</nav>

नेवबार में CTA बटन जोड़ना

नेवबार के दाईं ओर कार्रवाई के लिए एक बटन रखें। प्राथमिक CTA में भरी हुई पृष्ठभूमि bg-blue-600 text-white का उपयोग करें, जबकि उसके पास द्वितीयक घोस्ट लिंक या साइन-इन लिंक रखा जा सकता है। शीर्षक क्षेत्र पर हावी होने से बचाने के लिए नेवबार में बटनों को px-4 py-2 text-sm के साथ छोटा रखें।

<div class="flex items-center gap-3">
  <a href="/login"
     class="hidden text-sm font-medium text-gray-600 hover:text-gray-900 md:inline">
    Log in
  </a>
  <a href="/signup"
     class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white
            shadow-sm transition hover:bg-blue-700">
    Get started
  </a>
  <!-- Hamburger for mobile -->
  <button class="rounded-md p-2 text-gray-600 hover:bg-gray-100 md:hidden">
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"/>
    </svg>
  </button>
</div>

हीरो अनुभाग का लेआउट

हीरो अनुभाग आमतौर पर पेज का सबसे प्रभावशाली भाग होता है। flex flex-col items-center justify-center text-center का उपयोग करके इसकी सामग्री को लंबवत और क्षैतिज रूप से केंद्रित करें। नेवबार के नीचे बचे दृश्य-क्षेत्र को भरने के लिए min-h-[calc(100vh-4rem)] के साथ पर्याप्त न्यूनतम ऊँचाई निर्धारित करें और खुलापन देने के लिए px-4 py-24 जोड़ें।

<section class="flex min-h-[calc(100vh-4rem)] flex-col items-center
               justify-center px-4 py-24 text-center">
  <!-- Badge -->
  <!-- Headline -->
  <!-- Subtext -->
  <!-- CTA buttons -->
  <!-- Hero image / illustration -->
</section>

पृष्ठभूमि ग्रेडिएंट जोड़ना

सूक्ष्म रेडियल या रैखिक ग्रेडिएंट से हीरो को दृश्य गहराई दें। bg-gradient-to-b from-blue-50 to-white का उपयोग करने पर हल्के रंग वाले शीर्ष से साफ़ सफेद निचले भाग तक कोमल फीका प्रभाव बनता है। अधिक नाटकीय प्रभाव के लिए ग्रेडिएंट के साथ सामग्री के पीछे बिल्कुल स्थित सजावटी ब्लॉब जोड़ें।

<section class="relative flex min-h-[calc(100vh-4rem)] flex-col items-center
               justify-center overflow-hidden bg-gradient-to-b
               from-blue-50 to-white px-4 py-24 text-center">
  <!-- Decorative blob -->
  <div class="absolute -top-40 left-1/2 h-[500px] w-[500px] -translate-x-1/2
              rounded-full bg-blue-100 opacity-40 blur-3xl"></div>
  <!-- Content on top of blob -->
  <div class="relative z-10">
    <!-- Hero content here -->
  </div>
</section>

हीरो का मुख्य शीर्षक और सहायक पाठ

मुख्य शीर्षक पेज का सबसे महत्वपूर्ण पाठ होता है। ध्यान आकर्षित करने के लिए text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900 जैसे बड़े पाठ का उपयोग करें। इसके बाद mt-6 max-w-2xl text-lg text-gray-500 में एक उपशीर्षक रखें। पंक्तियों को आसानी से पढ़ने योग्य बनाए रखने के लिए max-w-2xl mx-auto से सहायक पाठ की चौड़ाई सीमित करें।

<div class="relative z-10 flex flex-col items-center">
  <!-- Eyebrow badge -->
  <span class="mb-4 rounded-full bg-blue-100 px-4 py-1.5 text-xs font-semibold
               uppercase tracking-widest text-blue-700">
    Now in Public Beta
  </span>

  <!-- Headline -->
  <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 md:text-6xl">
    Ship faster with
    <span class="text-blue-600">Launchify</span>
  </h1>

  <!-- Subtext -->
  <p class="mx-auto mt-6 max-w-2xl text-lg text-gray-500">
    The all-in-one platform for indie makers to build, launch, and grow
    their SaaS products without the infrastructure headaches.
  </p>
</div>

हीरो के CTA बटन

सहायक पाठ के नीचे एक प्राथमिक और एक द्वितीयक CTA बटन दें। mt-10 flex flex-col items-center gap-4 sm:flex-row का उपयोग करें, ताकि वे मोबाइल पर ऊपर-नीचे रहें और छोटे पर्दों से आगे एक-दूसरे के बगल में आ जाएँ। स्पष्ट प्राथमिकता दिखाने के लिए प्राथमिक बटन में भरी हुई शैली और द्वितीयक बटन में बाहरी रेखा या घोस्ट शैली का उपयोग करें।

<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row">
  <!-- Primary CTA -->
  <a href="/signup"
     class="rounded-xl bg-blue-600 px-8 py-3.5 text-base font-semibold
            text-white shadow-lg transition hover:bg-blue-700
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
    Start for free
  </a>

  <!-- Secondary CTA -->
  <a href="#demo"
     class="flex items-center gap-2 text-base font-semibold text-gray-700
            transition hover:text-gray-900">
    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
      &#9654;
    </span>
    Watch demo
  </a>
</div>

हीरो का सामाजिक प्रमाण पट्टी

CTA के नीचे अवतारों के समूह और सितारा रेटिंग जैसे हल्के सामाजिक प्रमाण तत्व जोड़ें। इससे प्राथमिक CTA से ध्यान भटकाए बिना पहली बार आने वाले आगंतुकों का भरोसा बढ़ता है। एक-दूसरे पर चढ़े अवतारों के लिए -ml-2 के साथ ऋणात्मक मार्जिन और प्रत्येक अवतार को अलग सीमा देने के लिए एक छोटी गोलाकार रिंग का उपयोग करें।

<div class="mt-10 flex flex-col items-center gap-2">
  <!-- Avatars -->
  <div class="flex -space-x-2">
    <img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar1.jpg" alt="User">
    <img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar2.jpg" alt="User">
    <img class="h-8 w-8 rounded-full ring-2 ring-white" src="/avatar3.jpg" alt="User">
    <div class="flex h-8 w-8 items-center justify-center rounded-full
                bg-blue-100 text-xs font-semibold text-blue-700 ring-2 ring-white">
      +2k
    </div>
  </div>
  <!-- Stars -->
  <p class="text-sm text-gray-500">
    <span class="text-yellow-400">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    Loved by 2,000+ makers
  </p>
</div>

हीरो का स्क्रीनशॉट या चित्रण

लिखित सामग्री के नीचे उत्पाद का स्क्रीनशॉट या चित्रण आगंतुकों को उस चीज़ की झलक देता है जिसके लिए वे पंजीकरण कर रहे हैं। इसे सुसज्जित फ़्रेम में दिखाने के लिए mt-16 rounded-2xl shadow-2xl border border-gray-200 overflow-hidden का उपयोग करें। मोबाइल पर इसे पूरी चौड़ाई दें; बड़े पर्दों पर max-w-4xl mx-auto से इसकी चौड़ाई सीमित करें।

<div class="mx-auto mt-16 max-w-4xl">
  <div class="overflow-hidden rounded-2xl border border-gray-200 shadow-2xl">
    <img
      src="/screenshot.png"
      alt="Launchify dashboard preview"
      class="w-full"
    />
  </div>
</div>

उत्तरदायी हीरो समायोजन

हर ब्रेकपॉइंट पर हीरो की समीक्षा करें। मोबाइल पर मुख्य शीर्षक का आकार text-6xl से घटकर text-4xl हो जाता है। CTA बटन flex-col के साथ लंबवत क्रम में आते हैं और छोटे ब्रेकपॉइंट पर sm:flex-row में बदल जाते हैं। यदि स्क्रीनशॉट फ़ोन पर उपयोगी दिखने के लिए बहुत छोटा हो, तो hidden md:block आवश्यक हो सकता है। वास्तविक मोबाइल दृश्य-क्षेत्र पर हमेशा परीक्षण करें।

<!-- Responsive headline example -->
<h1 class="text-3xl font-extrabold tracking-tight text-gray-900
           sm:text-5xl md:text-6xl lg:text-7xl">
  Ship faster with Launchify
</h1>

<!-- Hide large screenshot on mobile -->
<div class="mx-auto mt-16 hidden max-w-4xl md:block">
  <img src="/screenshot.png" class="w-full rounded-2xl shadow-2xl" alt="Dashboard">
</div>

त्वरित जाँच

इस पाठ में Tailwind CSS में महारत से संबंधित अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: लोगो, लिंक और CTA वाला स्थिर धुंधले-काँच का नेवबार बनाना, ग्रेडिएंट पृष्ठभूमि, मुख्य शीर्षक, सहायक पाठ और सामाजिक प्रमाण वाला हीरो अनुभाग बनाना, और मोबाइल तथा डेस्कटॉप ब्रेकपॉइंट के लिए उत्तरदायी समायोजन जोड़ना। अब हम सुविधाओं और सामाजिक प्रमाण अनुभाग बनाएँगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “हीरो और नेविगेशन सेक्शन” पाठ निःशुल्क है?

हाँ—“हीरो और नेविगेशन सेक्शन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“हीरो और नेविगेशन सेक्शन” में मैं क्या सीखूँगा?

स्टिकी नेवबार वाला पेज हेडर और हेडलाइन, सहायक टेक्स्ट, CTA बटन तथा सजावटी बैकग्राउंड ग्रेडिएंट वाला हीरो सेक्शन बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“हीरो और नेविगेशन सेक्शन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ