Wiederholungs-Challenge

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

Aufgabe

Einfach

In dieser Wiederholungsaufgabe kombinierst du alle interaktiven Pseudoklassen, die du gelernt hast, um eine vollständig interaktive Navigationsschaltfläche zu erstellen.

Deine Aufgabe besteht darin, den gegebenen HTML-Code mit den folgenden Verhaltensweisen zu gestalten:

Wenn der Mauszeiger über eine Schaltfläche bewegt wird, soll sie eine grüne Hintergrundfarbe und eine Schriftgröße von 20px erhalten.
Wenn ein Eingabefeld fokussiert ist (hineingeklickt wurde oder gerade Text eingegeben wird), soll es eine gelbe Hintergrundfarbe und einen schwarzen Rahmen haben. Du kannst die Rahmenstärke und den Rahmenstil frei wählen – dafür gibt es keine spezifischen Vorgaben.

REQUIRED OUTPUT FORMAT: [Your translated content here]

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>