Ytukyg

$('.form').find('input').on('keyup blur focus', function (e) {

  

  var $this = $(this),

      label = $this.prev('label');



	  if (e.type === 'keyup') {

			if ($this.val() === '') {

          label.removeClass('active highlight');

        } else {

          label.addClass('active highlight');

        }

    } else if (e.type === 'blur') {

    	if( $this.val() === '' ) {

    		label.removeClass('active highlight'); 

			} else {

		    label.removeClass('highlight');   

			}   

    } else if (e.type === 'focus') {

      

      if( $this.val() === '' ) {

    		label.removeClass('highlight'); 

			} 

      else if( $this.val() !== '' ) {

		    label.addClass('highlight');

			}

    }



});



$('.tab a').on('click', function (e) {

  

  e.preventDefault();

  

  $(this).parent().addClass('active');

  $(this).parent().siblings().removeClass('active');

  

  target = $(this).attr('href');



  $('.tab-content > div').not(target).hide();

  

  $(target).fadeIn(600);

  

});

*{

  box-sizing: border-box;

  margin:0px;

  padding:0px;

}





body {

  background:url(../background.jpg);

  /*font-family: 'Titillium Web', sans-serif;*/

  font-family: 'Roboto', sans-serif;

  background-size:cover;

}

.user{

width: 80px;

height: 80px;

border-radius: 50%;

position: relative;

top: -10px;

left: calc(50%-50px);

right: -170px;

}



a {

  text-decoration: none;

  color: #040675;

  transition: .5s ease;

}

a:hover {

  color: #179b77;

}



.form {

  padding: 40px;

  max-width: 500px;

  margin: 40px auto;

  border-radius: 4px;

  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);

  transition: .5s ease;

  position: relative;

  

}



.form:hover {

	box-shadow: 0px 0px 40px 16px rgba(18,18,18,1.00);

	}



.tab-group {

  list-style: none;

  padding: 0;

  margin: 0 5px 20px 0;

}

.tab-group:after {

  content: "";

  display: table;

  clear: both;

}

.tab-group li a {

  display: block;

  text-decoration: none;

  padding: 15px;

  background: #0C0E67;

  color: #fff;

  font-size: 20px;

  float: left;

  width: 50%;

  text-align: center;

  cursor: pointer;

  transition: .5s ease;

}

.tab-group li a:hover {

  background: #0C0E67;

  color: #ffffff;

}

.tab-group .active a {

  background:#1316FA;

  color: #ffffff;

}



.tab-content > div:last-child {

  display:none;

}



h1 {

  text-align: center;

  color: #fff;

  font-weight: 300;

  margin: 0 0 40px;

}



/*label {

  position: absolute;

  transform: translateY(6px);

  left: 13px;

  color: rgba(255,255,255,0.7);

  transition: all 0.25s ease;

  pointer-events: none;

  font-size: 22px;

}

label .req {

  margin: 2px;

  color: red;

}*/



label.active {

  transform: translateY(50px);

  left: 2px;

  font-size: 0px;

}

label.active .req {

  opacity: 0;

}



label.highlight {

  color: #000;

  margin-top:-10px;

}



/*input[type="radio"] {

  height: 10px;

  width: 10px;



  }*/



input[type="text"],input[type="email"],input[type="tel"],input [type="password"] {

  font-size: 18px;

  display: block;

  width: 100%;

  height: 100%;

  padding: 1px 3px;

  background-image: none;

  border: 1px solid #fff;

  color: #fff;

  border-radius: 0;

  transition: border-color .25s ease, box-shadow .25s ease;

}

input:focus{

  outline: 0;

  border-color: #000;

}



.field-wrap input{

  padding-left: 40px;

  width: 100%;

  height: 28px;

}



.field-wrap i{

  position: absolute;

  left:0;

  top: -5px;

  padding: 9px 8px;

  color: silver;

}

.field-wrap {

  position: relative;

  margin-bottom: 30px;

  

}



.top-row:after {

  content: "";

  display: table;

  clear: both;

}

.top-row > div {

  float: left;

  width: 48%;

  margin-right: 4%;

}

.top-row > div:last-child {

  margin: 0;

}





.button {

  border: 0;

  outline: none;

  border-radius: 20px;

  cursor: pointer;

  padding: 5px 5px;

  font-size: 2rem;

  font-weight: 50rem;

  text-transform: uppercase;

  letter-spacing: .1em;

  background: rgb(54, 57, 221);

  color: #ffffff;

  transition: all 0.5s ease;

}

.button:hover, .button:focus {

  background: #1316FA;

}



.bday,

.form-gender{

position: relative;

margin-bottom: 20px;

color: #fff;

}

.button-block {

  display: block;

  width: 100%;

}



.forgot {

  margin-top: -20px;

  text-align: right;

  margin-bottom:10px;

}

fieldset.date { 

  margin: 0; 

  padding: 0; 

  padding-left: 20px; 

  padding-bottom: .5em; 

  display: block; 

  border: none; 

} 

fieldset.date legend { 

  margin: 0; 

  padding: 0; 

  margin-top: .25em; 

  font-size: 100%; 

} 





fieldset.date label { 

  position: absolute; 

  top: -20em; 

  left: -200em; 

} 



