Hero- ja navigaatio-osio
Rakentakaa sivun ylätunniste kiinnittyvällä navigointipalkilla ja hero-osiolla, jossa on otsikko, täydentävä teksti, CTA-painikkeet ja koristeellinen taustagradientti.
Hero- ja navigaatio-osio on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Aloitussivun asettelun suunnittelu
Markkinoinnin aloitussivu noudattaa yleensä ennakoitavaa rakennetta: yläreunassa on kiinnitetty navigaatiopalkki, sen jälkeen hero-osio, jossa on otsikko ja CTA-toimintakehote, sekä ominaisuudet, asiakaskokemukset, hinnoittelu ja alatunniste. Kun aloitat navigaatiopalkista ja hero-osiosta, voit määrittää sivun visuaalisen ilmeen ja luoda pystysuuntaisen rytmin kaikelle sitä seuraavalle sisällölle.
<!-- 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>Kiinnitetyn navigaatiopalkin rungon rakentaminen
Käytä luokkaa sticky top-0 z-50, jotta navigaatiopalkki pysyy näkyvissä käyttäjien vierittäessä sivua. Lisää bg-white/90 backdrop-blur-sm modernia huurrelasimaista ulkoasua varten. border-b border-gray-200 luo hienovaraisen erottimen sivun sisällön ja navigaation välille. Rajoita navigaation leveys suurilla näytöillä käärimällä kaikki max-w-7xl mx-auto px-4-säilöön.
<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>Logon ja navigaatiolinkkien lisääminen
Sijoita logo vasemmalle käyttämällä luokkia flex items-center gap-2. Navigaatiolinkit ovat keskellä flex-rivinä, jossa käytetään luokkia hidden md:flex gap-6 — ne ovat piilossa mobiililaitteilla ja näkyvissä keskikokoisista näytöistä alkaen. Käytä kussakin linkissä luokkia text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors selkeän ja vuorovaikutteisen vaikutelman luomiseksi.
<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-painikkeen lisääminen navigaatiopalkkiin
Sijoita toimintakehote-painike navigaatiopalkin oikeaan reunaan. Ensisijainen CTA käyttää täytettyä taustaa luokilla bg-blue-600 text-white, ja sen vieressä voi olla toissijainen haamutyylinen linkki tai kirjautumislinkki. Pidä navigaatiopalkin painikkeet kompakteina käyttämällä luokkia px-4 py-2 text-sm, jotta ne eivät hallitse otsakealuetta.
<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>Hero-osion asettelu
Hero-osio on yleensä sivun vaikuttavin osa. Keskitä sen sisältö pysty- ja vaakasuunnassa käyttämällä luokkia flex flex-col items-center justify-center text-center. Aseta sille reilu vähimmäiskorkeus luokalla min-h-[calc(100vh-4rem)], jotta se täyttää navigaatiopalkin alapuolisen näkymän, ja lisää väljyyttä luokilla 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>Taustagradientin lisääminen
Anna hero-osiolle visuaalista syvyyttä hienovaraisella säteittäisellä tai lineaarisella gradientilla. Luokat bg-gradient-to-b from-blue-50 to-white luovat pehmeän häivytyksen sävytetystä yläosasta puhtaan valkoiseen alaosaan. Jos haluat dramaattisemman vaikutelman, yhdistä gradienttiin koristeellinen blob-elementti, joka sijoitetaan sisällön taakse absoluuttisesti.
<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>Heron pääotsikko ja tukiteksti
Pääotsikko on sivun tärkein tekstielementti. Käytä huomiota herättävää suurta tekstiä, kuten text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900. Lisää sen alle alaotsikko luokilla mt-6 max-w-2xl text-lg text-gray-500. Rajoita tukitekstin leveyttä luokilla max-w-2xl mx-auto, jotta rivit pysyvät helposti luettavina.
<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>Heron CTA-painikkeet
Lisää tukitekstin alle ensisijainen ja toissijainen CTA-painike. Käytä luokkia mt-10 flex flex-col items-center gap-4 sm:flex-row, jotta painikkeet asettuvat mobiililaitteilla päällekkäin ja vierekkäin pienillä näytöillä ja sitä suuremmilla näytöillä. Ensisijainen painike on täytetty, kun taas toissijaisessa käytetään ääriviiva- tai haamutyylin ulkoasua selkeän hierarkian luomiseksi.
<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>Heron sosiaalisen todisteen rivi
Lisää CTA-painikkeiden alle kevyt sosiaalisen todisteen elementti, kuten päällekkäiset avatarit ja tähtiarvio. Se lisää ensikertalaisten kävijöiden luottamusta häiritsemättä ensisijaista CTA:ta. Käytä päällekkäisissä avatereissa negatiivista marginaalia -ml-2 ja pientä pyöristettyä rengasta, joka antaa kullekin avatarille erottuvan reunuksen.
<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>Heron kuvakaappaus tai kuvitus
Tekstin alle sijoitettu tuotteen kuvakaappaus tai kuvitus antaa kävijöille ennakkokuvan siitä, mitä he ovat ottamassa käyttöön. Esitä se viimeistellyssä kehyksessä käyttämällä luokkia mt-16 rounded-2xl shadow-2xl border border-gray-200 overflow-hidden. Tee siitä mobiililaitteilla koko levyinen ja rajoita sen leveyttä suuremmilla näytöillä luokilla 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>Responsiiviset muutokset heroon
Tarkista hero jokaisella rajapisteellä. Mobiililaitteilla pääotsikon koko pienenee luokasta text-6xl luokkaan text-4xl. CTA-painikkeet asettuvat pystysuoraan luokalla flex-col ja vaihtuvat pienessä rajapisteessä luokkaan sm:flex-row. Kuvakaappaus saattaa vaatia luokan hidden md:block, jos se on puhelimissa liian pieni ollakseen hyödyllinen. Testatkaa näkymä aina oikealla mobiilinäkymällä.
<!-- 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>Pikatarkistus
Testaa, miten hyvin hallitset tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opitte: kiinnitetyn huurrelasimaisen navigaatiopalkin rakentamisen logolla, linkeillä ja CTA:lla, hero-osion luomisen gradienttitaustalla, pääotsikolla, tukitekstillä ja sosiaalisen todisteen elementillä sekä responsiivisten muutosten lisäämisen mobiili- ja työpöytänäytöille. Seuraavaksi rakennamme ominaisuus- ja sosiaalisen todisteen osiot.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Hero- ja navigaatio-osio” ilmainen?
Kyllä – oppitunnin ”Hero- ja navigaatio-osio” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Hero- ja navigaatio-osio”?
Rakentakaa sivun ylätunniste kiinnittyvällä navigointipalkilla ja hero-osiolla, jossa on otsikko, täydentävä teksti, CTA-painikkeet ja koristeellinen taustagradientti. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Hero- ja navigaatio-osio”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Hero- ja navigaatio-osio
- Ominaisuus- ja sosiaalisen todisteen osiot
- Hinnoittelutaulukko-osio
- Alatunniste ja responsiivinen viimeistely