Input

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

Görev

Kolay

Bu derste, giriş alanlarının görünümünü kullanıcı dostu hale getirmek için iyileştireceğiz.

<input> alanlarını stillendirin. Aşağıdaki adımları takip edin:

Forma tam oturmaları için onları 100% wide yapın.
İçindeki metnin kenarlara değmemesi için padding ekleyin.
Yumuşak bir renge sahip bir border uygulayın.
Köşeleri yuvarlatın.
Giriş alanlarının birbirine çok yakın görünmemesi için aralarına biraz margin ekleyin.
Genişliğin padding ve border'ları da kapsaması için box-sizing: border-box; kullanı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>