0

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

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

Друзья, всем привет. Подскажите пожалуйста. Есть макет, я верстаю на flex-боксах. Как можно сделать текст на блоке формы? Flex не дает растянуть ее наверх.

HTML

<div class="header-form">
                 <h1>Заборы, калитки, ворота<br>
                 «ПОД КЛЮЧ»</h1>
                  <form action="#" class="form-offer">
                   <input type="name" placeholder="Ваше имя">
                   <input type="tel" placeholder="+375(  )___-___-___">
                   <input type="submit" value ="Связаться">
                   </form>
            </div>

CSS

.header-form{
    display: flex;
    flex-direction: column;
    align-items: center;

}

.header-form h1{
    font-size:230%;
    text-transform: uppercase;
    color:#ffffff;
    z-index: 2;
    text-align:center;
    line-height: 40px;
    font-weight: bold;


}
.form-offer{
    flex-basis:100%;
    display:flex;
    flex-direction: column;
    background-color: #4d5665;
    padding: 7% 7% 4% 7%;
    justify-content: flex-end;



}
.form-offer input{
    margin-bottom:5%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 70%;
    padding:10px;

}
.form-offer input[type="submit"]{
    background-color: #d5b58e;
    border: 1px solid #d5b58e;
    border-radius: 3px;
    height: 12%;

}
2
  • Вы можете форме дать отрицательный margin-top и поднять ее на нужную величину.
    – Alex
    24 мая 2019 в 12:23
  • @Alex если даю margin-top , то форма уменьшается соответственно вниз, потому что это flex-элементы 25 мая 2019 в 10:27

1 ответ 1

0

Если с минимальными изменениями... Добавлено:

.header-form { position: relative; ...
.header-form h1 { position: absolute; top: 0;
.form-offer { padding: 15% ...

(и прямо в здешней песочнице видно, почему padding % в этом случае - бобо), или можно и font-size, и padding привязать к vh например.

.header-form{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
}

.header-form h1{
    position: absolute;
    top: 0;
    font-size:230%;
    text-transform: uppercase;
    color: #000;
    z-index: 2;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
}
.form-offer{
    flex-basis:100%;
    display:flex;
    flex-direction: column;
    background-color: #4d5665;
    padding: 15% 7% 4% 7%;
    justify-content: flex-end;
}
.form-offer input{
    margin-bottom:5%;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 70%;
    padding:10px;
}
.form-offer input[type="submit"]{
    background-color: #d5b58e;
    border: 1px solid #d5b58e;
    border-radius: 3px;
    height: 12%;
}
<div class="header-form">
  <h1>Заборы, калитки, ворота<br>
    «ПОД КЛЮЧ»</h1>
  <form action="#" class="form-offer">
    <input type="name" placeholder="Ваше имя">
    <input type="tel" placeholder="+375(  )___-___-___">
    <input type="submit" value ="Связаться">
  </form>
</div>

1
  • Спасибо за ответ, но я так пробовал и получается почему-то вот так: imgur.com/RK6rr1p 23 мая 2019 в 19:05

Ваш ответ

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

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