Menu
Coddy logo textTech

Completa HTML

Lezione 7 di 17 del corso Fisarmonica di immagini | Progetto front-end di Coddy.

Ora puoi vedere che abbiamo un input e un'etichetta. Insieme, questi rappresentano una singola sezione del pannello a fisarmonica.

challenge icon

Sfida

Facile

1. Copia le sezioni input e label. E sotto l’etichetta, incollale tre volte:

<input type="radio" name="slide" id="c1" checked>
<label for="c1" class="card" id="one">
    <div class="row">
        <div class="icon">1</div>
        <div class="description">
            <h4>Morning</h4>
            <p>When sun rises</p>
        </div>
    </div>
</label>

2. Poiché il nostro primo input ha un ID impostato su c1, assicurati di cambiare gli ID degli input successivi in c2, c3, e c4.

3. Lo stesso vale per le label; cambia gli ID delle label successive in two, three, e four.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi il codice HTML qui -->
        <script src="script.js"></script>
    </body>
</html>

Tutte le lezioni di Fisarmonica di immagini | Progetto front-end

Esercitati da solo: Playground Web