Thử thách ôn tập

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 11 trên 43.

Thử thách

Dễ

Trong thử thách ôn tập này, bạn sẽ kết hợp tất cả các lớp giả tương tác đã học để tạo một nút điều hướng có tính tương tác hoàn chỉnh.

Nhiệm vụ của bạn là tạo kiểu cho mã HTML đã cho để nút có các hành vi sau:

Khi di chuột lên nút, nút sẽ chuyển sang màu nền xanh lá và có cỡ chữ 20px.
Khi trường nhập liệu được lấy tiêu điểm (bạn nhấp vào hoặc nhập nội dung), trường sẽ có màu nền vàng và viền màu đen. Bạn có thể tùy chọn độ dày và kiểu viền, vì không có yêu cầu cụ thể nào về những yếu tố này.

Tự làm thử

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