Membuat Halaman Login Dengan Boostrap dan HTML

 


Halaman login yang menggunakan Bootstrap dan HTML adalah halaman web yang dirancang khusus untuk memungkinkan pengguna untuk masuk ke sistem dengan memasukkan informasi login mereka, seperti username dan password. Bootstrap adalah kerangka kerja (framework) front-end yang memudahkan desain responsif dan menarik.

Berikut adalah source code halaman login menggunakan Bootstrap dan HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<style type="text/css">
    .login-container {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-top: 50px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}
</style>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 login-container">
                <h2 class="animated bounceInDown">Login</h2>
                <form id="loginForm">
                    <div class="form-group animated zoomIn">
                        <label for="username">Username</label>
                        <input type="text" id="username" name="username" class="form-control" required>
                    </div>
                    
                    <div class="form-group animated zoomIn">
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" class="form-control" required>
                    </div>
                    
                    <div class="form-group animated fadeIn">
                        <input type="submit" value="Login" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></script>
    <script src="script.js"></script>
</body>
<script type="text/javascript">
    $(document).ready(function() {
    $('.animated').waypoint(function() {
        $(this.element).addClass('fadeIn');
        this.destroy();
    }, {
        offset: '90%'
    });
});

</script>
</html>

Ini hanya contoh sederhana, dan tergantung pada kebutuhan spesifik dan desain yang diinginkan, elemen lain atau penyesuaian tambahan mungkin diperlukan. Pastikan juga untuk memperhatikan keamanan, seperti menggunakan HTTPS dan menyimpan informasi login dengan aman.

Previous
Next Post »
Thanks for your comment