Ссылка на дизайн в Figma: https://www.figma.com/design/
Мы видим, что отправка запроса происходит во новом окне, которое открывается на новой странице. Но бывают варианты, когда окно регистрации или отправки заявки появляется прям поверх страницы.
Есть два вида таких окон -
всплывающие
и
модальные
.
Всплывающие окна позволяют продолжать взаимодействие со страницей, не блокируя её. Это окно может находиться в любой части страницы и его можно закрыть.
Модальные окна блокируют страницу и вам на выбор остается два пути - заполнить форму и нажать кнопку "Отправить" или Закрыть модальное окно.
Это делается с помощью JavaScript - языка программирования, который мы будем изучать дальше.
Но в данном макете мы будем использовать новую страницу для оформления запроса на обратную связь. Для начала создадим новый
.html
файл в корневой папке нашего проекта.
В файле CSS в самом низу добавьте разделяющий комментарий, который нужно закомменировать. Это нужно для того чтобы визуально отделять код для разных файлов.
Скопируйте из файла
index.html
весь код и удалите лишнее. Обратите внимание, что на новой странице
<header>
и
<footer>
такие же, как и на главное, поэтому их можно оставить. А вот то, что находится в части
<main>
меняется - это можно удалить.
Первым блоком в
<main>
идёт баннер. Создадим для него отдельный
<article>
. И зададим классы.
Скачайте изображение стрелки в папку
img
. Изображение логотипа у вас уже есть в папке.
Скачайте изображение баннера в папке
img
. Чтобы не усложнять себе жизнь настройками фильтров для приглушения фона, просто скачайте уже полупрозрачную картинку от дизайнера в формате
.png
.
<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>
Далее настраиваем классы.
Добавим фоновое изображение и зададим блоку внутренние отступы, чтобы отделить контент внутри него.
.contacts_banner {
background-image: url(../img/contacts-banner.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 61px 0 98px;
}
Блок с классом
container
позволит нам расположить его по центру страницы со всеми его элементами внутри.
.container {
text-align: center;
}
Далее логотип. Если вы посмотрите на макете, то дизайнер не упростил нам работу, так как не задал правильно размеры элементов. Сейчас мы оставим логотип таким же размером, как он у нас сохранён ранее, не будем ничего менять. Только зададим нижний отступ.
.contacts_logo {
margin-bottom: 15px;
}
Далее заголовок. Я использовала тег
<h1>
, так как у нас новая страница и поэтому по правилам синтаксиса мы можем использовать заголовок этого уровня на каждой новой странице только один раз.
.contacts_title {
margin: 0;
margin-bottom: 20px;
font-size: 48px;
}
Далее элементы из хлебных крошек. Нужно задать им расстояние справа, а так же выровнять по горизонтали.
.breadcrumbs {
vertical-align: middle;
}
.breadcrumbs:not(:last-child) {
margin-right: 6px;
}
Отлично, блок с баннером готов. Потом эту основу можно использовать для других второстепенных страниц.
Далее переходим к блоку с формой отправки заявки.
Если посмотреть внимательно на этот раздел, то мы можем увидеть, что слева располагается блок с контактами, а справа форма. Учитываем это при формировании вёрстки.
Сначала разберёмся с левой частью блока.
<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>
Позиционируем весь блок по центру.
.contacts_form {
text-align: center;
}
Далее работаем с основой списка
<ul>
. Нам нужно чтобы контент был прижат к левому краю.
.contacts_list {
display: inline-block;
text-align: left;
}
Между элементами списка необходимо задать расстояние.
.contacts_list_item:not(:last-child) {
margin-bottom: 50px;
}
Чтобы сделать следующий шаг и разместить контент внутри элементов списка есть несколько способов:
- объединить первую строку (иконка + заголовок);
- оставить иконку отдельно и объединить заголовок + текст
От выбора будут зависеть стили для позиционирования. Я объединю текстовые блоки. Для этого в код HTML нужно добавить теги и класс.
<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>
Зададим размер иконкам и расстояние межу иконкой и текстом.
Далее работаем с текстовыми блоками. Для этого нужно сделать его flex-блоком. И незабудьте удалить принудительные переносы строки (
<br>
) в телефонах и времени работы, а вот в адресе, наоборот, перенос нужно добавить.
<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>
Сделаем отступ справа, чтобы отделить контакты от формы.
.contacts_list {
display: inline-block;
text-align: left;
margin-right: 110px;
}
Далее работаем с формой.
В форму ставим ссылку для проверки корректности отправки данных - https://jsonplaceholder.typicode.com/posts а так же пишем метод отправки данных "post".
Внутри формы на макете мы видим 5 элементов, будем добавлять их последовательно.
Форма для ввода данных -
<input>
. Для того чтобы правильно оформить заголовок для поля с вводом данных, используем тег
<label>
.
<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>
Сейчас мы видим не корректное позиционирование двух блоков. Исправим это. Для этого нужно вернуться к общему родительскому блоку и сделать его flex-блоком.
<article class="contacts_form flex">
<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>
Как видим, блоки встали как нам нужно, но центральное позиционирование пропало. Чтобы это исправить нам просто нужно заменить свойство.
.contacts_form {
justify-content: center;
}
Теперь, всё на своих местах. Продолжаем работать с формой.
Зададим новый класс для
<label>
. А так же сделаем его flex-блоком.
Зададим новый класс для
<input>
.
<form action="https://jsonplaceholder.typicode.com/posts" method="post">
<label class="flex form_item" for="username">Имя Фамилия
<input class="form_input" type="text" placeholder="Иванова Светлана" required>
</label>
</form>
.form_item {
flex-direction: column;
}
Расстояние между заголовком и самим полем ввода в данном случае можно реализовать только через верхний отступ у поля ввода. Так же зададим размеры блока ввода данных и добавим внутренние отступы.
.form_input {
margin-top: 22px;
width: 530px;
min-height: 53px;
border-style: none;
border: 1px solid #9F9F9F;
border-radius: 10px;
padding: 25px 28px;
}
.form_input::placeholder {
color: #9F9F9F;
}
Готово, можно скопировать похожие поля и поменять в них данные. Не забудьте менять типы данных и плейсхолдеры.
<form action="https://jsonplaceholder.typicode.com/posts" method="post">
<label class="flex form_item" for="username">Имя Фамилия
<input class="form_input" type="text" placeholder="Иванова Светлана" required>
</label>
<label class="flex form_item" for="username">Ваш email адрес
<input class="form_input" type="email" placeholder="example@gmail.com" required>
</label>
<label class="flex form_item" for="username">Тема вопроса
<input class="form_input" type="text" placeholder="Краткое описание вопроса" required>
</label>
</form>
Если сейчас кликнуть в одно из полей ввода, то мы увидим синюю рамку.
Так как у нас в дизайне нет такого цвета, то логичнее будет заменить его на один из цветов сайта. Сначала уберем стандартную обводку, а затем настроим собственную.
.form_input:focus {
outline: none;
border: 2px solid #AA8633;
}
Далее у нас идёт поле для ввода текста. Поэтому ему нужно будет задать соответствующий тег
<textarea>
. И дополнительный класс для стилизации.
<form action="https://jsonplaceholder.typicode.com/posts" method="post">
<label class="flex form_item" for="username">Имя Фамилия
<input class="form_input" type="text" placeholder="Иванова Светлана" required>
</label>
<label class="flex form_item" for="username">Ваш email адрес
<input class="form_input" type="email" placeholder="example@gmail.com" required>
</label>
<label class="flex form_item" for="username">Тема вопроса
<input class="form_input" type="text" placeholder="Краткое описание вопроса" required>
</label>
<label class="flex form_item" for="username">Тема вопроса
<textarea class="form_input form_textarea" name="message" placeholder="Добрый день! Я бы хотел узнать..." required></textarea>
</label>
</form>
.form_input {
max-width: 530px;
min-height: 120px;
max-height: 530px;
}
Форма почти готова, осталось только задать расстояния между полями ввода данных. Для этого добавим тегу
<form>
класс
flex
. После этого все поля выстроятся в линию. Достаточно переназначить их расположение в классе для формы, который мы создали заранее, а затем добавить расстояние между элементами.
<form class="flex form_block" action="https://jsonplaceholder.typicode.com/posts" method="post">
...
</form>
.form_block {
flex-direction: column;
}
Форма готова. Можно позиционировать её и добавить пропущенный ранее заголовок и текст.
<article class="contacts_form flex">
<h2 class="contacts_form_title">Свяжитесь с нами</h2>
<p class="contacts_form_text">Для получения дополнительной информации...</p>
<ul class="list_reset contacts_list">...</ul>
<form action="https://jsonplaceholder.typicode.com/posts" method="post">...</form>
</article>
Мы видим, что ранее заданные свойства нам не подходят. Поэтому позиционируем блоки колонной.
.contacts_form {
justify-content: center;
flex-direction: column;
}
Так как мы поменяли ось за счет смены позиционирования flex-элементов, то и свойство
justify-content: center;
больше не работает. Его нужно заменить на корректное.
.contacts_form {
align-items: center;
flex-direction: column;
}
Уже лучше, но всё еще не то. Так как теперь блок с адресом и формой стоят не по дизайну. Эту проблему можно решить объединив их в один
<div>
и присвоив ему класс
flex
.
<article class="contacts_form flex">
<h2 class="contacts_form_title">Свяжитесь с нами</h2>
<p class="contacts_form_text">Для получения дополнительной информации...</p>
<div class="flex">
<ul class="list_reset contacts_list">...</ul>
<form action="https://jsonplaceholder.typicode.com/posts" method="post">...</form>
</div>
</article>
Отлично, всё встало на свои места, осталось немного доработать по дизайну.
Стилизуем заголовок.
.contacts_form_title {
margin: 0;
margin-bottom: 27px;
font-weight: 700;
font-size: 36px;
}
Стилизуем текст.
.contacts_form_text {
margin: 0;
margin-bottom: 85px;
max-width: 668px;
text-align: center;
color: #9f9F9F;
}
Почти закончили. Всему блоку нужно задать внутренние отступы сверху и снизу, чтобы отделить контент от края.
.contacts_form {
flex-direction: column;
text-align: center;
padding: 90px 0 120px;
}
Обратим внимание на то, что левый блок с контактами должен стоять по центру блока с формой. Для этого родительскому диву этих двух блоков нужно создать новый класс.
<article class="contacts_form flex">
<h2 class="contacts_form_title">Свяжитесь с нами</h2>
<p class="contacts_form_text">Для получения дополнительной информации...</p>
<div class="flex contacts_form_group">
<ul class="list_reset contacts_list">...</ul>
<form action="https://jsonplaceholder.typicode.com/posts" method="post">...</form>
</div>
</article>
.contacts_form_group {
align-items: center;
}
Теперь то, что нужно. Но мы ещё пропустили кнопку. Её добавим внутрь самой формы.
<form action="https://jsonplaceholder.typicode.com/posts" method="post">
<label class="flex form_item" for="username">Имя Фамилия
<input class="form_input" type="text" placeholder="Иванова Светлана" required>
</label>
<label class="flex form_item" for="username">Ваш email адрес
<input class="form_input" type="email" placeholder="example@gmail.com" required>
</label>
<label class="flex form_item" for="username">Тема вопроса
<input class="form_input" type="text" placeholder="Краткое описание вопроса" required>
</label>
<label class="flex form_item" for="username">Тема вопроса
<textarea class="form_input form_textarea" name="message" placeholder="Добрый день! Я бы хотел узнать..." required></textarea>
</label>
<button class="btn_reset form_btn">Отправить</button>
</form>
.form_btn {
max-width: 235px;
min-height: 55px;
padding: 17px 73px;
border-radius: 5px;
margin-top: 16px;
background-color: #B88E2F;
color: white;
font-size: 18px;
}
Отлично! Поздравляю, этот раздел страницы готов.
Самостоятельная работа
Вам необходимо самостоятельно оформить блок с преимуществами.
Для этого вы можете устроить мозговой штурм в групповом чате. Главное правильно формулируйте свой вопросы, дополняйте его кусочками вашего кода, где у вас не получается, чтобы остальные ученики могли понять, в чем именно у вас проблема.
Пользуйтесь сайтом codepen.com чтобы составлять разные части кода - это всегда удобно, чтобы сразу видеть изменения и не "поломать" рабочую версию кода.
Желаю удачи!
