Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


Trang đăng nhập sử dụng giao diện Material Design của Google

Tác giả: - vào lúc:
ShanFan
Bài viết : 36
Points : 40
Like : 2
Punbb
An toàn
ShanFanMOD
8/29/2016, 19:25
#1
Nhân dịp HotroFM ra mắt nên mình share một cái cho có màu Very Happy

Trang đăng nhập sử dụng giao diện Material Design của Google Untitl10

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

#codefm

Tags: #tuts #forumotion #thủ-thuật

Được sửa bởi ShanFan ngày 8/29/2016, 19:34; sửa lần 1.
vi01239984564
Bài viết : 88
Points : 193
Like : 17
Invision
An toàn
vi01239984564MOD
8/29/2016, 19:27
#2
Đẹp (y) up cho thớt
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
8/29/2016, 19:28
#3
up lại js đi thớt ơi
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/29/2016, 19:30
#4

Bonus demo ảnh:

Trang đăng nhập sử dụng giao diện Material Design của Google Untitl10
ShanFan
Bài viết : 36
Points : 40
Like : 2
Punbb
An toàn
ShanFanMOD
8/29/2016, 19:32
#5
Titus đã viết:

Bonus demo ảnh:


Trang đăng nhập sử dụng giao diện Material Design của Google Untitl10


cho xin ảnh làm demo nhá =))
Kiwi
Bài viết : 289
Points : 601
Like : 160
Punbb
An toàn
Status : Đành vậy thế thôi
KiwiS-MOD
8/29/2016, 19:38
#6
Cứ tự nhiên Smile
Sponsored content
#7