Лабораторна робота № 14 (Flex-Box)

Завдання 1

Розмітити сторінку:
- Використовуємо елемент <header> з заголовком верхнього рівня всередині, та елемент <section>, що містить елементи <article>.
  - HTML-елемент <header> є вводним контентом, зазвичай групою вступних або навігаційних засобів. Він може містити інші елементи-заголовки, а також логотип, форму пошуку, ім'я автора та інші елементи.
  - HTML-елемент <section> — це автономний розділ, який не може бути представлений більш точним за семантикою елементом всередині HTML-документа. Зазвичай, але не завжди, розділи мають заголовок.
  - HTML-елемент <article> представляє самостійну частину документа, сторінки, застосунку або сайту, призначену для незалежного поширення або повторного використання. Цей елемент може представляти статтю на форумі, статтю в журналі або газеті, запис у блозі чи будь-який інший самостійний фрагмент контенту.
Картинки знаходяться в папці WEBкартинки/Flex, зробити спливаючі підказки до кожного flex-блоку.
Додати Flex-властивості, щоб ваша сторінка виглядала як на зразку.

Варіант 1

Скопіювати у свою папку файли: Осень1.jpg, Осень2.jpg, Осень3.jpg, Осень.txt

Створити документ наступної структури та оформлення:

body: Загальні властивості: шрифт Arial, розмір 16pt, колір шрифту #800000.
header: Містить заголовок h1. Фон #F5F5DC, відступи 2%.
h1: Розмір шрифту 36pt, вирівнювання по центру.
section: Містить 3 блоки article. Властивості секції визначити самостійно.
article: Кожен містить абзац p і заголовок h1, у заголовок вкладено зображення img.
img: Ширина 70%, рамка ridge 5px, колір #D2691E, border-radius 0.5em.
p: Відступи 5%, вирівнювання по ширині.
article: Відступи та поля по 10px, ширина блоків однакова.
Фони article:
1-й: #FFFACD
2-й: #FFDAB9
3-й: #F5FAAA
footer: Фон #F5F5DC, відступи 2%, вирівнювання по центру.

Варіант 2

Скопіювати файли: Норвегия1.jpg, Норвегия2.jpg, Норвегия3.png, Норвегия.txt, golub354.jpg

body: Шрифт Courier New, 14pt, жирний, колір navy, фон — малюнок golub354.jpg.
header: Фон navy, текст білий, відступи 2%.
h1: Розмір 36pt, центроване вирівнювання.
section: 3 article, властивості визначити самостійно.
article: Містить p і h1, в h1 — img.
img: Ширина 70%, рамка ridge 5px, синя, border-radius 0.5em.
p: Відступи 5%.
article: Відступи і поля 10px, ширина блоків у співвідношенні 2:1:2.
Фони article:
1-й: #87CEFA
2-й: #E0FFFF
3-й: #E6E6FA
footer: Фон navy, текст білий, відступи 2%.

Варіант 3

Скопіювати файли: Зима1.jpg, Зима2.jpg, Зима3.jpg, Зима.txt

body: Comic Sans MS, 16pt, колір navy, фон #A6CAF0.
header: Білий фон, відступи 2%.
h1: 36pt, центроване.
section: 3 article, властивості свої.
article: Кожен з p і h1, в h1 — img.
img: 70%, рамка ridge 5px синя, border-radius 0.5em.
p: Відступи 5%, вирівнювання по ширині.
article: Відступи і поля 10px, ширина 1:2:1.
Стилі article:
1-й: фон navy, текст білий
2-й: фон #87CEEB, рамка ridge 5px синя, border-radius 0.5em
3-й: фон #4682B4, текст #FAFAD2
footer: Білий фон, відступи 2%, жирний, центрований текст.

Варіант 4

Скопіювати файли: Италия1.jpg, Италия2.jpg, Италия3.jpg, Италия.txt, фон1.jpg, фон2.jpg, фон3.jpg, фон4.jpg

body: Tahoma, 16pt, колір navy, фон — малюнок фон1.jpg.
header: Фон lightpink, відступи 2%.
h1: 36pt, колір purple, центр.
section: 3 article, властивості свої.
article: p і h1, в h1 — img.
img: 70%, рамка ridge 5px біла, border-radius 0.5em.
p: Відступи 5%, вирівнювання по ширині.
article: Відступи і поля 10px, ширина 1:2:2.
Фони article:
1-й: фон — малюнок фон2.jpg
2-й: фон — малюнок фон4.jpg
3-й: фон — малюнок фон3.jpg, текст білий
footer: Фон lightpink, текст purple, відступи 2%, жирний, центрований.

Варіант 5

Скопіювати файли: od1.jpg, od2.jpg, od3.jpg, od4.jpg, Бунин.txt, FON.JPG

body: Arial, 14pt, колір darkslategrey.
header: Фон — малюнок FON.JPG, відступи 2%.
h1: 36pt, колір olivedrab, центр.
section: 4 article, свої властивості.
article: Відступи 10px, ширина 1:2:2:1.
1-й і 4-й article: фон darkhaki, містять p і h2.
p: відступи 5%, вирівнювання по ширині.
h2: вирівнювання по центру.
2-й і 3-й article: містять h2 і h1 (з img у h1).
img: 70%, рамка ridge 5px біла.
h2: вирівнювання по центру.
Фони:
2-й — lightblue
3-й — lightgreen
footer: Фон — малюнок FON.JPG, відступи 2%, колір olivedrab, центр, жирний.

Варіант 6

body: Georgia, 16pt, darkred, фон — малюнок fon2.jpg.
header: Фон — малюнок fon3.jpg, відступи 1%, поля 10px.
h1: 36pt, колір saddlebrown, центр.
section: 4 article, свої властивості.
article: Відступи і поля 10px, ширина 2:1:1:2.
1-й і 4-й article: містять p і h1 (з img у h1).
img: 70%, рамка ridge 5px біла, border-radius 0.5em.
p: відступи 5%, вирівнювання по ширині.
фон — darkgrey.
2-й і 3-й article: містять p, фон — малюнок fon3.jpg.
p: відступи 5%, вирівнювання по ширині.
footer: Фон darkgrey, відступи 2%, поля 10px, центр, жирний.

Назад Вперед Зміст