响应式登录界面（2）

最新推荐文章于 2024-04-30 07:44:17 发布

shadow fish

最新推荐文章于 2024-04-30 07:44:17 发布

阅读量1k

点赞数

分类专栏： css项目学习文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_45862085/article/details/126030513

版权

css项目学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码地址

html代码

<body>
    <div class="container">
        <div class="image">
            <img src="./img/v2-f294ba30e8e0ea988bd20bc671816cc4_720w.jpg" alt="">
        </div>
        <div class="sign-in">
            <div class="sign-in-container">
                <h2>Sign in</h2>
                <form action="">
                    <div class="input-field">
                        <span>username</span>
                        <input type="text">
                    </div>

                    <div class="input-field">
                        <span>password</span>
                        <input type="password">
                    </div>

                    <div class="remind">
                        <label for=""><input type="checkbox">Remember me?</label>
                    </div>

                    <div class="input-field submit-field">
                        <input type="submit" value="sign in">
                    </div>

                    <div class="input-field">
                        <p>Don't have an account? <a href="#">Sign up</a></p>
                    </div>

                </form>
                <h3>Login with social media</h3>
                <div class="social-media">
                    <a href="#" class="social-icon">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-qq"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="#" class="social-icon">
                        <i class="fab fa-github"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>
</body>