Форма заполнения HTML [закрыт]

250
20 августа 2018, 04:10

Всем привет, подскажите, как сделать такую форму? Заранее спасибо

Answer 1

* { 
  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>

READ ALSO
Как убрать автозаполнение input?

Как убрать автозаполнение input?

Еще один вопрос, работаю с input и постоянно предлагает выбрать предыдущие данные, как это убрать?

226
Добавить ещё больше разных колёс

Добавить ещё больше разных колёс

Помогите с небольшим скриптом: Как добавить еще пунктов в меню и задать значения к ним? Уже как только не пробовал, подскажите в какую сторону...

303
Определить видимость елемента jq

Определить видимость елемента jq

Ребят у меня есть сайт который не скролится , но у него есть елемент в котором весь контент , этот элемент скролится и имеет классmain-child

271
Выпадающее меню общее для всех страниц

Выпадающее меню общее для всех страниц

Есть выпадающий список с ссылками на модели кроватей (вынесется на отдельную страницу),как сделать для всех страниц сайта 1 выпадающий список...

222