курси програмування для дітей безкоштовно

Класи у CSS

Створюємо Advent calendar

На цьому занятті ми розберемо класи у css та створимо адвент календар (Advent calendar) на рік (або передноворічний тиждень) з вітаннями та веселими картинками!

Такі календарі заведено робити в грудні, щоб рахувати дні до Нового Року. В такому календарі можуть бути віконечка, шухлядки або мішечки на кожен день. Кожен день діти або дорослі відкривають по одному віконечку і мають побажання, а інколи ще й подарунок на цей день. Це дуже гарна традиція, яка робить очікування свята ще веселішим. Ми зробимо сторінку з днями і побажаннями, бо подарунки, на жаль, в сайт не покладеш. Хоча хто знає, може саме ви придумаєте, як це зробити.

Можна також робити календар не на грудень, а на увесь рік! Зробіть календар зі святами, які ви любите і відправте сторінку вашій сім’ї і знайомим. Буде дуже цікаво відкривати віконечка і читати вітання зі святом. Або можете зробити календар днів, що лишились до канікул! Ось так може виглядати ваш календар. На останнє віконечко навели мишку, тому воно відкрилося і вітає з днем програміста:

Готові? Поїхали!

1: Створіть новий проєкт та скопіюйте такі стилі в нього. Або Створіть Fork з проєкта-заготовки: https://codepen.io/AnikaAmiga/pen/poBZPMx?editors=1100.

body {
  font-size: 25px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-size: cover;
}

.calendar {
  width: 100%;
  margin: 10px auto;
}
.day {
  margin: 10px;
  padding: 5px;
  display: inline-block;
  vertical-align: middle;
  width: 25%;
  height: 300px;
  text-align: center;
  background: #02cfc3;
  border: 5px solid #6afff6;
}

2: Додайте картинку на фон у стилі для body:

background-image: url('ТУТ_ПОСИЛАННЯ_НА_КАРТИНКУ_ФОНУ');

4: Додайте код для календарика і перше свято.

<div class="calendar">
  <div class="day">
    <p class="p">1 січня</p>
    <img class="image" src="https://png.pngtree.com/png-vector/20230228/ourmid/pngtree-2024-new-year-vector-png-image_253776.png" />
  </div>

</div>

Клас calendar буде мати в собі всі дні, які пізніше додамо. Клас day для одного дня. Всередині він має дати і картинку (це картинка, як буде в закритому вигляді).

Саме виділена частинка відповідає за один день.

4: До стилів додайте код, який розмістить картинку у віконці дня і відцентрує текст.

.day img.image{
    text-align: center;
    max-height: 200px;
    max-width: 100%;
}

5: Додайте текст-вітання або назву свята і другу картинку (вона має бути різна для кожного дня). Цей текст і картинка будуть з’являтися при наведенні мишки. Увага! Додайте тільки виділений текст, решта у вас вже має бути.

  <div class="day">
    <p class="p">1 січня</p>
    <p class="p hover">З Новим роком!</p>
    <img class="image" src="https://png.pngtree.com/png-vector/20230228/ourmid/pngtree-2024-new-year-vector-png-image_253776.png" />
    <img class="image hover" src="https://kpi.ua/files/styles/story/public/images-story/n1666.jpg?itok=nFbyFnZc" />
  </div>

6: Додайте код для перевертання картинки. Якщо наводимо мишу на день, має відобразити нову картинку .

.day:hover img.image{
    display:none;
}
.day img.hover{
    display:none;
}
.day:hover img.hover{
    display: inline;
	text-align: center;
}

7: Додайте зміну тексту при наведенні мишки.


.day:hover p{
    display:none;
}

.day p.hover{
    display:none;
}
.day:hover p.hover{
    display: inline;
	text-align: center;
}

8: Створіть ще більше днів! В прикладі коду блакитним виділені рядки, які треба буде змінити (день свята, назва свята, картинка для нього). Переконайтеся, що всі наші блоки для днів знаходяться в середині блоку календаря (виділено жовтим)

Додаємо сезони!

9: Додамо різні стилі для сезонів. Для цього в блоці, де знаходиться клас day, допишіть ще один клас wnter (можна іншу назву). Так у нас будуть вже два класи:

<div class="day winter">

10: Допишіть стилі для цього класу. Це додасть блакитний фон і рамку

.winter {
  	background: #3dd9fc;
	border: 5px solid #326fa8;
}

11: Аналогічно додайте класи для інших сезонів.

12: Додайте мінімум 8 свят у свій календарик

І на останок: календар програміста (він у двійковій системі):

Залишити коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *