<!DOCTYPE html>
<html lang="en" class="lang="fr"">
<head>
<meta charset="UTF-8">
<title>CodePen - Login register bootstrap 4</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kaushan+Script'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a id="login" class="nav-link btn btn-primary btn-lg text-uppercase js-scroll-trigger" class="conn" href="#services">Login <i class="fa fa-lock"></i></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">
Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container content">
<div class="row">
<div class="card card-login mx-auto mt-5 col-md-8 col-lg-6">
<div class="card-header">Login</div>
<div class="card-body">
<form>
<div class="form-group">
<div class="form-label-group">
<label for="inputEmail">Email :</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="required" autofocus="autofocus">
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<label for="inputEmail">Password :</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="required">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">
Remember Password
</label>
</div>
</div>
<a class="btn btn-primary btn-block" href="index.html">Login</a>
</form>
<div class="text-center">
<a class="d-block medium" href="forgot-password.html">Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card card-register mx-auto mt-5 col-md-8">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form>
<div class="form-group">
<div class="form-row">
<div class="col-md-3">
<div>
<label>You are :</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Student
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Teacher
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<div class="form-label-group">
<label for="firstName">First name :</label>
<input type="text" id="firstName" class="form-control" placeholder="Enter your first name" required="required" autofocus="autofocus">
</div>
</div>
<div class="col-md-6">
<div class="form-label-group">
<label for="lastName">Second name :</label>
<input type="text" id="lastName" class="form-control" placeholder="Enter your family name" required="required">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<label for="inputEmail">Email :</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="required">
</div>
</div>
<div class="form-group">
<div class="form-label-group">
<label for="departement">Departement :</label>
<select id="departement" class="custom-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<div class="form-label-group">
<label for="inputTel">Phone number (Optional):</label>
<input type="text" id="inputTel" class="form-control" placeholder="+(212) 645 45 45 45" autofocus="autofocus">
</div>
</div>
<div class="col-md-6">
<div class="form-label-group">
<label for="inpudIdentity">Id number:</label>
<input type="text" id="inpudIdentity" class="form-control" placeholder="455454554" required="required">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<div class="form-label-group">
<label for="inputPassword">Password :</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="required">
</div>
</div>
<div class="col-md-6">
<div class="form-label-group">
<label for="inputPassword">Repeat password :</label>
<input type="password" id="confirmPassword" class="form-control" placeholder="Repeat password" required="required">
</div>
</div>
</div>
</div>
<a class="btn btn-primary btn-block" href="login.html">Register</a>
</form>
<div class="text-center">
<a class="d-block medium" href="forgot-password.html">Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card card-login mx-auto mt-5 col-md-6">
<div class="card-header">Reset Password</div>
<div class="card-body">
<div class="text-center mb-4">
<h4>Forgot your password?</h4>
<p>Enter your email address and we will send you instructions on how to reset your password.</p>
</div>
<form>
<div class="form-group">
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Enter email address" required="required" autofocus="autofocus">
</div>
</div>
<a class="btn btn-primary btn-block" href="login.html">Reset Password</a>
</form>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Your Website 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://github.com/ELMORABITYounes">
<i class="fa fa-github"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/younes.elmorabit.92">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/younes-elmorabit-2a162310b/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</footer>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script><script src="./script.js"></script>
</body>
</html>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
body {
background: url(https://pbs.twimg.com/media/DaxX-eAW4AUpDC-.jpg) no-repeat center center fixed;
background-size: cover;
overflow-x:hidden;
}
#mainNav {
background-color: darkslategrey;
}
#mainNav .navbar-toggler {
font-size: 12px;
right: 0;
padding: 13px;
text-transform: uppercase;
color: white;
border: 0;
background-color: #fed136;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#mainNav .navbar-brand {
color: #fed136;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
}
#mainNav .navbar-nav .nav-item .nav-link {
font-size: 90%;
font-weight: 400;
padding: 0.75em 0;
letter-spacing: 1px;
color: white;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@media (min-width: 992px) {
#mainNav {
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-moz-transition: padding-top 0.3s, padding-bottom 0.3s;
transition: padding-top 0.3s, padding-bottom 0.3s;
border: none;
background-color: transparent;
}
#mainNav .navbar-brand {
font-size: 1.75em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#mainNav .navbar-nav .nav-item .nav-link {
padding: 1.1em 1em;
}
#mainNav.navbar-shrink {
padding-top: 0;
padding-bottom: 0;
background-color: darkslategrey;
}
#mainNav.navbar-shrink .navbar-brand {
font-size: 1.25em;
padding: 12px 0;
}
}
#login{
border-radius:25px;
padding: 0.8em 1em !important;
margin-top:0.3em;
}
.content{
margin-top:20%;
margin-bottom: 5%;
}
.btn-primary:hover {
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important;
}
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
box-shadow:none;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
@media (min-width: 400px) {
.content{
margin-top:15% !important;
margin-bottom: 5%;
}
}
@media (min-width: 500px) {
.content{
margin-top:10% !important;
margin-bottom: 5%;
}
}
footer {
text-align: center;
background-color: white;
}
footer span.copyright {
font-size: 90%;
line-height: 40px;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
footer ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 40px;
display: block;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: #fed136;
}
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 56
});
// Collapse Navbar
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 10) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
// Hide navbar when modals trigger
$('.portfolio-modal').on('show.bs.modal', function(e) {
$(".navbar").addClass("d-none");
})
$('.portfolio-modal').on('hidden.bs.modal', function(e) {
$(".navbar").removeClass("d-none");
})
})(jQuery); // End of use strict