Wiederholungs-Challenge

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 11 von 43.

Aufgabe

Einfach

In dieser Wiederholungs-Challenge kombinierst du alle interaktiven Pseudoklassen, die du gelernt hast, um eine voll interaktive Navigationsschaltfläche zu erstellen.

Deine Aufgabe ist es, den vorgegebenen HTML-Code mit den folgenden Verhaltensweisen zu gestalten:

Wenn ein button mit der Maus berührt wird (hover), sollte er zu einer green background color wechseln und eine font size of 20px haben.
Wenn ein input field fokussiert wird (hineingeklickt oder darin getippt wird), sollte es eine yellow background color und einen black border haben. Du kannst jede beliebige Rahmendicke und jeden Stil verwenden – es gibt keine spezifischen Anforderungen dafür.

Probier es selbst

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