Типичная страница для сайтов различных предприятий — страница «О компании». Такая же страница есть и на сайте компании «Сигма», которая обратилась к вам за помощью. Сейчас эта страница выглядит так:
Нужно изменить верстку таким образом, чтобы на экранах шириной более 960px меню и блок с последними новостями отображались слева от основного контента, а на экранах с шириной менее 961px боковое меню скрывалось.
-
Если вы выполняете задание в песочнице CodePen - в начале работы добавьте в тег
<head>следующий мета-тег<meta name="viewport" content="width=device-width, initial-scale=1.0">. Если вы выполняете задание локально - данный мета-тег уже добавлен. -
На устройствах с шириной экрана от
961pxсделайте так, чтобы у элемента с классомasideширина всегда была320px. -
На устройствах с шириной экрана от
961pxсделайте так, чтобы у элемента с классомasideправый внешний отступ всегда был40px. -
На устройствах с шириной экрана от
961pxсделайте так, чтобы элемент с классомcontentрастягивался по ширине на все доступное пространство. -
На устройствах с шириной экрана от
961pxсделайте так, чтобы элемент с классомcontentрасполагался, как показано в задании. -
Для устройств с шириной экрана до
960pxскройте элемент с классомaside__menu. -
Протестируйте результат. На устройствах с шириной экрана от
961pxэлементы должны располагаться следующим образом:
А на устройствах с шириной экрана до 960px — так:
Перед началом работы сделайте форк пена на https://codepen.io/Netology/pen/GOwwaN. Внесите изменения во вкладке CSS пена.