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

  • ShanFan
    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.08.16 19:34; sửa lần 1.

  • vi01239984564
  • the_dav
  • Móm Đặc Biệt

    Bonus demo ảnh:


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • ShanFan
    Titus đã viết:

    Bonus demo ảnh:



    cho xin ảnh làm demo nhá =))

  • Móm Đặc Biệt
    Cứ tự nhiên Smile


    --Chữ ký--
    Laughing Diễn đàn Rao vặt, anh em rãnh ghé thăm nhé Laughing


    Very Happy Địa chỉ: http://vnraovat.forumvi.com/ Very Happy
  • Sponsored content

Thông tin tác giả
avatar
MOD
Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
68
Points :
155
Like :
15
Invision
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
220
Points :
316
Like :
46
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
avatar
MOD
Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
S-MOD
Bài viết :
285
Points :
592
Like :
157
Punbb
An toàn
Status :
Đành vậy thế thôi
Xem lý lịch thành viên http://vnraovat.forumvi.com/
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết