<html lang="en"><head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Flatix Login Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<style>
@charset "utf-8";
/* CSS Document */
/*
www.ahmetkaplan.net
Author: Ahmet KAPLAN
Name: Flatix UI
*/
/* Css Sifirlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, th {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus, a:focus, a:active{ outline: 0; }
/* remember to highlight inserts somehow! */
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: collapse; border-spacing: 0;}
/* float uygulanan elemanlari kapsayamama sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/* Css Sifirlama */
html{height: 100%; background-color: #ecf0f1;}
body{font-family: 'Open Sans', sans-serif; font-size: 12px;}
.t{clear: both;}
#flatix{width: 300px; height: 420px; top:50%; left: 50%; margin-left: -150px; margin-top: -210px; position: absolute; background-color: white; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;}
header{width: 260px; height: auto; text-align: center; padding: 20px; color: white; background-color: #34495e; -moz-border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; -khtml-border-top-right-radius: 5px;}
h1.title{font-size: 20px; font-weight: 400; text-shadow: 1px 1px 1px #2c3e50;}
section{width: 260px; height: auto; padding: 20px;}
.loginform a{font-size: 11px; color: #7f8c8d;}
.loginform a:hover{text-decoration: underline;}
.mail{width: 202px; height: auto; padding: 17px 17px 17px 40px; font-size: 15px; color: #7f8c8d; background: #ecf0f1 url(http://www.ahmetkaplan.net/calismalar/flatixlogin/images/user.png) no-repeat 12px; margin-bottom: 10px; border:0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; ransition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.mail:hover{box-shadow: 0px 0px 5px #3498db;}
.mail:focus{box-shadow: 0px 0px 5px #2ecc71; color: #2ecc71;}
.password{width: 202px; height: auto; padding: 17px 17px 17px 40px; font-size: 15px; color: #7f8c8d; background: #ecf0f1 url(http://www.ahmetkaplan.net/calismalar/flatixlogin/images/pass.png) no-repeat 12px; margin-bottom: 10px; border:0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.password:hover{box-shadow: 0px 0px 5px #3498db;}
.password:focus{box-shadow: 0px 0px 5px #2ecc71; color: #2ecc71;}
.login{width: 260px; height: auto; padding: 10px; text-align: center; font-size: 16px; color: white; text-shadow: 1px 1px 1px #c0392b; box-shadow: 0px 3px 0px #c0392b; margin-top: 10PX; background-color: #e74c3c; border:0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.login:hover{background-color: #c0392b;}
.or{margin-top: 25px; padding-top: 15px; border-top: 1px; border-top-color: #ecf0f1; border-top-style: solid;}
.facebook a{float: left; width: 105px; height: auto; padding: 10px; color: white; text-align: right; font-size: 11px; background: #297fb8 url(images/facebook.png) no-repeat 5px; border-bottom:2px; border-bottom-color: #206da5; border-bottom-style: solid; text-shadow: 1px 1px 1px #206da5; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; }
.facebook a:hover{ background-color: #206da5;}
.twitter a{float: right; width: 105px; height: auto; padding: 10px; color: white; text-align: right; font-size: 11px; background: #3598dc url(images/twitter.png) no-repeat 5px; border-bottom:2px; border-bottom-color: #2886cc; border-bottom-style: solid; text-shadow: 1px 1px 1px #2886cc; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out;}
.twitter a:hover{background-color: #2886cc;}
footer{width: 280px; height: auto; text-align: center; padding: 10px; color: white; background-color: #bdc3c7; bottom: 0; position: absolute; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px;}
</style>
</head>
<body>
<div id="flatix">
<header>
<h1 class="title">Member Sign In</h1>
</header>
<section>
<form class="loginform">
<input type="text" name="email" class="mail" placeholder="E-Mail Address">
<input type="password" name="password" class="password" placeholder="Password">
<a href="#" title="Lost your password?">Lost your password?</a>
<input type="submit" class="login" value="SIGN IN">
</form>
<div class="or">
<div class="facebook">
<a href="#" title="Sign In Facebook">Sign In <strong>Facebook</strong></a>
</div>
<div class="twitter">
<a href="#" title="Sign In Twitter">Sign In <strong>Twitter</strong></a>
</div>
<div class="t"></div>
</div>
</section>
<footer>
Your Site Slogan - ahmetkaplan.net
</footer>
</div>
</body>
</html>
حمایت شده: