<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<header class="header">
<div class="container">
<div class="top_head">
<div class="logo_bx">
<img src="https://source.unsplash.com/user/c_v_r/1900x800" class="" alt="">
</div>
<div class="menu_li">
<ul>
<li><a href="" class="">Contact us</a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="sec_pad">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section">Login #04</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="wrap d-md-flex">
<div class="img" style="background-image: url(https://source.unsplash.com/user/c_v_r/1900x800);"></div>
<div class="login-wrap p-4 p-md-5">
<div class="d-flex">
<div class="w-100">
<h3 class="mb-4">Sign In</h3>
</div>
<div class="w-100">
<p class="social-media d-flex justify-content-end">
<a href="#" class="social-icon d-flex align-items-center justify-content-center"><span class="fa fa-facebook"></span></a>
<a href="#" class="social-icon d-flex align-items-center justify-content-center"><span class="fa fa-twitter"></span></a>
</p>
</div>
</div>
<form action="#" class="signin-form">
<div class="form-group mb-3">
<label class="label" for="name">Username</label>
<input type="text" class="form-control" placeholder="Username" required="" />
</div>
<div class="form-group mb-3">
<label class="label" for="password">Password</label>
<input type="password" class="form-control" placeholder="Password" required="" />
</div>
<div class="form-group">
<button type="submit" class="form-control btn btn-primary rounded submit px-3">Sign In</button>
</div>
<div class="form-group d-md-flex">
<div class="w-50 text-left">
<label class="checkbox-wrap checkbox-primary mb-0">
Remember Me
<input type="checkbox" checked="" />
<span class="checkmark"></span>
</label>
</div>
<div class="w-50 text-md-right">
<a href="#">Forgot Password</a>
</div>
</div>
</form>
<p class="text-center">Not a member? <a data-toggle="tab" href="#signup">Sign Up</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
body {
font-family: "Lato", Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
font-weight: normal;
background: #075E54;
color: gray;
}
a {
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
color: #075E54;
}
a:hover,
a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
line-height: 1.5;
font-weight: 400;
font-family: "Lato", Arial, sans-serif;
color: #000;
}
.bg-primary {
background: #e3b04b !important;
}
.header{
padding:15px 0;
box-shadow: 0px 10px 14px -15px rgba(0, 0, 0, 0.24);
background:#075e54;
}
.logo_bx img{
max-width:50px;
}
.top_head{
display:flex;
align-items:center;
justify-content:space-between;
}
.menu_li ul{
list-style:none;
margin:0;
padding:0;
}
.menu_li ul li a{
color:#fff;
text-decoration:none;
font-size:16px;
}
.sec_pad {
padding: 7em 0;
}
.heading-section {
font-size: 28px;
color: #000;
}
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.wrap {
width: 100%;
overflow: hidden;
background: #fff;
border-radius: 5px;
-webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}
.img,
.login-wrap {
width: 50%;
}
@media (max-width: 991.98px) {
.img,
.login-wrap {
width: 100%;
}
}
@media (max-width: 767.98px) {
.wrap .img {
height: 250px;
}
}
.login-wrap {
position: relative;
background: #fff;
background-font-weight: 300;
}
.form-group {
position: relative;
}
.form-group .label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #000;
font-weight: 700;
}
.form-group a {
color: gray;
}
.form-control {
height: 48px;
background: #fff;
color: #000;
font-size: 16px;
border-radius: 5px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: rgba(0, 0, 0, 0.2) !important;
}
.form-control::-moz-placeholder {
/* Firefox 19+ */
color: rgba(0, 0, 0, 0.2) !important;
}
.form-control:-ms-input-placeholder {
/* IE 10+ */
color: rgba(0, 0, 0, 0.2) !important;
}
.form-control:-moz-placeholder {
/* Firefox 18- */
color: rgba(0, 0, 0, 0.2) !important;
}
.form-control:focus,
.form-control:active {
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #e3b04b;
}
.social-media {
position: relative;
width: 100%;
}
.social-media .social-icon {
display: block;
width: 40px;
height: 40px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.05);
font-size: 16px;
margin-right: 5px;
border-radius: 50%;
}
.social-media .social-icon span {
color: #999999;
}
.social-media .social-icon:hover,
.social-media .social-icon:focus {
background: #075E54;
}
.social-media .social-icon:hover span,
.social-media .social-icon:focus span {
color: #fff;
}
.checkbox-wrap {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-wrap input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "\f0c8";
font-family: "FontAwesome";
position: absolute;
color: rgba(0, 0, 0, 0.1);
font-size: 20px;
margin-top: -4px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
.checkmark:after {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
/* Show the checkmark when checked */
.checkbox-wrap input:checked ~ .checkmark:after {
display: block;
content: "\f14a";
font-family: "FontAwesome";
color: rgba(0, 0, 0, 0.2);
}
/* Style the checkmark/indicator */
.checkbox-primary {
color: #075E54;
}
.checkbox-primary input:checked ~ .checkmark:after {
color: #075E54;
}
.btn {
cursor: pointer;
-webkit-box-shadow: none !important;
box-shadow: none !important;
font-size: 15px;
padding: 10px 20px;
}
.btn:hover,
.btn:active,
.btn:focus {
outline: none;
}
.btn.btn-primary {
background: #075E54 !important;
border: 1px solid #075E54 !important;
color: #fff !important;
}
.btn.btn-primary:hover {
border: 1px solid #075E54;
background: transparent;
color: #075E54;
}
.btn.btn-primary.btn-outline-primary {
border: 1px solid #e3b04b;
background: transparent;
color:#075E54;
}
.btn.btn-primary.btn-outline-primary:hover {
border: 1px solid transparent;
background: #075E54;
color: #fff;
}
