Nhân dịp HotroFM ra mắt nên mình share một cái cho có màu
Demo: http://4rdinhcao.forumvi.com/h28-login
Đây là source nguyên cái trang đó:
Ảnh by: @Titus
Tags: #tuts #forumotion #thủ-thuật
Được sửa bởi ShanFan ngày 8/29/2016, 19:34; sửa lần 1.
Demo: http://4rdinhcao.forumvi.com/h28-login
Đây là source nguyên cái trang đó:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi" xml:lang="vi" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<title>Đăng nhập - DINHCAO</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<link rel="shortcut icon" type="image/x-icon" href="http://illiweb.com/fa/favicon/discussion.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body{background-attachment:fixed;background-color:#272D4E;color:#FFF;font-family:'trebuchet ms',tahoma,arial,sans-serif;font-size:12px}
.lol-body{position:absolute;width:100%;height:100%;text-align:center}
.lol-content{display:inline-block;float:none}
.lol-login-form{margin:0 auto 3rem;border-radius:5px;padding:1.5rem 2rem 0.5rem;color:#444}
.row.lol-logo h1{color:#fff;text-align:center;margin-top:5%;font-size:3.5rem}
.dark-grey-text{color:#121212}
.col.l5.m8.s12{display:inline-block;float:none}
.center-btn > *{width:100%;margin-top:1em}
.input-field .prefix.active,input[type=text]:focus:not([readonly])+label,input[type=password]:focus:not([readonly])+label,input[type=email]:focus:not([readonly])+label,input[type=url]:focus:not([readonly])+label,input[type=time]:focus:not([readonly])+label,input[type=date]:focus:not([readonly])+label,input[type=datetime-local]:focus:not([readonly])+label,input[type=tel]:focus:not([readonly])+label,input[type=number]:focus:not([readonly])+label,input[type=search]:focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label{color:#3f51b5!important}
input[type=text]:focus:not([readonly]),input[type=password]:focus:not([readonly]),input[type=email]:focus:not([readonly]),input[type=url]:focus:not([readonly]),input[type=time]:focus:not([readonly]),input[type=date]:focus:not([readonly]),input[type=datetime-local]:focus:not([readonly]),input[type=tel]:focus:not([readonly]),input[type=number]:focus:not([readonly]),input[type=search]:focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]){border-bottom:1px solid #3f51b5!important;box-shadow:0 1px 0 0 #3f51b5!important}
@media only screen and (max-width:700px){.flow-text{line-height:1.84rem}.center-btn button,.center-btn > a{display:block;margin:10px 0}}
</style>
</head>
<body>
<div class="row lol-body" style="margin-bottom:0">
<div class="row lol-logo">
<a href="/"><h1>DINHCAO</h1></a>
</div>
<div class="lol-content">
<div class="row" style="margin-bottom:0">
<div class="lol-login-form lol-1">
<div class="row" style="margin-bottom:0">
<form class="col s12" action="/login" method="post" name="form_login">
<div class="row">
<div class="input-field s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" name="username" type="text" class="validate" />
<label for="icon_prefix">Tài khoản</label>
</div>
<div class="input-field s6">
<i class="material-icons prefix">vpn_key</i>
<input id="icon_telephone" name="password" type="password" class="validate" />
<label for="icon_telephone">Mật khẩu</label>
</div>
<div class="center-btn">
<button type="submit" class="waves-effect waves-light yellow darken-2 btn" name="login" id="login-btn"><span class="dark-grey-text"><i class="mdi-hardware-keyboard-arrow-left left"></i>Đăng nhập</span></button>
<a class="waves-effect waves-light yellow darken-2 btn" id="register-btn" href="register?agreed=true&step=2"><span class="dark-grey-text"><i class="mdi-social-person-add left"></i>Đăng ký</span></a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
</body>
</html>
Ảnh by: @Titus
Tags: #tuts #forumotion #thủ-thuật
Được sửa bởi ShanFan ngày 8/29/2016, 19:34; sửa lần 1.