0

Приветствую! Подскажите пожалуйста, что не так в моём коде, и что чем лучше заменить? И как добавить адаптивности? Мне знакомые 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>

3
  • * codereview.stackexchange.com 9 мая 2020 в 13:49
  • Это в этом сообществе можно задавать вопросы, на подобии моего ?
    – user387626
    9 мая 2020 в 13:54
  • @GeorgeKryptonian, можно, если они соответствуют определенным требованиям: ru.stackoverflow.com/tags/…
    – Grundy
    9 мая 2020 в 14:04

1 ответ 1

0

.login__container обернул в .container
Использовал max-width для задания ширины элементам, чтобы не давать железную ширину, которая не будет изменяться
Я также для визуального оформления использовал классы из Bootstrap:
для input класс .form-control, для кнопки .btn.btn-danger

Вся фишка в max-width

max-width: 600px;

Эта запись значит, что ширина элемента будет иметь максимальный размер 600px, но может становится и меньше, если экран будет ужиматься

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

html,
body {
  height: 100%;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
}

.login {
  overflow-y: auto;
  width: 100%;
  min-height: 100%;
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px 10px;
}

.login__container {
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  max-width: 330px;
}

.header {
  background-color: #03A9F4;
  border-radius: 10px 10px 0px 0px;
  color: white;
  padding: 10px 0;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form>* {
  margin: 10px 0;
  display: block;
}

.login__container>* {
  padding: 15px 30px;
}

.registration__forgot_password {
  padding: 10px 30px;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="login">
  <div class="container">
    <div class="login__container">
      <div class="header">
        <h4 class="autorisation">Авторизация</h4>
      </div>
      <div class="form">
        <input class="email form-control" type="email" placeholder="Email">
        <input class="password form-control" type="password" placeholder="Пароль">
        <input class="button btn btn-danger" type="button" value="Войти">
      </div>
      <div class="registration__forgot_password">
        <a href="#registration" id="registration">Регистрация</a>
        <a href="#forgot_password" id="forgot_password">Забыли пароль?</a>
      </div>
    </div>
  </div>
</div>

4
  • 1
    что поменялось по сравнению с кодом в вопросе?
    – Grundy
    9 мая 2020 в 14:04
  • @Grundy почти всё 9 мая 2020 в 14:05
  • А кажется все то же самое. Добавь описание, что именно поменял и почему
    – Grundy
    9 мая 2020 в 14:05
  • что за фишка в max-width?
    – Grundy
    9 мая 2020 в 14:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.