フォームコンテナ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 51/76。

チャレンジ

簡単

このレッスンでは、フォームをより構造化し、視覚的に魅力的なものにします。

以下の手順に従ってください：

フォームコンテナにスタイルを適用して、目立たせます。login-formクラスを持つ要素をターゲットにするCSSルールを記述してください。
1. 背景色（白、または見栄えの良い任意の色）を設定します。
2. コンテンツの内側にスペースができるように、paddingを追加します。
3. 角を丸くします。
4. 柔らかな浮遊効果を作成するために、box-shadowを適用します。
5. フォームの周囲にborderを追加します（任意の色と太さを選択してください）。
text-align プロパティを使用して、フォーム内のテキストを中央に配置します。

自分で試してみよう

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>