<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="login-form-design">
<div class="form-logo-image"></div>
<div class="large-text-title">Login Here</div>
<div class="input-fields">
<div class="username"><svg fill="#999" viewBox="0 0 1024 1024"><path class="path1" d="M896 307.2h-819.2c-42.347 0-76.8 34.453-76.8 76.8v460.8c0 42.349 34.453 76.8 76.8 76.8h819.2c42.349 0 76.8-34.451 76.8-76.8v-460.8c0-42.347-34.451-76.8-76.8-76.8zM896 358.4c1.514 0 2.99 0.158 4.434 0.411l-385.632 257.090c-14.862 9.907-41.938 9.907-56.802 0l-385.634-257.090c1.443-0.253 2.92-0.411 4.434-0.411h819.2zM896 870.4h-819.2c-14.115 0-25.6-11.485-25.6-25.6v-438.566l378.4 252.267c15.925 10.618 36.363 15.925 56.8 15.925s40.877-5.307 56.802-15.925l378.398-252.267v438.566c0 14.115-11.485 25.6-25.6 25.6z"></path></svg><input type="username" class="user-input" placeholder="username" /></div>
<div class="password"><svg fill="#999" viewBox="0 0 1024 1024"><path class="path1" d="M742.4 409.6h-25.6v-76.8c0-127.043-103.357-230.4-230.4-230.4s-230.4 103.357-230.4 230.4v76.8h-25.6c-42.347 0-76.8 34.453-76.8 76.8v409.6c0 42.347 34.453 76.8 76.8 76.8h512c42.347 0 76.8-34.453 76.8-76.8v-409.6c0-42.347-34.453-76.8-76.8-76.8zM307.2 332.8c0-98.811 80.389-179.2 179.2-179.2s179.2 80.389 179.2 179.2v76.8h-358.4v-76.8zM768 896c0 14.115-11.485 25.6-25.6 25.6h-512c-14.115 0-25.6-11.485-25.6-25.6v-409.6c0-14.115 11.485-25.6 25.6-25.6h512c14.115 0 25.6 11.485 25.6 25.6v409.6z"></path></svg><input type="password" class="pass-input" placeholder="password" /></div>
</div>
<button class="signin-button">Login</button>
<div class="link">
<a href="#">Forgot password?</a> or <a href="#">Sign up</a>
</div>
</div>
<footer>
<p>
Created by
<a target="_blank" href="https://webdesignerpriyanshukumar.blogspot.com/">Web Designer Priyanshu Kumar</a>
</p>
</footer>
</body>
<style>
* {
box-sizing: content-box;
}
body {
margin:0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: monospace;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
color:#555;
background: #ecf0f3;
}
.login-form-design {
width:320px;
height: 430px;
padding: 30px 17px 17px 17px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #cbced1,
-13px -13px 20px #ffffff;
}
.form-logo-image {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfhAhOve670CG9oFeDenoWJ6YaIJ5-N-1aEpT4weKHu1V0Rpq1YmAPiZj3j6sehfIMDzvzHJBEmahahQTlKMmttIMFyumGPoWYbD8stQo0vkOXYmdNkWbpwUSJSFocG1eKCgVQIuOeEStO/s80/avatar.png);
width:81px;
height: 81px;
border-radius: 50%;
margin:0 auto;
box-shadow:
0px 0px 2px #5f5f5f,
0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff;
}
.large-text-title {
text-align: center;
font-size: 21px;
padding-top: 23px;
letter-spacing: 0.6px;
}
.small-text {
text-align: center;
font-size: 10px;
padding-top: 6px;
letter-spacing: 3.1px;
}
.input-fields {
width: 99%;
padding: 30px 5.1px 5.1px 5.1px;
}
.input-fields input {
border: none;
outline:none;
background: none;
font-size: 12px;
color: #555;
padding:15px 5px 10px 2px;
}
.username, .password {
margin-bottom: 15px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
.input-fields svg {
height: 25px;
margin:0 10px -3px 25px;
}
.signin-button {
outline: none;
border:none;
cursor: pointer;
width: 99.9%;
height: 40px;
border-radius: 29.9px;
font-size: 15px;
font-weight: 699.9;
font-family: monospace;
color:#fff;
text-align: center;
background: red;
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
transition: 0.5s;
}
.signin-button:hover {
background: #24cfaa;
}
.signin-button:active {
background:#1da88a;
}
.link {
padding-top: 20px;
text-align: center;
}
.link a {
color:#aaa;
font-size: 15px;
}
footer {
background-color: #555;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
font-family: sans-serif;
}
footer a {
color: #ff6f61;
text-decoration: none;
margin-right:5px;
}
</style>
</html>
0 Comments