Описание проекта

В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:

Подготовка изображений
Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:

firefox_logo-only_RGB.png
firefox-addons.jpg
mozilla-dinosaur-head.png
Назовите их как-нибудь разумно, например firefoxlogo400.png и firefoxlogo120.png.

Вместе с mdn.svg, эти изображения будут иконками для ссылок на другие ресурсы внутри секции further-info. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и index.html.

Затем создайте фоновую версию red-panda.jpg шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и index.html.

Примечание: Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. tinypng.com - отличный сервис для этого.

Добавление логотипа в шапку
Добавьте внутрь элемента <header> элемент <img>, который вставит уменьшенную версию логотипа Firefox в шапку.

Добавление видео к основному содержанию статьи
Внутри элемента <article> (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке https://www.youtube.com/watch?v=ojcNcvb1olg, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.

Добавление отзывчивых изображений к ссылкам с доп. информацией
Внутри <div> с классом further-info вы найдёте четыре элемента <a> — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент <img> внутрь каждого элемента <a> дополнив подходящими атрибутами src, alt, srcset и sizes.

В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.

Убедитесь, что вы использовали изображения, соответствующие ссылкам.

Примечание: Для проверки правильности работы srcset/sizes , вам нужно загрузить ваш сайт на сервер (используйте Github pages - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в Responsive images: useful developer tools.

Искусственно изменённая красная панда
Внутри элемента <div> с классом red-panda, мы хотим поместить элемент <picture> , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.