УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки HTML и CSS




Контрольное задание «Создание адаптивного шаблона на основе PSD-шаблона».
Варианты 1-15

Задание: на основе PSD-файла макета сайта согласно своему варианту разработать адаптивный HTML-шаблон любым из средств (Bootstrap 3 или 4, Flex-верстка, Grid-верстка, медиа-запросы).

Требования к макету:

1. Макет должен иметь различное расположение блоков на экранах разной ширины. Предварительно необходимо сделать эскиз сетки html-страницы для четырех экранов (xs, sm, md, lg). Продемонстрировать эскиз при сдаче контрольного задания.
2. Навигационная панель должна сворачиваться в кнопку с выпадающим меню.
3. В макет включить адаптивный слайдер.
4. При необходимости часть элементов дизайна макета можно скрыть на маленьком экране.
5. Окончательный вариант должен быть максимально похож на исходник.
6. При верстке средствами фреймворка Bootstrap рекомендуется просмотреть видеокурс http://webformyself.com/minikurs/bootstrap/index-subscribe.htmlВерсию Bootstrap взять из исходников, которые приложены к уроку 1 видеокурса. 


Вариант 1

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 1


Вариант 2

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 2


Вариант 3

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 3


Вариант 4

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 4


Вариант 5

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 5


Вариант 6

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 6


Вариант 7

Скачать PSD-шаблон 

Шаблон сайта PSD, вариант 7


Вариант 8

Скачать PSD-шаблон 

Шаблон сайта PSD, вариант 8


Вариант 9

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 9


Вариант 10

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 10


Вариант 11

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 11


Вариант 12

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 12


Вариант 13

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 13


Вариант 14

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 14


Вариант 15

Скачать PSD-шаблон

Шаблон сайта PSD, вариант 15