<div class="container-fluid px-2 px-md-4 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-5">
<div class="card1 pb-5">
<div class="row px-3">
<h5 class="logo"><u>izylearning</u></h5>
</div>
<div class="row px-3 justify-content-center mt-4 mb-5">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" id="li1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" id="li2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" id="li3" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3" id="li4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4" id="li5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item card border-0 card-0">
<div class="text-center"> <img src="https://i.imgur.com/IjkibdE.jpg" class="img-fluid profile-pic"> </div>
<h6 class="font-weight-bold mt-5">John Paul</h6> <small class="mb-2">UI/UX Designer</small>
<hr width="50%">
<p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="carousel-item card border-0 card-0">
<div class="text-center"> <img src="https://i.imgur.com/oW8Wpwi.jpg" class="img-fluid profile-pic"> </div>
<h6 class="font-weight-bold mt-5">Ximena Vegara</h6> <small class="mb-2">UI/UX Designer</small>
<hr width="50%">
<p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="carousel-item active card border-0 card-0">
<div class="text-center"> <img src="https://i.imgur.com/EUYNvE1.jpg" class="img-fluid profile-pic"> </div>
<h6 class="font-weight-bold mt-5">Lena Maria</h6> <small class="mb-2">Backend Developer</small>
<hr width="50%">
<p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="carousel-item card border-0 card-0">
<div class="text-center"> <img src="https://i.imgur.com/ndQx2Rg.jpg" class="img-fluid profile-pic"> </div>
<h6 class="font-weight-bold mt-5">Richard Finch</h6> <small class="mb-2">UI/UX Designer</small>
<hr width="50%">
<p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="carousel-item card border-0 card-0">
<div class="text-center"> <img src="https://i.imgur.com/gazoShk.jpg" class="img-fluid profile-pic"> </div>
<h6 class="font-weight-bold mt-5">Marielle Haag</h6> <small class="mb-2">Backend Developer</small>
<hr width="50%">
<p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
<div class="row px-3 text-center justify-content-center mb-0 social"> <span class="fa fa-facebook-square mx-2"></span> <span class="fa fa-twitter mx-2"></span> <span class="fa fa-instagram mx-2"></span> <span class="fa fa-youtube-play mx-2"></span> </div>
</div>
</div>
<div class="col-lg-7">
<div class="card2 card border-0 px-4 px-sm-5 py-5"> <small class="text-right mb-3"><a href=""><u>I already have an account</u></a></small>
<h3 class="mb-1">Sign up to izylearning</h3>
<p class="mb-4 text-sm">Create our account and start learning with thousands of courses</p>
<div class="row mt-3">
<div class="col-md-6"> <label class="mb-0">
<h6 class="mb-0 text-sm">Full Name</h6>
</label> <input type="text" name="fname" placeholder="John Doe"> </div>
<div class="col-md-6"> <label class="mb-0">
<h6 class="mb-0 text-sm">Username</h6>
</label> <input type="text" name="uname" placeholder="johndoe123"> </div>
</div>
<div class="row px-3"> <label class="mb-0">
<h6 class="mb-0 text-sm">Email Address</h6>
</label> <input type="text" name="email" placeholder="
[email protected]"> </div>
<div class="row px-3"> <label class="mb-0">
<h6 class="mb-0 text-sm">Password</h6>
</label> <input type="password" name="password" placeholder="●●●●●●●●●●"> </div>
<div class="row px-3 mb-3"> <small class="text-muted">By signing up, you agree our <a href="" class="text-primary">Terms of services</a> and <a href="" class="text-primary">Privacy Policy</a></small> </div>
<div class="row mb-4">
<div class="col-md-6"> <button class="btn btn-blue text-center mb-1 py-2">Create Account</button> </div>
</div>
<div class="row px-3 mb-4">
<div class="line"></div> <small class="text-muted or text-center">OR</small>
<div class="line"></div>
</div>
<div class="row text-center">
<div class="col-sm-6">
<p class="social-connect"><span class="fa fa-facebook-square"></span><small class="pl-3 pr-1">Sign up with facebook</small></p>
</div>
<div class="col-sm-6">
<p class="social-connect"><span class="fa fa-google-plus"></span><small class="pl-3 pr-1">Sign up with google+</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
color: #000;
overflow-x: hidden;
height: 100%;
background-color: #EEEEEE;
background-repeat: no-repeat
}
a {
color: #000
}
.card0 {
box-shadow: 0px 4px 8px 0px #757575;
border-radius: 20px
}
.card1 {
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #512DA8;
height: 100%;
color: #fff;
padding-left: 13%;
padding-right: 13%
}
.logo {
margin-top: 30px;
margin-left: 15px;
cursor: pointer
}
.card2 {
border-bottom-right-radius: 20px;
border-top-right-radius: 20px
}
.social-connect .fa-google-plus {
color: #df4b37;
padding: 10px 12px;
font-size: 20px
}
.social-connect .fa-facebook-square {
color: #3b5998;
padding: 10px 15px;
font-size: 20px
}
.social-connect {
padding: 3px 0px 3px 3px;
border-radius: 10px;
cursor: pointer;
border: 1px solid #E0E0E0
}
.social-connect:hover {
background-color: #EEEEEE
}
.line {
height: 1px;
width: 45%;
background-color: #E0E0E0;
margin-top: 10px
}
.or {
width: 10%
}
.text-sm {
font-size: 14px !important
}
input {
padding: 10px 12px 10px 12px;
border: 1px solid lightgrey;
border-radius: 10px;
margin-bottom: 25px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 14px;
letter-spacing: 1px
}
input:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #512DA8;
outline-width: 0
}
::placeholder {
color: #EEEEEE;
opacity: 1
}
:-ms-input-placeholder {
color: #EEEEEE
}
::-ms-input-placeholder {
color: #EEEEEE
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.btn-blue {
background-color: #512DA8;
width: 100%;
color: #fff;
border-radius: 6px
}
.btn-blue:hover {
background-color: #311B92;
color: #fff;
cursor: pointer
}
.card-0 {
color: #311B92;
background-color: #fff;
border-radius: 20px;
min-height: 352px;
margin-top: 80px;
padding: 30px
}
.carousel-indicators {
position: absolute;
bottom: -100px;
display: -webkit-box !important
}
.carousel-indicators li {
cursor: pointer;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
opacity: 0.5;
margin: 5px !important
}
.carousel-indicators li.active {
opacity: 1;
width: 50px !important;
height: 50px !important;
margin-top: 0px !important;
border: 2px solid #fff
}
.carousel-indicators li#li1 {
background: url("https://i.imgur.com/IjkibdE.jpg") !important;
background-size: cover !important
}
.carousel-indicators li#li2 {
background: url("https://i.imgur.com/oW8Wpwi.jpg") !important;
background-size: cover !important
}
.carousel-indicators li#li3 {
background: url("https://i.imgur.com/EUYNvE1.jpg") !important;
background-size: cover !important
}
.carousel-indicators li#li4 {
background: url("https://i.imgur.com/ndQx2Rg.jpg") !important;
background-size: cover !important
}
.carousel-indicators li#li5 {
background: url("https://i.imgur.com/gazoShk.jpg") !important;
background-size: cover !important
}
.profile-pic {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px)
}
.content {
color: #000;
font-size: 14px
}
.social {
margin-top: 150px
}
@media screen and (max-width: 991px) {
.card1 {
border-bottom-left-radius: 0px;
border-top-right-radius: 20px
}
.card2 {
border-bottom-left-radius: 20px;
border-top-right-radius: 0px
}
}