Всем привет, подскажите, как сделать такую форму? Заранее спасибо
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
section {
height: 330px;
position: relative;
padding: 15px;
}
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
}
.form {
position: relative;
margin: 0 auto;
width: 300px;
height: 300px;
padding: 35px;
background: rgba(255, 255, 255, .7);
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}
.form__field {
height: 30px;
margin-bottom: 10px;
padding: 5px 15px;
}
.form__field--textarea {
height: 60px;
}
.form__submit {
max-height: 40px;
background: none;
border: none;
}
.form__submit>svg {
max-height: 40px;
}
<section>
<div class="map"></div>
<form class="form">
<input type="text" class="form__field" placeholder="Name" required>
<input type="email" class="form__field" placeholder="Email" required>
<textarea placeholder="Message" class="form__field form__field--textarea" required></textarea>
<button class="form__submit"><?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<path style="fill:#6AC259;" d="M213.333,0C95.518,0,0,95.514,0,213.333s95.518,213.333,213.333,213.333
c117.828,0,213.333-95.514,213.333-213.333S331.157,0,213.333,0z M174.199,322.918l-93.935-93.931l31.309-31.309l62.626,62.622
l140.894-140.898l31.309,31.309L174.199,322.918z"/>
<g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
<g></g><g></g>
</svg></button>
</form>
</section>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости