إنهاء HTML

الدرس 7 من 17 في دورة أكورديون الصور | مشروع Front-end على Coddy.

الآن، يمكنك أن ترى أن لدينا input واحداً و label واحداً. وهذا يمثل معاً قسماً واحداً من الـ accordion.

التحدي

سهل

1. انسخ أقسام الإدخال (input) والتسمية (label). وقم بلصقها ثلاث مرات أسفل التسمية:

<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. بما أن الإدخال الأول لدينا يحتوي على معرف (ID) مضبوط على "c1"، تأكد من تغيير معرفات الإدخال التالية إلى "c2" و "c3" و "c4".

3. الأمر نفسه بالنسبة للتسميات (labels)؛ قم بتغيير معرفات التسمية التالية لتصبح "two" و "three" و "four".

جرّب بنفسك

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