Лабораторные работы / Лабораторная работа 6

Лабораторная работа 6

Тема: Стилизация декоративных элементов Задание: Оформить декоративные элементы на главной и внутренней

странице сайта «Графомания». В этой лабораторной работе вы продолжаете работать с файлом style.css. При выполнении работы следует учитывать то что все размеры, отступы и расположение элементов должны быть выполнены по макету. Должны быть подключены все шрифты, указанные в макете. Размеры и толщина текста соответствуют размерам в макете. Так же должны быть подключены все изображения, размеры и расположение по макету, свѐрстаны состояния элементов из styleguide.psd.

Подготовка к лабораторной работе:

Перед выполнением лабораторной работы рекомендуется пройти курсы на сайте htmlacademy.ru:

1.Декоративные эффекты. Позиционирование

2.Мастерские. Создаѐм меню

3.Мастерские. Декоративные элементы

4.Динамические эффекты. Двумерные трансформации

5.Мастерские. Декоративные эффекты

Продолжаем стилизацию блоков сайта.

1.Добавляем стилевые правила для всех контентных изображений в

проекте.

2.Наконец пришло время скрыть блоки с классом visually-hidden. Те блоки которые мы не планируем показывать пользователю. Для этого

воспользуемся следующим стилевым правилом:

.visually-hidden:not(:focus):not(:active), input[type="checkbox"].visually-hidden, input[type="radio"].visually-hidden {

position: absolute;

width: 1px; height: 1px; margin: -1px; border: 0; padding: 0;

white-space: nowrap;

clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;

}

3.Приступим к оформлению главного меню (класс site-navigation). Сделаем список флекс-контейнером и разрешим перенос элементов на новую строку (свойство flex-wrap со значением wrap).

4.Делаем ссылки главного и пользовательского меню блочными. Задаем ссылкам внутренние отступы и вертикальное выравнивание по центру.

5.Сделаем список пользовательского меню флекс-контейнером.

6.Добавим ссылке для входа иконку. Для этого задаем ссылке внутренний отступ слева, чтобы добавить туда иконку входа. Задаем position: relative, чтобы спозиционировать иконку относительно этой ссылки.

Далее добавим с помощью псевдоэлемента ::before иконку входа на страницу. Сначала зададим контент (content: “”), ширину, высоту. Чтобы иконка отобразилась на странице, нужно задать ей абсолютное позиционирование относительно ссылки входа.

Осталось сдвинуть иконку относительно ссылки для входа. Для это зададим иконке абсолютное позиционирование и зададим координаты top и left как на макете. Далее добавляем фон с изображением иконки. Не забываем указать свойства background-repeat и background-position. Осталось добавить иконке прозрачность (свойство opacity со значением 0.3)

Добавим для иконки стили при наведении и фокусе на ссылке, а также стили, когда ссылка активна. Переопределим свойство opacity - opacity: 1.

7. Главный заголовок страницы уже скрыт с помощью класса visually-hidden, поэтому переходим к разделу преимуществ.

Добавим заголовкам правила для внешних отступов согласно макету и зададим ему относительное позиционирование.

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

Воспользуемся псевдоэлементом ::after. Зададим контент, ширину и высоту (берем эти значения с макета сайта). Далее зададим декоративному

элементу белый цвет фона. Осталось расположить элемент согласно макету. Зададим абсолютное позиционирование для пседоэлементов и укажем координаты:

bottom: -30px; left: 50%;

Добавим левый отрицательный отступ равный -10px, чтобы элементы встали по центру блока.

Оcталось только повернуть квадратики. Для этого используем свойство transform со значением rotate(45deg).

Зададим абзацам в разделах преимуществ внешние отступы. Оформление раздела преимуществ завершено.

Приступим к оформлению больших информационных разделов. Добавим index-columns еще один фон – изображение разделительной

линии.

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

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

Затем списку новостей (класс news-list) сбрасываем отступы (и внешние, и внутренние) и задаем внешний нижний отступ.

