Дизайн и верстка страницы Contact Us. Часть #1

Дизайн и верстка страницы Contact Us. Часть #1

Дизайн и верстка страницы Contact Us. Часть #1

В HTML-разметке накидываем все элементы, которые у нас будут на странице, пока не заботясь о внешнем виде расположении относительно друг друга. Давайте подумаем, что должно быть на странице контактов.

  • шапка
  • контактная форма
  • блок с контактной информацией
  • иконки социальных сетей
  • карта
  • Шапка + контактная форма


    <div class="title">
      <h2>Contact Us</h2>
      </div>
      <div class="box">
        <div class="contact form">
        <h3>Send a Message</h3>
        <form>
        <div class="formBx">
          <div class="row50">
          <div class="inputBox">
            <span>First Name</span>
            <input type="text" placeholder="John">
          </div>
          <div class="inputBox">
            <span>Last Name</span>
            <input type="text" placeholder="Doe">
          </div>
          </div>
          <div class="row50">
          <div class="inputBox">
            <span>Email</span>
            <input type="text" placeholder="Ex: johndoe@email.com">
          </div>
          <div class="inputBox">
            <span>Mobile</span>
            <input type="text" placeholder="+91 987 654 3210">
          </div>
          </div>
          <div class="row100">
          <div class="inputBox">
            <span>Message</span>
            <textarea placeholder="Write your message here..."></textarea>
          </div>
          </div>
          <div class="row100">
          <div class="inputBox">
            <input type="submit" value="Send">
          </div>
          </div>
        </div>
        </form>
      </div>

    Дизайн и верстка страницы Contact Us. Часть #1

    Блок с контактной информацией + иконки


    <h3>Contact Info</h3>
    <div class="infoBox">
        <div>
        <span><ion-icon name="location"></ion-icon></span>
        <p>Cannaught Palace, New Delhi<br>India</p>
        </div>
        <div>
        <span><ion-icon name="mail"></ion-icon></span>
        <a href="mailto:loremipsum@dolar.sit">loremipsum@dolar.sit</a>
        </div>
        <div>
        <span><ion-icon name="call"></ion-icon></span>
        <a href="tel:+919876543210">+91 987 654 3210</a>
        </div>
        <ul class="sci">
        <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></li>
        <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
        </ul>
    </div>

    Дизайн и верстка страницы Contact Us. Часть #1

    Послушать простым языком теоретическую часть и увидеть, как делают верстку профессионалы, вы можете уже сейчас, перейдя по ссылке на мой видеокурс.

    Продолжение следует..

    Источник