Özet Meydan Okuması

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 11 / 43.

Görev

Kolay

Bu tekrar çalışmasında, tamamen etkileşimli bir gezinme düğmesi oluşturmak için öğrendiğin tüm etkileşimli sözde sınıfları birleştireceksin.

Görevin, verilen HTML kodunu aşağıdaki davranışlara sahip olacak şekilde biçimlendirmektir:

Bir düğmenin üzerine gelindiğinde, yeşil bir arka plan rengine ve 20px yazı tipi boyutuna sahip olacak şekilde değişmelidir.
Bir input alanı odaklandığında (alanın içine tıklandığında veya alana yazı yazılırken), sarı bir arka plan rengine ve siyah bir kenarlığa sahip olmalıdır. Tercih ettiğin herhangi bir kenarlık kalınlığını ve stilini kullanabilirsin; bunlar için belirli bir gereksinim yoktur.

Kendin dene

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