html-foxford-homeworks

Домашнее задание к лекции 2.1 «Управление блоками в потоке»

Задача №1

Задание выполняйте по ссылке «Управление блоками в потоке. Задача №1»

Вы решили создать свою онлайн книжную полку, где будете размещать все книги, которые у вас есть. Для удобства картинку, название и небольшое описание книги разместили в теге div. Теперь необходимо красиво оформить вашу книжную полку:

  1. Сделать размер div равным 40% окна браузера.
  2. Добавить для div поля в 20px, чтобы содержимое не прилипало к границам.
  3. Добавить отступ сверху в 10px для заголовка так, чтобы он поднялся на уровень с картинкой.
  4. Для картинки добавить отступ в 10px со всех сторон.

Дополнительное задание (необязательное к выполнению)

Добавить одну книгу самому (разметка уже есть, необходимо вставить свои картинку, название и описание). Картинку брать из поисковика и вставлять на неё ссылку. (Ссылку получаем через «Открыть картинку в новой вкладке» кликом правой кнопкой мыши.)

Чтобы удобно было искать книги по темам, добавить границы разного цвета и разный фоновый цвет (селекторы для вас уже подготовлены).

Добавить между ними отступ со всех сторон в 20px, чтобы книги не слипались.

Задача №2

Задание выполняйте по ссылке «Управление блоками в потоке. Задача №2»

Ваша книжная полка становится популярной в интернете и вы решаете сделать красивую галерею из обложек всех ваших книг. И вывести эту галерею на главную страницу, чтобы пользователям было удобнее искать нужную книгу.

  1. Все картинки разного размера, поэтому нужно их все выровнять по верхнему краю.
  2. Задать отступы в 20px со всех сторон.
  3. Задать границу 2px из разорванной линии синего цвета.
  4. Добавить поля в 15px картинкам, чтобы они имели отступ от границы.

Перед выполнением работы прочитайте инструкцию по работе с Codepen.

  1. Перейдите по ссылке, указанной в соответствующем задании.
  2. Нажмите кнопку Fork.
  3. Выполните домашнее задание.
  4. Нажмите кнопку Save.