Составить сайт

Верстка простого сайта Кафе "Уютное место"

Необходимо сверстать сайт для кафе, используя старый стиль верстки, без применения современных возможностей CSS (например, flexbox или grid). Используйте CSS-методы, такие как float, clear и блочные элементы.

Для выполнения этого задания вам потребуется загрузить файл с макетом figma. Сохраните изображения под именами: salad.jpg, bruschetta.jpg, steak.jpg, pasta.jpg

Верстка HTML

1. Создайте блок с `id="wrapper"`
2. Размести внутри блоки с `id="header"`, `id="main"`, `id="footer"` 
3. Внутри блока с `id="header"` разместите элементы `h1` и `p` с названием и описанием кафе.
4. Внутри блока с `id="main"` разместите блоки `id="about"`, `id="content"`, `id="sidebar"`
5. Внутри блока с `id="about"` разместите информацию блока "О нас" из макета.
6. Внутри блока с `id="content"` разместите заголовок меню в элементе `h2`, а так же карточки позиций меню согласно макету. Задайте им класс `card`
7. Для названия позиции используйте элемент `h3`
8. Внутри блока с `id="sidebar"` разместите дополнительную информацию о кафе. Для названия раздела используйте `h2`. Для текста `Адрес` и `Телефон` используйте тег `strong` 
9.  Для разделов `График работы` и `Социальные сети` используйте неупорядоченный список `ul`
10. Внутри блока с `id="footer"` разместите информацию о копирайте.

Стили. Общее

Внимательно изучите макет. Обратите внимание на:

• Цвет фона вокруг `#wrapper`
• Внутренние отступы блоков
• Отсутствие отступа снизу после последнего элемента
• Отступы между разделами в блоке `#sidebar`
• 
  
• Необходимо задать общие стили: 
• для всех элементов - `box-sizing: border-box;` -
• для `body` - внешнии и внутренние отступы `0`
• для `заголовка второго уровня`
• внешние отступы со всех сторон `0`, внешний отступ снизу `18px`
• для параграфа `p` - внешние отступы `0`
• Для выравнивания элементов используйте свойство `float`.

Стилизация элементов

1. Задайте фиксированный размер для `#wrapper` равный `1200px`
2. С помощью автоматического отступа поместите `#wrapper` по центр, не забудьте установить цвет и внутренний отступ
3. Напишите стили для `#header` согласно макету. Не забудьте задать размер шрифта для названия и описания кафе
4. Задайте отступ для `#main`
5. Задайте стили для блока `О нас`. Не забудьте убрать отступ снизу для описания
6. Приступайте к стилизации блока `#main`. Еще раз обратите внимание на отступы, размеры и цвет шрифта
7. Стилизуйте раздел `#sidebar`. Цвет для ссылок указывать не нужно
8. Стилизуйте `#footer`, обратите внимание на пустой элемент `Space` в макете, вы должны добавить внешний отступ для `#footer`, а не создавать дополнительный элемент