Menu
CoddyTech

Gövde

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 50 / 76.

challenge icon

Görev

Kolay

Bu projede basit bir Giriş Formu oluşturup biçimlendireceğiz. Bu proje, aşağıdakiler dâhil temel CSS kavramlarını uygulamana yardımcı olacak:
✅ Bir web sayfasındaki öğeleri kusursuz biçimde ortalama
✅ Giriş alanları ve düğmeler gibi form öğelerini biçimlendirme
✅ Kenarlıklar, gölgeler ve boşluklarla çalışma
✅ Tasarımda yaratıcılığa yer verme

Projenin sonunda, aşağıdaki görsele benzer, modern ve özenli görünen, iyi biçimlendirilmiş bir giriş formun olacak.

<body> etiketine stiller uygula. Aşağıdaki adımları izle:

  1. Arka plan rengini seçtiğin açık bir tona ayarla.
  2. Formu hem yatay hem de dikey olarak ortalamak için Flexbox kullan.
  3. Formun pencere boyutu değişse bile ortalanmış kalması için sayfanın yüksekliğini 100vh olarak ayarla.

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>

CSS ile Stil Verme bölümündeki tüm dersler

Kendi başına pratik yap: Web playground