Tantangan Rangkuman

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 11 dari 43.

Tantangan

Mudah

Dalam tantangan rangkuman ini, kamu akan menggabungkan semua pseudo-class interaktif yang telah kamu pelajari untuk membuat tombol navigasi yang sepenuhnya interaktif.

Tugasmu adalah memberi gaya pada kode HTML yang diberikan dengan perilaku berikut:

Saat button diarahkan kursor, warnanya harus berubah menjadi hijau dan ukuran font-nya menjadi 20px.
Saat kolom input mendapatkan fokus, baik karena diklik maupun karena kamu mengetik di dalamnya, kolom tersebut harus memiliki warna latar belakang kuning dan border hitam. Kamu boleh menggunakan ketebalan dan gaya border apa pun, karena tidak ada persyaratan khusus untuk keduanya.

Coba sendiri

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