Bagian isi

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 50 dari 76.

Tantangan

Mudah

Dalam proyek ini, kita akan membuat dan menata Formulir Login sederhana. Proyek ini akan membantumu berlatih konsep-konsep utama CSS, termasuk:
✅ Memusatkan elemen dengan sempurna di halaman web
✅ Menata elemen formulir seperti input dan tombol
✅ Mengatur border, bayangan, dan jarak
✅ Memberi ruang untuk berkreasi dalam desain

Di akhir proyek, kamu akan memiliki formulir login yang ditata dengan baik, terlihat modern dan rapi, mirip dengan gambar di bawah ini.

Terapkan gaya pada tag <body>. Ikuti langkah-langkah berikut:

Atur warna latar belakang ke warna muda pilihanmu.
Gunakan Flexbox untuk memusatkan formulir secara horizontal dan vertikal.
Atur tinggi halaman ke 100vh agar formulir tetap berada di tengah meskipun ukuran halaman berubah.

Coba sendiri

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