<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Форма входа choi.</title>
</head>
<body>
<div class="authorization">
<form action="" method="post">
<div class="head">
<img src="img/key-icon.png" alt="">
<p>Авторизация</p>
</div>
<div class="main">
<div class="input-email">
<input type="email" name="email" placeholder="Email">
<img class="email-icon" src="http://s8.hostingkartinok.com/uploads/images/2016/08/3d16d641c2776ea9b318c59f19f7e4af.png" alt="">
</div>
<div class="input-password">
<input type="password" name="password" placeholder="Password">
<img class="lock-icon" src="http://s8.hostingkartinok.com/uploads/images/2016/08/bb8e7e1035c39a675e9eba8d1f08ef8f.png" alt="">
</div>
<button>Войти</button>
</div>
<div class="footer">
<p><a class="reg" a href="">Регистрация</a></p>
<p><a class="pass" href="">Забыли пароль?</a></p>
</div>
</form>
</div>
</body>
</html>
=============================== CSS ============================
=============================== CSS ============================
body{
background-image: linear-gradient(-123deg, #2d363d 0%, #677274 20%, #7a8485 28%, #9d9c98 61%, #c3b5a8 100%);
}
.authorization{
width: 337px;
height: 347px;
margin: 200px auto;
box-sizing: border-box;
}
.head {
height: 55px;
background-color: #618ba7;
border-radius: 10px 10px 0 0;
text-align: center;
}
.head p{
display: inline-block;
position: relative;
top: -5px;
font: 24px/20px “Roboto Medium”, sans-serif;
color: #fff;
}
.main{
position: relative;
background-color: #fafafa;
padding-top: 31px;
padding-bottom: 30px;
}
.main input[type=“email”],
.main input[type=“password”]{
width: 240px;
padding: 9px 4px;
margin-left: 30px;
margin-bottom: 20px;
color: #bdbdbd;
font: 16px/20px “Roboto Medium”, sans-serif;
border-radius: 3px;
border: 2px solid #bdbdbd;
outline: none;
}
.email-icon{
position: absolute;
top: 35px;
right: 23px;
}
.lock-icon{
position: absolute;
top: 95px;
right: 23px;
}
.main button{
cursor: pointer;
display: block;
background-color: #a5a666;
width: 274px;
margin-left: 30px;
outline: none;
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
padding-top: 12px;
padding-bottom: 13px;
font: 16px/20px “Roboto Black”, sans-serif;
}
.main button:hover{
transition-duration: 200ms;
background-color: #bfbf6c;
}
.footer{
height: 55px;
background-color: #eeeeee;
border-radius: 0 0 10px 10px;
text-align: center;
}
.footer p{
display: inline-block;
}
.footer p:hover{
text-decoration: underline;
}
.reg{
text-decoration: none;
padding-right: 4px;
font: 14px/20px “Roboto Medium”, sans-serif;
color: #212121;
}
.pass{
text-decoration: none;
padding-left: 3px;
font: 14px/20px “Robot Light”, sans-serif;
color: #757575;
}