<div class="container-fluid px-4 px-md-4 py-5 mx-auto">
<div class="row d-flex justify-content-between align">
<div class="card card1 border-0 rounded-0 mb-5">
<h1 class="mb-0">We Make Spotlight</h1>
<p>on Your Property</p>
<div class="row mt-auto mb-2">
<div class="col-6"> <button type="submit" class="btn btn-block btn-yellow">Login</button> </div>
<div class="col-6"> <button type="submit" class="btn btn-block btn-inverse">Register</button> </div>
</div>
</div>
<div class="card p-0 border-0 rounded-0 mb-5">
<div class="card border-0 rounded-0 card0">
<h1 class="mb-0">Hello!</h1>
<p>Please login with your account</p> <label class="font-weight-bold mb-0">Email</label> <input type="text" name="email" class="mb-4" placeholder="
[email protected]"> <label class="font-weight-bold mb-0">Password</label> <input type="password" name="password" placeholder="●●●●●"> <a href="#" class="text-sm ml-auto text-dim">Forgot Password?</a>
<div class="row justify-content-center mt-4"> <button type="submit" class="btn btn-yellow px-5">Login</button> </div>
<div class="row justify-content-center mt-3"> <small class="text-dim">or login with</small> </div>
<div class="row justify-content-center mt-3 mb-2"> <img class="icon mr-2" src="https://i.imgur.com/j8ZGqG2.png"> <img class="icon ml-2" src="https://i.imgur.com/AX2lVgH.png"> </div>
</div> <img src="https://i.imgur.com/nUR4zg3.jpg" class="mt-auto">
</div>
<div class="card border-0 rounded-0 mb-5">
<h1 class="mb-2">Register As User</h1> <small>Enter your details below</small>
<div class="row px-3 mt-4 mb-3">
<div class="custom-control custom-radio custom-control-inline"> <input id="customRadioInline1" type="radio" name="customRadioInline1" checked class="custom-control-input"> <label for="customRadioInline1" class="custom-control-label text-sm">Individual</label> </div>
<div class="custom-control custom-radio custom-control-inline"> <input id="customRadioInline2" type="radio" name="customRadioInline1" class="custom-control-input"> <label for="customRadioInline2" class="custom-control-label text-sm">Company</label> </div>
</div> <label class="font-weight-bold mb-0">Fullname</label> <input type="text" name="name" class="mb-4" placeholder="John Harry"> <label class="font-weight-bold mb-0">Email</label> <input type="text" name="email" class="mb-4" placeholder="
[email protected]"> <label class="font-weight-bold mb-0">Phone Number</label> <input type="text" name="phno" class="mb-4" placeholder="1234567890"> <label class="font-weight-bold mb-0">Password</label> <input type="password" name="password" placeholder="●●●●●●●●" minlength="8"> <small class="text-muted">Min length is 8 characters</small>
<div class="custom-control custom-checkbox custom-control-inline mt-4"> <input id="chk1" type="checkbox" name="chk" class="custom-control-input" checked> <label for="chk1" class="custom-control-label text-sm">I agree with Terms of Service, Terms of Payments and Privacy Policy.</label> </div>
<div class="row px-3 mt-5"> <button type="submit" class="btn btn-yellow px-3 mr-3">Register</button> <small class="text-muted mr-3 mt-2">or login with</small> <img class="icon mr-2 mt-2" src="https://i.imgur.com/j8ZGqG2.png"> <img class="icon ml-2 mt-2" src="https://i.imgur.com/AX2lVgH.png"> </div>
</div>
</div>
</div>
body {
color: #000;
overflow-x: hidden;
height: 100%;
background-color: #81D4FA;
background-repeat: no-repeat
}
.card {
width: 32%;
padding: 30px;
box-shadow: 0px 8px 16px 0px #1976D2;
max-width: 511px
}
.card0 {
width: 100%;
padding-right: 30px;
box-shadow: none
}
.card1 {
background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url("https://i.imgur.com/AMBgumm.jpg");
min-height: 600px
}
.btn-yellow {
border: 2px solid #F9A825;
background-color: #F9A825;
color: #fff;
font-weight: bold;
letter-spacing: 1px
}
.btn-yellow:hover {
background-color: #F57F17;
border: 2px solid #F57F17
}
.btn-inverse {
border: 2px solid #F9A825;
background-color: transparent;
color: #F9A825;
font-weight: bold;
letter-spacing: 1px
}
.btn-inverse:hover {
background-color: #F57F17;
color: #fff;
border: 2px solid #F57F17
}
::placeholder {
color: #E0E0E0;
opacity: 1
}
:-ms-input-placeholder {
color: #E0E0E0
}
::-ms-input-placeholder {
color: #E0E0E0
}
input {
padding: 1px 0px 3px 0px;
border: none;
border-bottom: 1px solid lightgrey;
margin-bottom: 3px;
margin-top: 2px;
box-sizing: border-box;
color: #000;
font-size: 16px;
letter-spacing: 1px;
font-weight: 500
}
input:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-bottom: 1px solid #EF5350;
outline-width: 0
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
a:hover {
color: inherit
}
.text-sm {
font-size: 14px
}
.text-dim {
color: #BDBDBD
}
.icon {
width: 20px;
height: 20px;
cursor: pointer
}
@media screen and (max-width: 1056px) {
.card {
width: 100%
}
.align {
justify-content: center !important
}
}