Hero- og navigationssektion
Opbyg sidens header med en sticky-navbar og en hero-sektion med overskrift, undertekst, CTA-knapper og en dekorativ baggrundsgradient.
Hero- og navigationssektion er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Planlægning af landingssidens layout
En markedsføringslandingsside følger typisk en forudsigelig struktur: en fastlåst navigationsbjælke øverst, et heroafsnit med en overskrift og en CTA, efterfulgt af funktioner, kundeudtalelser, priser og en sidefod. Når du begynder med navigationsbjælken og heroafsnittet, kan du fastlægge sidens visuelle udtryk og den lodrette rytme for alt det, der følger.
<!-- 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>Opbygning af den fastlåste navigationsbjælkes grundstruktur
Brug sticky top-0 z-50 for at holde navigationsbjælken synlig, når brugerne ruller. Tilføj bg-white/90 backdrop-blur-sm for et moderne udtryk med matteret glas. border-b border-gray-200 skaber en diskret adskillelse fra sidens indhold. Saml det hele i en max-w-7xl mx-auto px-4-container for at begrænse navigationsbredden på store skærme.
<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>Tilføjelse af logo og navigationslinks
Placér logoet til venstre med flex items-center gap-2. Navigationslinkene placeres i midten som en fleksibel række med hidden md:flex gap-6 — skjult på mobil og synlig fra mellemstore skærme og opefter. Hvert link bruger text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors for en enkel interaktiv oplevelse.
<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>Tilføjelse af CTA-knappen i navigationsbjælken
Placér en handlingsknap i højre side af navigationsbjælken. Den primære CTA bruger en udfyldt baggrund med bg-blue-600 text-white, mens et sekundært spøgelseslink eller loginlink kan placeres ved siden af. Hold knapperne kompakte i navigationsbjælken med px-4 py-2 text-sm, så de ikke dominerer pladsen i sidehovedet.
<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>Heroafsnittets layout
Heroafsnittet er typisk den mest virkningsfulde del af siden. Centrér indholdet lodret og vandret med flex flex-col items-center justify-center text-center. Angiv en generøs minimumshøjde med min-h-[calc(100vh-4rem)] for at udfylde visningsområdet under navigationsbjælken, og tilføj px-4 py-24 for luft omkring indholdet.
<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>Tilføjelse af en baggrundsgradient
Giv heroafsnittet visuel dybde med en diskret radial eller lineær gradient. Med bg-gradient-to-b from-blue-50 to-white oprettes en blid overgang fra en tonet top til en ren hvid bund. Hvis du ønsker en mere dramatisk effekt, kan du kombinere en gradient med en dekorativ form, der placeres absolut bag indholdet.
<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>Heroafsnittets overskrift og undertekst
Overskriften er sidens vigtigste tekst. Brug stor tekst som text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900 for at tiltrække opmærksomhed. Følg den med en underoverskrift i mt-6 max-w-2xl text-lg text-gray-500. Begræns undertekstens bredde med max-w-2xl mx-auto, så linjerne forbliver lette at læse.
<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-knapper i heroafsnittet
Placér en primær og en sekundær CTA-knap under underteksten. Brug mt-10 flex flex-col items-center gap-4 sm:flex-row, så knapperne står under hinanden på mobil og ved siden af hinanden på små skærme og opefter. Den primære knap bruger en udfyldt stil, mens den sekundære bruger en omridset eller diskret stil for at skabe et tydeligt hierarki.
<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">
▶
</span>
Watch demo
</a>
</div>Heroafsnittets element med social dokumentation
Tilføj et diskret element med social dokumentation under CTA'erne, f.eks. avatarstakke og en stjernebedømmelse. Det skaber tryghed hos førstegangsbesøgende uden at aflede opmærksomheden fra den primære CTA. Brug negative margener på overlappende avatarer med -ml-2 og en lille afrundet ring for at give hver avatar en tydelig kant.
<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">★★★★★</span>
Loved by 2,000+ makers
</p>
</div>Skærmbillede eller illustration i heroafsnittet
Et produktskærmbillede eller en illustration under teksten giver besøgende et eksempel på, hvad de tilmelder sig. Brug mt-16 rounded-2xl shadow-2xl border border-gray-200 overflow-hidden for at vise det i en gennemarbejdet ramme. På mobil skal det fylde hele bredden; på større skærme kan du begrænse bredden med 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>Tilpasning af heroafsnittet til forskellige skærmstørrelser
Gennemgå heroafsnittet ved hvert brudpunkt. På mobil reduceres overskriftens størrelse fra text-6xl til text-4xl. CTA-knapperne stables lodret med flex-col og skifter til sm:flex-row ved det lille brudpunkt. Skærmbilledet kan have brug for hidden md:block, hvis det er for lille til at være nyttigt på telefoner. Test altid på en ægte mobilvisning.
<!-- 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>Hurtigt tjek
Test din forståelse af begreberne i Tailwind CSS Mastery fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du: at bygge en fastlåst navigationsbjælke med matteret glas og logo, links og CTA, at oprette et heroafsnit med gradientbaggrund, overskrift, undertekst og social dokumentation samt at tilføje responsive tilpasninger til mobil- og skrivebordsbrudpunkter. Næste gang bygger vi sektionerne med funktioner og social dokumentation.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Hero- og navigationssektion” gratis?
Ja — hele teksten til “Hero- og navigationssektion” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Hero- og navigationssektion”?
Opbyg sidens header med en sticky-navbar og en hero-sektion med overskrift, undertekst, CTA-knapper og en dekorativ baggrundsgradient. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Hero- og navigationssektion”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hero- og navigationssektion
- Sektioner med funktioner og social proof
- Sektion med pristabel
- Footer og responsiv finpudsning