Web-programming-site-device/contactusCSS.css at main · TeslenkoPavlo/Web-programming-site-device · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* Універсальний селектор */
* {
    margin: 0; /* Встановлюємо зовнішній відступ у 0 для всіх елементів */
    padding: 0; /* Встановлюємо внутрішній відступ у 0 для всіх елементів */
    box-sizing: border-box; /* Забезпечує включення padding і border до загальної ширини та висоти */
    font-family: 'Playfair Display', serif; /* Встановлюємо шрифт для всього документа */
}

/* Стилізація тега <body> */
body {
    background-color: #007bff; /* Встановлюємо синій колір фону */
    display: flex; /* Використовуємо flexbox для розміщення елементів */
    align-items: center; /* Вирівнюємо елементи по вертикалі */
    justify-content: center; /* Вирівнюємо елементи по горизонталі */
    height: 100vh; /* Задаємо висоту 100% від висоти вікна браузера */
}

/* Контейнер форми */
.contact-form-container {
    background-color: #ffffff; /* Білий фон для контейнера */
    padding: 2rem; /* Внутрішній відступ у 2 рем */
    border-radius: 8px; /* Згладжуємо кути контейнера */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Додаємо легку тінь */
    width: 320px; /* Фіксована ширина контейнера */
    text-align: center; /* Текст вирівнюється по центру */
}

/* Стилізація заголовка в контейнері */
.contact-form-container h2 {
    font-size: 1.5rem; /* Розмір шрифту 1.5 рем */
    margin-bottom: 1rem; /* Відступ знизу 1 рем */
    color: #007bb5; /* Синій колір тексту */
}

/* Стилізація полів форми та кнопки */
form input, form textarea, form button {
    width: 100%; /* Ширина 100% від контейнера */
    padding: 0.5rem; /* Внутрішній відступ 0.5 рем */
    margin-bottom: 1rem; /* Відступ знизу 1 рем */
    border: 1px solid #b3d4fc; /* Блакитний колір обведення */
    border-radius: 4px; /* Згладжуємо кути елементів */
    font-size: 1rem; /* Розмір шрифту 1 рем */
}

/* Стилізація тексту placeholder */
form input::placeholder, form textarea::placeholder {
    color: #8ab6e5; /* Світло-блакитний колір для підказок */
    font-style: italic; /* Курсив для тексту */
}

/* Стилізація активного стану полів */
form input:focus, form textarea:focus {
    outline: none; /* Вимикаємо стандартну обведення */
    border-color: #007bb5; /* Синій колір обведення при фокусі */
}

/* Стилізація кнопки */
form button {
    background-color: #007bb5; /* Синій фон кнопки */
    color: #ffffff; /* Білий колір тексту */
    font-weight: bold; /* Жирний текст */
    cursor: pointer; /* Змінюємо курсор на "руку" */
    border: none; /* Відсутність обведення */
    transition: background-color 0.3s; /* Плавний перехід кольору фону */
}

/* Стилізація кнопки при наведенні */
form button:hover {
    background-color: #005f99; /* Темніший синій фон при наведенні */
}

/* Стилізація повідомлень про помилки */
.error-message {
    color: #e63946; /* Червоний колір тексту */
    font-size: 0.8rem; /* Розмір шрифту 0.8 рем */
    text-align: left; /* Вирівнюємо текст по лівому краю */
    display: none; /* Ховаємо повідомлення за замовчуванням */
}

/* Приховані елементи */
.hidden {
    display: none; /* Ховаємо елементи */
}

/* Стилізація повідомлення про успіх */
#successMessage {
    font-size: 0.9rem; /* Розмір шрифту 0.9 рем */
    color: #007bb5; /* Синій колір тексту */
    margin-top: 1rem; /* Відступ зверху 1 рем */
}