DIỄN ĐÀN TIN HỌC VN

Diễn Đàn Tin Học VN, Nơi Chia Sẽ Kiến Thức Về Công Nghệ Thông Tin, Nơi Hội Tụ Của Anh Em Yêu Công Nghệ Và Tin Học

Chào mừng đến với Diễn Đàn Tin Học VN! Hãy chia sẽ những gì bạn biết, và đưa ra thắc mắc của bạn để được giải đáp.

form đăng ký đẹp với html và css

DIỄN ĐÀN TIN HỌC VN :: Website, Forumotion, Blog, Wordpress :: Khác
Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
phoenix51706
phoenix51706
Admin
Tổng số bài gửi : 171
Join date : 30/07/2010
https://diendantinhocvn.forumvi.com

form đăng ký đẹp với html và css Empty form đăng ký đẹp với html và css

13/03/22, 04:37 am
form đăng ký đẹp với html và css Form_d10


Css

Code:

<link href='vendors/fontawesome-free-6.0.0-web/css/all.css' rel='stylesheet'/>
<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{

            background: url(img/bg-top-left.png) left top no-repeat fixed,
                        url(img/bg-top-right.png) right top no-repeat fixed,                       
                        url(img/bg-bottom-left.png) left bottom no-repeat fixed,
                        url(img/bg-bottom-right.png) right bottom no-repeat fixed,
                        url(img/bg.jpg) top center no-repeat fixed;
            background-size: auto 30%,auto 30%, auto 30%, auto 30%, cover;
            background-color: #000;
            font-family: Roboto, sans-serif, "awesomefont";
        }
        img{
            width: 100%;
            height: auto;
        }
        ul{
            list-style: none;
        }
        header{
            padding:10px 0;
        }
        .logo{
            top:0;
            width: 100px;
            margin: 0 auto;
           
        }
        .logo img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .container{
            width: 90%;
            padding-left: 15px;
            padding-right: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        .row{
            display: -ms-flexbox;
            display: flex;
        }
        .form{
            background: rgb(21 37 70 / 85%);
            border-radius: 20px;
        }
        .nav-tabs{
            display: flex;
            align-items: center;
        }
        .nav-tabs img{
            height: 60px;
        }
        .nav-tabs>li>a>img:first-child {
            display: none
        }

        .nav-tabs>li .active>img:first-child {
            display: block
        }

        .nav-tabs>li .active>img:last-child {
            display: none
        }
        .tab-content{
            padding: 15px 20px;
        }
        .form-group{
            position: relative;
        }
        .form-group input{
            width: 100%;
            background-color: rgb(13 27 54 / 50%);
            color: #ccc;
            border: 1px solid #ced4da;
            border-radius: 5px;
            margin: 8px 0;
            outline: none;
            padding: 10px 15px 10px 35px;
            box-sizing: border-box;
        }
        .form-group i {
            position: absolute;
            left: 0;
            top: 8px;
            padding: 9px 8px;
            color: #ccc;
        }
        .form-group input:hover,
        .form-group input:focus{
            color: #ffab3e;
            border-color: #ffab3e;
            box-shadow: 0 0 8px 0 #ffab3e;
           
        } 
        .form-group input:hover ~ span i,
        .form-group input:focus ~ span i
        {
            color: #ffab3e;
        } 
        label.error{
            color: #b0772a;
            font-size: 14px;
        }     

        .btn-submit{           
            width: 65%;
            background: 0 0;
            border: none;
            outline: 0;
            padding: 0;
            margin: 0 auto;
            display: block;
            margin-top: 25px;
            animation: btnAnimation .5s linear infinite;
            cursor: pointer;
        }
        @media (min-width: 600px){
            .container{
                max-width: 400px;
            }
        }
        @-webkit-keyframes btnAnimation {
            0% {
                transform: scale(1.05);
                -webkit-filter: drop-shadow(2px 2px 10px #de2c03) brightness(1.6);
                filter: drop-shadow(2px 2px 10px #de2c03) brightness(1.6)
            }

            50% {
                transform: scale(1);
                -webkit-filter: drop-shadow(1px 1px 3px #de2c03) brightness(1);
                filter: drop-shadow(1px 1px 3px #de2c03) brightness(1)
            }

            100% {
                transform: scale(1.05);
                -webkit-filter: drop-shadow(2px 2px 10px #de2c03) brightness(1.6);
                filter: drop-shadow(2px 2px 10px #de2c03) brightness(1.6)
            }
        }
    </style>

Form

Code:

<div class="form">       
            <ul class="nav nav-tabs">
                <li>
                    <a id="signup" class="tab active" href='#'>
                        <img src='img/signup_1.png'/>
                        <img src='img/signup_2.png'/>
                    </a>
                </li>
                <li>
                    <a id="login" class="tab" href='#'>
                        <img src='img/login_1.png'/>
                        <img src='img/login_2.png'/>
                    </a>
                </li>         
            </ul>
            <div class="tab-content">
                <div id="signupbox">
                    <form id="form_register" method="POST" novalidate="novalidate">                     
                        <div class='form-group'>                                                     
                            <input type="text" id="username" name="username" placeholder="Tên đăng nhập" autocomplete="off">
                            <span><i class='fa fa-user'></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="password" id="f_password" name="password" placeholder="Mật khẩu"  autocomplete="off">
                            <span><i class='fa fa-lock'></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="password" id="confirm_password" name="confirm_password" placeholder="Xác nhận mật khẩu"  autocomplete="off">
                            <span><i class='fa fa-lock'></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="text" id="full_name" name="full_name" placeholder="Tên đầy đủ"  autocomplete="off">
                            <span><i class='fa fa-user'></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="text" id="contact" name="contact" placeholder="Số điện thoại"  autocomplete="off">
                            <span><i class="fa fa-mobile"></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="email" id="email" name="email" placeholder="Email"  autocomplete="off">
                            <span><i class='fa fa-envelope'></i></span>
                        </div>
                        <button type="submit" class="btn-submit">
                            <img src='img/reg_btn.png'/>
                        </button> 
                    </form>
                </div>
                <div id="loginbox" style="display: none;">
                    <form action="" method="post">
                        <div class='form-group'>
                           
                            <input type="text" id="username" name="username" placeholder="Tên đăng nhập" autocomplete="off">
                            <span><i class='fa fa-user'></i></span>
                        </div>
                        <div class='form-group'>                           
                            <input type="password" id="f_password" name="password" placeholder="Mật khẩu"  autocomplete="off">
                            <span><i class='fa fa-lock'></i></span>
                        </div>                       
                        <button type="submit" class="btn-submit" value="submit">
                            <img src='img/reg_btn.png'/>
                        </button>
                       
                    </form>
                </div>
            </div>
        </div> 
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết