Add styles. Contacts page content

pages/contacts.html

@@ -17,5 +17,40 @@
             <a href="/pages/about.html">Про нас</a>
         </div>
     </nav>
+
+    <!-- Content -->
+    <main>
+        <section class="contact-hero">
+            <img src="/images/contacts-image.webp" alt="Contact image." class="section-image">
+            <h1>Зв’яжіться з нами</h1>
+            <p>
+                Ми завжди відкриті до співпраці, нових ідей та партнерських проєктів. 
+                Залиште свої контакти або скористайтесь будь-яким зручним способом зв’язку.
+            </p>
+        </section>
+
+        <section class="contact-details">
+            <h2>Наші контактні дані</h2>
+            <p><b>Телефон:</b> <a href="tel:+380441234567">+380 (44) 123-45-67</a></p>
+            <p><b>Email:</b> <a href="mailto:info@futuretech.example">info@futuretech.example</a></p>
+            <p><b>Адреса:</b> вул. Незалежності, 101, Київ, Україна</p>
+        </section>
+
+        <section class="contact-form">
+            <h2>Напишіть нам</h2>
+            <form id="contact-us-form">
+                <label for="name">Ваше ім’я:</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Ваш email:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Повідомлення:</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+
+                <button type="submit">Надіслати</button>
+            </form>
+        </section>
+    </main>
 </body>
 </html>

style.css

@@ -82,3 +82,57 @@ main {
     border-radius: 0.75rem;
     object-fit: cover;
 }
+
+/* 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);
+}