diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..83155a8 --- /dev/null +++ b/contact.html @@ -0,0 +1,94 @@ + + + + + + + + Contact Us + + +
+

Contact Us

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..09042e1 --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +document.getElementById('contactForm').addEventListener('submit', function(event) { + event.preventDefault(); + + const name = document.getElementById('name').value.trim(); + const email = document.getElementById('email').value.trim(); + const phone = document.getElementById('phone').value.trim(); + + + if (name === '' || email === '' || phone === '') { + alert('Please fill in all fields.'); + return; + } + + + const responseMessage = document.getElementById('responseMessage'); + + responseMessage.innerHTML = `

Thank you, ${name}! Your message has been sent.

`; + + + document.getElementById('contactForm').reset(); +}); diff --git a/styles.css b/styles.css index bfc5a87..4422948 100644 --- a/styles.css +++ b/styles.css @@ -579,3 +579,149 @@ nav { margin-right: 3%; } } +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +.container { + max-width: 400px; + margin: 50px auto; + padding: 20px; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; +} + +.input-group { + position: relative; + margin-bottom: 20px; +} + +.input-group i { + position: absolute; + left: 10px; + top: 10px; + color: #aaa; +} + +.input-group input { + width: 100%; + padding: 10px 10px 10px 40px; /* Add padding to the left for the icon */ + border: 1px solid #ccc; + border-radius: 4px; +} + +.input-group input:focus { + border-color: #007BFF; /* Change border color on focus */ +} + +button { + width: 100%; + padding: 10px; + background-color: #007BFF; /* Bootstrap primary color */ + color: white; + border: none; + border-radius: 4px; +} + +button:hover { + background-color: #0056b3; /* Darker shade on hover */ +} + +#responseMessage { + margin-top: 20px; + text-align: center; +} +body { + font-family: Arial, sans-serif; +} + +.container { + padding: 20px; +} + +.main-footer { + background-color: white; /* Dark background for footer */ + color: white; /* White text */ + padding: 20px 0; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + padding: 20px; +} + +.main-footer { + background-color: white; /* White background for the footer */ + border-top: 5px solid orange; /* Orange border at the top */ + color: black; /* Black text color */ + padding: 20px 0; +} + +.footer-content { + display: flex; /* Flexbox for layout */ + justify-content: space-between; /* Space between sections */ + max-width: 1200px; /* Max width for footer */ + margin: 0 auto; /* Center align */ +} + +.footer-section { + flex: 1; /* Equal space for each section */ + padding: 20px; +} + +.footer-section h4, +.footer-section h3 { + margin-bottom: 15px; +} + +.footer-section ul { + list-style-type: none; /* Remove bullet points */ + padding: 0; +} + +.footer-section ul li { + margin-bottom: 10px; /* Space between list items */ +} + +.footer-section a { + color: black; /* Black links */ + text-decoration: none; /* Remove underline */ +} + +.footer-section a:hover { + text-decoration: underline; /* Underline on hover */ +} + +.social-links a { + margin-right: 15px; /* Space between social icons */ + color: black; /* Black color for icons */ +} + +.footer-bottom { + text-align: center; /* Center align bottom text */ + margin-top: 20px; +} + +.footer-bottom p { + margin: 0; /* Remove default margin */ +} + + +