Homework — Web Academy Linea Rossa

Ссылка на дизайн в Figma: https://www.figma.com/design/

Мы видим, что отправка запроса происходит во новом окне, которое открывается на новой странице. Но бывают варианты, когда окно регистрации или отправки заявки появляется прям поверх страницы.

Есть два вида таких окон - всплывающие и модальные .

Всплывающие окна позволяют продолжать взаимодействие со страницей, не блокируя её. Это окно может находиться в любой части страницы и его можно закрыть.

Модальные окна блокируют страницу и вам на выбор остается два пути - заполнить форму и нажать кнопку "Отправить" или Закрыть модальное окно.

Это делается с помощью JavaScript - языка программирования, который мы будем изучать дальше.

Но в данном макете мы будем использовать новую страницу для оформления запроса на обратную связь. Для начала создадим новый .html файл в корневой папке нашего проекта.

В файле CSS в самом низу добавьте разделяющий комментарий, который нужно закомменировать. Это нужно для того чтобы визуально отделять код для разных файлов.

Скопируйте из файла index.html весь код и удалите лишнее. Обратите внимание, что на новой странице <header> и <footer> такие же, как и на главное, поэтому их можно оставить. А вот то, что находится в части <main> меняется - это можно удалить.

Первым блоком в <main> идёт баннер. Создадим для него отдельный <article> . И зададим классы.

Скачайте изображение стрелки в папку img . Изображение логотипа у вас уже есть в папке.

Скачайте изображение баннера в папке img . Чтобы не усложнять себе жизнь настройками фильтров для приглушения фона, просто скачайте уже полупрозрачную картинку от дизайнера в формате .png .

HTML

Код скопирован в буфер обмена copy


 <article class="contacts_banner">

      <div class="container">
           <img class="contacts_logo" src="img/logo.png" alt="Логотип">
           <h1 class="contacts_title">Контакты</h1>
           <a class="breadcrumbs" href="#">Главная</a>
           <img class="breadcrumbs" src="img/arrow.png" alt="Стрелка">
           <span class="breadcrumbs">Контакты</span>
      </div>
 </article>

Далее настраиваем классы.

Добавим фоновое изображение и зададим блоку внутренние отступы, чтобы отделить контент внутри него.

CSS

Код скопирован в буфер обмена copy


.contacts_banner {
      background-image: url(../img/contacts-banner.png);

      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      padding: 61px 0 98px;

}

Блок с классом container позволит нам расположить его по центру страницы со всеми его элементами внутри.

CSS

Код скопирован в буфер обмена copy


.container {

      text-align: center;

}

Далее логотип. Если вы посмотрите на макете, то дизайнер не упростил нам работу, так как не задал правильно размеры элементов. Сейчас мы оставим логотип таким же размером, как он у нас сохранён ранее, не будем ничего менять. Только зададим нижний отступ.

CSS

Код скопирован в буфер обмена copy


.contacts_logo {

      margin-bottom: 15px;

}

Далее заголовок. Я использовала тег <h1> , так как у нас новая страница и поэтому по правилам синтаксиса мы можем использовать заголовок этого уровня на каждой новой странице только один раз.

CSS

Код скопирован в буфер обмена copy


.contacts_title {

      margin: 0;
      margin-bottom: 20px;


      font-size: 48px;



}

Далее элементы из хлебных крошек. Нужно задать им расстояние справа, а так же выровнять по горизонтали.

CSS

Код скопирован в буфер обмена copy


.breadcrumbs {

      vertical-align: middle;

}

.breadcrumbs:not(:last-child) {

      margin-right: 6px;

}

Отлично, блок с баннером готов. Потом эту основу можно использовать для других второстепенных страниц.

Далее переходим к блоку с формой отправки заявки.

Если посмотреть внимательно на этот раздел, то мы можем увидеть, что слева располагается блок с контактами, а справа форма. Учитываем это при формировании вёрстки.

Сначала разберёмся с левой частью блока.

HTML

Код скопирован в буфер обмена copy


<article class="contacts_form">
      <ul class="list_reset contacts_list">

           <li class="contacts_list_item">
                <img src="img/list-img-1.png" alt="Адрес">
                <h2 class="contacts_list_title">Адрес</h2>
                <span class="contacts_list_text">Москва, 3 Микрорайон, д. 18, оф. 15</span>
           </li>

           <li class="contacts_list_item">
                <img src="img/list-img-2.png" alt="Телефон">
                <h2 class="contacts_list_title">Телефон</h2>
                <span class="contacts_list_text">офис: <a href="tel:+845466789">+(84) 546-6789</a></span><br>
                <span class="contacts_list_text">магазин: <a href="tel:+844566789">+(84) 456-6789</a></span>
           </li>

           <li class="contacts_list_item">
                <img src="img/list-img-3.png" alt="Время">
                <h2 class="contacts_list_title">Время работы</h2>
                <span class="contacts_list_text">Пн-Пт: 9:00 - 22:00</span><br>
                <span class="contacts_list_text">Сб-Вс: 9:00 - 21:00</span>
           </li>


      </ul>

