<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="f_box" class="box first">
  <img class="glogo" src="https://img.clipartfest.com/30ed402cca7bf59609bd53448957f6cd_googles-new-logo-new-google-clipart_614-614.png">
  <div class="cont" id="cont">
  <div id="logo" class="logo">
    <i id="person" class="material-icons">person</i>
  </div>
    
  <form id="form1">
    
    <input id="f_email" type="text" placeholder="Enter your email">
    <span id="error-msg" class="error-msg">
      Please enter your email.
    </span>
    <input type="button" id="f_next" value="Next">
      <span>
        <a href="#">
          Find my account
        </a>
      </span>
    
    <p id="your_email" class="your_email"></p>
    <input id="f_pass" type="password" placeholder="Password">
    <span id="error-msg2" class="error-msg pass">
      Please enter your password.
    </span>
    <input type="button" id="f_sign" class="sign_in" value="Sign in">
    <span>
      <a href="#">Forgot password?
      </a>
    </span>
    <label>
      <input type="checkbox" class="remember">
      Stay signed in
      </label>
          
  </form>
  </cont>
</div>

@import "https://fonts.googleapis.com/icon?family=Material+Icons"

body
  margin: 0
  padding: 0
  font-size: 15px
.box
  width: 500px
  height: 500px
  border: 1px solid grey
.first .cont
  font-family: Arial, sans-serif
  margin-top: 100px
  margin-left: 75px
  border-radius: 5px
  width: 350px
  height: 300px
  background: #f7f7f7
  position: relative
  box-shadow: 0 2px 2px rgba(0,0,0,0.3)
  transition: height .2s ease-in-out
  overflow: hidden
.first input
  display: block
.first .glogo
  width: 200px
  position: absolute
  margin: 150px
.first .logo
  width: 100px
  height: 100px
  border-radius: 50%
  background: #e1e1e1
  position: absolute
  right: 125px
  top: 30px
  overflow: hidden
  display: flex
  justify-content: center
  transition: all .2s ease-in-out
  &.slide
    background: #9CC3FF
  & .material-icons
    font-size: 110px
    margin-top: 10px
    color: #bdbdbd
    transition: all .2s ease-in-out
    &.slide
      color: #4271DE
.first form
  & .error-msg
    color: #DD4B39
    float: left
    font-size: 0.85em
    margin: 10px 0
    display: none
  position: absolute
  top: 160px
  text-align: right
  width: 280px
  margin-left: 35px
  transition: transform .1s ease-in-out
  & a
    padding-top: 5px
    text-decoration: none
    font-size: 0.85em
    color: #498AF3
    float: right
    &:hover
      text-decoration: underline
  & input
    width: 280px
    box-sizing: border-box
    outline: none
    &[type="text"], &[type="password"]
      height: 40px
      font-size: 1.2em
      padding-left: 10px
      &:focus
        border: 1px solid #498AF3
        box-shadow: 1px 1px 1px 1px #eee inset
      &.wrong
        border: 1px solid #DD4B39
        backgroud: black
    &[type="button"]
      height: 35px
      margin-top: 7px
      background: #498AF3
      border: 1px solid #3079ED
      border-radius: 3px
      color: white
      font-weight: bold
      & .false
        border: 1px solid #DD4B39
      &:hover
        border: 1px solid #2862BF
        box-shadow: 0 0 5px 5px rgba(0,0,0,0.1) inset
    &[type="password"], &.sign_in, + span:last-of-type
      position: absolute
      top: 0px
      left: 350px
    &.sign_in
      top: 40px
    & + span:last-of-type
      top: 85px
      left: 510px
      text-align: right
      width: 120px
    &[type="checkbox"]
      float: left
      display: inline-block
      position: absolute
      width: 20px
      left: -25px
      top: -2px
      vertical-align: bottom
  & .error-msg.pass
    left: 350px
    position: absolute
    width: 100%
    text-align: left
    top: 15px
  & .your_email
    position: absolute
    width: 100%
    text-align: center
    left: 350px
    top: -40px
    color: #444
    font-size: 0.9em
  & label
    text-align: left

    position: absolute
    left: 370px
    top: 90px
    width: 120px
    font-size: 0.8em
.first form.slide
  transform: translateX(-350px) translateY(10px)
  
  

var google_next = document.getElementById("f_next"),
    google_sign = document.getElementById("f_sign");

google_next.addEventListener("click", function(){
    var email = document.getElementById("f_email").value,
        email_input = document.getElementById("f_email"),
        form = document.getElementById("form1"),
        logo = document.getElementById("logo"),
        person = document.getElementById("person"),
        yemail = document.getElementById("your_email");
        
  
  if (email){
    form.classList.add("slide");
    logo.classList.add("slide");
    person.classList.add("slide");
    document.getElementById("cont").style.height = "320px";
    yemail.innerHTML = email+"@gmail.com";   
  }
  else{
    document.getElementById("error-msg").style.display = "block";
    document.getElementById("cont").style.height = "320px";
    email_input.focus();
    email_input.classList.add("wrong");
  }
});

google_sign.addEventListener("click", function(){
  var pass = document.getElementById("f_pass").value,
      pass_input = document.getElementById("f_pass"),
      form = document.getElementById("form1"),
      yemail = document.getElementById("your_email");
  
    if(pass){
      $(".first .cont").fadeOut(600);}
    else{
      document.getElementById("cont").style.height = "340px";
      pass_input.style.top = "-20px";
      form.style.top = "190px";
      yemail.style.top = "-70px"
      document.getElementById("error-msg2").style.display = "block";
      pass_input.classList.add("wrong");
    }
});