<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="login-form">
<form >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</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>
<script>
// $(".login-action").click(function(){
// alert("clicked.");
// });
</script>
</body>body{
background-image: url("https://cdn.pixabay.com/photo/2019/09/24/16/05/storm-4501645_1280.jpg");
background-repeat: no-repeat, repeat;
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
padding-top: 50px;
}
.login-form{
background:#1a11117a;
margin-top: 100px;
margin-bottom: 100px;
padding: 100px;
border-radius: 50px;
color: white;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.login-heading{
text-align: center;
margin-top: 20px;
}
.container{
background: #09090a4f;
border-radius: 50px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.38);
}
.btn-primary{
width: 100%;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.