<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 Design Fullscreen Form</title>
<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">
</head>
<body>
<div class="login-card">
<form id="login-form" class="col-lg-12">
<div class="col-lg-12 logo-kapsul">
<h1><div class="logo-title">LOGIN FORM</div></h1>
</div>
<div style="clear:both;"></div>
<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">USERNAME</span></label>
</div>
<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">Password</span></label>
</div>
<a href="javascript:void(0);" class="giris-yap-buton">Login</a>
<div class="forgot-and-create tab-menu">
<a class="sifre-hatirlat-link" href="javascript:void('sifre-hatirlat-link');">Forgot ?</a>
<a class="hesap-olustur-link" href="javascript:void('hesap-olustur-link');">Register</a>
</div>
</form>
<!-- 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ı İ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">Username</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">Password</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">Password Again</span></label>
</div>
<!-- #Kayıt Form Şifre-Tekrarı İnput Bitiş -->
<!-- Kayıt Ol Buton -->
<a href="javascript:void(0);" class="kayit-ol-buton">Register</a>
<!-- #Kayıt Ol Buton Bitiş -->
<!-- Zaten Hesap Var Link -->
<a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Already have an account? Login.</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="Logo" />
</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">Send Password</a>
<!-- #Şifremi Hatırlat Buton Bitiş -->
<!-- Zaten Hesap Var Link -->
<a class="zaten-hesap-var-link" href="javascript:void('zaten-hesap-var-link');">Back to Login</a>
<!-- #Zaten Hesap Var Link Bitiş -->
</form>
<!-- ##Sifre Hatirlat Form Bitis -->
</div>
</body>
</html>
body {
background:#eee;
font-family: roboto;
}
a:hover,
a:focus {
text-decoration: none;
color: #eee;
}
.logo-title{
color:white;
}
.login-card {
width: 100%;
height: 100%;
background-image: url('http://www.shunvmall.com/data/out/34/47112240-blurred-wallpaper.jpg');
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-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);
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;
padding: 50px 0px;
}
/* form başlangıç 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: 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: #eee;
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;
}
/* Geçiş 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);
});
});
});
