Приветствую! Подскажите пожалуйста, что не так в моём коде, и что чем лучше заменить? И как добавить адаптивности? Мне знакомые frontend разработчики сказали, чтобы
всё было адаптивно, и что не нужно всё и везде лепить position: absolute; ...
Буду рад любой помощи! Заранее спасибо!
* {
padding: 0;
margin: 0;
}
.login {
width: 400px;
height: 400px;
background-color: #212121;
margin: 240px auto;
}
.login__container {
position: relative;
width: 340px;
height: 348px;
top: 26px;
left: 30px;
}
.header {
width: 100%;
height: 58px;
background-color: #03A9F4;
border-radius: 10px 10px 0px 0px;
}
.autorisation {
position: relative;
display: block;
font-family: 'Roboto', sans-serif;
font-size: 24px;
line-height: 27px;
font-weight: 500;
color: #ffffff;
padding-top: 20px;
text-align: center;
bottom: 7px;
}
.autorisation::before {
content: "";
display: flex;
position: absolute;
background-image: url(../images/key-icon.png);
width: 27px;
height: 27px;
left: 62px;
}
.form {
position: relative;
width: 100%;
height: 236px;
background-color: #fafafa;
}
input::placeholder {
color: #bdbdbd;
}
.email,
.password {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 9px;
}
.email {
position: absolute;
width: 275px;
height: 45px;
top: 30px;
left: 32px;
border: 2px solid #e0e0e0;
border-radius: 4px;
font-size: 16px;
line-height: 20px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
background: url(../images/email-icon.png) no-repeat left;
background-position-x: 242px;
}
.email:hover {
font-size: 17px;
opacity: 0.7;
transition: 0.05s;
}
.password {
position: absolute;
width: 275px;
height: 45px;
top: 95px;
left: 32px;
border: 2px solid #e0e0e0;
border-radius: 4px;
font-size: 16px;
line-height: 20px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
background: url(../images/lock-icon.png) no-repeat left;
background-position-x: 247px;
}
.password:hover {
font-size: 17px;
opacity: 0.7;
transition: 0.05s;
}
.button {
position: absolute;
background-color: #f44336;
width: 275px;
height: 45px;
top: 160px;
left: 32px;
border-radius: 4px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: 900;
color: #ffffff;
border: none;
}
.button:hover {
transition: 0.3s;
background-color: #03A9F4;
}
.footer {
position: relative;
width: 100%;
height: 55px;
background-color: #eeeeee;
border-radius: 0px 0px 10px 10px;
}
.registration__forgot_password {
padding-top: 20px;
margin-left: 66px;
position: absolute;
display: inline-block;
width: 205px;
height: 16px;
}
.registration__forgot_password:hover {
width: 210px;
}
#registration {
text-decoration: none;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
color: #212121;
line-height: 20px;
}
#registration:hover {
transition: 0.05s;
opacity: 0.5;
}
#forgot_password {
text-decoration: none;
padding-left: 10px;
font-family: 'Roboto', sans-serif;
display: inline-block;
font-size: 14px;
font-weight: 300;
color: #757575;
}
#forgot_password:hover {
transition: 0.05s;
opacity: 0.5;
}
<div class="login">
<div class="login__container">
<div class="header">
<span class="autorisation">Авторизация</span>
</div>
<div class="form">
<input class="email" type="email" placeholder="Email">
<input class="password" type="password" placeholder="Пароль">
<input class="button" type="button" value="Войти">
</div>
<div class="footer">
<div class="registration__forgot_password">
<a href="#registration" id="registration">Регистрация</a>
<a href="#forgot_password" id="forgot_password">Забыли пароль?</a>
</div>
</div>
</div>
</div>