1. HTML-код самостійної роботи №2.1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./style.css">
<title>Самостійна робота №2.1</title>
</head>
<body>
<h1 class="title">Самостійна робота №2.1</h1>
<p class="subtitle">Виконала: студентка групи ІПЗ-21-301, <br>Кас'янова Поліна Євгеніївна</p>
<div class="examples">
<h2 class="name">1. CSS Кольори</h2>
<h3>1.1. CSS Background Color - Колір фону</h3>
<h3 style="background-color:DodgerBlue;">Hello World</h3>
<p style="background-color:Tomato;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum,
deleniti. Voluptate fugit quo quasi dignissimos delectus odio recusandae molestiae doloribus excepturi
quia ullam tempora adipisci consequuntur corrupti deleniti, exercitationem corporis.</p>
<h3>1.2. CSS Text Color - Колір тексту</h3>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nobis aut quis,
voluptatibus atque ratione beatae consectetur vero nesciunt, tempore inventore minus explicabo. Voluptatum
dolores ex magni voluptates similique vel?</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
<h3>1.3. CSS Border Color - Колір межі</h3>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
<h3>1.4. CSS Значення кольору</h3>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
<h2 class="name">2. CSS Фони</h2>
<h3>2.1. Opacity / Transparency - Непрозорість / Прозорість</h3>
<div class="ex_1 def">
<h1>opacity 0.1</h1>
</div>
<div class="ex_2 def">
<h1>opacity 0.3</h1>
</div>
<div class="ex_3 def">
<h1>opacity 0.6</h1>
</div>
<div class="def">
<h1>opacity 1 (за замовчуванням)</h1>
</div>
<h3>2.2. Прозорість з використанням RGBA</h3>
<div class="ex_4 default">
<h1>10% opacity</h1>
</div>
<div class="ex_5 default">
<h1>30% opacity</h1>
</div>
<div class="ex_6 default">
<h1>60% opacity</h1>
</div>
<div class="default">
<h1>За замовчуванням</h1>
</div>
<h3>2.3. CSS background-image</h3>
<div class="paper">Цей блок має зображення як тло!</div>
<h2 class="name">3. CSS Межі</h2>
<h3>3.1. Стиль CSS Межі</h3>
<p class="dotted">Крапкова межа.</p>
<p class="dashed">Пунктирна межа.</p>
<p class="solid">Суцільна межа.</p>
<p class="double">Подвійна межа.</p>
<p class="groove">Рифлена межа. Ефект залежить від значення кольору межі.</p>
<p class="ridge">Ребриста межа. Ефект залежить від значення кольору межі.</p>
<p class="inset">Вставна межа. Ефект залежить від значення кольору межі.</p>
<p class="outset">Випукла межа. Ефект залежить від значення кольору межі.</p>
<p class="none">Немає межі.</p>
<p class="hidden">Прихована межа.</p>
<p class="mix">Змішана межа.</p>
<h3>3.2. CSS Border Width - Ширина межі</h3>
<p class="ex_7">5px border-width</p>
<p class="ex_8">medium border-width</p>
<p class="ex_9">2px border-width</p>
<p class="ex_10">thick border-width</p>
<h3>3.3. CSS Колір межі</h3>
<p class="ex_11">Червона межа</p>
<p class="ex_12">Зелена межа</p>
<p class="ex_13">Синя межа</p>
<h3>3.4. CSS Border - Окремі сторони</h3>
<p class="ex_14">Різні стилі межі</p>
<h3>3.5. CSS Закруглені межі</h3>
<p class="ex_15">Звичайна межа</p>
<p class="ex_16">Закруглена межа</p>
<p class="ex_17">Більш закруглена межа</p>
<p class="ex_18">Ще більш закруглена межа</p>
<h2 class="name">4. CSS Поля</h2>
<h3>4.1. Margin - Окремі сторони</h3>
<div class="ex_19">Цей елемент div має верхнє поле 100px, праве поле 150px, нижнє поле 100px та ліве поле 80px.
</div>
<h3>4.2. Margin - Скорочена властивість</h3>
<div class="ex_20">Цей елемент div має верхнє поле 25px, праве поле 50px, нижнє поле 75px та ліве поле 100px.
</div>
<h3>4.3. Margin - Значення auto</h3>
<div class="ex_21">Цей div центруватиме по горизонталі, тому що в ньому margin: auto;</div>
<h2 class="name">5. CSS Внутрішній відступ</h2>
<h3>5.1. Padding - Окремі сторони</h3>
<div class="ex_22">Цей елемент div має верхній відступ 50 пікселів, правий відступ 30 пікселів, нижній відступ
50 пікселів та лівий відступ 80 пікселів.</div>
<h3>5.2. Padding - Скорочена властивість</h3>
<div class="ex_23">Цей елемент div має верхній відступ 25 пікселів, правий відступ 50 пікселів, нижній відступ
75 пікселів та лівий відступ 100 пікселів.</div>
<h3>5.3. Padding та Width</h3>
<div class="ex_24">Цей div має ширину 300 пікселів.</div>
<div class="ex_25">Ширина цього div складає 350 пікселів, хоча CSS він визначений як 300 пікселів.</div>
<h2 class="name">6. CSS Висота, ширина і максимальна ширина</h2>
<h3>6.1. CSS Значення height/width</h3>
<div class="ex_26">Цей елемент має висоту 100 пікселів і ширину 500 пікселів.</div>
<h3>6.2. Встановлення максимальної ширини - max-width</h3>
<div class="ex_27">Цей елемент має висоту 100 пікселів і максимальну ширину 500 пікселів.</div>
<h2 class="name">7. CSS Блочна модель</h2>
<h3>7.1. CSS Блочна модель</h3>
<div class="ex_28">Цей безглуздий текст є вмістом блоку. Ми додали відступ 50 пікселів, поле 20 пікселів та
зелений кордон 15 пікселів. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor у reprehenderit в voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</div>
<h3>7.2. Ширина і висота елемента</h3>
<img src="./img/klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div class="ex_29">Зображення вище має ширину 350 пікселів. Загальна ширина цього елемента також становить 350
пікселів.</div>
<h2 class="name">8. CSS Іконки</h2>
<h3>8.1. Font Awesome Іконки</h3>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<h3>8.2. Google Іконки</h3>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<h2 class="name">9. CSS Посилання</h2>
<h3>9.1. Стилізація посилань</h3>
<a href="./index.html" class="ex_30">Посилання</a>
<h3>9.2. Text Decoration - Оформлення тексту</h3>
<a href="./index.html" class="ex_31">Посилання</a>
<h3>9.3. Background Color - Колір фону</h3>
<a href="./index.html" class="ex_32">Посилання</a>
<h3>9.4. Кнопки-посилання</h3>
<a href="./index.html" class="ex_33">Посилання</a>
<h2 class="name">10. CSS Списки</h2>
<h3>10.1. Різні маркери списку</h3>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<h3>10.2. Зображення як маркер елемента списку</h3>
<ul class="ex_34">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<h3>10.3. Розташування маркерів елементів списку</h3>
<h2>list-style-position: outside (за замовчуванням):</h2>
<ul class="ex_35">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum alias cumque nostrum, recusandae modi,
excepturi vero tempora est neque culpa omnis harum, mollitia iusto quisquam aliquam deleniti assumenda
magnam non.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eveniet obcaecati recusandae voluptates
laborum ducimus veniam, perspiciatis quia quos nostrum, expedita fugit quaerat, eius praesentium
repellat numquam unde exercitationem est.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio, nostrum corrupti ab quam
deleniti eos provident laborum dolorum odit quisquam harum doloremque reiciendis iusto dignissimos a
praesentium totam deserunt.</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="ex_36">
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi obcaecati voluptatem, adipisci sunt
saepe nisi magnam ad similique nihil aspernatur alias inventore mollitia, nemo error quidem perspiciatis
dolores, nostrum facilis!</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque natus, perferendis ipsam corrupti
molestias placeat libero harum vitae distinctio soluta optio quaerat possimus quos accusamus! Odio
deleniti ad saepe sint.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum soluta ratione maxime unde! Consectetur
fuga inventore impedit deleniti veritatis, recusandae cupiditate praesentium ducimus aut corporis
possimus quia. Ipsa, nisi animi?</li>
</ul>
<h3>10.4. Видалення налаштувань за замовчуванням</h3>
<p>Список за замовчуванням:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Видалені маркери, поля та відступи:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<h3>10.5. Список стилів з кольорами</h3>
<ol class="ex_37">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul class="ex_38">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<h2 class="name">11. CSS Таблиці</h2>
<h3>11.1. Межі таблиці</h3>
<table class="ex_39">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<h3>11.2. Таблиця на всю ширину</h3>
<table class="ex_40">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<h3>11.3. Згорнути межі таблиці</h3>
<table class="ex_41">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<h3>11.4. Ширина та висота таблиці</h3>
<table class="ex_42">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<p></p>
<table class="ex_43">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.5. Горизонтальне вирівнювання в таблиці</h3>
<table class="ex_44">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.6. Вертикальне вирівнювання в таблиці</h3>
<table class="ex_45">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.7. Відступи в таблиці - padding</h3>
<table class="ex_46">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.8. Горизонтальні роздільники в таблиці</h3>
<table class="ex_47">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.9. Виділення рядків таблиці при наведенні</h3>
<table class="ex_48">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.10. Смугаста таблиця</h3>
<table class="ex_49">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.11. Колір таблиці</h3>
<table class="ex_50">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<h3>11.12. Адаптивна таблиця</h3>
<div style="overflow-x:auto;">
<table class="ex_51">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</div>
<h1 class="title">CSS Продвинутий</h1>
<h2 class="name">1. CSS Закруглені кути</h2>
<h3>1.1. CSS властивість border-radius</h3>
<p id="rcorners1">Закруглені кути!</p>
<p id="rcorners2">Закруглені кути!</p>
<p id="rcorners3">Закруглені кути!</p>
<h3>1.2. CSS border-radius - Вкажіть кожен кут</h3>
<p>Чотири значення - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>Три значення - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>Два значення - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
<p>Одне значення - border-radius: 15px:</p>
<p id="rcorners7"></p>
<h2 class="name">2. CSS Анімації</h2>
<h3>2.1. Правило @keyframes (ключові кадри)</h3>
<div class="ex_52"></div>
<h3>2.2. Затримка анімації</h3>
<div class="ex_53"></div>
<h3>2.3. Встановіть, скільки разів анімація має запускатися</h3>
<div class="ex_54"></div>
<h3>2.4. Запустіть анімацію в зворотньому напрямку або альтернативних циклах</h3>
<div class="ex_55"></div>
<h3>2.5. Вкажіть криву швидкості анімації</h3>
<div class="ex_56" id="div1">linear</div>
<div class="ex_56" id="div2">ease</div>
<div class="ex_56" id="div3">ease-in</div>
<div class="ex_56" id="div4">ease-out</div>
<div class="ex_56" id="div5">ease-in-out</div>
<h2 class="name">2. CSS Підказка</h2>
<h3>2.1. Основна (базова) підказка</h3>
<div class="tooltip1">Наведіть на мене
<span class="tooltiptext1">Текст підказки</span>
</div>
<h3>2.2. Позиціонування виринаючих підказок</h3>
<div style="margin-left: 120px;">
<div class="tooltip2">Наведіть на мене
<span class="tooltiptext2">Текст підказки</span>
</div>
<p></p>
<div class="tooltip3">Наведіть на мене
<span class="tooltiptext3">Текст підказки</span>
</div>
</div>
<h3>2.3. Підказка зі стрілкою</h3>
<div class="tooltip4">Наведіть на мене
<span class="tooltiptext4">Текст підказки</span>
</div>
<h3>2.4. Виринаючі підказки (анімація)</h3>
<div class="tooltip5">Наведіть на мене
<span class="tooltiptext5">Текст підказки</span>
</div>
<h2 class="name">3. CSS Кнопки</h2>
<h3>3.1. Основні стилі кнопок</h3>
<button>Кнопка за замовчуванням</button>
<a href="#" class="button">Кнопка посилання</a>
<button class="button">Кнопка</button>
<input type="button" class="button" value="Кнопка введення">
<h3>3.2. Кольори кнопок</h3>
<button class="button">Зелена</button>
<button class="button button2">Синя</button>
<button class="button button3">Червона</button>
<button class="button button4">Сіра</button>
<button class="button button5">Чорна</button>
<h3>3.3. Розмір кнопок</h3>
<button class="button btn1">10px</button>
<button class="button btn2">12px</button>
<button class="button btn3">16px</button>
<button class="button btn4">20px</button>
<button class="button btn5">24px</button>
<h3>3.4. Округлі кнопки</h3>
<button class="button btn6">2px</button>
<button class="button btn7">4px</button>
<button class="button btn8">8px</button>
<button class="button btn9">12px</button>
<button class="button btn10">50%</button>
<h3>3.5. Кольорові межі кнопки</h3>
<button class="button btn11">Green</button>
<button class="button btn12">Blue</button>
<button class="button btn13">Red</button>
<button class="button btn14">Gray</button>
<button class="button btn15">Black</button>
<h3>3.6. Кнопки при наведенні миші</h3>
<button class="button btn16">Green</button>
<button class="button btn17">Blue</button>
<button class="button btn18">Red</button>
<button class="button btn19">Gray</button>
<button class="button btn20">Black</button>
<h3>3.7. Тінь кнопок</h3>
<button class="button button21">Кнопка з тінню</button>
<button class="button button22">Тінь при наведені</button>
<h3>3.8. Відключені кнопки</h3>
<button class="button">Звичайна кнопка</button>
<button class="button disabled">Відключена кнопка</button>
<h3>3.9. Ширина кнопок</h3>
<button class="button button23">250px</button><br>
<button class="button button24">50%</button><br>
<button class="button button25">100%</button>
<h3>3.10. Групи кнопок</h3>
<div class="btn-gr">
<button class="btn-line">Кнопка</button>
<button class="btn-line">Кнопка</button>
<button class="btn-line">Кнопка</button>
<button class="btn-line">Кнопка</button>
</div>
<br>
<br>
<br>
<h3>3.11. Група кнопок з межами</h3>
<div class="btn-gr-bor">
<button class="btn-bor">Кнопка</button>
<button class="btn-bor">Кнопка</button>
<button class="btn-bor">Кнопка</button>
<button class="btn-bor">Кнопка</button>
</div>
<br>
<br>
<br>
<h3>3.12. Вертикальна група кнопок</h3>
<div class="btn-group2">
<button class="button26">Кнопка</button>
<button class="button26">Кнопка</button>
<button class="button26">Кнопка</button>
<button class="button26">Кнопка</button>
</div>
<h3>3.13. Анімовані кнопки</h3>
<button class="button27" style="vertical-align:middle"><span>Hover</span></button>
<h2 class="name">4. CSS Пагінація</h2>
<h3>4.1. Проста нумерація вебсторінок</h3>
<div class="pagination">
<a href="#" class="pag-a">«</a>
<a href="#" class="pag-a">1</a>
<a href="#" class="pag-a">2</a>
<a href="#" class="pag-a">3</a>
<a href="#" class="pag-a">4</a>
<a href="#" class="pag-a">5</a>
<a href="#" class="pag-a">6</a>
<a href="#" class="pag-a">»</a>
</div>
<br>
<br>
<h3>4.2. Активна і при наведенні курсору нумерація сторінок</h3>
<div class="pagination">
<a href="#" class="pag-a">«</a>
<a href="#" class="pag-a">1</a>
<a href="#" class="pag-a pag-active">2</a>
<a href="#" class="pag-a">3</a>
<a href="#" class="pag-a">4</a>
<a href="#" class="pag-a">5</a>
<a href="#" class="pag-a">6</a>
<a href="#" class="pag-a">»</a>
</div>
<br>
<br>
<h3>4.3. Округлі активні та при наведенні курсору кнопки</h3>
<div class="pagination">
<a href="#" class="pag-a pag-a2">«</a>
<a href="#" class="pag-a pag-a2">1</a>
<a href="#" class="pag-a pag-a2 pag-active2">2</a>
<a href="#" class="pag-a pag-a2">3</a>
<a href="#" class="pag-a pag-a2">4</a>
<a href="#" class="pag-a pag-a2">5</a>
<a href="#" class="pag-a pag-a2">6</a>
<a href="#" class="pag-a pag-a2">»</a>
</div>
<br>
<br>
<h3>4.4. Ефект переходу при наведенні</h3>
<div class="pagination">
<a href="#" class="pag-a3">«</a>
<a href="#" class="pag-a3">1</a>
<a href="#" class="pag-a3 pag-active3">2</a>
<a href="#" class="pag-a3">3</a>
<a href="#" class="pag-a3">4</a>
<a href="#" class="pag-a3">5</a>
<a href="#" class="pag-a3">6</a>
<a href="#" class="pag-a3">»</a>
</div>
<br>
<br>
<h3>4.5. Межі нумерації сторінок</h3>
<div class="pagination">
<a href="#" class="pag-a4">«</a>
<a href="#" class="pag-a4">1</a>
<a href="#" class="pag-a4 pag-active4">2</a>
<a href="#" class="pag-a4">3</a>
<a href="#" class="pag-a4">4</a>
<a href="#" class="pag-a4">5</a>
<a href="#" class="pag-a4">6</a>
<a href="#" class="pag-a4">»</a>
</div>
<br>
<br>
<h3>4.6. Округлі межі</h3>
<div class="pagination">
<a href="#" class="pag-a5">«</a>
<a href="#" class="pag-a5">1</a>
<a href="#" class="pag-a5 pag-active5">2</a>
<a href="#" class="pag-a5">3</a>
<a href="#" class="pag-a5">4</a>
<a href="#" class="pag-a5">5</a>
<a href="#" class="pag-a5">6</a>
<a href="#" class="pag-a5">»</a>
</div>
<br>
<br>
<h3>4.7. Простір між посиланнями</h3>
<div class="pagination">
<a href="#" class="pag-a6">«</a>
<a href="#" class="pag-a6">1</a>
<a href="#" class="pag-a6 pag-active6">2</a>
<a href="#" class="pag-a6">3</a>
<a href="#" class="pag-a6">4</a>
<a href="#" class="pag-a6">5</a>
<a href="#" class="pag-a6">6</a>
<a href="#" class="pag-a6">»</a>
</div>
<br>
<br>
<h3>4.8. Розмір пагінації</h3>
<div class="pagination">
<a href="#" class="pag-a7">«</a>
<a href="#" class="pag-a7">1</a>
<a href="#" class="pag-a7 pag-active7">2</a>
<a href="#" class="pag-a7">3</a>
<a href="#" class="pag-a7">4</a>
<a href="#" class="pag-a7">5</a>
<a href="#" class="pag-a7">6</a>
<a href="#" class="pag-a7">»</a>
</div>
<br>
<br>
<br>
<h2 class="name">5. CSS Кілька стовпців</h2>
<h3>5.1. CSS Створити кілька стовпців</h3>
<div class="newspaper1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
</div>
<h3>5.2. CSS Визначити розрив між стовпцями</h3>
<div class="newspaper2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
</div>
<h3>5.3. CSS Роздільник між стовпцями</h3>
<div class="newspaper3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
</div>
<h3>5.4. Визначити ширину стовпця</h3>
<div class="newspaper4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
</div>
<h2 class="name">6. CSS Випадаючи списки</h2>
<h3>6.1. Основний випадаючий список</h3>
<div class="dropdown1">
<span>Наведіть на мене курсор!</span>
<div class="dropdown-content1">
<p>Hello World!</p>
</div>
</div>
<h3>6.2. Випадаюче меню</h3>
<div class="dropdown2">
<button class="dropbtn2">Dropdown</button>
<div class="dropdown-content2">
<a href="#">Посилання 1</a>
<a href="#">Посилання 2</a>
<a href="#">Посилання 3</a>
</div>
</div>
<h3>6.3. Вирівняний по правому краю випадаючий контент</h3>
<div class="dropdown3" style="float:left;">
<button class="dropbtn3">Ліворуч</button>
<div class="dropdown-content3" style="left:0;">
<a href="#">Посилання 1</a>
<a href="#">Посилання 2</a>
<a href="#">Посилання 3</a>
</div>
</div>
<div class="dropdown3" style="float:right;">
<button class="dropbtn3">Праворуч</button>
<div class="dropdown-content3">
<a href="#">Посилання 1</a>
<a href="#">Посилання 2</a>
<a href="#">Посилання 3</a>
</div>
</div>
<br>
<br>
<br>
<h2 class="name">7. CSS Ключові слова кольору</h2>
<h3>7.1. Ключове слово transparent (прозорість)</h3>
<div class="ex57">Цей div має світло-зелений фон.</div>
<br>
<div class="ex58">Цей div має прозорий фон.</div>
<h3>7.2. Ключове слово currentcolor (поточний колір)</h3>
<div class="ex59">Цей елемент div має синій колір текста і синю межу.</div>
<br>
<div class="ex60">
<p>Колір тла цього div встановлено на поточне значення кольору основного елемента.</p>
</div>
<br>
<div class="ex61">
<p>Для кольору межі та кольору тіні цього div встановлено значення кольору основного елемента.</p>
</div>
<h3>7.3. Ключове слово inherit (наслідування)</h3>
<div class="ex62" style="border:2px dotted blue;">Тут налаштування межі елемента <span>span</span> також буде
успадковані від батьківського елемента.</div>
<h2 class="name">8. CSS Ефекти тіні</h2>
<h1 class="ex63">Ефект тіні тексту!</h1>
<h1 class="ex64">Ефект тіні тексту!</h1>
<h1 class="ex65">Межа навколо тексту!</h1>
<h2 class="name">8. CSS Box Shadow</h2>
<h3>8.1. CSS властивість box-shadow</h3>
<div class="ex66">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.</div>
<br>
<div class="ex67">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.</div>
<br>
<div class="ex68">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.</div>
<h3>8.2. Карточки</h3>
<div class="card1">
<div class="header1">
<h1>1</h1>
</div>
<div class="container1">
<p>Січень 1, 2023</p>
</div>
</div>
<br>
<div class="polaroid2">
<img src="./img/rock600x400.jpg" alt="Норвегия" style="width:100%">
<div class="container2">
<p>Hardanger, Norway</p>
</div>
</div>
<h2 class="name">9. CSS Переходи</h2>
<div class="ex69">Наведіть мишку</div>
<br>
<div class="ex70">Наведіть мишку</div>
<h2 class="name">10. CSS Ефекти тексту</h2>
<h3>10.1. CSS text-overflow - Переповнення</h3>
<p>text-overflow: clip:</p>
<p class="ex71">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nulla eaque distinctio error porro
sunt iusto ducimus cum numquam, qui eligendi eum consectetur, perspiciatis maxime est iste necessitatibus,
tempora suscipit!</p>
<p>text-overflow: ellipsis:</p>
<p class="ex72">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio natus ratione repellat
dicta laboriosam omnis eos voluptas, debitis cupiditate voluptate, at repudiandae. Neque dolor laudantium,
nam a aliquam eveniet.</p>
<h3>10.2. CSS word-wrap - Перенесення слів</h3>
<p class="ex73"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus praesentium assumenda commodi
fugiat, labore exercitationem optio doloribus molestias aut ex error et veritatis enim itaque delectus
quibusdam quod corrupti possimus.</p>
</div>
<script src="https://kit.fontawesome.com/26e3ee569a.js"></script>
</body>
</html>
2. CSS-код самостійної роботи №2.1:
/* ----------------------За замовчуванням----------------------- */
.title,
.name {
color: brown;
}
.title,
.subtitle {
text-align: center;
}
.subtitle {
font-size: 20px;
}
/* -------------------------Приклади---------------------------- */
.def {
background-color: green;
}
.ex_1 {
opacity: 0.1;
}
.ex_2 {
opacity: 0.3;
}
.ex_3 {
opacity: 0.6;
}
.default {
background: rgb(0, 128, 0);
}
.ex_4 {
background: rgba(0, 128, 0, 0.1);
}
.ex_5 {
background: rgba(0, 128, 0, 0.3);
}
.ex_6 {
background: rgba(0, 128, 0, 0.6);
}
.paper {
width: 1000px;
height: 300px;
color: #fff;
font-size: 20px;
background-image: url("./img/paper.gif");
}
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
p.groove {
border-style: groove;
}
p.ridge {
border-style: ridge;
}
p.inset {
border-style: inset;
}
p.outset {
border-style: outset;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
p.mix {
border-style: dotted dashed solid double;
}
.ex_7 {
border-style: solid;
border-width: 5px;
}
.ex_8 {
border-style: solid;
border-width: medium;
}
.ex_9 {
border-style: dotted;
border-width: 2px;
}
.ex_10 {
border-style: dotted;
border-width: thick;
}
.ex_11 {
border-style: solid;
border-color: red;
}
.ex_12 {
border-style: solid;
border-color: green;
}
.ex_13 {
border-style: dotted;
border-color: blue;
}
.ex_14 {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
.ex_15 {
border: 2px solid red;
}
.ex_16 {
border: 2px solid red;
border-radius: 5px;
}
.ex_17 {
border: 2px solid red;
border-radius: 8px;
}
.ex_18 {
border: 2px solid red;
border-radius: 12px;
}
.ex_19 {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
.ex_20 {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
.ex_21 {
width: 300px;
margin: auto;
border: 1px solid red;
}
.ex_22 {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
.ex_23 {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
.ex_24 {
width: 300px;
background-color: yellow;
}
.ex_25 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
.ex_26 {
height: 200px;
width: 50%;
background-color: powderblue;
}
.ex_27 {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
.ex_28 {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
.ex_29 {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
.ex_30:link {
color: red;
}
.ex_30:visited {
color: green;
}
.ex_30:hover {
color: hotpink;
}
.ex_30:active {
color: blue;
}
.ex_31:link {
text-decoration: none;
}
.ex_31:visited {
text-decoration: none;
}
.ex_31:hover {
text-decoration: underline;
}
.ex_31:active {
text-decoration: underline;
}
.ex_32:link {
background-color: yellow;
}
.ex_32:visited {
background-color: cyan;
}
.ex_32:hover {
background-color: lightgreen;
}
.ex_32:active {
background-color: hotpink;
}
.ex_33:link,
.ex_33:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.ex_33:hover,
.ex_33:active {
background-color: red;
}
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
.ex_34 {
list-style-image: url("./img/sqpurple.gif");
}
.ex_35 {
list-style-position: outside;
max-width: 800px;
}
.ex_36 {
list-style-position: inside;
max-width: 800px;
}
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
.ex_37 {
background: #ff9999;
padding: 20px;
}
.ex_38 {
background: #3399ff;
padding: 20px;
}
.ex_37 li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
.ex_38 li {
background: #cce5ff;
margin: 5px;
}
.ex_39,
.ex_39 th,
.ex_39 td {
border: 1px solid black;
}
.ex_40,
.ex_40 th,
.ex_40 td {
border: 1px solid black;
}
.ex_40 {
width: 100%;
}
.ex_41,
.ex_41 td,
.ex_41 th {
border: 1px solid black;
}
.ex_41 {
width: 100%;
border-collapse: collapse;
}
.ex_42,
.ex_42 td,
.ex_42 th {
border: 1px solid black;
}
.ex_42 {
border-collapse: collapse;
width: 100%;
}
.ex_42 th {
height: 70px;
}
.ex_43,
.ex_43 td,
.ex_43 th {
border: 1px solid black;
}
.ex_43 {
border-collapse: collapse;
width: 50%;
}
.ex_43 th {
height: 70px;
}
.ex_44,
.ex_44 td,
.ex_44 th {
border: 1px solid black;
}
.ex_44 {
border-collapse: collapse;
width: 100%;
}
.ex_44 td {
text-align: center;
}
.ex_45,
.ex_45 td,
.ex_45 th {
border: 1px solid black;
}
.ex_45 {
border-collapse: collapse;
width: 100%;
}
.ex_45 td {
height: 50px;
vertical-align: bottom;
}
.ex_46,
.ex_46 td,
.ex_46 th {
border: 1px solid #ddd;
text-align: left;
}
.ex_46 {
border-collapse: collapse;
width: 100%;
}
.ex_46 th,
.ex_46 td {
padding: 15px;
}
.ex_47 {
border-collapse: collapse;
width: 100%;
}
.ex_47 th,
.ex_47 td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.ex_48 {
border-collapse: collapse;
width: 100%;
}
.ex_48 th,
.ex_48 td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.ex_48 tr:hover {
background-color: #f5f5f5;
}
.ex_49 {
border-collapse: collapse;
width: 100%;
}
.ex_49 th,
.ex_49 td {
text-align: left;
padding: 8px;
}
.ex_49 tr:nth-child(even) {
background-color: #f2f2f2;
}
.ex_50 {
border-collapse: collapse;
width: 100%;
}
.ex_50 th,
.ex_50 td {
text-align: left;
padding: 8px;
}
.ex_50 tr:nth-child(even) {
background-color: #f2f2f2;
}
.ex_50 th {
background-color: #4caf50;
color: white;
}
.ex_51 {
border-collapse: collapse;
width: 100%;
}
.ex_51 th,
.ex_51 td {
text-align: left;
padding: 8px;
}
.ex_51 tr:nth-child(even) {
background-color: #f2f2f2;
}
#rcorners1 {
border-radius: 25px;
background: #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(./img/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
color: white;
}
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners7 {
border-radius: 15px;
background: #73ad21;
padding: 20px;
width: 200px;
height: 150px;
}
.ex_52 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
@keyframes example1 {
0% {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
100% {
background-color: green;
}
}
.ex_53 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example3;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example3 {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
.ex_54 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example5;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes example5 {
0% {
background-color: red;
left: 0;
top: 0;
}
25% {
background-color: yellow;
left: 200px;
top: 0;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0;
top: 200px;
}
100% {
background-color: red;
left: 0;
top: 0;
}
}
.ex_55 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example7;
animation-duration: 4s;
animation-direction: reverse;
}
@keyframes example7 {
0% {
background-color: red;
left: 0px;
top: 0px;
}
25% {
background-color: yellow;
left: 200px;
top: 0px;
}
50% {
background-color: blue;
left: 200px;
top: 200px;
}
75% {
background-color: green;
left: 0px;
top: 200px;
}
100% {
background-color: red;
left: 0px;
top: 0px;
}
}
.ex_56 {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
#div1 {
animation-timing-function: linear;
}
#div2 {
animation-timing-function: ease;
}
#div3 {
animation-timing-function: ease-in;
}
#div4 {
animation-timing-function: ease-out;
}
#div5 {
animation-timing-function: ease-in-out;
}
@keyframes mymove {
from {
left: 0;
}
to {
left: 300px;
}
}
.tooltip1 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip1 .tooltiptext1 {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip1:hover .tooltiptext1 {
visibility: visible;
}
.tooltip2 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip2 .tooltiptext2 {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip2:hover .tooltiptext2 {
visibility: visible;
}
.tooltip3 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip3 .tooltiptext3 {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip3:hover .tooltiptext3 {
visibility: visible;
}
.tooltip4 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip4 .tooltiptext4 {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip4 .tooltiptext4::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip4:hover .tooltiptext4 {
visibility: visible;
}
.tooltip5 {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip5 .tooltiptext5 {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.tooltip5:hover .tooltiptext5 {
visibility: visible;
opacity: 1;
}
.button {
background-color: #4caf50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
background-color: #008cba;
}
.button3 {
background-color: #f44336;
}
.button4 {
background-color: #e7e7e7;
color: black;
}
.button5 {
background-color: #555555;
}
.btn1 {
font-size: 10px;
}
.btn2 {
font-size: 12px;
}
.btn3 {
font-size: 16px;
}
.btn4 {
font-size: 20px;
}
.btn5 {
font-size: 24px;
}
.btn6 {
border-radius: 2px;
}
.btn7 {
border-radius: 4px;
}
.btn8 {
border-radius: 8px;
}
.btn9 {
border-radius: 12px;
}
.btn10 {
border-radius: 50%;
}
.btn11,
.btn16 {
background-color: white;
color: black;
border: 2px solid #4caf50;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn12,
.btn17 {
background-color: white;
color: black;
border: 2px solid #008cba;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn13,
.btn18 {
background-color: white;
color: black;
border: 2px solid #f44336;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn14,
.btn19 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn15,
.btn20 {
background-color: white;
color: black;
border: 2px solid #555555;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.btn16:hover {
background-color: #4caf50;
color: white;
}
.btn17:hover {
background-color: #008cba;
color: white;
}
.btn18:hover {
background-color: #f44336;
color: white;
}
.btn19:hover {
background-color: #e7e7e7;
}
.btn20:hover {
background-color: #555;
color: white;
}
.button21 {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button22:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.button23 {
width: 250px;
}
.button24 {
width: 50%;
}
.button25 {
width: 100%;
}
.btn-gr .btn-line {
background-color: #4caf50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.btn-gr .btn-line:hover {
background-color: #3e8e41;
}
.btn-gr-bor .btn-bor {
background-color: #4caf50;
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.btn-gr-bor .btn-bor:not(:last-child) {
border-right: none;
}
.btn-gr-bor .btn-bor:hover {
background-color: #3e8e41;
}
.btn-group2 .button26 {
background-color: #4caf50; /* Зеленый */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}
.btn-group2 .button26:not(:last-child) {
border-bottom: none; /* Предотвратить двойные границы */
}
.btn-group2 .button26:hover {
background-color: #3e8e41;
}
.button27 {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #fff;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button27 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button27 span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button27:hover span {
padding-right: 25px;
}
.button27:hover span:after {
opacity: 1;
right: 0;
}
.pag- {
display: inline-block;
}
.pag-a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pag-active,
.pag-active2 {
background-color: #4caf50;
color: white;
}
.pag-active2 {
border-radius: 5px;
}
.pag-a2:hover:not(.pag-active2) {
background-color: #ddd;
border-radius: 5px;
}
.pag-a3 {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
.pag-active3 {
background-color: #4caf50;
color: white;
}
.pag-a3:hover:not(.pag-active3) {
background-color: #ddd;
}
.pag-a4 {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
border: 1px solid #ddd;
}
.pag-active4 {
background-color: #4caf50;
color: white;
border: 1px solid #4caf50;
}
.pagination .pag-a4:hover:not(.pag-active4) {
background-color: #ddd;
}
.pag-a5 {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
.pag-active5 {
background-color: #4caf50;
color: white;
border: 1px solid #4caf50;
}
.pagination .pag-a5:hover:not(.pag-active5) {
background-color: #ddd;
}
.pagination .pag-a5:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination .pag-a5:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.pag-a6 {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
border: 1px solid #ddd;
margin: 0 4px;
}
.pag-active6 {
background-color: #4caf50;
color: white;
border: 1px solid #4caf50;
}
.pagination .pag-a6:hover:not(.pag-active6) {
background-color: #ddd;
}
.pag-a7 {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
border: 1px solid #ddd;
font-size: 22px;
}
.pag-active7 {
background-color: #4caf50;
color: white;
border: 1px solid #4caf50;
}
.pagination .pag-a7:hover:not(.pag-active7) {
background-color: #ddd;
}
.newspaper1 {
column-count: 3;
}
.newspaper2 {
column-count: 3;
column-gap: 150px;
}
.newspaper3 {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
column-rule-width: 1px;
}
.newspaper4 {
column-count: 3;
column-width: 100px;
}
.dropdown1 {
position: relative;
display: inline-block;
}
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown1:hover .dropdown-content1 {
display: block;
}
.dropbtn2 {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content2 a:hover {
background-color: #f1f1f1;
}
.dropdown2:hover .dropdown-content2 {
display: block;
}
.dropdown2:hover .dropbtn2 {
background-color: #3e8e41;
}
.dropbtn3 {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content3 a:hover {
background-color: #f1f1f1;
}
.dropdown3:hover .dropdown-content3 {
display: block;
}
.dropdown3:hover .dropbtn3 {
background-color: #3e8e41;
}
div.ex57 {
background-color: lightgreen;
border: 2px solid black;
padding: 15px;
}
div.ex58 {
background-color: transparent;
border: 2px solid black;
padding: 15px;
}
div.ex59 {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
div.ex60 {
background-color: currentcolor;
padding: 15px;
}
div.ex60 p {
color: white;
}
div.ex61 {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
padding: 15px;
}
.ex63 {
text-shadow: 2px 2px red;
}
.ex64 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
.ex65 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.ex66 {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
.ex67 {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px grey;
}
.ex68 {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
div.card1 {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header1 {
background-color: #4caf50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container1 {
padding: 10px;
}
div.polaroid2 {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.container2 {
padding: 10px;
}
.ex69 {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Для Safari 3.1 to 6.0 */
transition: width 2s;
}
.ex69:hover {
width: 300px;
}
.ex70 {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
.ex70:hover {
width: 300px;
height: 300px;
}
.ex71 {
white-space: nowrap;
width: 200px;
border: 1px solid #000;
overflow: hidden;
text-overflow: clip;
}
.ex72 {
white-space: nowrap;
width: 200px;
border: 1px solid #000;
overflow: hidden;
text-overflow: ellipsis;
}
.ex73 {
width: 11em;
border: 1px solid #000;
word-wrap: break-word;
}
3. Частковий вигляд у браузері самостійної роботи №2.1:
4. HTML-код самостійної роботи №2.2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Самостійна робота №2.2</title>
</head>
<body>
<h1 class="title">Самостійна робота №2.2</h1>
<p class="subtitle">Виконала: студентка групи ІПЗ-21-301, <br>Кас'янова Поліна Євгеніївна</p>
<div class="examples">
<h2 class="name">1. CSS Контур</h2>
<h3>1.1. CSS Стиль контуру</h3>
<p class="dotted">Цятковий контур</p>
<p class="dashed">Пунктирний контур</p>
<p class="solid">Суцільний контур</p>
<p class="double">Подвійний контур</p>
<p class="groove">Рифлений контур. Ефект залежить від значення кольору контуру</p>
<p class="ridge">Ребристий контур. Ефект залежить від значення кольору контуру</p>
<p class="inset">Внутрішній контур. Ефект залежить від значення кольору контуру</p>
<p class="outset">Зовнішній контур. Ефект залежить від значення кольору контуру</p>
<h3>1.2. CSS Ширина контуру</h3>
<p class="ex1">Тонкий контур</p>
<p class="ex2">Середній контур</p>
<p class="ex3">Товстий контур</p>
<p class="ex4">Контур завтовшки в 4px</p>
<h3>1.3. CSS Колір контуру</h3>
<p class="ex5">Суцільний червоний контур</p>
<p class="ex6">Цятковий синій контур</p>
<p class="ex7">Зовнішній сірий контур</p>
<h3>1.4. Інвертувати колір</h3>
<p class="ex8">Суцільний інвертований контур</p>
<h3>1.5. CSS Скорочена властивість контуру</h3>
<p class="ex9">Пунктирний контур</p>
<p class="ex10">Цятковий червоний контур</p>
<p class="ex11">Суцільний 5px жовтий контур</p>
<p class="ex12">Товстий ребристий рожевий контур</p>
<h3>1.6. CSS Outline Offset</h3>
<p class="ex13">Контур цього параграфу складає 15 пікселів за межами межі</p>
<h2 class="name">2. CSS Текст</h2>
<h3>2.1. Колір тексту</h3>
<p class="ex14">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque in est laudantium veritatis
nobis ipsum porro quaerat consequatur exercitationem ut. Fuga possimus iusto corrupti vel delectus suscipit
sed odit repellendus.</p>
<p class="ex15">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem in nihil ipsam fuga eveniet
quibusdam nostrum sed. In quidem atque eum tenetur aut! Quia eveniet unde ipsa odio necessitatibus porro.
</p>
<h3>2.2. Колір тексту та колір фону</h3>
<p class="ex16">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci alias dolores eligendi fugit
quibusdam facilis. Nisi adipisci sit ducimus, possimus, qui facere nemo illo expedita, est officia
consequatur eligendi molestias.</p>
<p class="ex17">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse fugiat dolores, nesciunt quaerat
optio eum maiores asperiores rem tempore quo cumque nihil neque quibusdam inventore facere placeat nobis
fugit veritatis.</p>
<p class="ex18">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit quos adipisci atque quaerat, neque
perferendis vero cumque repudiandae exercitationem, iusto, amet incidunt tempore libero recusandae ipsum
quidem? Iste, recusandae sed?</p>
<h3>2.3. CSS Вирівнювання тексту</h3>
<p class="ex19">Текст 1 (center)</p>
<p class="ex20">Текст 2 (left)</p>
<p class="ex21">Текст 3 (right)</p>
<h3>2.4. Text Align Last / Вирівняти останній текст</h3>
<p>text-align-last: right:</p>
<p class="ex22">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>text-align-last: center:</p>
<p class="ex23">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>text-align-last: justify:</p>
<p class="ex24">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<h3>2.5. Напрямок тексту</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut soluta aperiam laboriosam eligendi reiciendis
quas magni ut fugiat asperiores sit iste nihil, tenetur repudiandae, molestiae nulla quo, a tempore enim.
</p>
<p class="ex25">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut soluta aperiam laboriosam eligendi
reiciendis quas magni ut fugiat asperiores sit iste nihil, tenetur repudiandae, molestiae nulla quo, a
tempore enim.</p>
<h3>2.6. Вертикальне вирівнювання</h3>
<p>Це <img src="./img/w3schools_logo.gif" alt="W3Schools" width="270" height="50"> зображення з вирівнюванням за
замовчуванням.</p><br>
<p>Це <img class="ex26" src="./img/w3schools_logo.gif" alt="W3Schools" width="270" height="50"> зображення із
вирівнюванням по верхньому краю.</p><br>
<p>Це <img class="ex27" src="./img/w3schools_logo.gif" alt="W3Schools" width="270" height="50"> зображення з
вирівнюванням посередині.</p><br>
<p>Це <img class="ex28" src="./img/w3schools_logo.gif" alt="W3Schools" width="270" height="50"> зображення з
вирівнюванням унизу.</p>
<h3>2.7. Декоративна лінія до тексту</h3>
<p class="ex29">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima,
asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam
necessitatibus ipsam! Ea, velit!</p>
<p class="ex30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex31">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex32">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<h3>2.8. Колір для декоративної лінії</h3>
<p class="ex33">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima,
asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam
necessitatibus ipsam! Ea, velit!</p>
<p class="ex34">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex35">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex36">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<h3>2.9. Стиль для декоративної лінії</h3>
<p class="ex37">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit consectetur et minima,
asperiores harum autem veniam dolor rerum excepturi vel vitae, non, fugiat cumque exercitationem numquam
necessitatibus ipsam! Ea, velit!</p>
<p class="ex38">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex39">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex40">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex41">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex42">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<h3>2.10. Товщина декоративної лінії</h3>
<p class="ex43">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex44">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex45">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<p class="ex46">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officia dolores, molestiae
atque numquam mollitia voluptatem facere dolorum quasi saepe officiis in enim, illo, eius quo beatae optio
nobis a!</p>
<h3>2.11. Трансформація тексту</h3>
<p class="ex47"> text-transform: uppercase</p>
<p class="ex48"> text-transform: lowercase</p>
<p class="ex49">text-transform: capitalize</p>
<h3>2.12. Відступ тексту</h3>
<p class="ex50">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores ad corporis magni unde
libero! Illo officia consectetur explicabo! Quos odio, veniam magni molestias voluptas nam iste fugit
voluptate cumque eveniet! Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur autem
perspiciatis nihil quam, minima deserunt alias totam consectetur incidunt accusamus nisi optio deleniti rem
repellendus dolorum ducimus facilis mollitia amet. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nisi perferendis officiis dolorum, ex doloribus cumque. Molestias quasi corrupti provident iusto, iure
aliquam porro odio non. Ipsum iusto soluta consequuntur quam? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Facere, neque odit! Cum eius hic fuga dicta sunt dolorem quos, omnis, dolor, rerum
corrupti at natus sapiente similique exercitationem id error.</p>
<h3>2.13. Міжлітерна відстань</h3>
<p class="ex51">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit odio deserunt pariatur hic
dolorem. Voluptatem natus eaque obcaecati et corrupti iste commodi culpa delectus blanditiis non! In
obcaecati illum ea.</p>
<p class="ex52">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis error quidem omnis corrupti
consequuntur ullam provident dolorem architecto tenetur, reprehenderit accusamus atque dignissimos repellat
odit deleniti eligendi illo aspernatur doloribus.</p>
<h3>2.14. Висота рядка</h3>
<p class="ex53">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit odio deserunt pariatur hic
dolorem. Voluptatem natus eaque obcaecati et corrupti iste commodi culpa delectus blanditiis non! In
obcaecati illum ea. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus suscipit
delectus assumenda omnis beatae sed enim itaque voluptas excepturi unde nulla recusandae, iure vero possimus
tempore consequatur corrupti numquam voluptates. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Earum fugit placeat iure exercitationem doloribus itaque odio dolore dolor. Adipisci voluptatibus
dignissimos nobis molestiae sint. Earum quibusdam non qui voluptate perspiciatis?</p>
<p class="ex54">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis error quidem omnis corrupti
consequuntur ullam provident dolorem architecto tenetur, reprehenderit accusamus atque dignissimos repellat
odit deleniti eligendi illo aspernatur doloribus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia doloribus tenetur voluptatibus tempore illum reprehenderit, eaque et voluptas dicta libero quia,
accusamus sint quidem maxime obcaecati, repudiandae veritatis nesciunt incidunt. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Cum saepe distinctio architecto ipsa. Corrupti, deserunt iste perspiciatis
fuga dolor rem consequuntur suscipit, eum, ipsam earum incidunt. Voluptatibus delectus neque ea.</p>
<h3>2.15. Інтервал між словами</h3>
<p class="ex55">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis repellat, sapiente amet
eveniet quo fugiat ex dolorum. Possimus dolor maxime earum corporis totam enim neque suscipit, ipsam
adipisci dignissimos quaerat.</p>
<p class="ex56">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, tempore quae maiores placeat
quas, autem accusantium dolor inventore sit id quo voluptatibus, magnam quia! Illum qui reiciendis
perferendis obcaecati aliquam?</p>
<h3>2.16. Пробіл</h3>
<p class="ex57">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam illum corrupti, explicabo
nesciunt repellendus voluptas. Perspiciatis maxime, provident esse quis earum pra labore distinctio quo.</p>
<h3>2.17. Тінь тексту</h3>
<h2 class="ex58">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<h2 class="ex59">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<h2 class="ex60">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<h2 class="name">3. CSS Шрифти</h2>
<h3>3.1. CSS властивість font-family</h3>
<p class="ex61">Цей пункт виділено шрифтом Times New Roman</p>
<p class="ex62">Цей пункт виділено шрифтом Arial</p>
<p class="ex63">Цей пункт виділено шрифтом Lucida Console</p>
<h3>3.2. Font-Style - Стиль шрифту</h3>
<p class="ex64">Це параграф у звичайному стилі</p>
<p class="ex65">Це параграф курсивом</p>
<p class="ex66">Це параграф похилим стилем</p>
<h3>3.3. Font-Weight - Товщина шрифту</h3>
<p class="ex67">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex68">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex69">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex70">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<h3>3.4. Font-Variant - Варіант шрифту</h3>
<p class="ex71">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex72">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<h3>3.5. Встановити розмір шрифту в пікселях</h3>
<p class="ex73">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex74">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<h3>3.6. Встановити розмір шрифту за допомогою Em</h3>
<p class="ex76">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex77">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex78">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<h3>3.7. CSS Скорочена властивість шрифту</h3>
<p class="ex79">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<p class="ex80">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto esse, ex suscipit unde magni
quasi quam perferendis laborum enim ad aut nemo rerum, quod ratione. Enim illo quaerat aliquam sint?</p>
<h2 class="name">4. CSS Макет - Властивість display</h2>
<h3>4.1. Перевизначити значення display за замовчуванням</h3>
<li class="ex81"><a href="#" target="_blank">HTML</a></li>
<li class="ex81"><a href="#" target="_blank">CSS</a></li>
<li class="ex81"><a href="#" target="_blank">JavaScript</a></li>
<h3>4.2. Використання width, max-width та margin: auto;</h3>
<div class="ex82">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex maxime culpa. Consequatur
nulla hic corporis. Eveniet, voluptatem! Voluptatem, officiis magni repudiandae necessitatibus quia
dignissimos nam qui consequuntur officia repellat!</div>
<br>
<div class="ex83">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex maxime culpa. Consequatur
nulla hic corporis. Eveniet, voluptatem! Voluptatem, officiis magni repudiandae necessitatibus quia
dignissimos nam qui consequuntur officia repellat!</div>
<h3>4.3. Властивість position</h3>
<div class="static">
Цей елемент div має position: static;
</div>
<br>
<div class="relative1">
Цей елемент div має position: relative;
</div>
<div class="fixed">
Цей елемент div має position: fixed;
</div>
<br>
<div class="relative2">Цей елемент div має position: relative;
<div class="absolute2">Цей елемент div має position: absolute;</div>
</div>
<br>
<div class="sticky">
Цей елемент div має position: sticky;
</div>
<h3>4.4. Елементи, що перекриваються</h3>
<h1>Це заголовок</h1>
<img class="ex84" src="./img/w3css.gif" width="100" height="140">
<p>Оскільки зображення має z-index -1, воно буде розташовано за текстом, тобто текст буде знаходитись зверху
зображення</p>
<h2 class="name">5. CSS Макет - Overflow</h2>
<h3>5.1. Overflow: visible</h3>
<div class="ex85">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus unde ea temporibus ad
consequuntur cumque fuga officia est, aspernatur minus soluta possimus. Inventore quam asperiores iusto
illum voluptatibus tempore blanditiis.</div>
<br><br><br><br><br><br><br>
<h3>5.2. Overflow: hidden</h3>
<div class="ex86">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus unde ea temporibus ad
consequuntur cumque fuga officia est, aspernatur minus soluta possimus. Inventore quam asperiores iusto
illum voluptatibus tempore blanditiis.</div>
<h3>5.3. Overflow: scroll</h3>
<div class="ex87">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus unde ea temporibus ad
consequuntur cumque fuga officia est, aspernatur minus soluta possimus. Inventore quam asperiores iusto
illum voluptatibus tempore blanditiis.</div>
<h3>5.4. Overflow: auto</h3>
<div class="ex88">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus unde ea temporibus ad
consequuntur cumque fuga officia est, aspernatur minus soluta possimus. Inventore quam asperiores iusto
illum voluptatibus tempore blanditiis.</div>
<h3>5.5. Overflow-x та overflow-y</h3>
<div class="ex89">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus unde ea temporibus ad
consequuntur cumque fuga officia est, aspernatur minus soluta possimus. Inventore quam asperiores iusto
illum voluptatibus tempore blanditiis.</div>
<h2 class="name">6. CSS Макет - float та clear</h2>
<h3>6.1. Float: right</h3>
<p><img class="ex90" src="./img/pineapple.jpg" alt="Float Right"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare
turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed
dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit
quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore
numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum
dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras
ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi
maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi
explicabo illo fuga saepe fugiat vel, accusantium rem.</p>
<h3>6.2. Float: left</h3>
<p><img class="ex91" src="./img/pineapple.jpg" alt="Float Right"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare
turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed
dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit
quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore
numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum
dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras
ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi
maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi
explicabo illo fuga saepe fugiat vel, accusantium rem.</p>
<br>
<h3>6.3. No float</h3>
<p><img class="ex92" src="./img/pineapple.jpg" alt="Float Right"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare
turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed
dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Corporis accusantium quidem maiores eveniet voluptates facilis possimus fugit
quibusdam labore eaque nisi, quasi maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore
numquam. Exercitationem quasi explicabo illo fuga saepe fugiat vel, accusantium rem.lamcorper ipsum
dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras
ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
accusantium quidem maiores eveniet voluptates facilis possimus fugit quibusdam labore eaque nisi, quasi
maxime sequi, repellat dicta ad quae excepturi placeat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Odio explicabo, maxime earum expedita ex quo ullam veniam nam dolore numquam. Exercitationem quasi
explicabo illo fuga saepe fugiat vel, accusantium rem.</p>
<h3>6.4. Властивість clear</h3>
<h2>Без clear</h2>
<div class="ex93">div1</div>
<div class="ex94">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum pariatur quidem error libero
voluptatum, quod reprehenderit consequuntur excepturi eius eligendi molestiae totam numquam cumque,
laboriosam iure doloribus, sit ipsum architecto.</div>
<br><br><br>
<h2>З clear</h2>
<div class="ex95">div3</div>
<div class="ex96">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut a mollitia iusto tenetur aut eum
quod quidem natus dignissimos reprehenderit, autem cumque expedita adipisci repellat voluptatem quibusdam
perferendis obcaecati consequuntur?</div>
<h3>6.5. Сітка блоків / Блоки однакової ширини</h3>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos accusantium quam fuga unde saepe quasi
earum adipisci, ipsum, nostrum consequuntur amet tempore itaque mollitia rem sed. Placeat, odio!
Perferendis, officiis!</p>
</div>
<div class="box" style="background-color:#ccc">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos accusantium quam fuga unde saepe quasi
earum adipisci, ipsum, nostrum consequuntur amet tempore itaque mollitia rem sed. Placeat, odio!
Perferendis, officiis!</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos accusantium quam fuga unde saepe quasi
earum adipisci, ipsum, nostrum consequuntur amet tempore itaque mollitia rem sed. Placeat, odio!
Perferendis, officiis!</p>
</div>
</div>
<h3>6.6. Зображення одне за одним</h3>
<div class="clearfix2">
<div class="img-container">
<img src="./img/img_5terre.jpg" alt="Italy" style="width:100%">
</div>
<div class="img-container">
<img src="./img/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="./img/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
<h2 class="name" style="text-align: center;">CSS ПРОДВИНУТИЙ</h2>
<h2 class="name">1. CSS 2D Трансформації</h2>
<h3>1.1. Метод translate()</h3>
<div class="example1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.2. Метод rotate()</h3>
<div class="example2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<div class="example3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.3. Метод scale()</h3>
<div class="example4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.4. Метод scaleX()</h3>
<div class="example5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.5. Метод scaleY()</h3>
<div class="example6">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.6. Метод skewX()</h3>
<div class="example7">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<div class="example8">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.7. Метод skewY()</h3>
<div class="example9">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<div class="example10">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h3>1.8. Метод matrix()</h3>
<div class="example11">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<div class="example12">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<div class="example13">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit neque repudiandae
magni reiciendis ducimus esse ad optio distinctio praesentium numquam? Natus, numquam ducimus veritatis
corrupti</div>
<h2 class="name">2. CSS 3D Трансформації</h2>
<h3>2.1. Метод rotateX()</h3>
<div class="example14">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<div class="example15">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<h3>2.2. Метод rotateY()</h3>
<div class="example16">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<div class="example17">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<h3>2.3. Метод rotateZ()</h3>
<div class="example18">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<div class="example19">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum atque non, assumenda
molestias modi reiciendis laudantium! Dolore nostrum obcaecati</div>
<br><br><br><br><br>
<h2 class="name">3. CSS Стилізація зображень</h2>
<h3>3.1. Округлі зображення</h3>
<img class="example20" src="./img/paris.jpg" alt="Париж" width="300" height="300">
<img class="example21" src="./img/paris.jpg" alt="Париж" width="300" height="300">
<h3>3.2. Мініатюрні зображення</h3>
<img class="example22" src="./img/paris.jpg" alt="Париж" style="width:150px">
<a target="_blank" href="./img/paris.jpg">
<img class="example23" src="./img/paris.jpg" alt="Париж" style="width:150px">
</a>
<h3>3.3. Адаптивні зображення</h3>
<img class="example24" src="./img/img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<h3>3.4. Центрування зображення</h3>
<img class="example25" src="./img/paris.jpg" alt="Париж" style="width:500px">
<h3>3.5. Polaroid зображення / Карточки</h3>
<div class="polaroid">
<img src="./img/img_5terre.jpg" alt="5 Terre" style="width:100%">
<div class="container-polaroid">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="./img/lights600x400.jpg" alt="Північне сяйво" style="width:100%">
<div class="container-polaroid">
<p>Північне сяйво</p>
</div>
</div>
<h3>3.6. Прозоре зображення</h3>
<img class="example26" src="./img/img_forest.jpg" alt="Forest" width="170" height="100">
<p>opacity 0.2</p>
<img class="example27" src="./img/img_forest.jpg" alt="Forest" width="170" height="100">
<p>opacity 0.5</p>
<img class="example28" src="./img/img_forest.jpg" alt="Forest" width="170" height="100">
<p>opacity 1 (за замовчуванням)</p>
<h3>3.7. Текст на зображенні</h3>
<div class="example29">
<img class="example30" src="./img/img_5terre_wide.jpg" alt="Cingue Terre">
<div class="example31">Внизу зліва</div>
<div class="example32">Вгорі зліва</div>
<div class="example33">Вгорі справа</div>
<div class="example34">Внизу справа</div>
<div class="example35">В центрі</div>
</div>
<h3>3.8. Фільтри зображень</h3>
<div style="max-width: 800px; margin-bottom: 940px;">
<img class="filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow filter" src="./img/pineapple.jpg" alt="Pineapple" width="300" height="300">
</div>
<br>
<h3>3.9. Накладення при наведенні на зображення</h3>
<div class="container-image">
<img src="./img/img_avatar3.png" alt="Аватар" class="image1" style="width:100%">
<div class="middletext">
<div class="text1">John Doe</div>
</div>
</div>
<h3>3.10. Відобразити зображення</h3>
<img class="example36" src="./img/paris.jpg" alt="Париж" width="400" height="300">
<h2 class="name">4. CSS Відбиття зображення</h2>
<h3>3.1. Приклад</h3>
<img class="example37" src="./img/img_tree.png">
<h3>3.2. CSS Відбиття з градієнтом</h3>
<img class="example38" src="./img/img_tree.png">
<h2 class="name">5. CSS Властивість object-fit</h2>
<h3>5.1. Всі значення CSS властивості object-fit</h3>
<h2>Немає object-fit:</h2>
<img src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<p>object-fit: fill (за замовчуванням):</p>
<img class="fill" src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<p>object-fit: contain:</p>
<img class="contain" src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<p>object-fit: cover:</p>
<img class="cover" src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<p>object-fit: scale-down:</p>
<img class="scale-down" src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<p>object-fit: none:</p>
<img class="none" src="./img/paris.jpg" alt="Париж" style="width:200px;height:300px">
<h2 class="name">6. CSS Властивість object-position</h2>
<h3>6.1. Використання властивості object-position</h3>
<img class="example39" src="./img/paris.jpg" alt="Париж" width="400" height="300">
<h2 class="name">7. CSS Box-sizing - Розмір блоку</h2>
<h3>7.1. Без CSS властивості box-sizing</h3>
<div class="example40">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et assumenda eaque hic dolorum
itaque est provident debitis aperiam! Odit omnis, unde maxime ad explicabo corporis id commodi placeat
reiciendis enim.</div>
<br>
<div class="example41">Lorem, ipsum dolor sit amet coaceat reiciendis enim.</div>
<h3>7.2. Із CSS властивістю box-sizing</h3>
<div class="example42">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et assumenda eaque hic dolorum
itaque est provident debitis aperiam! Odit omnis, unde maxime ad explicabo corporis id commodi placeat
reiciendis enim.</div>
<br>
<div class="example43">Lorem, ipsum dolor sit amet coaceat reiciendis enim.</div>
<h2 class="name">8. CSS Медіа запити</h2>
<h3>8.1. Медіа-запити. Простий приклад</h3>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Змініть розмір вікна браузера, щоб побачити ефект!</h1>
<p>У цьому прикладі показано меню, яке переміщатиметься зліва від сторінки, якщо область перегляду
має ширину 480 пікселів чи ширше. Якщо розмір області перегляду менший за 480 пікселів, меню буде
поверх вмісту.</p>
</div>
</div>
<h2 class="name">9. CSS Flexbox</h2>
<h3>9.1. Flexbox елементи</h3>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h2 class="name">10. CSS Гнучкий (flex) контейнер</h2>
<h3>10.1. Властивість flex-direction: column</h3>
<div class="flex-container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.2. Властивість flex-direction: column-reverse</h3>
<div class="flex-container3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.3. Властивість flex-direction: row</h3>
<div class="flex-container4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.4. Властивість flex-direction: row-reverse</h3>
<div class="flex-container5">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.5. Властивість flex-wrap: wrap</h3>
<div class="flex-container6">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.6. Властивість flex-wrap: nowrap</h3>
<div class="flex-container7">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.7. Властивість flex-wrap: wrap-reverse</h3>
<div class="flex-container8">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.8. Властивість justify-content: center</h3>
<div class="flex-container9">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.9. Властивість justify-content: flex-start</h3>
<div class="flex-container10">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.10. Властивість justify-content: flex-end</h3>
<div class="flex-container11">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.11. Властивість justify-content: space-around</h3>
<div class="flex-container12">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.12. Властивість justify-content: space-between</h3>
<div class="flex-container13">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>10.13. Властивість align-items: center</h3>
<div class="flex-container14">
<div style="padding: 30px;">1</div>
<div style="padding: 40px;">2</div>
<div style="padding: 50px;">3</div>
</div>
<h3>10.14. Властивість align-items: flex-start</h3>
<div class="flex-container15">
<div style="padding: 30px;">1</div>
<div style="padding: 40px;">2</div>
<div style="padding: 50px;">3</div>
</div>
<h3>10.15. Властивість align-items: flex-end</h3>
<div class="flex-container16">
<div style="padding: 30px;">1</div>
<div style="padding: 40px;">2</div>
<div style="padding: 50px;">3</div>
</div>
<h3>10.16. Властивість align-items: stretch</h3>
<div class="flex-container17">
<div style="padding: 30px;">1</div>
<div style="padding: 40px;">2</div>
<div style="padding: 50px;">3</div>
</div>
<h3>10.17. Властивість align-items: baseline</h3>
<div class="flex-container18">
<div style="padding: 30px;">1</div>
<div style="padding: 40px;">2</div>
<div style="padding: 50px;">3</div>
</div>
<h3>10.18. Властивість align-content: space-between</h3>
<div class="flex-container19">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.19. Властивість align-content: space-around</h3>
<div class="flex-container20">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.20. Властивість align-content: stretch</h3>
<div class="flex-container21">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.21. Властивість align-content: center</h3>
<div class="flex-container22">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.22. Властивість align-content: flex-start</h3>
<div class="flex-container23">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.23. Властивість align-content: flex-end</h3>
<div class="flex-container24">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<h3>10.24. Ідеальне центрування</h3>
<div class="flex-container25">
<div></div>
</div>
<h2 class="name">11. CSS Flex Елементи</h2>
<h3>11.1. Дочірні елементи</h3>
<div class="flex-container26">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<h3>11.2. Властивість order</h3>
<div class="flex-container27">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
<h3>11.3. Властивість flex-grow</h3>
<div class="flex-container28">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
<h3>11.4. Властивість flex-shrink</h3>
<div class="flex-container29">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<h3>11.5. Властивість flex-basis</h3>
<div class="flex-container30">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
<h3>11.6. Властивість align-self</h3>
<div class="flex-container31">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
</div>
</body>
</html>
5. CSS-код самостійної роботи №2.2:
/* ----------------------За замовчуванням----------------------- */
.title,
.name {
color: brown;
}
.title,
.subtitle {
text-align: center;
}
.subtitle {
font-size: 20px;
}
/* -------------------------Приклади---------------------------- */
p.dotted {
outline-style: dotted;
outline-color: red;
}
p.dashed {
outline-style: dashed;
outline-color: red;
}
p.solid {
outline-style: solid;
outline-color: red;
}
p.double {
outline-style: double;
outline-color: red;
}
p.groove {
outline-style: groove;
outline-color: red;
}
p.ridge {
outline-style: ridge;
outline-color: red;
}
p.inset {
outline-style: inset;
outline-color: red;
}
p.outset {
outline-style: outset;
outline-color: red;
}
.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
.ex5 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
.ex6 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
.ex7 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
.ex8 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}
.ex9 {
outline: dashed;
}
.ex10 {
outline: dotted red;
}
.ex11 {
outline: 5px solid yellow;
}
.ex12 {
outline: thick ridge pink;
}
.ex13 {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
.ex14 {
color: purple;
}
.ex15 {
color: chocolate;
}
.ex16 {
background-color: blue;
color: yellow;
}
.ex17 {
background-color: red;
color: white;
}
.ex18 {
background-color: green;
color: orange;
}
.ex19 {
text-align: center;
}
.ex20 {
text-align: left;
}
.ex21 {
text-align: right;
}
.ex22 {
text-align-last: right;
}
.ex23 {
text-align-last: center;
}
.ex24 {
text-align-last: justify;
}
.ex25 {
direction: rtl;
unicode-bidi: bidi-override;
}
.ex26 {
vertical-align: top;
}
.ex27 {
vertical-align: middle;
}
.ex28 {
vertical-align: bottom;
}
.ex29 {
text-decoration-line: overline;
}
.ex30 {
text-decoration-line: line-through;
}
.ex31 {
text-decoration-line: underline;
}
.ex32 {
text-decoration-line: overline underline;
}
.ex33 {
text-decoration-line: overline;
text-decoration-color: red;
}
.ex34 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
.ex35 {
text-decoration-line: underline;
text-decoration-color: green;
}
.ex36 {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
.ex37 {
text-decoration-line: underline;
text-decoration-style: solid;
}
.ex38 {
text-decoration-line: underline;
text-decoration-style: double;
}
.ex39 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
.ex40 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
.ex41 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
.ex42 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
.ex43 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
.ex44 {
text-decoration-line: underline;
text-decoration-thickness: 3px;
}
.ex45 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
.ex46 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
.ex47 {
text-transform: uppercase;
}
.ex48 {
text-transform: lowercase;
}
.ex49 {
text-transform: capitalize;
}
.ex50 {
text-indent: 50px;
}
.ex51 {
letter-spacing: 2px;
}
.ex52 {
letter-spacing: -2px;
}
.ex53 {
line-height: 0.8;
}
.ex54 {
line-height: 1.8;
}
.ex55 {
word-spacing: 20px;
}
.ex56 {
word-spacing: 30px;
}
.ex57 {
white-space: nowrap;
}
.ex58 {
text-shadow: 2px 2px;
}
.ex59 {
text-shadow: 2px 2px red;
}
.ex60 {
text-shadow: 2px 2px 5px red;
}
.ex61 {
font-family: "Times New Roman", Times, serif;
}
.ex62 {
font-family: Arial, Helvetica, sans-serif;
}
.ex63 {
font-family: "Lucida Console", "Courier New", monospace;
}
.ex64 {
font-style: normal;
}
.ex65 {
font-style: italic;
}
.ex66 {
font-style: oblique;
}
.ex67 {
font-weight: normal;
}
.ex68 {
font-weight: lighter;
}
.ex69 {
font-weight: bold;
}
.ex70 {
font-weight: 900;
}
.ex71 {
font-variant: normal;
}
.ex72 {
font-variant: small-caps;
}
.ex73 {
font-size: 40px;
}
.ex74 {
font-size: 30px;
}
.ex75 {
font-size: 14px;
}
.ex76 {
font-size: 2.5em; /* 40px/16=2.5em */
}
.ex77 {
font-size: 1.875em; /* 30px/16=1.875em */
}
.ex78 {
font-size: 0.875em; /* 14px/16=0.875em */
}
.ex79 {
font: 20px Arial, sans-serif;
}
.ex80 {
font: italic small-caps bold 12px/30px Georgia, serif;
}
.ex81 {
display: inline;
}
.ex82 {
width: 500px;
margin: auto;
border: 3px solid #73ad21;
}
.ex83 {
max-width: 500px;
margin: auto;
border: 3px solid #73ad21;
}
div.static {
position: static;
border: 3px solid #73ad21;
}
div.relative1 {
position: relative;
left: 30px;
border: 3px solid #73ad21;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73ad21;
}
div.relative2 {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73ad21;
}
div.absolute2 {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73ad21;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4caf50;
}
.ex84 {
position: absolute;
top: 6430px;
z-index: -1;
}
.ex85 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
.ex86 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
.ex87 {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
.ex88 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
.ex89 {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow-x: hidden;
overflow-y: scroll;
}
.ex90 {
float: right;
}
.ex91 {
float: left;
}
.ex92 {
float: none;
}
.ex93 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73ad21;
}
.ex94 {
border: 1px solid red;
}
.ex95 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73ad21;
}
.ex96 {
border: 1px solid red;
clear: left;
}
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix2::after {
content: "";
clear: both;
display: table;
}
.example1 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: translate(50px, 100px);
transform: translate(50px, 6px);
}
.example2 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example3 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.example4 {
margin: 150px;
width: 200px;
height: 150px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scale(2, 3); /* IE 9 */
transform: scale(2, 3); /* Стандартный синтаксис */
}
.example5 {
margin: 150px;
width: 200px;
height: 150px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleX(2); /* IE 9 */
transform: scaleX(2); /* Стандартный синтаксис */
}
.example6 {
margin: 150px;
width: 200px;
height: 150px;
background-color: yellow;
border: 1px solid black;
-ms-transform: scaleY(3); /* IE 9 */
transform: scaleY(3); /* Стандартный синтаксис */
}
.example7,
.example8 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example8 {
-ms-transform: skewX(20deg); /* IE 9 */
transform: skewX(20deg); /* Стандартный синтаксис */
}
.example9,
.example10 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example10 {
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg); /* Стандартный синтаксис */
}
.example11,
.example12,
.example13 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example12 {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
transform: matrix(1, -0.3, 0, 1, 0, 0); /* Стандартный синтаксис */
}
.example13 {
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
transform: matrix(1, 0, 0.5, 1, 150, 0); /* Стандартный синтаксис */
}
.example14 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example15 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: rotateX(150deg);
}
.example16 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example17 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: rotateY(150deg);
}
.example18 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
.example19 {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: rotateZ(90deg);
}
.example20 {
border-radius: 8px;
}
.example21 {
border-radius: 50%;
}
.example22 {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.example23 {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.example23:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.example24 {
max-width: 100%;
height: auto;
}
.example25 {
display: block;
margin-left: auto;
margin-right: auto;
}
div.polaroid {
width: 500px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container-polaroid {
text-align: center;
padding: 10px 20px;
}
.example26 {
opacity: 0.2;
}
.example27 {
opacity: 0.5;
}
.example28 {
opacity: 1;
}
.example29 {
position: relative;
text-align: center;
}
.example30 {
width: 100%;
height: auto;
opacity: 0.3;
}
.example31 {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
.example32 {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.example33 {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
.example34 {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
.example35 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}
.filter {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(250%);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px green);
}
.container-image {
position: relative;
width: 50%;
}
.image1 {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.middletext {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container-image:hover .image1 {
opacity: 0.3;
}
.container-image:hover .middletext {
opacity: 1;
}
.text1 {
background-color: #4caf50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.example36:hover {
transform: scaleX(-1);
}
.example37 {
-webkit-box-reflect: right;
}
.example38 {
-webkit-box-reflect: below 0px
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
margin-bottom: 320px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.scale-down {
object-fit: scale-down;
}
.none {
object-fit: none;
}
.example39 {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}
.example40 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.example41 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
.example42 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.example43 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
.wrapper {
overflow: auto;
}
#main {
margin-left: 4px;
}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #cdf0f6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {
width: 200px;
float: left;
}
#main {
margin-left: 216px;
}
}
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container2 {
background-color: DodgerBlue;
display: flex;
flex-direction: column;
}
.flex-container2 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container3 {
background-color: DodgerBlue;
display: flex;
flex-direction: column-reverse;
}
.flex-container3 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container4 {
background-color: DodgerBlue;
display: flex;
flex-direction: row;
}
.flex-container4 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container5 {
background-color: DodgerBlue;
display: flex;
flex-direction: row-reverse;
}
.flex-container5 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container6 {
background-color: DodgerBlue;
display: flex;
flex-wrap: wrap;
}
.flex-container6 > div {
background-color: #f1f1f1;
margin: 20px;
padding: 100px;
font-size: 30px;
}
.flex-container7 {
background-color: DodgerBlue;
display: flex;
flex-wrap: nowrap;
}
.flex-container7 > div {
background-color: #f1f1f1;
margin: 20px;
padding: 100px;
font-size: 30px;
}
.flex-container8 {
background-color: DodgerBlue;
display: flex;
flex-wrap: wrap-reverse;
}
.flex-container8 > div {
background-color: #f1f1f1;
margin: 20px;
padding: 100px;
font-size: 30px;
}
.flex-container9 {
background-color: DodgerBlue;
display: flex;
justify-content: center;
}
.flex-container9 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container10 {
background-color: DodgerBlue;
display: flex;
justify-content: flex-start;
}
.flex-container10 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container11 {
background-color: DodgerBlue;
display: flex;
justify-content: flex-end;
}
.flex-container11 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container12 {
background-color: DodgerBlue;
display: flex;
justify-content: space-around;
}
.flex-container12 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container13 {
background-color: DodgerBlue;
display: flex;
justify-content: space-between;
}
.flex-container13 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
.flex-container14 {
background-color: DodgerBlue;
display: flex;
align-items: center;
}
.flex-container14 > div {
background-color: #f1f1f1;
margin: 10px;
font-size: 30px;
}
.flex-container15 {
background-color: DodgerBlue;
display: flex;
align-items: flex-start;
}
.flex-container15 > div {
background-color: #f1f1f1;
margin: 10px;
font-size: 30px;
}
.flex-container16 {
background-color: DodgerBlue;
display: flex;
align-items: flex-end;
}
.flex-container16 > div {
background-color: #f1f1f1;
margin: 10px;
font-size: 30px;
}
.flex-container17 {
background-color: DodgerBlue;
display: flex;
align-items: stretch;
}
.flex-container17 > div {
background-color: #f1f1f1;
margin: 10px;
font-size: 30px;
}
.flex-container18 {
background-color: DodgerBlue;
display: flex;
align-items: baseline;
}
.flex-container18 > div {
background-color: #f1f1f1;
margin: 10px;
font-size: 30px;
}
.flex-container19 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
.flex-container19 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container20 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
.flex-container20 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container21 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
.flex-container21 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container22 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
.flex-container22 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container23 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
.flex-container23 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container24 {
background-color: DodgerBlue;
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
.flex-container24 > div {
background-color: #f1f1f1;
margin: 10px;
padding: 100px;
font-size: 30px;
}
.flex-container25 {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container25 > div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
.flex-container26 {
display: flex;
background-color: #f1f1f1;
}
.flex-container26 > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container27 {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container27 > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container28 {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container28 > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container29 {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container29 > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container30 {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container30 > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container31 {
display: flex;
height: 200px;
background-color: #f1f1f1;
}
.flex-container31 > div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
6. Частковий вигляд у браузері самостійної роботи №2.1:
