From c12f1eee2e0b4bd80fad75e5e1f8eb1f1eb2128b Mon Sep 17 00:00:00 2001 From: Nazar Date: Thu, 11 Sep 2025 17:08:21 +0300 Subject: [PATCH] Add styles. Contacts page content --- images/contacts-image.webp | Bin 0 -> 6448 bytes pages/contacts.html | 35 +++++++++++++++++++++++ style.css | 56 ++++++++++++++++++++++++++++++++++++- 3 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 images/contacts-image.webp diff --git a/images/contacts-image.webp b/images/contacts-image.webp new file mode 100644 index 0000000000000000000000000000000000000000..e2a129de5cfaf07c6aeadcd0c689076d8c90afee GIT binary patch literal 6448 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Про нас + + +
+
+ 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); +}