Menu
Coddy logo textTech

Finalizar HTML

Lección 7 de 17 del curso Acordeón de imágenes | Proyecto Front-end de Coddy.

Ahora, puedes ver que tenemos un input y una etiqueta. Y esto en conjunto representa una única sección del acordeón.

challenge icon

Desafío

Fácil

1. Copia las secciones de input y label. Y debajo de la etiqueta label, pégalas tres veces:

<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. Como nuestro primer input tiene un ID establecido como "c1", asegúrate de cambiar los IDs de los siguientes inputs a "c2", "c3" y "c4".

3. Lo mismo para las etiquetas label; cambia los IDs de las siguientes etiquetas label a "two", "three" y "four".

Pruébalo tú mismo

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

Todas las lecciones de Acordeón de imágenes | Proyecto Front-end