Практична робота: CSS до Дня святого Валентина

 Оформлення тексту засобами CSS

📝 Завдання

Завдання:

Створіть HTML-сторінку з 12 різними реченнями.
До кожного речення застосуйте окреме CSS-оформлення.

---

❤️ Текст (12 різних речень)

1. Кохання — це коли навіть тиша говорить більше за слова.

2. Усмішка коханої людини здатна зробити день яскравішим.

3. Справжні почуття не потребують доказів.

4. Любов починається з маленьких турбот.

5. Кохання — це мистецтво бути разом.

6. Щастя — це прокидатися з думкою про тебе.

7. Любов зігріває навіть у найхолодніші дні.

8. Кохання робить світ добрішим.

9. Бути поруч — найкращий подарунок.

10. Серце знає правильний шлях.

11. Там, де любов — там і надія.

12. Разом ми сильніші.

---

🎨 CSS-завдання до кожного речення

№	Завдання
1	Змінити колір тексту
2	Змінити розмір шрифту
3	Зробити жирний текст
4	Зробити курсив
5	Додати підкреслення
6	Змінити фон речення
7	Додати рамку
8	Зробити заокруглені кути
9	Додати тінь тексту
10	Змінити шрифт
11	Вирівняти по центру
12	Зробити hover-ефект (зміна стилю при наведенні)

---

🧩 Шаблон HTML учні створюють самі

/* Загальні стилі сторінки */

body {
    background: linear-gradient(135deg, #ffe6f0, #fff0f5);
    font-family: Arial, sans-serif;
    padding: 30px;
}

/* 1 — колір тексту */
 {
    color: #e6005c;
}

/* 2 — розмір шрифту */
 {
    font-size: 24px;
}

/* 3 — жирний текст */
 {
    font-weight: bold;
}

/* 4 — курсив */
 {
    font-style: italic;
}

/* 5 — підкреслення */
 {
    text-decoration: underline;
}

/* 6 — фон тексту */
 {
    background-color: #ffd6e8;
    padding: 10px;
}

/* 7 — рамка */
 {
    border: 2px dashed #ff4d88;
    padding: 10px;
}

/* 8 — заокруглення */
 {
    background: #ffe6f0;
    border-radius: 15px;
    padding: 10px;
}

/* 9 — тінь тексту */
 {
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

/* 10 — інший шрифт */
 {
    font-family: "Comic Sans MS", "Segoe Script", cursive;
}

/* 11 — вирівнювання по центру */
 {
    text-align: center;
}

/* 12 — hover-ефект */
 {
    background: #ff4d88;
    color: white;
    padding: 12px;
    border-radius: 12px;
    transition: 0.3s;
}

 {
    background: #cc0052;
    transform: scale(1.05);
}