Menu
Coddy logo textTech

Ukończenie HTML

Lekcja 7 z 17 w kursie Akordeon z obrazami | projekt front-endowy w Coddy.

Teraz widzisz, że mamy jedno pole wejściowe i jedną etykietę. Razem reprezentują one pojedynczą sekcję akordeonu.

challenge icon

Wyzwanie

Łatwy

1. Skopiuj sekcje input i label. A poniżej label wklej je trzy razy:

<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. Ponieważ pierwsze input ma ustawione ID c1, pamiętaj, aby zmienić ID kolejnych input na c2, c3, i c4.

3. To samo dotyczy label; zmień ID kolejnych label na two, three, i four.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Akordeon z obrazami | projekt front-endowy

Poćwicz samodzielnie: Edytor online Web