تحدي المراجعة

جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 11 من 43.

التحدي

سهل

في تحدي المراجعة هذا، ستجمع بين جميع الفئات الزائفة (pseudo-classes) التفاعلية التي تعلمتها لإنشاء زر تنقل تفاعلي بالكامل.

مهمتك هي تنسيق كود HTML المعطى بالسلوكيات التالية:

عند تمرير الماوس فوق الـ button، يجب أن يتغير إلى green background color ويكون له font size of 20px.
عند التركيز على input field (النقر بداخله أو الكتابة فيه)، يجب أن يكون له yellow background color و black border. يمكنك استخدام أي سمك أو نمط إطار تفضله - لا يوجد متطلب محدد لهما.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Recap Challenge</title>
    <style>
        /* General page styling */
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f0f8ff;
        }
        input {
            padding: 8px;
            font-size: 16px;
            border: 2px solid #ccc;
        }
        a {
            display: inline-block;
            margin-top: 10px;
            color: #0077cc;
            text-decoration: none;
        }
        /* Write your CSS here */

    </style>
</head>
<body>
    <h1>Join the Jungle Adventure!</h1>
    <p>Ready to embark on an epic journey? Sign up below:</p>

    <button>Start Adventure</button>

    <br><br>

    <input type="text" placeholder="Enter your explorer name">

    <br><br>

    <a class="more" ref="#">Learn more about the adventure</a>
</body>
</html>