粉色系小白猫登录表单模板html代码

粉色系登录模板

<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" media="all">

<!-- form section start -->
<section class="w3l-hotair-form">
    <h1>粉色系登录表单</h1>
    <div class="container">
        <!-- /form -->
        <div class="workinghny-form-grid">
            <div class="main-hotair">
                <div class="alert-close">
                    <span class="fa fa-close"></span>
                </div>
             
                <div class="content-wthree">
                    <h2>登录</h2>
                    <p>到您的账户</p>
                    <form action="#" method="post">
                        <input type="text" class="text" name="text" placeholder="用户名" required="">
                        <input type="password" class="password" name="password" placeholder="用户密码" required="">
                        <button class="btn" type="submit">登录</button>
                    </form>
                    <p>或与社交媒体联系</p>
                    <div class="social-icons w3layouts">
                        <ul>
                            <li>
                                <a href="#url" class="facebook"><span class="fa fa-facebook"></span> </a>
                            </li>
                            <li>
                                <a href="#url" class="twitter"><span class="fa fa-twitter"></span> </a>
                            </li>
                            <li>
                                <a href="#url" class="pinterest"><span class="fa fa-pinterest"></span> </a>
                            </li>
                        </ul>
                    </div>
                    <p class="account">没有帐户？<a href="#signup">注册</a></p>
                </div>
                <div class="w3l_form align-self">
                    <div class="left_grid_info">
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- //form -->
    </div>
    <!-- copyright-->
    <div class="copyright text-center">
        <p class="copy-footer-29">版权短短同学所有，翻权请随意~</p>
    </div>
    <!-- //copyright-->
</section>
<!-- //form section start -->

<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function (c) {
        $('.alert-close').on('click', function (c) {
            $('.main-hotair').fadeOut('slow', function (c) {
                $('.main-hotair').remove();
            });
        });
    });
</script>