diff --git a/frontend/contact.html b/frontend/contact.html
new file mode 100644
index 0000000..4366204
--- /dev/null
+++ b/frontend/contact.html
@@ -0,0 +1,101 @@
+
+
+
+
+
+ Contact Us
+
+
+
+
+
+
diff --git a/frontend/index.html b/frontend/index.html
index 1e56c24..76a02be 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -13,6 +13,7 @@
/>
+
@@ -30,12 +31,14 @@
Courses
Notes
IDE
- Contact Us
+ Contact Us
Sign Up
Login
+
+
Welcome to codeX100
diff --git a/frontend/script.js b/frontend/script.js
index ca89860..c0a6c73 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -25,5 +25,39 @@ document.getElementById('hamburger').addEventListener('click', function() {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars'); // Revert to hamburger icon
}
+})
+document.getElementById('contactForm').addEventListener('submit', function(e) {
+ e.preventDefault(); // Prevent form from submitting by default
+
+ const email = document.getElementById('email').value;
+ const message = document.getElementById('message').value;
+ const statusMessage = document.getElementById('statusMessage');
+
+ // Clear previous status messages
+ statusMessage.textContent = '';
+
+ // Validate email
+ const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
+ if (!email.match(emailPattern)) {
+ statusMessage.textContent = 'Please enter a valid email address.';
+ return;
+ }
+
+ // Validate message
+ if (message.trim() === "") {
+ statusMessage.textContent = 'Please enter a message.';
+ return;
+ }
+
+ // If validation passes, simulate form submission
+ statusMessage.style.color = 'green';
+ statusMessage.textContent = 'Form submitted successfully!';
+
+ // Simulate backend submission
+ console.log('Form Data:', {
+ name: document.getElementById('name').value,
+ email: email,
+ message: message
+ });
});
diff --git a/frontend/styles.css b/frontend/styles.css
index aa7056f..4783e31 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -502,4 +502,108 @@ body {
width: 100%;
}
}
- }
\ No newline at end of file
+ }
+ /* General page styling */
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f9;
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ background-color: #333;
+ color: white;
+ padding: 20px;
+ text-align: center;
+}
+
+h1 {
+ margin: 0;
+ font-size: 32px;
+}
+
+p {
+ font-size: 18px;
+}
+
+/* Main content styling */
+.main-content {
+ padding: 20px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+section {
+ margin-bottom: 40px;
+}
+
+/* Contact section styling */
+.contact-section {
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+h2 {
+ text-align: center;
+ color: #333;
+ margin-bottom: 20px;
+}
+
+label {
+ display: block;
+ margin-bottom: 5px;
+ font-weight: bold;
+ color: #333;
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+ width: 100%;
+ padding: 12px;
+ margin: 8px 0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 16px;
+ background-color: #f9f9f9;
+}
+
+textarea {
+ resize: vertical;
+}
+
+button {
+ width: 100%;
+ padding: 12px;
+ margin-top: 10px;
+ border: none;
+ border-radius: 4px;
+ background-color: #28a745;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #218838;
+}
+
+#statusMessage {
+ margin-top: 15px;
+ color: red;
+ text-align: center;
+}
+
+/* Footer styling */
+footer {
+ background-color: #333;
+ color: white;
+ padding: 20px;
+ text-align: center;
+}