Сайт html + css по шаблону дизайна

Задание

1. Создать html файл главной страницы вашего сайта (визуальный шаблон см. в

отдельном файле).

2. Создать таблицу стилей вашего сайта и подключить ее к главной странице.

3. Создать основную структуру сайта.

4. Заполните сайт текстовой информацией (хотя бы частично). Рисунки, фон,

градиенты и прочий визуальный контент нет необходимости добавлять на этой

стадии, он будет добавлен позже.

5. Создать область навигации (вверху и внизу страницы).

6. Добавить еще несколько (не менее 3-х) страниц на сайт.

7. Создать гиперссылки для навигации между страницами сайта.

8. Присвойте свойству box-sizing значение border-box.

9. Установите необходимые размеры и отступы блоков вашего сайта согласно

индивидуальному визуальному шаблону.

10. Осуществите позиционирование содержимого сайта, т.е. создайте макет как

главной, так и остальных страниц сайта. При этом в разных частях сайта

необходимо воспользоваться основными тремя технологиями: через inline-

block, через float и с использованием flexbox.

Лабораторная работа No 2-1

Задание

1. В вашем проекте, созданном в предыдущей лабораторной работе, измените

свойства шрифтов на необходимые. Установите необходимый размер шрифта,

высоту строки, начертание, цвет.

2. Примените к тексту, там, где это необходимо, такие свойства как text-decoration,

text-transform, letter-spacing.

3. Встройте минимум два веб-шрифта в ваш проект. Один, из которых, должен

встраиваться как локальный шрифт, а второй подключаться по ссылке с сайта

https://fonts.google.com.

4. Добавьте фон, а также градиент к страницам вашего сайта в тех местах, где это

необходимо.

Лабораторная работа No 3

Задание

1. В вашем проекте, созданном в предыдущих лабораторных работах, создайте

минимум два списка, один из которых должен быть нумерованным, а второй

маркированным. При необходимости добавьте в проект страницы и текстовый

контент для создания списков. Необходимо уметь изменять маркеры, нумерацию в

списках.

2. Добавьте в ваш проект изображения, а также фоновые картинки.

3. На отдельной странице вашего сайта добавьте мультимедийный контент: аудио и

видео, которые расположены локально в файловой системе сайта.

4. Добавьте в ваш проект страницу «О нас», на которой разместите необходимый текст

с контактной информацией, также два элемента <iframe> - ролик с youtube и карту с

Google Maps.

Лабораторная работа No 4-1

Задание

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

страницу (сохраняя общий стиль сайта!), на которой разместите табличную

информацию (прайс лист, каталог товаров и пр.).

2. Добавьте в меню навигации сайта пункт с ссылкой, ведущей на страницу с таблицей.

3. Таблица должна состоять минимум из 10 строк и 5 столбцов! Также она должна

содержать все типичные элементы: заголовок, шапку, тело и подвал (<caption>,

<thead>, <tbody> и <tfoot>).

4. В таблице должны быть объединения ячеек как по строкам, так и по столбцам (для

этого необходимо разработать соответствующую структуру).

5. Таблица должна быть стилизована для удобного восприятия табличной

информации.

Лабораторная работа No 5

Задание

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

страницу (сохраняя общий стиль сайта!), на которой разместите web-форму.

2. На форме должны быть текстовые поля и текстовые области, переключатели,

флажки, списки, а также кнопки.

3. Форма должна иметь не менее пяти элементов управления.

4. Элементы формы должны быть организованы с помощью <label>, <fieldset> и

<legend>.

5. Создайте необходимые подсказки для элементов управления с помощью атрибута

placeholder. Используйте атрибут required для проверки заполнения полей перед

отправкой формы на сервер.

Использовать только html+css  , Пример дизайна на скриншоте , не обязательно точь в точь копировать каждую картинку и надписи , все картинки и прочее на сайте на ваше усмотрение , но чтобы сохранялся общий стиль . Нужно несколько страничек . Требования указаны выше