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
  • Большое спасибо
    – Артур
    24 окт 2020 в 17:01

Ваш ответ

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

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