0

введите сюда описание изображения

* {
  box-sizing: border-box;
}

body,
input {
  background-color: #ebf4f4;
}
form {
  text-align: center;
  width: 317px;
  height: 370px;
  background-color: #fbfdfd;
  border: 1px solid rgba(147, 184, 189, 0.8);
  margin-left: auto;
  margin-right: auto;
}

.btn-register {
  background-color: #01b3b3;
  text-align: center;
  width: 260px;
  height: 45px;
  color: white;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  border: 1px solid rgba(147, 184, 189, 0.8);
  border-radius: 5px;
  text-transform: uppercase;
}

input {
  width: 261px;
  height: 33px;
  border: 1px solid rgba(147, 184, 189, 0.8);
}
label {
  display: block;
  text-align: left;
  padding-left: 30px;
  font-weight: bold;
  font-size: 12px;
  font-family: Arial, sans-serif serif;
}
.info {
  display: inline-block;
  width: 150px;
  height: 25px;
  background-color: #01b3b3;
  color: white;
  font-size: 12px;
  text-transform: uppercase;
}
.confirm-form {
  margin-bottom: 35px;
  margin-top: 15px;
}
.choose-form {
  margin-bottom: 20px;
  margin-top: 16px;
}
.email-form {
  margin-bottom: 20px;
  margin-top: 15px;
  font-style: italic;
  padding: 12px;
}
span {
  color: #01b3b3;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Моя форма</title>
  </head>
  <body>
    <form>
      <div class="info">create an account</div>

      <label>Email: <span>*</span></label>
      <input
        class="email-form"
        type="text"
        name="email"
        placeholder="[email protected]"
      />
      <label>Choose Password: <span>*</span></label>
      <input class="choose-form" type="text" name="choose" />
      <label>Confirm Password <span>*</span></label>
      <input class="confirm-form" type="text" name="confirm" />
      <button class="btn-register">Register now!</button>
    </form>
  </body>
</html>

Делаю форму регистрации по макету psd. Стараюсь сделать в pixel perfect. Не понимаю как сделать так, чтобы верхний блок выходил за пределы формы. И вообще хотел бы узнать мнение, что можно исправить.

1 ответ 1

2
.info {
    display: block;
    width: 150px;
    height: 25px;
    background-color: #01b3b3;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 25px;
    position: relative;
    top: -5px;
    left: 25px;
}
1
  • Большое спасибо
    – Артур
    Commented 24 окт. 2020 в 17:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.