<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login/Register modal v2</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid app">
<div class="navbar navbar-inverse navbar-fixed-top main-navigation-bar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">modalTest</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li class="highlight"><a href="#">get the app</a></li>
</ul>
</div>
</div>
</div>
<section class="row landing-content">
<div class="no-padding the-modal" v-bind:class="{ 'modal-switch' : isRight }">
<div class="col-xs-12 no-padding rect-head">
<div class="col-xs-6 rect-one" v-on:click="isRight = false">Sign In</div>
<div class="col-xs-6 rect-two" v-on:click="isRight = true">Sign Up</div>
</div>
<div class="col-xs-12 no-padding arrow-wrap">
<div class="arrow" v-bind:class="{ right : isRight }"></div>
</div>
<div class="form-handler">
<form v-bind:class="{ 'sign-in-form-hidden' : isRight }">
<h3>Email:</h3>
<input type="text" name="email">
<h3>Password:</h3>
<input type="password" name="password">
<input type="submit" name="submit">
<a class="forgot-pass" href="#">Forgot your password?</a>
</form>
<form class="sign-up-form-hidden" v-bind:class="{ 'sign-up-form-show' : isRight }">
<h3 class="sign-up-text">Email:</h3>
<input type="text" name="regEmail">
<h3 class="sign-up-text">Password:</h3>
<input type="password" name="regPassword">
<h3 class="sign-up-text">Re-Type Password:</h3>
<input type="password" name="regPassword">
<input type="submit" name="regSubmit">
<a class="reg-forgot-pass" href="#">Forgot your password?</a>
</form>
</div>
</div>
</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/loginregister-modal-v2-ZJPxQX */
.no-padding {
padding-left: 0px;
padding-right: 0px;
}
h3 {
color: #445156;
}
.main-navigation-bar {
background-color: #263439;
border: none;
}
.highlight {
background-color: #445156;
}
.landing-content {
margin-top: 50px;
height: 100vh;
min-height: 500px;
background-color: grey;
display: flex;
align-itmes: center;
justify-content: flex-end;
}
.the-modal {
width: 500px;
height: 100%;
margin-right: 10%;
background-color: #263439;
transition: all 0.2s ease;
}
.modal-switch {
background-color: #445156;
transition: all 0.2s ease;
}
.rect-one,
.rect-two {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #263439;
font-size: 20px;
cursor: pointer;
}
.rect-one {
background-color: #E1485E;
}
.rect-two {
background-color: #ED7E79;
}
.arrow {
float: left;
margin-left: 10px;
margin-bottom: 20px;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid #E1485E;
transition: all 0.2s ease;
}
.right {
margin-left: 450px;
margin-bottom: 20px;
border-top: 30px solid #ED7E79;
transition: all 0.2s ease;
}
.form-handler {
padding-left: 15px;
padding-right: 15px;
margin-top: 50px;
}
.sign-up-text {
color: #263439;
}
.sign-in-form-hidden {
display: none;
visibility: hidden;
}
.sign-up-form-hidden {
display: none;
visibility: hidden;
}
.sign-up-form-show {
display: inline;
visibility: visible;
}
input[type=text],
input[type=password] {
width: 100%;
height: 30px;
border: none;
border-bottom: 2px solid #E1485E;
background:transparent;
color: #445156;
padding-left: 10px;
}
input[name=email]:focus,
input[name=password] {
outline: none;
}
input[name=submit] {
width: 100%;
height: 30px;
margin-top: 30px;
margin-bottom: 20px;
border: none;
background-color: #E1485E;
}
input[name=submit]:focus {
outline: none;
}
input[name=regEmail],
input[name=regPassword] {
width: 100%;
height: 30px;
border: none;
border-bottom: 2px solid #ED7E79;
background:transparent;
color: #263439;
padding-left: 10px;
}
input[name=regEmail]:focus,
input[name=regPassword] {
outline: none;
}
input[name=regSubmit] {
width: 100%;
height: 30px;
margin-top: 30px;
margin-bottom: 20px;
border: none;
background-color: #ED7E79;
}
input[name=regSubmit]:focus {
outline: none;
}
.forgot-pass {
color: #44514D;
}
.reg-forgot-pass {
color: #263439;
}
/*Downloaded from https://www.codeseek.co/-Infamous/loginregister-modal-v2-ZJPxQX */
new Vue({
el: '.app',
data: {
isRight: false
}
});