HTML abschließen

Lektion 7 von 17 im Kurs Bild-Akkordeon | Front-End-Projekt von Coddy.

Jetzt können Sie sehen, dass wir ein Input-Feld und ein Label haben. Und dies zusammen repräsentiert einen einzelnen Abschnitt des Accordions.

Aufgabe

Einfach

1. Kopieren Sie die Eingabe- und Label-Abschnitte. Und fügen Sie diese unterhalb des Labels dreimal ein:

<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. Da unsere erste Eingabe eine ID hat, die auf "c1" gesetzt ist, stellen Sie sicher, dass Sie die nächsten Eingabe-IDs in "c2", "c3" und "c4" ändern.

3. Das Gleiche gilt für Labels; ändern Sie die nächsten Label-IDs auf "two", "three" und "four".

Probier es selbst

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