Создание формы подписки
Создадим форму подписки на рассылку. Сам процесс подписки на сервере реализовываться не будет, поскольку это невозможно сделать только с помощью HTML, CSS и JavaScript без серверного языка (например, Node.js). Однако, будем получать и проверять данные пользователя – это легко осуществимо с помощью JavaScript.
В блоке wrapper создадим блок с классом container email. Добавим заголовок и абзац текста (из макета). Ниже создадим блок (div с классом block), содержащий две секции: информацию и поле ввода.
Внутри блока block:
- Первый div: заголовок (h4) и абзац (из макета).
- Второй div: поле ввода (<input type="email">), placeholder (из макета) и кнопку «Continue» (из макета).
Стилизация формы подписки (CSS)
В файле CSS:
Блоку email добавим отступ снизу (padding-bottom: 120px). Заголовку h3: margin-top: 60px; и font-size: 30px;.
Блоку с классом block:
- Установим фоновый цвет (из макета, свойство background-color).
- margin-top: 30px;
- border-radius: 10px;
- padding: 40px 3%;
- width: 94%; (100% ширины с учётом 3% отступа).
- display: flex;, justify-content: space-between;, align-items: center; (центрирование).
Тексту внутри блока (h4 и p): font-size: 30px;, font-weight: 500; (для h4) и font-size: 16px; (для p).
Полю ввода (<input>):
- background-color: white;
- outline: none;
- border: none;
- border-radius: 5px;
- width: 380px;
- padding: 20px 30px;
- Шрифт Poppins (стили из селектора body).
- Цвет placeholder (из макета).
Кнопке: используем селектор, аналогичный кнопке в шапке, добавив cursor: pointer;, border: none; и корректируя padding. Для размещения кнопки внутри поля ввода:
- position: relative; для поля ввода и кнопки.
- left и z-index для позиционирования.
- padding-right к полю ввода.
- color: #fff; для текста кнопки.
Добавление JavaScript для проверки email
Добавим проверку email. При нажатии кнопки вызовется функция checkEmail(). Функция получит значение поля ввода через document.querySelector(‘#emailField’).value.
Проверка включает:
- Проверку на наличие символа «@» (includes(‘@’)).
- Проверку на наличие символа «.» (includes(‘.’)).
- Вывод сообщения об ошибке или «Все отлично».
Создание футера
Создадим тег <footer>:
- div с классом footer-block container.
- Три div: для логотипа, меню и контактной информации (Flexbox).
- <hr>.
- Абзац с копирайтом.
В CSS:
- background-color: black;
- padding: 50px 0;
- Для блока footer-block: display: flex;, justify-content: space-between;.
- Стили для логотипа (из шапки).
- Заголовки h4: font-weight: 500;, font-size: 17px;.
- list-style: none;
- Отступ сверху для элементов списка.
- opacity: 0.8 для элементов списка.
- Стили для <hr>: отступы, высота (0.6px), цвет.
- Центрирование абзаца с копирайтом.
В этом уроке мы завершили верстку основной страницы сайта, создав форму подписки и футер.