Menu
Coddy logo textTech

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şturacak ve biçimlendireceğiz. Bu proje, aşağıdakiler dâhil olmak üzere temel CSS kavramlarını uygulamanıza yardımcı olacak:
✅ Bir web sayfasındaki öğeleri mükemmel şekilde ortalama
✅ Girdi 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 şekilde modern ve özenli görünen, iyi biçimlendirilmiş bir giriş formuna sahip olacaksınız.

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

  1. Arka plan rengini seçtiğiniz açık bir tona ayarlayın.
  2. Formu hem yatay hem de dikey olarak ortalamak için Flexbox kullanın.
  3. Formun yeniden boyutlandırıldığında bile ortalanmış kalması için sayfa yüksekliğini 100vh olarak ayarlayı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>

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

Kendi başına pratik yap: Web playground