<section class="login-block">
<div class="container">
<div class="row">
<div class="col-md-4 login-sec">
<h2 class="text-center">Login Now</h2>
<form class="login-form">
<div class="form-group">
<i class="fa fa-user" style="font-size: 12px"></i>
<label for="exampleInputEmail1" class="text-uppercase" style="font-family: sans-serif; font-size: 12px">Username</label>
<input type="text" class="form-control" placeholder="Enter your username">
</div>
<div class="form-group">
<i class="fa fa-key" style="font-size: 12px"></i>
<label for="exampleInputPassword1" class="text-uppercase" style="font-family: sans-serif; font-size: 12px">Password</label>
<input type="password" class="form-control" placeholder="Enter your Password">
</div>
<a href="#" style="margin-left:170px; font-weight: bold; font-size: 14px; color: #DE6262;" class="forgot"><u> Forgot Your Password?</u></a>
<button type="submit" class="btn-block login-button" style="border-radius: 20px; margin-top: 20px">Login</button>
<div class="strike">
<span>OR</span>
</div>
<div class="social-login">Login with your Social Media Account</div>
<div class="social-media-icons d-flex justify-content-center">
<ul>
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</form>
<div class="copy-text">Don't have an Account? <a href="">Sign Up</a></div>
</div>
<div class="col-md-8 banner-sec">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 750px">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://images.unsplash.com/1/work-stations-plus-espresso.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="banner-text">
<h2>TeachToLearn</h2>
<p>We provide video-based lessons covering entire NEB and TU syllabus. Hurry up and join to access all subjects videos for free.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="banner-text">
<h2>TeachToLearn</h2>
<p>We provide video-based lessons covering entire NEB and TU syllabus. Hurry up and join to access all subjects videos for free.</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://cdn.pixabay.com/photo/2015/04/20/13/17/work-731198_960_720.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="banner-text">
<h2>TeachToLearn</h2>
<p>We provide video-based lessons covering entire NEB and TU syllabus. Hurry up and join to access all subjects videos for free.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.login-block {
background: #de6262;
background: -webkit-linear-gradient(
to bottom,
#ffb88c,
#de6262
);
background: linear-gradient(
to bottom,
#ffb88c,
#de6262
);
float: left;
width: 100%;
height: 635px;
padding: 40px 0;
}
.form-control:focus {
border-color: #feb78b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
.container {
background: #fff;
border-radius: 10px;
box-shadow: 15px 20px 0px rgba(0, 0, 0, 0.1);
}
.carousel-inner {
border-radius: 0 10px 10px 0;
}
.carousel-caption {
text-align: left;
left: 5%;
}
.login-sec {
padding: 30px 30px;
position: relative;
min-height: 550px;
}
.banner-sec {
min-height: 550px;
}
.carousel-item img {
min-height: 550px;
}
.forgot {
transition: all 0.5s ease;
display: inline-block;
}
.forgot:hover {
transform: scale(1.1);
}
.login-sec .copy-text {
position: absolute;
width: 80%;
bottom: 20px;
font-size: 13px;
text-align: center;
}
.login-sec .copy-text a {
color: #de6262;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.login-sec .copy-text a:hover {
color: #feb78b;
text-decoration: underline;
}
.login-sec h2 {
margin-bottom: 20px;
font-weight: 800;
font-size: 30px;
color: #de6262;
}
.login-sec h2:after {
content: " ";
width: 100px;
height: 5px;
background: #feb58a;
display: block;
margin-top: 15px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
.login-button {
background: #feb78b;
border: 1px solid transparent;
height: 40px;
color: #fff;
font-weight: 600;
font-size: 18px;
background: -webkit-linear-gradient(right, #f44c4c, #de6262, #feb78b);
background: -o-linear-gradient(right, #f44c4c, #de6262, #feb78b);
background: linear-gradient(right, #f44c4c, #de6262, #feb78b);
background-size: 250% 100%;
background-position: 100% 50%;
transition: 0.6s;
cursor: pointer;
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
margin-top: 20px;
font-weight: bolder;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 50px;
height: 3px;
background: #de6262;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
.social-login {
margin-top: 10px;
text-align: center;
font-size: 14px;
font-weight: bolder;
}
.banner-text {
width: 80%;
position: absolute;
bottom: 20px;
padding-left: 15px;
}
.banner-text h2 {
color: #fff;
font-weight: 600;
}
.banner-text h2:after {
content: " ";
width: 100px;
height: 5px;
background: #fff;
display: block;
margin-top: 10px;
border-radius: 3px;
}
.banner-text p {
color: #fff;
}
.login-button:hover,
.login-button:focus {
background-position: 0% 50%;
transition: 0.6s;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
margin-top: 15px;
}
ul li {
position: relative;
display: block;
font-size: 30px;
height: 45px;
width: 45px;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
transition: 0.5s;
}
ul li:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: inherit;
width: inherit;
border-radius: 50%;
transform: scale(0.9);
z-index: -1;
transition: 0.5s;
}
.social-media-icons ul li .fab {
margin-left: 8px;
}
ul li:nth-child(1):before {
background: #4267b2;
}
ul li:nth-child(2):before {
background: #1da1f2;
}
ul li:nth-child(3):before {
background: #0072b1;
}
ul li:hover:before {
filter: blur(3px);
transform: scale(1.2);
}
ul li:nth-child(1):hover:before {
box-shadow: 0 0 15px #4267b2;
}
ul li:nth-child(2):hover:before {
box-shadow: 0 0 15px #1da1f2;
}
ul li:nth-child(3):hover:before {
box-shadow: 0 0 15px #0072b1;
}
ul li:nth-child(1):hover {
color: #456cba;
box-shadow: 0 0 15px #4267b2;
text-shadow: 0 0 15px #4267b2;
}
ul li:nth-child(2):hover {
color: #26a4f2;
box-shadow: 0 0 15px #1da1f2;
text-shadow: 0 0 15px #1da1f2;
}
ul li:nth-child(3):hover {
color: #0072b1;
box-shadow: 0 0 15px #0072b1;
text-shadow: 0 0 15px #0072b1;
}
$(document).ready(function () {
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
items: 1
});
});
