<h2>Заказать бесплатную консультацию</h2>
<form class="myform">
<img src="https://www.flaticon.com/svg/static/icons/svg/3011/3011121.svg">
<input placeholder="Ваше имя...">
<input placeholder="Ваш номер телефона...">
<input placeholder="Ваш e-mail...">
<br/>
<button>Отправить заявку</button>
</form>
h2 {
text-align: center;
position: relative;
margin-bottom: 80px;
color: #484848;
font-weight: 500;
}
.myform {
position: relative;
display: flex;
Justify-content: center;
padding: 90px 20px 60px 20px;
border: 1px solid #c7c7c7;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.myform img {
position: absolute;
width: 80px;
top: -45px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #eb644d;
border-radius: 50%;
padding: 5px;
background: #fff;
box-shadow: 0 0 0 15px #fff;
}
.myform input {
flex: 0 1 auto;
padding: 15px 20px;
margin: 0 10px;
border-radius: 20px;
border: 1px solid #c7c7c7;
outline: none;
}
.myform button {
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
background: #eb644d;
padding: 15px 30px;
font-size: 14px;
color: #fff;
border-radius: 20px;
border: none;
text-transform: uppercase;
box-shadow: 0 0 0 15px #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.