简单表单 CSS HTML 5

Question

如何制作此表单？

我试试这个，但我不知道形式的底部

.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>

Answer 1

您还需要添加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>