Sidebar Content

الدرس 9 من 13 في دورة الشريط الجانبي | مشروع Front-end على Coddy.

التحدي

سهل

استهدف عنصر الفقرة في الفئة 'sidebar':

1. قم بتعيين اللون (ليس الأبيض).

2. أضف حشوة (padding) حسب اختيارك.

3. قم بتعيين المؤشر (cursor) إلى pointer.

4. أضف تأثير الحوم (hover) الذي يحدد الشفافية (opacity) حسب اختيارك (ليس 1).

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Sidebar</title>
</head>
    <body>
        <button id="openSidebarBtn">Open</button>
        <div id="sidebar" class="sidebar">
            <button id="closeSidebarBtn">Close</button>
            <p>Home</p>
            <p>About</p>
            <p>Services</p>
            <p>Contact</p>
        </div>
        <script src="script.js"></script>
    </body>
</html>