Form Kapsayıcısı

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 51 / 76.

Görev

Kolay

Bu derste, formun daha düzenli ve görsel olarak çekici görünmesini sağlayacağız.

Aşağıdaki adımları takip edin:

Öne çıkmasını sağlamak için form kapsayıcısına stiller uygulayın. login-form sınıfına sahip öğeyi hedefleyen bir CSS kuralı yazın.
1. Bir arka plan rengi ayarlayın (beyaz veya iyi görünen herhangi bir renk).
2. İçeriğin içeride boşluk bırakması için padding ekleyin.
3. Köşeleri yuvarlatın.
4. Yumuşak bir yüzer efekt oluşturmak için bir box-shadow uygulayın.
5. Formun etrafına bir border ekleyin (herhangi bir renk ve kalınlık seçin).
text-align özelliğini kullanarak formun içindeki metni ortalayın.

Kendin dene

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