#3 Login Page 2 – Bootstrap 4

login page bootstrap4
tampilan halaman login menggunakan bootstrap4

file index.html

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
</head>

<body>
    <div class="row">
        <div class="kiri col-6">
            <h1 class="text-center ">Silahkan <br> Login!</h1>
        </div>
        <div class="kanan col-6">
            <form class="mx-auto">
                <h2 class="text-center mb-4">Login!</h2>
                <input type="text" class="form-control mb-3" placeholder="Username">
                <input type="password" class="form-control mb-3" placeholder="Password">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="remember">
                    <label class="form-check-label" for="remember">Remember Me</label>
                </div>
                <button type="submit" class="btn mt-3 btn-block">Submit</button>
            </form>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

file style.css

html,
body {
    height: 100%;
}

.row {
    height: 100%;
}

.kiri {
    background-image: url(gambar.jpg);
    background-size: cover;
}

h1 {
    font-size: 70px;
    padding-top: 230px;
    font-family: 'Bungee Shade', cursive;
    color: rgb(255, 253, 153);
}

.kanan {
    background-color: rgb(255, 226, 130);
}

form {
    padding: 30px;
    margin-top: 150px;
    max-width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: -9px 9px 5px 0px rgba(0, 0, 0, 0.75);
}

h2 {
    font-size: 50px;
    font-family: 'Bungee Shade', cursive;
}

.btn {
    background-color: rgb(168, 168, 168);
}

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *