<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?st?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 Giris ve Kay?t Formu</title>
<!-- D?sar?dan Cag?r?lan Dosyalar Font we Materyal Ikonlar -->
<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?sar?dan Cag?r?lan Dosyalar Font we Materyal Ikonlar Bitis -->
</head>
<body>
<!-- Kapsay?c? -->
<div class="col-lg-4 col-md-7 col-sm-6 col-xs-12 login-card">
<!-- Login (giris) 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="Logo" />-->
<img width="100" class="logo" src="http://99px.ru/sstorage/53/2016/05/tmb_164681_9449.jpg" alt="Logo" />
</div>
<!-- #Logo Bitis -->
<div style="clear:both;"></div>
<!-- Kullan?c? Ad? Giris Input -->
<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? Giris Input Bitis -->
<!-- Sifre Input Giris-->
<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">Sifre</span></label>
</div>
<!-- Sifre Input Giris Bitis-->
<!-- Giris Yap Buton -->
<a href="javascript:void(0);" class="giris-yap-buton">Giris Yap</a>
<!-- #Giris Yap Buton Bitis -->
<!-- Sifremi Unuttum ve Kaydol Linkleri -->
<div class="forgot-and-create tab-menu">
<a class="sifre-hatirlat-link" href="javascript:void('sifre-hatirlat-link');">Sifreni mi Unuttun ?</a>
<a class="hesap-olustur-link" href="javascript:void('hesap-olustur-link');">Hesap Olustur.</a>
</div>
<!-- Sifremi Unuttum ve Kaydol Linkleri Bitis -->
</form>
<!-- #Login (giris) Form Sayfas? Bitis -->
<!-- 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="Logo" />
</div>
<div style="clear:both;"></div>
<!-- Kay?t Form Kullan?c? Ad? Input -->
<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? Input Bitis -->
<!-- Kay?t Form Email Input -->
<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 Input Bitis -->
<!-- Kay?t Form Sifre Input -->
<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">Sifre</span></label>
</div>
<!-- #Kay?t Form Sifre Input Bitis -->
<!-- Kay?t Form Sifre-Tekrar? Input -->
<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">Sifre Tekrar?</span></label>
</div>
<!-- #Kay?t Form Sifre-Tekrar? Input Bitis -->
<!-- Kay?t Ol Buton -->
<a href="javascript:void(0);" class="kayit-ol-buton">Kay?t Ol</a>
<!-- #Kay?t Ol Buton Bitis -->
<!-- Zaten Hesap Var Link -->
<a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Zaten Bir Hesab?n?z Var m? ? , Giris Yap?n.</a>
<!--# Zaten Hesap Var Link Bitis -->
</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="Logo" />
</div>
<div style="clear:both;"></div>
<!-- Sifre Hat?rlat Email Input -->
<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>
<!-- #Sifre Hat?rlat Email Input Bitis -->
<!-- Sifremi Hat?rlat Buton -->
<a href="javascript:void(0);" class="sifre-hatirlat-buton">Sifremi Hat?rlat</a>
<!-- #Sifremi Hat?rlat Buton Bitis -->
<!-- Zaten Hesap Var Link -->
<a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Zaten Bir Hesab?n?z Var m? ? , Giris Yap?n.</a>
<!-- #Zaten Hesap Var Link Bitis -->
</form>
<!-- ##Sifre Hatirlat Form Bitis -->
</div>
<!-- #Kapsay?c? Bitis -->
<!-- this page github link -->
<div style="position:fixed; top:10px; right:10px; padding:25px; background:#fff; border:1px solid #ddd;">
<a href="https://github.com/selimdoyranli/material-form" target="_blank" style="color:#666; font-size:20px;">Material Form'u Github'da Goruntule.</a>
</div>
<!-- #this page github link end -->
</body>
</html>
body {
margin: 0;
padding: 0;
background:#222222;
font-family: roboto;
display:flex; /* You delete it on your web page */
justify-content:center;/* and this - delete */
}
a:hover,
a:focus {
text-decoration: none;
color: #eee;
}
.login-card {
min-height: 100vh;
/*background-image: url('https://selimdoyranli.com/cdn/material-form/img/bg.jpg');*/
/*background-image: url('http://99px.ru/sstorage/53/2016/05/tmb_164681_9449.jpg');*/
background-image: url('https://yt3.ggpht.com/-pf8nmBxKM2Y/AAAAAAAAAAI/AAAAAAAAAAA/jf29B1wrwSs/s900-c-k-no-mo-rj-c0xffffff/photo.jpg');
background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-wenkit-background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
z-index: 2;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: roboto!important;
}
.login-card:after {
/*background: linear-gradient(-135deg, rgb(63, 81, 181), rgb(233, 30, 99));*/
/* Login Card Arkaplan Rengi */
/*background: -webkit-linear-gradient(-135deg, rgb(63, 81, 181), rgb(233, 30, 99));*/
/* Login Card Arkaplan Rengi */
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
opacity: 0.8;
z-index: 3;
}
.login-card > form {
z-index: 4;
position: relative;
padding: 0px 25px;
width: 100%;
}
.logo-kapsul {
text-align: center;
position: relative;
opacity: 0.8;
}
.logo {
height: auto;
/*width: 400px;*/
padding: 50px 0px;
display: none;
}
/* form baslang?c stiller ------------------------------- */
.group {
position: relative;
margin-bottom: 45px;
}
.group input {
font-size: 18px;
padding: 10px 10px 10px 10px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
background: none;
color: #eee;
}
.group input:focus {
outline: none;
}
/* LABEL ======================================= */
.group label {
color: rgba(255, 255, 255, 0.5);
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 5px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active durum */
.group input:focus ~ label,
input:valid ~ label {
top: -20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before,
.bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: rgba(255, 255, 255, 0.7);
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active durum bar */
.group input:focus ~ .bar:before,
.group input:focus ~ .bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position: absolute;
height: 0%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active durum */
.group input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* form animasyon ================ */
@-webkit-keyframes inputHighlighter {
from {
background: rgba(255, 255, 255, 0.7);
}
to {
width: 0;
background: transparent;
}
}
@-moz-keyframes inputHighlighter {
from {
background: rgba(255, 255, 255, 0.7);
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: rgba(255, 255, 255, 0.7);
}
to {
width: 0;
background: transparent;
}
}
.input-ikon {
font-size: 25px!important;
position: relative;
}
.input-sifre-ikon {
font-size: 22px!important;
position: relative;
}
.span-input {
margin-left: 10px;
position: relative;
top: -5px;
}
.giris-yap-buton,
.kayit-ol-buton,
.sifre-hatirlat-buton {
background-color: rgba(255, 255, 255, 0.7);
/*background: linear-gradient(-135deg, rgb(63, 81, 181), rgb(233, 30, 99));*/
/*background: -webkit-linear-gradient(-135deg, rgb(63, 81, 181), rgb(233, 30, 99));*/
display: block;
text-align: center;
text-decoration: none;
color: #111111;
font-family: roboto;
font-weight: 100;
padding: 10px;
border-radius: 3px;
outline: none;
opacity: 0.8;
}
.forgot-and-create {
margin: 20px 0px;
}
.forgot-and-create a {
color: #bbb;
font-size: 12px;
text-decoration: none;
font-weight: 100;
margin-right: 10px;
}
/* Gecis Links Forgot and Create */
.zaten-hesap-var-link {
color: #bbb;
font-size: 14px;
padding: 20px 0px;
text-decoration: none;
display: block;
}
// https://selimdoyranli.com
// https://www.RadKod.com
$(document).ready(function(){
//Kaydol - Şifre Unuttum Linkleri Arası Geçiş
$(document).ready(function(){
$("#kayit-form").hide();
$("#sifre-hatirlat-form").hide();
$(".hesap-olustur-link").click(function(e){
$("#login-form").slideUp(0);
$("#kayit-form").fadeIn(300);
});
$(".zaten-hesap-var-link").click(function(e){
$("#kayit-form").slideUp(0);
$("#sifre-hatirlat-form").slideUp(0);
$("#login-form").fadeIn(300);
});
$(".sifre-hatirlat-link").click(function(e){
$("#login-form").slideUp(0);
$("#sifre-hatirlat-form").fadeIn(300);
});
});
});
