Crowdly
Додати до Chrome
Завдання Використовуючи можливості модуля Css Flexbox: Викон...
✅ Перевірена відповідь на це питання доступна нижче. Наші рішення, перевірені спільнотою, допомагають краще зрозуміти матеріал.
Завдання
Використовуючи можливості модуля Css Flexbox:
- Виконайте верстку шапки сайту, яка містить логотип і навігаційну панель (меню сайту). Схема розташування елементів шапки сайту та її вигляд у вікні браузера зображено на рис. 6.6.
- Доповніть web-сторінку власною галереєю зображень, методика створення якої приведена в методичних рекомендаціях до даного заняття.
Рис. 6.6. Схема й вигляд шапки сайту у вікні браузера
Порядок виконання завдання
- На локальному диску свого ПК створіть папку pr6_flexbox.
- Розархівуйте в дану папку архів Додаткові матеріали_ПЗ6, який містить логотип, що необхідно буде розмістити в шапці сайту.
- Виконайте верстку шапки сайту, виконуючи послідовно наступні дії.
- Відкрийте папку pr6_flexbox у редакторі коду VS і створіть файл іndex.html. Додайте DOCTYPE й інші структурні теги.
- У розділ <body> додайте container (елемент <div> із класом .container), у якому буде знаходитися «шапка» header.page-header (елемент <header> із класом .page-header).
- Укладіть у «шапку» логотип і меню таким чином, щоб логотип і меню були сусідами.
- Використайте розмітку, наведену нижче, для шапки сайту, що містить логотип і навігаційне меню:
<div class="container">
<header class="page-header">
<div class="logo">
<a href="" class="logo-link">
<img src="./images/logo.png" alt="logo">
</a>
</div>
<ul class="menu">
<li class="item"><a href="#" class="link">Home</a></li>
<li class="item"><a href="#" class="link">Gallery</a></li>
<li class="item"><a href="#" class="link">Contacts</a></li>
<li class="item"><a href="#" class="link">Production</a></li>
</ul>
</header>
</div>
- Створіть файл style.css, підключіть до index.html за допомогою тегу <link> й задайте css-правила.
- Для container задайте max-width: 1000 px, вирівнювання — по центру (через margin), внутрішні поля (відступи) — зліва і справа по 15 px, фон — #cde8fc.
- Поставте в рядок логотип logo і меню ul.menu, для цього перетворіть header.page-header у flex-контейнер, використовуючи властивість display: flex;.
- Розмістіть всі пункти навігаційного меню теж в рядок, перетворивши menu у flex-контейнер.
- Вирівняйте логотип і меню вертикально по центру, використовуючи властивість align-items: center;.
- Розсуньте логотип і меню по кутах хедера, задавши justify-content:space-between. Оскільки елементів в рядку всього два (логотип і меню), вони притискаються до країв головної осі, а увесь вільний простір знаходиться між ними.
- Дозвольте елементам меню item перестрибувати в інший рядок при зменшені flex-контейнера у вікні браузера, використовуючи властивість flex-wrap: wrap;.
- Використовуємо flex-властивість контейнера gap, задайте відстань між flex-eлементами у меню — 10 px.
- Доповніть .menu наступними властивостями: padding: 15px; margin: 0; list-style: none;.
- Кожен елемент <a> із класом link зробіть блочним елементом (display: block;), укажіть внутрішні відступи (поля) з усіх сторін по 15 px, приберіть підкреслення для гіперпосилання (text-decoration: none), колір тексту задайте чорний. При наведені на пункт меню колір тексту змінюється на #a52a2a.
- Для logo задайте властивість padding: 25px.
- Перевірте роботу, відкривши створену web-сторінку в браузері. Проекспериментуйте з різними розмірами екранів.
(друга частина завдання)
- Доповніть створену web-сторінку з хедером власною галереєю зображень, використовуючи пояснення щодо створення такої галереї з методичних рекомендацій.
- Перевірте роботу, відкривши створену web-сторінку в браузері. Її вигляд повинен відповідати рис. 6.7.
Рис. 6.7. Вигляд web-сторінки у вікні браузера, яка містить логотип, навігаційне меню і галерею зображень
- Запакуйте папку pr6_flexbox в архів з ім’ям pr6_flexbox -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).