Назад
Вперед
Зміст
Лабораторна робота № 14 (Flex-Box)
Завдання 5
Варіант 1
Скопіювати у свою папку файли: Рибчинський.jpg і Чарівна скрипка.txt
Створити документ такої структури та оформлення:
Головний блок (section)
- Колір фону: #C0DCC0,
- Рамка типу ridge, товщина 5px, колір darkred, border-radius: 0.5em,
- Внутрішні поля (padding) 10px,
- Відступи (margin) 10px.
До головного блоку (контейнера) входить:
- Блок 1 (section), контейнер, що містить вірші
- Блок 2 (Заголовок h1)
- Блок 3 (section), контейнер, що містить текст і фото
Блок 1
- Колір фону: #54FF9F,
- Колір тексту: darkred,
- Рамка типу ridge, товщина 5px, колір navy, border-radius: 0.5em
У блоці 1 містяться 4 блоки (article).
article
- Розмір шрифту 14pt,
- Вирівнювання по центру,
- Рамка типу ridge, товщина 5px, колір orange, border-radius: 0.5em,
- Внутрішні поля 10px,
- Відступи 10px.
Блок 3
- Колір тексту: darkolivegreen
У блоці 3 — три блоки (абзаци та заголовок h1). У заголовок h1 вкладено фотографію.
Заголовок h1
- Колір тексту: darkolivegreen,
- Розмір шрифту 20pt,
- Вирівнювання по центру
Зображення img
- Ширина 400px,
- Висота 300px.
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Варіант 2
Скопіювати у свою папку файли: Попіл.jpg і Попіл.txt
Створити документ такої структури та оформлення:
Головний блок (section)
- Колір фону: #FAFAD2,
- Рамка типу ridge, товщина 5px, колір darkmagenta, border-radius: 0.5em,
- Внутрішні поля 10px,
- Відступи 10px.
До головного блоку (контейнера) входить:
- Блок 1 (section), контейнер з віршами та фото
- Блок 2 (section), контейнер з текстом
Блок 1
- Внутрішні поля 10px,
- Колір тексту: darkred,
- Рамка типу ridge, товщина 5px, колір mediumpurple, border-radius: 0.5em
У блоці 1 — три блоки (article). У другому article — заголовок h1 з фотографією.
article
- Розмір шрифту 14pt,
- Вирівнювання по центру,
- Рамка типу ridge, товщина 5px, колір orange, border-radius: 0.5em,
- Внутрішні поля 10px,
- Відступи 10px.
Блок 2
- Внутрішні поля 10px,
- Колір тексту: darkolivegreen,
- Колір фону: lightcyan,
- Рамка типу ridge, товщина 5px, колір darkolivegreen, border-radius: 0.5em
У блоці 2 — заголовок h1 і текст. У заголовок вкладена фотографія.
Заголовок h1
- Розмір шрифту 20pt,
- Вирівнювання по центру.
Зображення img
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Можна використити цей приклад.(Перейдіть за посиланням та відобразіть код в інструментах розробника)
Варіант 3
Скопіювати у свою папку файли: 12.jpg і Маяковський.txt
Створити документ такої структури та оформлення:
Головний блок (section)
- Колір фону: pink,
- Колір тексту: navy,
- Рамка типу ridge, товщина 5px, колір darkred, border-radius: 0.5em,
- Внутрішні поля 10px,
- Відступи 10px
До головного блоку входить:
- Блок 1 (section), контейнер із текстом і фото
- Блок 2 (section), контейнер з уривком з поеми
Блок 1
- Внутрішні поля 10px,
- Колір фону: peachpuff,
- Рамка типу ridge, товщина 5px, колір darkolivegreen, border-radius: 0.5em
У блоці 1 — 4 article. У другому article — заголовок h1 із зображенням.
article
- Розмір шрифту 14pt,
- Вирівнювання по центру,
- Рамка типу ridge, товщина 5px, колір darkred, border-radius: 0.5em,
- Внутрішні поля 5px,
- Відступи 10px
Блок 2
- Ширина 50%
- Внутрішні поля 10px,
- Колір фону: lightcyan,
- Рамка типу ridge, товщина 5px, колір darkolivegreen, border-radius: 0.5em
Заголовок h1
- Розмір шрифту 20pt,
- Вирівнювання по центру
Зображення img
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Варіант 4
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Варіант 5
Скопіювати у свою папку файли: dozhd.jpg, dozhd2.jpg, dozhd3.jpg і Гарсія Лорка.txt
Створити документ такої структури та оформлення:
Головний блок (section)
- Колір фону: yellowgreen,
- Рамка типу ridge, товщина 5px, колір darkred, border-radius: 0.5em,
- Внутрішні поля 10px,
- Відступи 10px
У головний блок входить:
- Блок 1 (section) — 2 article
- Блок 2 (section) — 4 article
- Ширина блоків у співвідношенні 2:1
Блок 1
- Колір фону: lemonchiffon,
- Колір тексту: darkslategray
- Рамка типу ridge, товщина 5px, колір darkolivegreen, border-radius: 0.5em,
- Внутрішні поля 10px
У кожному article — заголовок h1, вірші, зображення (у h1)
article (загальні властивості)
- Розмір шрифту 14pt,
- Внутрішні поля 10px,
- Відступи 20px
Заголовок h1
- Розмір шрифту 20pt,
- Вирівнювання по центру
Зображення img
article блоку 1
- Рамка типу ridge, товщина 5px, колір darkslategray, border-radius: 0.5em
Блок 2
- Колір фону: lightcyan,
- Колір тексту: navy,
- Рамка типу ridge, товщина 5px, колір cyan, border-radius: 0.5em,
- Внутрішні поля 10px
article блоку 2
- Рамка типу ridge, товщина 5px, колір navy, border-radius: 0.5em
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Варіант 6
Властивості flex-контейнерів задайте самостійно.
У результаті має вийти такий документ, як на скріншоті:
Назад
Вперед
Зміст