How to display buttons in a horizontal row?

Desired Output

I want to get the buttons aligned like the attached image but however, on executing the code, I am getting Output like this, where the buttons are below one another.
I have attached the HTML, CSS and JS code. I am new to UI design and so I am failing to find out the error in the CSS code.
I shall be very grateful if anyone suggests me how can I get the Desired Output.

$('.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>

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

Please try and shorten the code to a minimum. Check stackoverflow.com/help/mcve

– Jere
Nov 21 '18 at 20:17

Applied that and it worked! Thank you :D

– Sunandan Bhakat
Nov 21 '18 at 21:49

Possible duplicate of How do you make div elements display inline?

– Jere
Nov 22 '18 at 15:00

add a comment |

Desired Output

$('.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>

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

Please try and shorten the code to a minimum. Check stackoverflow.com/help/mcve

– Jere
Nov 21 '18 at 20:17

Applied that and it worked! Thank you :D

– Sunandan Bhakat
Nov 21 '18 at 21:49

Possible duplicate of How do you make div elements display inline?

– Jere
Nov 22 '18 at 15:00

add a comment |

Desired Output

$('.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>

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

Desired Output

$('.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>

$('.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>

$('.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>

javascript html css html5 css3

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

edited Nov 21 '18 at 21:27

Jere

531218

edited Nov 21 '18 at 21:27

Jere

531218

edited Nov 21 '18 at 21:27

Jere

531218

asked Nov 21 '18 at 20:14

Sunandan Bhakat

asked Nov 21 '18 at 20:14

Sunandan Bhakat

asked Nov 21 '18 at 20:14

Sunandan Bhakat

Please try and shorten the code to a minimum. Check stackoverflow.com/help/mcve

– Jere
Nov 21 '18 at 20:17

Applied that and it worked! Thank you :D

– Sunandan Bhakat
Nov 21 '18 at 21:49

Possible duplicate of How do you make div elements display inline?

– Jere
Nov 22 '18 at 15:00

add a comment |

Please try and shorten the code to a minimum. Check stackoverflow.com/help/mcve

– Jere
Nov 21 '18 at 20:17

Applied that and it worked! Thank you :D

– Sunandan Bhakat
Nov 21 '18 at 21:49

Possible duplicate of How do you make div elements display inline?

– Jere
Nov 22 '18 at 15:00

Please try and shorten the code to a minimum. Check stackoverflow.com/help/mcve

– Jere
Nov 21 '18 at 20:17

Applied that and it worked! Thank you :D

– Sunandan Bhakat
Nov 21 '18 at 21:49

Possible duplicate of How do you make div elements display inline?

– Jere
Nov 22 '18 at 15:00

add a comment |

1 Answer
1

active

oldest

votes

To achieve expected result , use below option of display: inline-block for footer divs

.footer > div{

   display:inline-block;

}

codepen - https://codepen.io/nagasai/pen/bQLYPM

Issue: div is block level element by default hence it is displaying footer divs in separate line

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419833%2fhow-to-display-buttons-in-a-horizontal-row%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

To achieve expected result , use below option of display: inline-block for footer divs

.footer > div{

   display:inline-block;

}

codepen - https://codepen.io/nagasai/pen/bQLYPM

Issue: div is block level element by default hence it is displaying footer divs in separate line

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

add a comment |

To achieve expected result , use below option of display: inline-block for footer divs

.footer > div{

   display:inline-block;

}

codepen - https://codepen.io/nagasai/pen/bQLYPM

Issue: div is block level element by default hence it is displaying footer divs in separate line

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

add a comment |

To achieve expected result , use below option of display: inline-block for footer divs

.footer > div{

   display:inline-block;

}

codepen - https://codepen.io/nagasai/pen/bQLYPM

Issue: div is block level element by default hence it is displaying footer divs in separate line

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

To achieve expected result , use below option of display: inline-block for footer divs

.footer > div{

   display:inline-block;

}

codepen - https://codepen.io/nagasai/pen/bQLYPM

Issue: div is block level element by default hence it is displaying footer divs in separate line

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

answered Nov 21 '18 at 21:43

Naga Sai A

5,5871825

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg