diff --git a/images/contacts-image.webp b/images/contacts-image.webp new file mode 100644 index 0000000..e2a129d Binary files /dev/null and b/images/contacts-image.webp differ diff --git a/pages/contacts.html b/pages/contacts.html index 1359a54..72f1dc5 100644 --- a/pages/contacts.html +++ b/pages/contacts.html @@ -17,5 +17,40 @@ Про нас + + +
+
+ Contact image. +

Зв’яжіться з нами

+

+ Ми завжди відкриті до співпраці, нових ідей та партнерських проєктів. + Залиште свої контакти або скористайтесь будь-яким зручним способом зв’язку. +

+
+ +
+

Наші контактні дані

+

Телефон: +380 (44) 123-45-67

+

Email: info@futuretech.example

+

Адреса: вул. Незалежності, 101, Київ, Україна

+
+ +
+

Напишіть нам

+
+ + + + + + + + + + +
+
+
\ No newline at end of file diff --git a/style.css b/style.css index d843a65..4200c6c 100644 --- a/style.css +++ b/style.css @@ -81,4 +81,58 @@ main { height: 10rem; border-radius: 0.75rem; object-fit: cover; -} \ No newline at end of file +} + +/* Form Styles */ + +form { + background-color: var(--highlight); + padding: 1rem; + border-radius: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 30rem; + margin: 1rem auto; +} + +/* Input, Textarea, Select */ +input, textarea, select { + background-color: var(--secondary); + color: var(--primary); + border: 1px solid var(--primary); + border-radius: 0.5rem; + padding: 0.5rem 0.75rem; + font-size: 1rem; + font-family: inherit; + transition: border-color 0.2s, box-shadow 0.2s; +} + +input:focus, textarea:focus, select:focus { + outline: none; + border-color: var(--click-me); + box-shadow: 0 0 0 2px rgba(255, 192, 203, 0.3); +} + +/* Button */ + +button { + background-color: var(--click-me); + color: var(--background); + border: none; + border-radius: 0.75rem; + padding: 0.5rem 1rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background-color 0.2s, transform 0.1s; +} + +button:hover { + background-color: #ff85c1; /* slightly darker pink for hover */ + transform: scale(1.05); +} + +button:active { + transform: scale(0.98); +}