Özet Meydan Okuması

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

Görev

Kolay

Bu tekrar meydan okumasında, öğrendiğiniz tüm etkileşimli sözde sınıfları birleştirerek tam etkileşimli bir navigasyon butonu oluşturacaksınız.

Göreviniz, verilen HTML kodunu aşağıdaki davranışlarla stillendirmektir:

Bir button üzerine gelindiğinde (hover), green arka plan rengine dönüşmeli ve 20px yazı boyutuna sahip olmalıdır.
Bir input alanına odaklanıldığında (içine tıklandığında veya içine yazı yazıldığında), yellow arka plan rengine ve black bir kenarlığa sahip olmalıdır. İstediğiniz kenarlık kalınlığını ve stilini kullanabilirsiniz - bunlar için özel 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>