Item: Login/Register modal v2
Rating: 3.4
Author: -Infamous

3 Downloads
143 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!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
  }
});

Comments

More from -Infamous

Login/Register modal v2

In this example below you will see how to do a Login/Register modal v2 with some HTML / CSS and Javascript

Technologies

Comments

More from -Infamous

A Pen by Greg J Bales

A Pen by Greg J Bales

A Pen by Greg J Bales

get a string after a specific character js

You Might Also Like

Your Device Info

Gooey effect

Use the Twitchtv JSON API 2

Google inspired icon hover effect

Sass 迴圈變數與內容

A Pen by Kiki Nazari

index

Twitch.TV Channels