Sfida di ripasso
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 25 di 43.
Sfida
FacileIn questa sfida, creerai una pagina web per una caffetteria semplice ma dall'aspetto moderno. È la tua occasione per mettere in pratica tutto ciò che hai imparato finora, inclusi gradienti, filtri CSS, trasformazioni e transizioni.
Il tuo compito è completare quanto segue:
- Applica un gradiente lineare allo sfondo della sezione hero. Puoi usare i colori che preferisci.
- Al passaggio del mouse, fai ruotare leggermente il pulsante CTA con
transform: rotate(-3deg)e aggiungi una transizione fluida. - Applica un filtro
sepia(60%)all'immagine del caffè nel suo stato predefinito. - Al passaggio del mouse, cambia il filtro dell'immagine del caffè in
sepia(0%)e ingrandiscila contransform: scale(1.1).
Provalo tu
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: center;
}
/* Hero Section with Gradient */
.hero {
padding: 80px 20px;
color: #3e2723;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 20px;
}
.cta-btn {
background-color: #8d6e63;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 1rem;
}
/* Gallery section */
.gallery {
padding: 50px 20px;
background: #fffaf0;
}
.gallery h2 {
margin-bottom: 20px;
font-size: 2rem;
color: #4e342e;
}
.coffee-img {
max-width: 300px;
border-radius: 12px;
}
/*Add your CSS here */
</style>
</head>
<body>
<header class="hero">
<h1>Welcome to Coffee Bliss</h1>
<p>Your daily dose of joy in a cup</p>
<button class="cta-btn">Order Now</button>
</header>
<section class="gallery">
<h2>Our Signature Blend</h2>
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=600&q=80" alt="Cup of Coffee" class="coffee-img" />
</section>
</body>
</html>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo5Effetti visivi
SfumatureFiltri CSSTrasformazioniTransizioni ed effetti al passaggio del mouseSfida di ripasso3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogoEsercitati da solo: Playground Web