<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="login"> <div class="container"> <div class="col-lg-6 col-lg-offset-3"> <h1 class="horizontal">Contact Us</h1> <div class="inner-form"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">LOGIN</a></li> <li><a href="#tab2" data-toggle="tab">SIGN UP</a></li> </ul> <div class="tab-content"> <div class="tab-pane active in fade" id="tab1"> <div class="panel-group"> <form role="form"> <div class="row"> <div class="col-lg-12"> <label>Name</label> <div class="form-group"> <input type="text" name="name" id="ad_soyad" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <label>Email</label> <div class="form-group"> <input type="email" name="email" id="email" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <button type="submit" class="btn btn-default"> <span>LOGIN</span> </button> </div> <div class="col-lg-12"> <div class="forgot"> <p>Forgot Password ?</p> </div> </div> </div> </form> </div> </div> <div class="tab-pane fade" id="tab2"> <div class="panel-group"> <form role="form"> <div class="row"> <div class="col-lg-12"> <label>Name</label> <div class="form-group"> <input type="text" name="name" id="ad_soyad" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <label>Email</label> <div class="form-group"> <input type="email" name="email" id="email" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <label>Password</label> <div class="form-group"> <input type="password" name="password" id="password" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <label>Password Again</label> <div class="form-group"> <input type="password" name="password2" id="email" class="form-control" placeholder=""> </div> </div> <div class="col-lg-12"> <button type="submit" class="btn btn-default"> <span>SIGN UP</span> </button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700'); .login { font-family: 'Josefin Sans', sans-serif; background: #2c3346; padding: 60px 0px; } h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 600; text-transform: capitalize; text-align: center; color: #FFF; margin: 40px 0px; } .inner-form { background: #FFF; padding: 80px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4); } label { font-weight: 400; font-size: 15px; } .form-control { background-color: #f5f5f5; box-shadow: none; color: #565656; font-size: 14px; padding: 30px 10px; margin-bottom: 30px; } .btn { background: #36d1dc; background: -webkit-linear-gradient(to right, #36d1dc, #5b86e5); background: linear-gradient(to right, #36d1dc, #5b86e5); color: #FFF; border-radius: 6px; padding: 20px 40px; margin: 0 auto; display: table; } .forgot { text-align: center; margin-top: 30px; font-size: 15px; text-decoration: underline; } .nav-tabs { border: none; margin: 0 auto; display: table; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border: none; font-size: 16px; } .nav>li>a { font-size: 16px; color: #3ec2de; }