"login & register page responsive"
Bootstrap 4.1.1 Snippet by ali27001

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!-- logoları değiştirin edit logos --> <!-- start banner Area --> <section class="banner-area relative style" style=" background-image: linear-gradient(#fffabe, #d3f8ff);" id="home" data-parallax="scroll" data-image-src="http://www.blogmais.org/ourimg/big/0/1532_wallpaper-website.jpg"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="teklif pt-100 pb-100"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-home" aria-selected="true">Giriş Yap</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-uye-ol" role="tab" aria-controls="nav-profile" aria-selected="false">Üye Ol</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-login" role="tabpanel" aria-labelledby="nav-home-tab"> <form> <div class="wc-social-login form-row-wide"> <p class="mt-2">Daha hızlı giriş yapmak veya kolay kayıt için bir sosyal hesap kullanın.</p> <a href="#" class="button-social-login button-social-login-facebook"><img src="https://cdn.techgyd.com/50-Best-Facebook-Logo-Icons-GIF-Transparent-PNG-Images-54.png" class="arac-icon" alt="facebook ile giriş">Facebook ile Giriş</a> <a href="#" class="button-social-login button-social-login-google"><img src="https://img.icons8.com/ios/1600/google-logo.png" class="arac-icon" alt="google ile giriş">Google ile Giriş</a> </div> <p class="wc-social-login-divider"> <span>ya da</span> </p> <div class="form-group"> <label>Email adresiniz</label> <input type="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <label>Şifre</label> <input type="password" class="form-control" placeholder="**** "> </div> <button type="submit" class="btn btn-primary btn-large btn-block">Giriş Yap</button> </form> </div> <div class="tab-pane fade" id="nav-uye-ol" role="tabpanel" aria-labelledby="nav-profile-tab"> <form> <div class="wc-social-login form-row-wide"> <p class="mt-2">Daha hızlı giriş yapmak veya kolay kayıt için bir sosyal hesap kullanın.</p> <a href="#" class="button-social-login button-social-login-facebook"><img src="img/facebook.svg" class="arac-icon" alt="facebook ile giriş">Facebook ile Giriş</a> <a href="#" class="button-social-login button-social-login-google"><img src="img/google.svg" class="arac-icon" alt="google ile giriş">Google ile Giriş</a> </div> <p class="wc-social-login-divider"> <span>ya da</span> </p> <div class="from-row"> <div class="form-group col-m-6"> <label>Ad</label> <input type="text" class="form-control" placeholder="ad"> </div> <div class="form-group col-m-6"> <label>Soyad</label> <input type="text" class="form-control" placeholder="soyad"> </div> </div> <div class="form-group"> <label>Email adresiniz</label> <input type="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <label>Şifre</label> <input type="password" class="form-control" placeholder="**** "> </div> <div class="form-group"> <div class="form-check"> <input style=" left: 20px;" type="checkbox" class="form-check-input" id="dropdownCheck2"> <label class="form-check-label" for="dropdownCheck2"> <a href="#" class="">Üyelik Sözleşmesi</a>'ni okudum ve kabul ediyorum. </label> </div> </div> <button type="submit" class="btn btn-primary btn-large btn-block">Üye Ol</button> </form> </div> </div> </div> </div> <div class="col-md-6"> <!--bu kısmı değiştirin şimdi burada yayınlanmasını ıstemedıgım yerler vardı sıldım. Tasarımda bozuk olmasın dıye ıdareten kouydum --> <div class="mt-4 pt-4 pt-100 pb-100"> <h4>2.300'den fazla üye ağına erişim</h4> <p>Alın kullanın beyler, Login sayfası ve register istediğiniz gibi değiştirin</p> <p><i>iyilik yap denize at balık bilmezse halik bilir!</i></p> </div> </div> </div> </div> </section> <!-- End banner Area -->
.relative { position: relative; } .teklif{ color:#000; margin-top: 51px; margin-bottom: 20px; box-shadow: -2px -2px 7px 5px rgba(8, 8, 8, 0.62); padding: 45px; border-radius: 10px; background: white; } .button-social-login{ } .wc-social-login a.button-social-login { text-align: center; text-shadow: none; line-height: normal; font-weight: 400; Üye Ol Daha hızlı giriş yapmak veya kolay kayıt için bir sosyal hesap kullanın. facebook ile girişFacebook ile Giriş google ile girişGoogle ile Giriş ya da Email adresiniz Email Şifre **** 2.3 border: 0; margin: 0 0 1em; padding: 6px 0; box-shadow: none; display: block; border-radius: 3px; color: #fff; } .wc-social-login a.button-social-login .si { color: #fff; border: 0; padding: 0; vertical-align: middle; background-size: 1.75em; background-color: transparent; border-radius: 0; } .wc-social-login .button-social-login-facebook{ background: #3b5998; } .wc-social-login .button-social-login-google{ background: #DA4735; } .wc-social-login .arac-icon{ width: 20px; margin-right: 10px; } .wc-social-login-divider { text-align: center; overflow: hidden; } .wc-social-login-divider span { display: inline-block; position: relative; } .wc-social-login-divider span:before { right: 100%; margin-right: 15px; background: #eee; } .wc-social-login-divider span:after { left: 100%; margin-left: 15px; background: #eee; } .wc-social-login-divider span:after, .wc-social-login-divider span:before { content: ' '; position: absolute; width: 600px; height: 1px; background: #eee; top: 13px; }

Related: See More


Questions / Comments: