אתגר סיכום

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 11 מתוך 43.

אתגר

קל

באתגר החזרה הזה, תשלבו את כל המחלקות המדומות האינטראקטיביות שלמדתם כדי ליצור כפתור ניווט אינטראקטיבי לחלוטין.

המשימה שלכם היא לעצב את קוד ה-HTML הנתון כך שיתנהג באופן הבא:

כאשר מרחפים מעל כפתור, צבע הרקע שלו צריך להשתנות לירוק וגודל הגופן צריך להיות 20px.
כאשר שדה קלט נמצא במיקוד (לאחר לחיצה עליו או בזמן הקלדה בו), צריך להיות לו רקע צהוב ומסגרת שחורה. אפשר לבחור כל עובי וסגנון של המסגרת — אין דרישה ספציפית לגביהם.

נסו בעצמכם

<!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>