Створюємо 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 свят у свій календарик
І на останок: календар програміста (він у двійковій системі):
