Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial HTML

Kode HTML Halaman Login Berserta Bootstrap

Koderaya Posting Komentar



Berikut ini adalah source code halaman login yang menggunakan HTML, CSS, dan Bootstrap Source Code ini sudah di gabungkan jadi anda tiadak perlu repot membuat banyak file Langsung saja copas kode nya dibawah ini

HTML (index.html)
<!DOCTYPE html>
<html>
<head>
    <title>Halaman Login</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-container {
            width: 400px;
            padding: 40px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login-container h2 {
            margin-bottom: 30px;
            text-align: center;
        }

        .login-container .form-group {
            margin-bottom: 20px;
        }

        .login-container label {
            font-weight: bold;
        }

        .login-container input[type="text"],
        .login-container input[type="password"] {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .login-container .btn {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form>
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit" class="btn">Login</button>
        </form>
    </div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Dalam contoh ini, kita menggunakan Bootstrap versi 4.5.0 untuk memberikan tampilan yang keren pada halaman login. Kode HTML memiliki struktur dasar dengan elemen-elemen seperti <form>, <input>, <label>, dan <button>. Kode CSS ditambahkan untuk mengatur tampilan halaman login, seperti warna latar belakang, ukuran kontainer, gaya form, dan lainnya.

Anda dapat menyesuaikan tampilan halaman login dengan mengubah kode CSS dan menggunakan kelas Bootstrap yang sesuai dengan kebutuhan Anda.

jadi itu saja yang dapat saya berikan silahkan modifikasi sendiri sesuai selera ya

Posting Komentar untuk "Kode HTML Halaman Login Berserta Bootstrap"