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

Практична робота № 16 (Grid)

Варіант 1

Скопіювати у свою папку файли: Вакарчук.jpg та Вакарчук.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону: #C0DCC0,
• Обводка типу ridge, товщиною 5px, кольору #20B2AA, border-radius: 0.5em,
• Поля 10px,
• Відступи 10px.

В осередок головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону:#9ACD32; для парних колір #98FB98,
• Обводка типу ridge, товщиною 5px, кольору #20B2AA,, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

  Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

Варіант 2

Скопіювати у свою папку файли: Пепел.jpg та Пепел.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону:#D8BFD8,
• Обводка типу ridge, товщиною 5px, кольору #FF00FF, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

В осередок inner-grid головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону:#FF00FF;,
• Обводка типу ridge, товщиною 5px, кольору #0000CD, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

Зображення img

• відступ 8px,
• Обводка типу ridge, товщиною 5px, кольору #FF00FF, border-radius: .5em;
• Абзац:
  • font-family: 'Georgia', sans-serif;
  • margin:5px;
  • padding:1px;
  • background:#87CEFA;
  • text-align:justify;
  • text-indent:10px;
  • font-size:1em;
  • font-style: italic;
  • p:first-letter{ font-size:25px;}

  Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

Варіант 3

Скопіювати у свою папку файли: Kipling-Jozef.jpg та Киплінг.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону:#00FA9A,
• Обводка типу ridge, товщиною 5px, кольору #00FF7F, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

В осередок inner-grid головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону:#7FFFD4;,
• Обводка типу ridge, товщиною 5px, кольору #00FF7F, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

Зображення img

• відступ 8px,
• Обводка типу ridge, товщиною 5px, кольору #00FF7F, border-radius: .5em;
• Абзац:
  • font-family: 'Georgia', sans-serif;
  • margin:5px;
  • padding:1px;
  • background:#FFF8DC;
  • text-align:justify;
  • text-indent:10px;
  • font-size:1em;
  • font-style: italic;
  • p:first-letter{ font-size:25px;}

  Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

Варіант 4

Скопіювати у свою папку файли: Гамлет.jpg та Гамлет.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону:#EEE8AA,
• Обводка типу ridge, товщиною 5px, кольору #FFDAB9, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

В осередок inner-grid головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону::#FFDEAD;,
• Обводка типу ridge, товщиною 5px, кольору #A52A2A, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

Зображення img

• відступ 8px,
• Обводка типу ridge, товщиною 5px, кольору #0000CD, border-radius: .5em;
• Абзац:
  • font-family: 'Georgia', sans-serif;
  • margin:5px;
  • padding:1px;
  • background:#FFF8DC;
  • text-align:justify;
  • text-indent:10px;
  • font-size:1em;
  • font-style: italic;
  • p:first-letter{ font-size:25px;}

  Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

Варіант 5

Скопіювати у свою папку файли: cat.jpg, дощ.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону: #87CEEB,
• Обводка типу ridge, товщиною 5px, кольору rgb(111,41,97), border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

В осередок inner-grid головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону:#00FFFF;,
• Обводка типу ridge, товщиною 5px, кольору #7FFFD4, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

Зображення img

• відступ 8px,
• Обводка типу ridge, товщиною 5px, кольору #0000CD, border-radius: .5em;

Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

Варіант 6

Скопіювати у свою папку файли: general.jpg, Генерали.txt

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

Головний контейнер (outer-grid) сітка

• Колір фону: #FFA07A,
• Обводка типу ridge, товщиною 5px, кольору rgb(111,41,97), border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

В осередок inner-grid головного контейнера вкладена ще одна сітка 2 на 2:

• Колір фону: #F08080;,
• Обводка типу ridge, товщиною 5px, кольору #FFC0CB, border-radius: 0.5em,
• шрифт темно-синій, розмір 1.5vw;,
• Відступи 8px

Зображення img

• відступ 8px,
• Обводка типу ridge, товщиною 5px, кольору #FF69B4, border-radius: .5em;

Властивості грід-контейнерів визначте самостійно.

В результаті має вийти такий документ, як на скріншоті:

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