Défi récapitulatif

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 11 sur 43.

Défi

Facile

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

Ta tâche consiste à appliquer au code HTML fourni les comportements suivants :

Lorsqu’un bouton est survolé, il doit adopter une couleur d’arrière-plan verte et avoir une taille de police de 20px.
Lorsqu’un champ de saisie est sélectionné (après un clic ou pendant la saisie), il doit avoir une couleur d’arrière-plan jaune et une bordure noire. Tu peux utiliser l’épaisseur et le style de bordure de ton choix : il n’y a pas d’exigence particulière à ce sujet.

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>