Quando usare questo esempio
Hero pronta per una homepage, con testo a sinistra e riquadro informativo a destra.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<section class="demo-hero">
<div>
<h1>Studia CSS con esempi pratici</h1>
<p>Parti da componenti semplici e arriva a layout completi.</p>
<a href="#">Vedi lezioni</a>
</div>
<aside>24 lezioni + esercizi</aside>
</section>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
gap: 28px;
align-items: center;
}
.demo-hero aside { padding: 24px; border-radius: 20px; background: #eaf1ff; }
@media (max-width: 760px) { .demo-hero { grid-template-columns: 1fr; } }
Commenti didattici
- `minmax(0, 1.2fr)` evita overflow del testo nella colonna principale.
- La media query porta tutto su una colonna sotto 760px.
- Il riquadro laterale può diventare una callout box su mobile.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.