• Теория
  • Теория

Карта путешествий

После того, как вы успешно справились с вёрсткой галереи, заказчик подкинул вам второй заказ: сверстать ещё одну промо-страничку, состоящую из одних картинок.

Инструктор Кекс уже написал стили, чтобы картинки расположились по сетке (Кекс крутой разработчик и написал раскладку блоков на гридах).

Вам остаётся прописать пути для изображений в тегах <img>. И будет круто, если вы потренируетесь задавать правильные атрибуты alt (хоть это и не влияет напрямую на решение испытания).

А вот и ТЗ от Кекса:

Мяу! Некогда объяснять, есть восемь картинок, я экспортировал их из редактора, но не успел переименовать. Нужно прописать пути картинкам в разметке так, чтобы совпадало с макетом.

Обрати внимание, что картинки в трёх форматах: png, svg и jpg.
В png сохранена малоцветная карта путешествий, в jpg — фотографии, а в svg — векторный логотип с котиком.

А вот тут они лежат:

  • img/1.png
  • img/2.svg
  • img/3.png
  • img/4.jpg
  • img/5.jpg
  • img/6.jpg
  • img/7.png
  • img/8.png

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Ссылки и изображения» тренажёра «Знакомство с HTML и CSS» можно после регистрации и оформления подписки.