Défi récapitulatif

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 11 sur 43.

Défi

Facile

Dans ce défi récapitulatif, vous allez combiner toutes les pseudo-classes interactives que vous avez apprises pour créer un bouton de navigation entièrement interactif.

Votre tâche consiste à styliser le code HTML fourni avec les comportements suivants :

Lorsqu'un bouton est survolé, il doit changer pour une couleur de fond verte ("green") et avoir une taille de police de 20px.
Lorsqu'un champ de saisie (input) reçoit le focus (cliqué ou en cours de saisie), il doit avoir une couleur de fond jaune ("yellow") et une bordure noire ("black"). Vous pouvez utiliser l'épaisseur et le style de bordure de votre choix - il n'y a pas d'exigence spécifique pour ceux-ci.

Essayez vous-même

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