Веб-дизайн и верстка. Лабораторное занятие 3. Простой CSS-шаблон страницы

Для создания простого шаблона используйте свой код из предыдущего задания, однако готовое текущее задание вам нужно опубликовать отдельным постом. Настройки темы блога те же, что и в предыдущем задании (Рекомендованная тема блога - Notable, параметры страницы: сайдбар - тема - настроить - дополнительно - ширина - ширина области с контентом - 1280 px, боковая панель - 320 рх).

Вам нужно создать колоночный шаблон страницы с двумя колонками и двумя строками (то есть 4х4 клетки) плюс футер:

I. CSS:

1. В CSS создайте идентификатор обертки колонок и укажите в нем параметр ширины (width), в зависимости от ширины вашего меню. Лучше указывать в процентах. В моем примере это 145%, если ваша страница такой же ширины - границы колонок и меню в целом совпадут. Дополнительно укажите в идентификаторе параметр overflow: hidden для лучшего отображения;

2. Создайте два разных класса для каждой из колонок. В каждом классе укажите, что колонка появляется начиная слева (float:left), задайте ширину в процентах, а высоту в пикселях, укажите фон в классе каждой колонки (background).

3. Создайте селектор футера. Задайте его ширину в процентах (должна совпадать с шириной идентификатора), укажите цвет фона. 

II: HTML:

4. Откройте ваш идентификатор в теге <div>

5. Откройте ваш класс левой колонки в теге <div>, внутри него в теге абзаца напишите краткий текст, после чего закройте </div>.

6. Аналогичным образом (как в пункте 5) поступите с классом правой колонки.

7. Продублируйте пункты 5 и 6 для создания второй строки колонок

8. Закройте общий идентификатор

9. Встройте <footer> перед закрывающим тегом </html> Если все верно, то ваш шаблон будет выглядеть следующим образом: https://konoplevtech3.blogspot.com/2022/02/blog-post.html

Ссылки на выполненное задание принимаются в комментариях до 11:00 22 февраля.