Menu
Coddy logo textTech

Terminer le HTML

Leçon 7 sur 17 du cours Accordéon d'images | Projet front-end de Coddy.

Maintenant, vous pouvez voir que nous avons un input et un label. Et ensemble, cela représente une seule section de l'accordéon.

challenge icon

Défi

Facile

1. Copiez les sections input et label. Et sous le label, collez-les trois fois :

<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. Comme notre premier input a un ID défini sur "c1", assurez-vous de changer les ID des inputs suivants en "c2", "c3" et "c4".

3. De même pour les labels ; changez les ID des labels suivants en "two", "three" et "four".

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Toutes les leçons de Accordéon d'images | Projet front-end