Desafío de repaso

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 11 de 43.

Desafío

Fácil

En este desafío de repaso, combinarás todas las pseudoclases interactivas que has aprendido para crear un botón de navegación completamente interactivo.

Tu tarea es aplicar estilos al código HTML proporcionado con los siguientes comportamientos:

Cuando se pasa el cursor sobre un botón, debe cambiar a un color de fondo verde y tener un tamaño de fuente de 20px.
Cuando un campo de entrada tiene el foco (al hacer clic en él o al escribir en él), debe tener un color de fondo amarillo y un borde negro. Puedes usar el grosor y el estilo de borde que prefieras; no hay ningún requisito específico para estos.

Pruébalo tú mismo

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