Gövde

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

Görev

Kolay

Bu projede, basit bir Giriş Formu (Login Form) oluşturacağız ve stil vereceğiz. Bu proje, aşağıdakiler dahil olmak üzere temel CSS kavramlarını uygulamanıza yardımcı olacaktır:
✅ Öğeleri bir web sayfasında mükemmel şekilde ortalama
✅ Giriş alanları (inputs) ve düğmeler (buttons) gibi form öğelerini stillendirme
✅ Kenarlıklar, gölgeler ve boşluklarla çalışma
✅ Tasarımda yaratıcılığa yer bırakma

Projenin sonunda, aşağıdaki resme benzer, modern ve şık görünen, iyi stillendirilmiş bir giriş formuna sahip olacaksınız.

<body> etiketine stiller uygulayın. Aşağıdaki adımları takip edin:

Arka plan rengini (background color) seçtiğiniz açık bir tona ayarlayın.
Formu hem yatay hem de dikey olarak ortalamak için Flexbox kullanın.
Sayfa yüksekliğini (height) 100vh olarak ayarlayın, böylece form yeniden boyutlandırıldığında bile ortalı kalır.

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>