<form action="" class="form">
<div class="form__img">
<img src="images/delivery/щит.png" alt="">
</div>
<svg width="207" height="207" viewBox="0 0 207 207" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.98844 109.353C2.68081 55.5744 43.596 9.29654 97.375 5.9889C151.154 2.68127 197.432 43.5964 200.74 97.3754C204.047 151.154 163.132 197.432 109.353 200.74C55.574 204.048 9.29608 163.132 5.98844 109.353ZM147.482 100.651C145.983 76.2854 125.016 57.7481 100.651 59.2466C76.285 60.7452 57.7476 81.7123 59.2462 106.078C60.7448 130.443 81.7118 148.981 106.077 147.482C130.443 145.984 148.98 125.017 147.482 100.651Z" fill="#F9307A" />
</svg>
<div class="form__title">Оставьте заявку</div>
<div class="form__text">Консультант свяжется <br> с вами в течении 12 часов</div>
<div class="form__group">
<input type="text" class="form__input" id="number" placeholder=" ">
<label for="number" class="form__label">Ваш телефон</label>
</div>
<div class="form__group">
<input type="text" class="form__input" id="name" placeholder=" ">
<label for="name" class="form__label">Ваше имя</label>
</div>
<button class="btn__link color-1 btn">Отправить заявку</button>
</form>
.form{
position: absolute;
left: 0;
background: #FFFFFF;
box-shadow: 0px 0px 19px #E2F8FF;
border-radius: 4px;
width: 330px;
height: 442px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 4;
.form__title{
font: normal 700 22px/26px Roboto;
color: #39414F;
margin-bottom: 6px;
}
svg{
position: absolute;
z-index: -1;
bottom: 0;
}
.form__img{
margin-bottom: -20px;
}
.form__text{
max-width: 175px;
font: normal normal 14px/16px Roboto;
color: #39414F;
text-align: center;
margin-bottom: 25px;
}
.form__group{
position: relative;
margin-bottom: 28px;
&:after{
margin-top: 6px;
position: absolute;
content: "";
width: 227px;
display: block;
height: 2px;
background: #D3D3D8;
}
.form__input,.form__label{
font: normal normal 18px/25px Roboto;
letter-spacing: 0.02em;
color: #39414F;
}
.form__label{
cursor: text;
position: absolute;
left: 0;
}
.form__input:focus ~ .form__label,
.form__input:not(:placeholder-shown) ~ .form__label{
display: none;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.