码迷,mamicode.com
首页 > 其他好文 > 详细

VideLoginForm案例

时间:2020-01-21 23:32:35      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:oop   als   ack   font   round   abs   inter   uppercase   isp   

VideLoginForm案例

技术图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body data-vide-bg="video1.mp4" data-vide-options="posterType: mp4, loop: false, muted: true, position: 0% 0%">
    <div class="login-form">
        <h2>Sing In</h2>
        <div class="form-input">
            <input type="text" name="" placeholder="Email">
        </div>
        <div class="form-input">
            <input type="password" name="" placeholder="password">
        </div>
        <div class="form-input">
            <input type="submit" name="" value="Login">
        </div>
        <a href="#" class="forget">Forget Password</a>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="jquery.vide.js"></script>
</body>

</html>
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    /* background: #000; */
    font-family: sans-serif;
}

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: 300px;
    padding: 60px 40px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 15px 20px rgba(0, 0, 0, .2);
}

.login-form h2 {
    margin: 0 0 40px;
    padding: 0;
    text-align: center;
}

.login-form .form-input {
    position: relative;
    margin: 20px 0;
}

.login-form .form-input input {
    outline: none;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .5);
    background: transparent;
    font-size: 18px;
}

.login-form .form-input input[type="submit"] {
    background: #e91e63;
    color: #fff;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.login-form .form-input input[type="submit"]:hover {
    background: #0090ff;
}

.login-form .forget {
    display: block;
    margin-top: 30px;
    color: #000;
    font-weight: bold;
}

VideLoginForm案例

标签:oop   als   ack   font   round   abs   inter   uppercase   isp   

原文地址:https://www.cnblogs.com/SSPOFA/p/12227195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!