復習チャレンジ

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 11/43。

チャレンジ

簡単

この復習チャレンジでは、これまでに学んだすべてのインタラクティブな擬似クラスを組み合わせて、完全にインタラクティブなナビゲーションボタンを作成します。

あなたのタスクは、提供されたHTMLコードに以下の動作をスタイル設定することです：

buttonにホバーしたとき、背景色が "green" に変わり、フォントサイズが "20px" になるようにしてください。
inputフィールドがフォーカスされたとき（クリックされたとき、または入力中）、背景色が "yellow" になり、"black" のボーダーが表示されるようにしてください。ボーダーの太さやスタイルは自由です。これらに関する特定の要件はありません。

自分で試してみよう

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