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

avatar

ShanFan36
40
2
Punbb
An toàn
範黄山
Hỗ trợ viên

Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
範黄山
Nhân dịp HotroFM ra mắt nên mình share một cái cho có màu Very Happy



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 29/8/2016, 7:34 pm; sửa lần 1.
 Trả lời bài viết
avatar

vi0123998456443
101
10
Punbb
An toàn
Hỗ trợ viên

Bài viết :
43
Points :
101
Like :
10
Punbb
An toàn
Đẹp (y) up cho thớt
 Trả lời bài viết
avatar

the_dav189
268
41
Punbb
Quản trị
Trảm Phong

Bài viết :
189
Points :
268
Like :
41
Punbb
Quản trị
up lại js đi thớt ơi
 Trả lời bài viết
avatar

Karbyz49233
500
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
233
Points :
500
Like :
137
Punbb
An toàn
Anh là vô địtt :))

Bonus demo ảnh:

 Trả lời bài viết
avatar

ShanFan36
40
2
Punbb
An toàn
範黄山
Hỗ trợ viên

Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
範黄山
Titus đã viết:

Bonus demo ảnh:



cho xin ảnh làm demo nhá =))
 Trả lời bài viết
avatar

Karbyz49233
500
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
233
Points :
500
Like :
137
Punbb
An toàn
Anh là vô địtt :))
Cứ tự nhiên Smile
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...