الأزرار - ١

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

التحدي

متوسط

استهدف كلاً من "#openSidebarBtn" و "#closeSidebarBtn":

1. قم بتعيين لون الخلفية وفقاً لاختيارك

2. قم بتعطيل نمط الحدود (border styling)

3. قم بتعيين نصف قطر الحدود (border radius) وفقاً لاختيارك

4. قم بتعيين الحشوة (padding) وفقاً لاختيارك

5. قم بتعيين حجم الخط (font size) وفقاً لاختيارك

جرّب بنفسك

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Mobile Sidebar</title>
</head>
<body>
  <button id="openSidebarBtn">Open</button>
  <div id="sidebar" class="sidebar">
    <button id="closeSidebarBtn">Close</button>
    <!-- Your sidebar content goes here -->
    <p>Home</p>
    <p>About</p>
    <p>Services</p>
    <p>Contact</p>
  </div>
  <script src="script.js"></script>
</body>
</html>