Diễn đàn Arduino Việt Nam | Tôi yêu Việt Nam
Hãy cùng đăng nhập hoặc đăng ký vào diễn đàn để cập nhật những bài viết mới và mở hết chức năng của diễn đàn nào!

Share
Go down
avatar
Administrator
Administrator
Tổng số bài gửi : 181
Points : 504
Reputation : 82
Join date : 20/07/2016
Age : 18
Đến từ : Bến Tre
Xem lý lịch thành viênhttp://vidieukhien-vn.webnode.vn/

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

on Tue Apr 11, 2017 7:55 pm
Xin chào các bạn! Hôm nay, mình sẽ chia sẻ cho các bạn code trang chủ đăng nhập sử dụng giao diện Material Design của Google.
Trước tiên mình sẽ Demo trước:

Link demo: http://arduino.forumvi.com/h24-page

Bây giờ chúng ta sẽ bắt tay vào code nào !

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 - ARDUINO FORUM</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://i.imgur.com/y43J5hj.png" />     
        <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>ARDUINO FORUM</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>
Về Đầu Trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Have a free blog with Sosblogs