На странице с курсами Нетологии каждый курс представлен отдельным блоком с кратким описанием и изображением-иконкой. Эти блоки выглядят так:
Но до этого момента на странице отображались одинаковые изображения для любых устройств с любыми экранами. Самое время заняться версткой и сделать блоки и изображения в них адаптивными.
-
Если вы выполняете задание в песочнице CodePen - в начале работы добавьте в тег
<head>следующий мета-тег<meta name="viewport" content="width=device-width, initial-scale=1.0">. Если вы выполняете задание локально - данный мета-тег уже добавлен. -
Измените HTML-разметку блоков с курсами так, чтобы на устройствах с шириной экрана до
640pxзагружались следующие изображения: front-end-mobile.jpg, fullstack-designer-mobile.jpg и web-developer-mobile.jpg. -
Сделайте так, чтобы на устройствах с шириной экрана от
641pxзагружались следующие изображения: front-end-desktop.jpg, fullstack-designer-desktop.jpg и web-developer-desktop.jpg. Также эти изображения должны отобразиться в браузерах, которые не поддерживают тег<picture>. -
Протестируйте результат. На устройствах с шириной экрана от
641pxблок с курсом должен выглядеть так:
А на устройствах с шириной до 640px так:
Внесите изменения во вкладке HTML. Перед началом работы сделайте форк пена на https://codepen.io/Netology/pen/yPQQWq