fieldset.date select { 

margin: 0; 

padding: 0; 

font-size: 100%; 

display: inline; 

} 



.birth{

  padding-left: 30px;

  padding-right: 34px;

  padding-bottom: 8px;

}



#check1{

  padding-bottom: 10px;

  color: #fff;

}

#check2{

  color: #fff;

}



.footer{

  position: relative;

 /* width: 70%

  padding-left: 180px;*/

  text-align: right;

  color: #fff;

  margin-top: 20px;

}



.footer> div.social{

position: relative;

float: right;

color:#fff;

font-size:19px;

cursor: pointer;

}



.footer i{

  position: relative;

  width: 60px;

  height:40px;

  left:0px;

  line-height: 40px;

  background: rgb(0,0,0,0);

  text-align: center;

}



.footer.facebook{

  background: #3b5999;

}



.footer.linkedin{

  background: #0077B5;

}



.footer.google{

  background: #dd4b39;

}

<!DOCTYPE html>

<html>

<head>

  <title>Sign-Up/Login Form</title>

  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css"> 

</head>



<body>

  <div class="form">

      

      <ul class="tab-group">

        <li class="tab active"><a href="#signup">Sign Up</a></li>

        <li class="tab"><a href="#login">Log In</a></li>

      </ul>

      

      <div class="tab-content">

        <div id="signup">   

        

          <form action="" method="post">

          

         

            <div class="field-wrap">

              <input type="text" placeholder="First Name" required autocomplete="off" />

              <i class="fa fa-user icon"></i>

            </div>

        

            

          <div class="field-wrap">

              

            <input type="text" placeholder="Last Name" required autocomplete="off"/>

            <i class="fa fa-user icon"></i>

          </div>



          <div class="field-wrap">

            

            <input type="email" placeholder="E-mail" required autocomplete="off"/>

            <i class="fa fa-envelope icon"></i>

          </div>

          

          



          <div class="field-wrap">

              <input type="tel" placeholder="Phone" required autocomplete="off"/>

              <i class="fa fa-phone icon"></i>

            </div>

          

            <div class="field-wrap">

                <input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off"/>

                <i class="fa fa-map-marker icon"></i>

              </div>



              <div class="bday">

                  <labe>

                      Birthday<br>

                    </label>

                    <select name="DoBday" class="birth">

                        <option >Month</option>

                        <option value="1"> 1 </option>

                        <option value="2"> 2 </option>

                        <option value="3"> 3 </option>

                        

                  </select>

                  <select name="DoBMonth" class="birth">

                      <option >Day</option>

                      <option value="January"> January </option>

                      <option value="February"> February </option>

                      <option value="March"> March </option>

                      

                  </select>

                  

                      <select name="DoByear" class="birth">

                              <option>Year</option>

                              <option value="2000"> 2000 </option>

                              <option value="1990"> 1990 </option>

                              <option value="1991"> 1991 </option>

                              

                       </select>

              </div>



              <div class="form-gender">

                  <span id="gend">

                          Gender<br>

                   </span>

                  <input type="radio" name="male" value="male" id="" checked> Male &nbsp; &nbsp; &nbsp;

                  <input type="radio" name="male" value="female" id=""> Female &nbsp; &nbsp; &nbsp;

                  <input type="radio" name="male" value="other" id=""> Other

              </div>



              <div class="field-wrap">

                  <input type="password" placeholder="Password" required autocomplete="off"/>

                  <i class="fa fa-lock icon"></i>

                </div>



              <div class="field-wrap">

                 <input type="password" placeholder="Confirm Password" required autocomplete="off"/>

                  <i class="fa fa-lock icon"></i>

              </div>

              <div id="check1">

                  <input type="checkbox"  id="chk1"> I accept the <a href="#" style="color:dodgerblue">Terms </a>and <a href="#" style="color:dodgerblue">Conditions</a>

              </div>

          <button type="submit" class="button button-block"/>Register </button>

          

          </form>



        </div>

        

        <div id="login">   

      

         <img src="./user.png" class="user">

          

          <form action="/" method="post">

          

           <div class="field-wrap">

            

            <input type="email" placeholder="E-mail" required autocomplete="off"/>

            <i class="fa fa-envelope icon"></i>

          </div>

          

          <div class="field-wrap">

            <input type="password" placeholder="Password" required autocomplete="off"/>

            <i class="fa fa-lock icon"></i>

          </div>

          <div id="check2">

              <input type="checkbox"  id="chk2"> Remember Me

          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          

          <button class="button button-block"/>Log In</button>

          <!--<div class="span">

            <span>OR</span>

          </div>-->

          <div class="footer">

            OR Login With

            <div class="social-facebook">

                <i class="fa fa-facebook" aria-hidden="true"></i>

            </div>

            <div class="social-linkedin">

                <i class="fa fa-linkedin" aria-hidden="true"></i>

            </div>

            <div class="social-google">

                <i class="fa fa-google-plus" aria-hidden="true"></i>

            </div>

          </div>

          

          </form>



        </div>

        

      </div><!-- tab-content -->

      

</div> <!-- /form -->

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script  src="js/index.js"></script>



</body>

</html>