diff --git a/contact_us.html b/contact_us.html deleted file mode 100644 index 7f14835..0000000 --- a/contact_us.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - Contact Us - - - - -
-
- -
-
-

Contact Us

-
- - - - - - -
-
-
- - - diff --git a/index.html b/index.html index 6eacccd..5229092 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@ + @@ -264,7 +265,7 @@

Amazon DynamoDB 📊

- + Contact Us @@ -323,7 +324,35 @@

Meet the Developers

+ + + +
+
+ × +
+
+ + +
+
+

Contact Us

+
+ + + + + + +
+
+
+
+ + + +
@@ -351,6 +380,7 @@

Meet the Developers

+ diff --git a/js/contact.js b/js/contact.js new file mode 100644 index 0000000..67c37d5 --- /dev/null +++ b/js/contact.js @@ -0,0 +1,32 @@ +document.addEventListener("DOMContentLoaded", function() { + const contactBtn = document.getElementById('contacts-contactBtn'); + const popup = document.getElementById('contacts-popup'); + // const closeBtn = document.getElementById('contacts_close'); + const closeBtn = document.querySelector('.contacts_close'); + + document.getElementById('name').disabled = false; +document.getElementById('message').disabled = false; + + // Function to open the popup + function openPopup() { + popup.style.display = 'flex'; + } + + // Function to close the popup + function closePopup() { + popup.style.display = 'none'; + } + + // Event listener for the contact button + contactBtn.addEventListener('click', openPopup); + + // Event listener for the close button + closeBtn.addEventListener('click', closePopup); + + // Close the popup if user clicks outside the popup + window.addEventListener('click', function(event) { + if (event.target === popup) { + closePopup(); + } + }); +}); diff --git a/styles/contact.css b/styles/contact.css new file mode 100644 index 0000000..09c62a5 --- /dev/null +++ b/styles/contact.css @@ -0,0 +1,99 @@ +@import url('variables.css'); + +.contacts-popup { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; /* Ensure popup is above other content */ +} + +.contacts-popup-things { + background-color: rgb(255, 234, 184); + padding: 20px; + border-radius: 10px; + position: relative; + width: 90%; + max-width: 1200px; + height: 70vh; + box-sizing: border-box; + overflow: auto; /* Enable scrolling for large content */ +} + +.contacts_close { + position: absolute; + top: 10px; + right: 10px; + font-size: 24px; + cursor: pointer; +} + +.contacts-container { + display: flex; + width: 100%; + height: 100%; +} + +.contacts-map-container, .contacts-contact-form-container { + flex: 1; +} + +.contacts-map-container iframe { + width: 100%; + height: 100%; + border: 0; +} + +.contacts-contact-form-container { + background-color: rgb(255, 234, 184); + padding: 30px; + box-sizing: border-box; +} + +.contacts-contact-form-container h1 { + text-align: center; + margin-bottom: 20px; + color: #be0065; +} + +.contacts-contact-form { + display: flex; + flex-direction: column; +} + +.contacts-contact-form input, .contacts-contact-form textarea { + padding: 10px; + margin-bottom: 15px; + border: none; + border-radius: 10px; + outline: none; + background: #ffffff; + color: #be0065; + border: 2px solid #d91c81; + font-size: 14px; +} + +.contacts-contact-form input::placeholder, .contacts-contact-form textarea::placeholder { + color: #be0065; +} + +.contacts-contact-form button { + padding: 10px 40px; + border: none; + border-radius: 20px; + background-color: #be0065; + color: rgb(255, 238, 197); + font-size: 14px; + cursor: pointer; + transition: background-color 0.3s ease; + align-self: center; +} + +.contacts-contact-form button:hover { + background-color: #c2186a; +}