Сетки / Испытание: котогалерея на inline-block [32/32]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×
Курс «Сетки»

Испытание: котогалерея на inline-block [32/32]

В этом испытании вам нужно доверстать галерею картин с котами с помощью блочно-строчных элементов.

HTML-код полностью готов и заблокирован. CSS-код готов частично. Мы сделали заготовки стилей, чтобы вам не нужно было верстать всё с нуля и угадывать не относящиеся к сетке мелочи.

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

Примените те приёмы работы с блочно-строчными элементами, которые разбирались в предыдущих заданиях.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Испытание: котогалерея на inline-block</title> <meta charset="utf-8"> </head> <body> <div class="gallery"> <div class="item"> <div class="title">Кот в коробке</div> <div class="frame"> <div class="image image-1"></div> <div class="date">июль 2013</div> </div> </div> <div class="item"> <div class="title">Кот и рыба</div> <div class="frame"> <div class="image image-2"></div> <div class="date">август 2013</div> </div> </div> <div class="item"> <div class="title">Кот, который мурлыкал</div> <div class="frame"> <div class="image image-3"></div> <div class="date">октябрь 2013</div> </div> </div> <div class="item"> <div class="title">Рыжий кот</div> <div class="frame"> <div class="image image-4"></div> <div class="date">ноябрь 2013</div> </div> </div> <div class="item"> <div class="title">Этюд с валерьянкой</div> <div class="frame"> <div class="image image-5"></div> <div class="date">январь 2014</div> </div> </div> </div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { width: 450px; height: 300px; font-family: "Arial", sans-serif; font-size: 12px; } .gallery { padding-top: 10px; } .gallery .item { width: 125px; margin: 0 10px; margin-bottom: 10px; } .gallery .title { margin-bottom: 5px; line-height: 14px; } .gallery .frame { background: #ecf0f1; } .gallery .image { height: 70px; background-position: 50% 50%; background-repeat: no-repeat; } .gallery .image-1 { background-color: #2ecc71; background-image: url("/assets/course13/cat_box.png"); } .gallery .image-2 { background-color: #3498db; background-image: url("/assets/course13/cat_fish.png"); } .gallery .image-3 { background-color: #f1c40f; background-image: url("/assets/course13/cat_purr.png"); } .gallery .image-4 { background-color: #e67e22; background-image: url("/assets/course13/cat_walk.png"); } .gallery .image-5 { background-color: #e74c3c; background-image: url("/assets/course13/cat_drunk.png"); } .gallery .date { font-style: italic; font-size: 11px; color: #666666; }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.