</article>

Позиционируем весь блок по центру.

CSS

Код скопирован в буфер обмена copy


.contacts_form {

      text-align: center;

}

Далее работаем с основой списка <ul> . Нам нужно чтобы контент был прижат к левому краю.

CSS

Код скопирован в буфер обмена copy


.contacts_list {
      display: inline-block;

      text-align: left;

}

Между элементами списка необходимо задать расстояние.

CSS

Код скопирован в буфер обмена copy


.contacts_list_item:not(:last-child) {
      margin-bottom: 50px;
}

Чтобы сделать следующий шаг и разместить контент внутри элементов списка есть несколько способов:

объединить первую строку (иконка + заголовок);
оставить иконку отдельно и объединить заголовок + текст

От выбора будут зависеть стили для позиционирования. Я объединю текстовые блоки. Для этого в код HTML нужно добавить теги и класс.

HTML

Код скопирован в буфер обмена copy


<article class="contacts_form">
      <ul class="list_reset contacts_list">

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-1.png" alt="Адрес">
                <div>
                     <h2 class="contacts_list_title">Адрес</h2>
                     <span class="contacts_list_text">Москва, 3 Микрорайон, д. 18, оф. 15</span>
                </div>
           </li>

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-2.png" alt="Телефон">
                <div>
                     <h2 class="contacts_list_title">Телефон</h2>
                     <span class="contacts_list_text">офис: <a href="tel:+845466789">+(84) 546-6789</a></span><br>
                     <span class="contacts_list_text">магазин: <a href="tel:+844566789">+(84) 456-6789</a></span>
                </div>
           </li>

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-3.png" alt="Время">
                <div>
                     <h2 class="contacts_list_title">Время работы</h2>
                     <span class="contacts_list_text">Пн-Пт: 9:00 - 22:00</span><br>
                     <span class="contacts_list_text">Сб-Вс: 9:00 - 21:00</span>
                </div>
           </li>


      </ul>

</article>

Зададим размер иконкам и расстояние межу иконкой и текстом.

CSS

Код скопирован в буфер обмена copy


.contacts_list_item {
      gap: 30px;
}

.contacts_list_icon {
      height: 23px;
}

Далее работаем с текстовыми блоками. Для этого нужно сделать его flex-блоком. И незабудьте удалить принудительные переносы строки ( <br> ) в телефонах и времени работы, а вот в адресе, наоборот, перенос нужно добавить.

HTML

Код скопирован в буфер обмена copy


<article class="contacts_form">
      <ul class="list_reset contacts_list">

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-1.png" alt="Адрес">
                <div class="flex contacts_list_block">
                     <h2 class="contacts_list_title">Адрес</h2>
                     <span class="contacts_list_text">Москва, 3 Микрорайон,<br> д. 18, оф. 15</span>
                </div>
           </li>

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-2.png" alt="Телефон">
                <div class="flex contacts_list_block">
                     <h2 class="contacts_list_title">Телефон</h2>
                     <span class="contacts_list_text">офис: <a href="tel:+845466789">+(84) 546-6789</a></span>
                     <span class="contacts_list_text">магазин: <a href="tel:+844566789">+(84) 456-6789</a></span>
                </div>
           </li>

           <li class="contacts_list_item flex">
                <img class="contacts_list_icon" src="img/list-img-3.png" alt="Время">
                <div class="flex contacts_list_block">
                     <h2 class="contacts_list_title">Время работы</h2>
                     <span class="contacts_list_text">Пн-Пт: 9:00 - 22:00</span>
                     <span class="contacts_list_text">Сб-Вс: 9:00 - 21:00</span>
                </div>
           </li>


      </ul>

</article>

CSS

Код скопирован в буфер обмена copy


.contacts_list_block {
      flex-direction: column;
      gap: 10px;
}

Сделаем отступ справа, чтобы отделить контакты от формы.

CSS

Код скопирован в буфер обмена copy


.contacts_list {
      display: inline-block;

      text-align: left;
      margin-right: 110px;

}

Далее работаем с формой.

В форму ставим ссылку для проверки корректности отправки данных - https://jsonplaceholder.typicode.com/posts а так же пишем метод отправки данных "post".

Внутри формы на макете мы видим 5 элементов, будем добавлять их последовательно.

Форма для ввода данных - <input> . Для того чтобы правильно оформить заголовок для поля с вводом данных, используем тег <label> .

HTML

Код скопирован в буфер обмена copy


<article class="contacts_form">
      <ul class="list_reset contacts_list">
...

      </ul>
      <form action="https://jsonplaceholder.typicode.com/posts" method="post">
           <label for="username">Имя Фамилия
                <input type="text" placeholder="Иванова Светлана" required>
           </label>
      </form>

</article>

Метка: Homework

Создание формы обратной связи на сайте Furniro