Лабораторная работа №1. Вёрстка домашней страницы

Сверстайте главную страницу сайта компании по доставке бизнес-ланчей и оформите сайт с помощью стилей CSS.

Порядок выполнения

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

В ходе лабораторной работы 1 нужно сверстать главную страницу компании. Примерный макет страницы представлен ниже.

HTML

Обязательные элементы, которые должны быть на странице
(в скобках указано, какой HTML-тэг должен быть использован):

Шапка сайта с заголовком и блоком навигации (header)
- Заголовок (h1)
- Блок навигации (nav) с ссылками (a) на другие страницы сайта (пункт меню "Контакты" должен быть якорной ссылкой, ведущей к футеру)
Блок с основным содержимым страницы (main)
- Блок с информацией о компании (section)
  - Заголовок (h2)
  - Изображение (img)
  - Текст (p)
- Блок с преимуществами компании (section)
  - Заголовок (h2)
  - Маркированный список с преимуществами (ul). Описать минимум 3 преимущества
- Блок с самыми популярными блюдами (section)
  - Заголовок (h2)
  - Таблица (table). Минимум 5 блюд в таблице
Футер с контактными данными (footer)
- Контактные данные (p, a)

Чтобы проверить валидность кода, воспользуйтесь validator.w3.org.

Выберите понравившийся шрифт на fonts.google.com и подключите к странице (он должен быть применен ко всему размещенному тексту).

После того, как вы сверстали страницу, необходимо оформить ее стилями CSS.

CSS

В данном разделе перечислены обязательные CSS-свойства, которые должны быть использованы. Необязательно использовать все свойства из перечня для каждого указанного тега. Например, вы можете использовать для тегов p только свойство font-family, но тогда нужно применить font-size и color для других текстовых элементов.

Для блоков (div, header, footer, main, nav)

margin
padding
box-sizing: border-box (примените к универсальному селектору )

Для текста

font-family (к странице должен быть подключен Google-шрифт)
font-size
color

Для изображений

width
height

Для таблиц

padding
border
border-collapse: collapse;
text-align

Для ссылок

text-decoration: none
font-family
font-size
color (цвет ссылок должен изменяться при наведении, используйте :hover)

Для футера

background-color: black
color: white

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

Контент-сайта

Ссылка на изображение из макета.

Защита

Чтобы сдать лабораторную, необходимо выполнить все требования.

Материалы для изучения

7.1 KiB Raw Blame History Unescape Escape

Лабораторная работа №1. Вёрстка домашней страницы

Порядок выполнения

HTML

CSS

Для блоков (div, header, footer, main, nav)

Для текста

Для изображений

Для таблиц

Для ссылок

Для футера

Контент-сайта

Защита

Материалы для изучения

HTML

CSS

Другое

7.1 KiB

Raw Blame History