1. Виконати практичне завдання № 1
  2. Виконати інтерактивну вправу №1
  3. Виконати інтерактивну вправу №2


1. Тут скопіювати HTML код, для веб сторінки " abityra.html”

<h1>Photo Gallery</h1>
 <div id="gallery">
 <figure class="photo"> <a href="img/DSC_6584.jpg" data-lightbox="roadtrip" data-title="Токар"><img src="img/ps9.jpg" alt="Токар" /></a> <figcaption>Токар</figcaption> </figure>
 <figure class="photo"> <a href="img/p8.jpg"data-lightbox="roadtrip" data-title="Коваль"><img src="img/ps3.jpg" alt="Коваль" /></a> <figcaption>Коваль</figcaption> </figure>
 <figure class="photo"> <a href="img/p5.jpg"data-lightbox="roadtrip" data-title="Електромонтер"><img src="img/ps1.jpg" alt="Електромонтер" /></a> <figcaption>Електромонтер</figcaption> </figure>
 <figure class="photo"> <a href="img/p6.jpg"data-lightbox="roadtrip" data-title="Продавець"><img src="img/ps2.jpg" alt="Продавець" /></a> <figcaption>Продавець</figcaption> </figure>
 <figure class="photo"> <a href="img/p9.jpg"data-lightbox="roadtrip" data-title="Рихтувальник"><img src="img/ps4.jpg" alt="Рихтувальник" /></a> <figcaption>Рихтувальник</figcaption> </figure>
 <figure class="photo"> <a href="img/p10.jpg"data-lightbox="roadtrip" data-title="Зварник"><img src="img/ps5.jpg" alt="Зварник" /></a> <figcaption>Зварник</figcaption> </figure>
 <figure class="photo"> <a href="img/p11.jpg"data-lightbox="roadtrip" data-title="Фрезерувальник"><img src="img/ps6.jpg" alt="Фрезерувальник" /></a> <figcaption>Фрезерувальник</figcaption> </figure>
 <figure class="photo"> <a href="img/p12.jpg"data-lightbox="roadtrip" data-title="Інструментальник"><img src="img/ps7.jpg" alt="Інструментальник" /></a> <figcaption>Інструментальник</figcaption> </figure>
 <figure class="photo"> <a href="img/DSC_6546.jpg"data-lightbox="roadtrip" data-title="Слюсар"><img src="img/ps8.jpg" alt="Слюсар" /></a> <figcaption>Слюсар</figcaption> </figure>
 </div>

2. Тут копіюємо перший HTML код для CSS

.container { width: 100%; /* ширина блоку-контейнеру */ max-width: 960px; /* максимальна ширина контейнера */ margin: 0 auto; /* этот стиль центрирует контейнер */}.photo { float: left; /* говоримо елементам шикуватися один за другим */ width: 33.333333%; /* встановлюємо ширину елементу */ padding: 10px; /* додаємо відступи з кожної сторони */ box-sizing: border-box; /* змінюємо спосіб обчислення ширини */}

3. Додамо наступний стиль для забезпечення адаптивності картинок:

.photo img {
    display: block;
    max-width: 100%;
    height: auto;
}

4. Оформлення мініатюр на CSS.

СПОСІБ I: ВЛАСТИВІСТЬ BORDER

border: 10px solid #eee;
box-sizing: border-box;

4. Оформлення мініатюр на CSS.

СПОСІБ II: властивості BACKGROUND-COLOR І PADDING

padding: 10px;
background-color: #eee;
box-sizing: border-box;

5.Оформити cтиль при наведенні курсору. Запишемо стиль для псевдокласу .photo a: hover: на CSS

.photo a:hover {
    opacity: 0.5;
}

6. Заставимо тег <a> поводитися як блок, інакше ми не побачимо, як попередній код спрацьовує на мініатюрі:

.photo a { display: block; position: relative;}.photo a:after { content: ''; background: transparent url(../img/icons/eye-icon.png) no-repeat center; width: 52px; height: 35px; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; visibility: hidden;}.photo:hover> a:after { visibility: visible;}.photo figcaption { color: #999999; text-align: center; margin-top: 20px;}h1 { font-size: 36px; text-transform: uppercase; color: #cccccc; text-align: center; margin: 30px 0;}body { font-family: 'Open Sans', sans-serif;}#gallery { margin-bottom: 60px;}#gallery:after { content: ''; display: block; height: 0; clear: both;}
веб-20-1.pdf

Результат виконання практичного завдання № 1