"Material Design Login - Register Form"
Bootstrap 3.3.0 Snippet by meduprise

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Selim Doyranlı Tarafından Hazırlanmıştır : 08.10.2016 | Material Form --> <!-- https://selimdoyranli.com --> <!-- http://www.radkod.com --> <!-- https://www.sanalyer.com --> <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Material Tasarım Giriş ve Kayıt Formu</title> <!-- Çekirdek CSS --> <link rel="stylesheet" type="text/css" href="https://selimdoyranli.com/cdn/material-form/css/grid12.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://selimdoyranli.com/cdn/material-form/css/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://selimdoyranli.com/cdn/material-form/css/jquery-ui.css" media="all"/> <link rel="stylesheet" type="text/css" href="https://selimdoyranli.com/cdn/material-form/css/animate.css" media="all"/> <!-- #Çekirdek CSS Bitiş --> <!-- Dışarıdan Çağırılan Dosyalar Font we Materyal İkonlar --> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- #Dışarıdan Çağırılan Dosyalar Font we Materyal İkonlar Bitiş --> <!-- Çekirdek Js --> <script type="text/javascript" src="https://selimdoyranli.com/cdn/material-form/js/jquery.min.js"></script> <script type="text/javascript" src="https://selimdoyranli.com/cdn/material-form/js/custom.js"></script> <script type="text/javascript" src="https://selimdoyranli.com/cdn/material-form/js/jquery-ui.js"></script> <!-- # Çekirdek JS Bitiş --> </head> <body> <!-- Kapsayıcı --> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 login-card"> <!-- Login (giriş) Form Sayfası --> <form id="login-form" class="col-lg-12"> <!-- Logo --> <div class="col-lg-12 logo-kapsul"> <img width="100" class="logo" src="https://selimdoyranli.com/cdn/material-form/img/logo.png" alt="" /> </div> <!-- #Logo Bitiş --> <div style="clear:both;"></div> <!-- Kullanıcı Adı Giriş İnput --> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-ikon">person_outline</i><span class="span-input">Kullanıcı Adınız</span></label> </div> <!-- #Kullanıcı Adı Giriş İnput Bitiş --> <!-- Şifre İnput Giriş--> <div class="group"> <input type="password" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-sifre-ikon">lock</i><span class="span-input">Şifre</span></label> </div> <!-- Şifre İnput Giriş Bitiş--> <!-- Giriş Yap Buton --> <a href="javascript:void(0);" class="giris-yap-buton">Giriş Yap</a> <!-- #Giriş Yap Buton Bitiş --> <!-- Şifremi Unuttum ve Kaydol Linkleri --> <div class="forgot-and-create tab-menu"> <a class="sifre-hatirlat-link" href="javascript:void('sifre-hatirlat-link');">Şifreni mi Unuttun ?</a> <a class="hesap-olustur-link" href="javascript:void('hesap-olustur-link');">Hesap Oluştur.</a> </div> <!-- Şifremi Unuttum ve Kaydol Linkleri Bitiş --> </form> <!-- #Login (giriş) Form Sayfası Bitiş --> <!-- Kayıt Form Sayfası --> <form id="kayit-form" class="col-lg-12"> <div class="col-lg-12 logo-kapsul"> <img width="100" class="logo" src="https://selimdoyranli.com/cdn/material-form/img/logo.png" alt="" /> </div> <div style="clear:both;"></div> <!-- Kayıt Form Kullanıcı Adı İnput --> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-ikon">person_outline</i><span class="span-input">Kullanıcı Adınız</span></label> </div> <!-- #Kayıt Form Kullanıcı Adı İnput Bitiş --> <!-- Kayıt Form Email İnput --> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-ikon">mail_outline</i><span class="span-input">E-Mail</span></label> </div> <!-- #Kayıt Form Email İnput Bitiş --> <!-- Kayıt Form Şifre İnput --> <div class="group"> <input type="password" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-sifre-ikon">lock</i><span class="span-input">Şifre</span></label> </div> <!-- #Kayıt Form Şifre İnput Bitiş --> <!-- Kayıt Form Şifre-Tekrarı İnput --> <div class="group"> <input type="password" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-sifre-ikon">lock</i><span class="span-input">Şifre Tekrarı</span></label> </div> <!-- #Kayıt Form Şifre-Tekrarı İnput Bitiş --> <!-- Kayıt Ol Buton --> <a href="javascript:void(0);" class="kayit-ol-buton">Kayıt Ol</a> <!-- #Kayıt Ol Buton Bitiş --> <!-- Zaten Hesap Var Link --> <a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Zaten Bir Hesabınız Var mı ? , Giriş Yapın.</a> <!--# Zaten Hesap Var Link Bitiş --> </form> <!-- ##Kayıt Form Sayfası Bitis --> <!-- Sifre Hatirlat Form Sayfası --> <form id="sifre-hatirlat-form" class="col-lg-12"> <div class="col-lg-12 logo-kapsul"> <img width="100" class="logo" src="https://selimdoyranli.com/cdn/material-form/img/logo.png" alt="" /> </div> <div style="clear:both;"></div> <!-- Şifre Hatırlat Email İnput --> <div class="group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons input-ikon">mail_outline</i><span class="span-input">E-Mail</span></label> </div> <!-- #Şifre Hatırlat Email İnput Bitiş --> <!-- Şifremi Hatırlat Buton --> <a href="javascript:void(0);" class="sifre-hatirlat-buton">Şifremi Hatırlat</a> <!-- #Şifremi Hatırlat Buton Bitiş --> <!-- Zaten Hesap Var Link --> <a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Zaten Bir Hesabınız Var mı ? , Giriş Yapın.</a> <!-- #Zaten Hesap Var Link Bitiş --> </form> <!-- ##Sifre Hatirlat Form Bitis --> </div> <!-- #Kapsayıcı Bitiş --> <div class="col-lg-8" style="padding:100px;"> <div class="col-lg-12"> <div class="container"> <h2>Download - Github : </h2> <a href="https://github.com/selimdoyranli/material-form" target="_blank">github.com/selimdoyranli/material-form</a> </div> </div> </div> </body> </html>

Questions / Comments: