Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
- <style>
- body {
- background-color: #87d9ff;
- font-family: Arial, Helvetica, sans-serif;
- overflow: hidden;
- }
- .bg {
- z-index: -2;
- top: 0;
- position: absolute;
- left: 50%;
- margin-left: -1042px;
- width: 2083px;
- height: 602px;
- display: block;
- visibility: visible;
- background-image: url('//st.mycdn.me/res/i/anonym/sparrows/image.jpg');
- background-repeat: no-repeat;
- background-position: center;
- }
- .wrp {
- margin-top: 5vh;
- }
- .card {
- right: 0;
- width: 236px;
- padding: 12px 16px 16px;
- background-color: #fff;
- margin: 0 auto;
- border-radius: 4px;
- }
- .form-input {
- display: flex;
- flex-direction: column;
- }
- .form-input label {
- line-height: 18px;
- margin: 5px 0;
- font-size: 12px;
- }
- .form-input input:focus {
- border: 1px solid #ccc;
- outline: 0;
- }
- .form-input input {
- height: 32px;
- width: 100%;
- margin: 0;
- padding: 0 8px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- line-height: 17px;
- background-color: #fff;
- border: 1px solid #e0e0e0;
- border-radius: 3px;
- font-size: 14px;
- color: #333;
- }
- .form-input input[type='submit']:hover {
- background-color: #e47d08;
- -webkit-box-shadow: 0 0 0 1px #e47d08;
- box-shadow: 0 0 0 1px #e47d08;
- color: #fff;
- text-decoration: none;
- }
- .form-input input[type='submit'] {
- background-color: #ee8208;
- outline: 0;
- width: 100%;
- padding-left: 0;
- padding-right: 0;
- position: relative;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- margin: 0;
- padding: 0 20px;
- min-width: 96px;
- height: 32px;
- overflow: visible;
- border: 0;
- border-radius: 16px;
- font-size: 14px;
- font-weight: 400;
- line-height: 32px;
- color: #fff;
- outline: 0;
- -webkit-user-select: none;
- user-select: none;
- -webkit-transition: background-color 0.1s ease-in,
- -webkit-box-shadow 0.1s ease-in;
- transition: background-color 0.1s ease-in,
- -webkit-box-shadow 0.1s ease-in;
- transition: box-shadow 0.1s ease-in, background-color 0.1s ease-in;
- transition: box-shadow 0.1s ease-in, background-color 0.1s ease-in,
- -webkit-box-shadow 0.1s ease-in;
- white-space: nowrap;
- cursor: pointer;
- margin-top: 20px;
- }
- .pswd-tip {
- text-align: center;
- margin-top: 8px;
- }
- .pswd-tip a {
- text-decoration: none;
- font-size: 12px;
- color: #666;
- cursor: pointer;
- }
- .pswd-tip a:hover {
- text-decoration: underline;
- }
- </style>
- </head>
- <body>
- <div class="bg"></div>
- <div class="wrp">
- <div class="card">
- <form action="">
- <div class="form-input">
- <label for="username">Username, e-mail or phone number</label>
- <input type="text" id="username">
- </div>
- <div class="form-input">
- <label for="pswd">Password</label>
- <input type="password" id="pswd">
- </div>
- <div class="form-input">
- <input type="submit" value="Log in">
- </div>
- <div class="pswd-tip">
- <a href="/dk">
- Forgot password?
- </a>
- </div>
- </form>
- </div>
- </div>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement