Finish HTML

Lesson 7 of 17 in Coddy's Image Accordion | Front-end project course.

Now, you can see we have one input and one label. And this together represents a single section of the accordion.

Challenge

Easy

1. Copy the input and label sections. And below the label, paste it three times:

<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. As our first input has an ID set to c1, make sure you change the next input IDs to c2, c3, and c4.

3. Same for labels; change the next label IDs set to two, three, and four.

Try it yourself

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