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 utama CSS, termasuk:
✅ Memusatkan elemen dengan sempurna di halaman web
✅ Menata elemen formulir seperti input dan tombol
✅ Menggunakan border, bayangan, dan jarak
✅ Memberi ruang untuk kreativitas 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 style pada tag <body>. Ikuti langkah-langkah berikut:

Atur warna latar belakang ke warna terang pilihanmu.
Gunakan Flexbox untuk memusatkan formulir secara horizontal dan vertikal.
Atur tinggi halaman menjadi 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>