Каждой новости (класс news-item) задаем нижний внешний отступ, а у текста новости отменим внешние отступы.

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

Добавим внешний отступ справа, чтобы рядом стоящие кнопки не прилипали друг к другу.

Добавим стили для неактивной кнопки. Обязательно убедитесь, что все сделали правильно. Для этого добавьте временно одной из кнопок атрибут disabled.

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

Фотографии в галерее тоже задаем фиксированные размеры.

Чтобы спозиционировать кнопки в галерее, добавим в разметку еще

одну обертку – тег div с классом gallery-container.

<div class="gallery-container"> <figure ...

<button ...

<button ...

</div>

Чтобы спозиционировать кнопки в галерее, добавим в разметку еще одну обертку.

Добавим обертке высоту и относительное позиционирование.

Зададим кнопкам ширину, обнулим внешние отступы, зададим boxsizing: border-box и абсолютно позиционируем. (Обратите внимание, что эти свойства мы применяем только к кнопкам галереи, а не ко всем кнопкам на странице. Поэтому необходимо кнопкам галереи добавить дополнительный класс gallery-button).

Осталось кнопки галерей прижать к нижнему краю блока. Для этого свойству bottom зададим значение 0.

Пока у нас видна только одна кнопка, т.к. кнопки у нас расположились одна над другой. Поправим это. Зададим кнопкам координаты. Кнопке «Назад» зададим свойство left со значением 0. А кнопке «Вперед» зададим свойство right со значением 0.

10. Перейдем к разделу с контактной информацией. У абзацев обнулим все внешние отступы и зададим внешний отступ снизу.

11.Переходим к форме записи. Описанию формы (класс appointmentinfo) обнулим все внешние отступы и зададим внешний отступ снизу.

Теперь приступим к оформлению самой формы.

Сделаем форму флекс-контейнером. Разрешим перенос элементов на новую строку (свойство flex-wrap).

Зададим элементам формы фиксированную ширину. Зададим форме равномерное распределение элементов. Теперь каждому элементу задаем внешние отступы.

Подписи к полям ввода (тег label) сделаем блочными элементами и зададим им внешний отступ снизу и слева.

Теперь займемся самими полями ввода. Задаем box-sizing: border-box, ширину и внутренние отступы.

Добавим стили кнопке в форме записи. Делаем кнопку блочной и задаем ширину 100%. Задаем внешние отступы.

12.Приступим к стилизации подвала. Начнем с того, что скроем текст с названием соцсетей. Обернем подписи в span и сделаем их скрытыми.

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

Скопируйте все содержимое файла и вставьте в разметку сразу после тега span.

Выполните аналогичные действия и для остальных иконок соцсетей.

14.Далее зададим социальным кнопкам ширину, высоту и фоновый

цвет.

15. Чтобы выравнять иконки в кнопках, делаем каждую кнопку флекс-контейнером. Расположим иконки по центру внутри каждой кнопки используя свойства align-items и justify-content.

16.Список кнопок делаем флекс-контейнером и зададим фиксированную ширину (конечно если у вас кнопки оформлены в виде списка). Разрешим перенос элементов на новую строку и зададим равномерное распределение. Далее обнулим внутренние отступы у списка и отцентруем его с помощью внешних отступов.

17.Зададим стили социальным кнопкам при наведении и фокусе. Стиль оформления смотрим в стайлгайде.

18.Добавим стили для самих иконок при наведении и фокусе на социальные кнопки. Для этого используем сложный селектор

.social-button:hover path,.social-button:focus path.

19.Сделаем подпись «Мы в соцсетях» в разделе социальных кнопок блочной и зададим внешний нижний отступ.

20.Осталось стилизовать раздел копирайта. Подпись сделаем блочной

изададим нижний внешний отступ. Кнопку тоже сделаем блочной и обнулим ей правый внешний отступ.

Стилизация главной страницы готова!!!