mixoil / html-css-1

Страница фотографий

HTML&CSS#1

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

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

Помогите Кеше и сверстайте для него каркас сайта, на котором он мог бы показать всем свою коллекцию фотографий. В разметке каркаса сайта должны быть:

1. Блок для заголовка;

2. Блок с фотографиями;

3. Блок с тегами для удобной фильтрации фотографий;

4. Блок для футера.

Примерно так:

❗Обратите внимание:

• В качестве фотографий используйте работы с Google Диск, который нам любезно предоставил Кеша;
• Блок с фотографией ограничьте размером 320x240.

⭐ Иннокентий еще пока не изучил HTML&CSS, но уже хочет, чтобы его новый сайт был красивым. Сделайте Кеше одолжение и выполните 3 простых дополнительных задания:

1. Выровняйте блоки с картинками и фотографиями (1 и 2 на макете) по центру страницы так, чтобы отступы от левого края экрана и от правого были одинаковые;

2. Покрасьте блоки хедера и футера в #0088BB цвет;

3. Сделайте так, чтобы блоки хедера и футера имели от контента одинаковые отступы снизу и сверху, соответственно.

❗Обратите внимание: чтобы вам было легче справиться с дополнительным заданием, мы оставили в полезных ссылках ресурсы, которые могут вам помочь.

Полезные ссылки:

1. Google Диск с коллекцией фотографий

2. Макет

3. ⭐ Тут про центрирование

4. ⭐ Тут про отступы ​​