простая форма CSS 5 - PullRequest
       6

простая форма CSS 5

0 голосов
/ 20 сентября 2018

Как мне сделать эту форму?

Я попробую это, но я не имею представления о нижней части формы

    .request{
        border:1px solid white;
        text-align: center;
        padding:39px 30px 57px 30px ;
    }
    .request__text{
        color:white;
    }
    .request__btn{position: relative;
        font-family: 'ProximaNova-Bold';
        font-size: 14px;
        border-radius: 50px;
        background: #ffdc38;
       margin-top: 20px;
        padding: 10px 18px;
    }
    <div class="request">
     <h3 class="request__title">
       Оставьте заявку
     </h3>
     <p class="request__text">
      Чтобы получить бесплатный пакет материалов о финансовом рынке
        </p>
     <form action="#" class="request__form">
      <input type="text" placeholder="Ваше имя">
       <input type="number" placeholder="Ваш номер телефона">
       <button type="submit" class="request__btn">Получить материалы</button>
      </form>            
     </div>

1 Ответ

0 голосов
/ 20 сентября 2018

Вы также должны добавить background-photo к запросу div, основываясь на этой фотографии.

.request{
    border:1px solid white;
    text-align: center;
 margin:0px auto;
  width:400px;
 height:70%;
 background-color:transparent;
position:absolute;
left:0;
right:0;
top:50px

}
.wrapper
{
  background-color:#7355d7;
    width:500px;
    height:400px;
    position:relative;
}
input
{
  display:block;
  margin:10px auto;
  width:60%;
  line-height:40px;
  border-radius:50px;
  border:1px solid white;
}
.request__text,.request__title{
    color:white;
}
.request__btn{position: absolute;
    font-family: 'ProximaNova-Bold';
    font-size: 14px;
    border-radius: 50px;
    background: #ffdc38;
   margin :35px auto;
    padding: 10px 18px;
    border: none;
text-align:center;
  right:0;
  left:0;
  line-height:30px;
  color:black;
  font-weight: 700;
}
<div class="wrapper">
<div class="request">
 <h3 class="request__title">
   Оставьте заявку
 </h3>
 <p class="request__text">
  Чтобы получить бесплатный пакет материалов о финансовом рынке
    </p>
 <form action="#" class="request__form">
  <input type="text" placeholder="Ваше имя">
   <input type="number" placeholder="Ваш номер телефона">
   <div>
      <button type="submit" class="request__btn">Получить материалы</button>
   </div>

  </form>            
 </div>
</div>
...