<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css
">
</head>
<body >
<button type="button" class="btn btn-danger" data-toggle="modal" data-target=".loginModal">Login</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target=".registerModal">Register</button>
<!--LOGİN MODAL -->
<div class="modal fade loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal">
<div class="modal-dialog modal-sm" role="document">
<form class="login">
<div class="text-center"><img src="http://cdn.pcwallart.com/images/rockstar-games-logo-png-wallpaper-3.jpg" width="100" alt=""></div>
<div class="form-group">
<label for="inputUsername"></label>
<input type="name" class="loginstyle" id="inputUsername" placeholder=" Username" style="font-family:Arial, FontAwesome">
</div>
<div class="form-group">
<label for="inputPassword"></label>
<input type="password" class="loginstyle" id="inputPassword" placeholder=" Password" style="font-family:Arial, FontAwesome">
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg ">Login</button>
</div>
</form>
</div>
</div>
<!--REGİSTER MODAL -->
<div class="modal fade registerModal" tabindex="-1" role="dialog" aria-labelledby="RegisterModal">
<div class="modal-dialog modal-sm" role="document">
<form class="login col-md-12" id="register">
<div class="text-center"><img src="http://cdn.pcwallart.com/images/rockstar-games-logo-png-wallpaper-3.jpg" width="100" alt=""></div>
<div class="pull-left inputRegister">
<div class="form-group">
<label for="inputRegisterUsername"></label>
<input type="name" class="registerstyle" min="1" max="5" id="inputRegisterUsername" placeholder=" Username" style="font-family:Arial, FontAwesome">
</div>
<div class="form-group">
<label for="inputRegisterPasswordConfirm"></label>
<input type="password" class="registerstyle" min="5" max="10" id="inputRegisterPasswordConfirm" placeholder=" Password confirm" style="font-family:Arial, FontAwesome">
</div>
</div>
<div class="inputRegister pull-right">
<div class="form-group">
<label for="inputRegisterPassword"></label>
<input type="password" class="registerstyle" min="5" max="10" id="inputRegisterPassword" placeholder=" Password" style="font-family:Arial, FontAwesome">
</div>
<div class="form-group">
<label for="inputRegisterEmail"></label>
<input type="e-mail" class="registerstyle" id="inputRegisterEmail" placeholder=" E-mail " style="font-family:Arial, FontAwesome">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg ">Register</button>
</div>
</form>
</div>
</div>
</body>
</html>
body{
background: url("http://jodahome.com/wp-content/uploads/2015/07/The-Crew-2014-Game-HD-Wallpaper-Backgrounds.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.login{
padding: 40px;
margin-top: 50px;
border: 5px solid rgba(0, 0, 0, 0.44);
border-radius: 5px;
background: rgba(0, 0, 0, 0.4);
}
.loginstyle{
height: 54px;
padding: 11px 12px;
font-size: 16px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
width: 100%;
}
#register{
position: relative;
width: 420px;
right: 30px;}
.registerstyle{
border-radius: 10px;
height: 40px;
padding: 11px 12px;
font-size: 16px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
width: 100%;
}
.inputRegister{
width: 180px;
}
::-webkit-input-placeholder {
color: black;
}
:-moz-placeholder { /* Firefox 18- */
color: black;
}
::-moz-placeholder { /* Firefox 19+ */
color: black;
}
:-ms-input-placeholder {
color: black;
}
