Skip to content

creating contact page #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raveenar0505 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

creating contact page #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
32b131e
Update index.html
raveenar0505 Oct 19, 2024
18418c1
Update script.js
raveenar0505 Oct 19, 2024
fd617b7
Update styles.css
raveenar0505 Oct 19, 2024
5c44b6a
Create contact.html
raveenar0505 Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions frontend/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.contact-container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

h2 {
text-align: center;
color: #333;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
margin-bottom: 5px;
}

input, textarea {
padding: 10px;
font-size: 16px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}

textarea {
resize: vertical;
}

button {
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}

button:hover {
background-color: #0056b3;
}

.back-home {
display: block;
margin-top: 20px;
text-align: center;
}

.back-home a {
text-decoration: none;
color: #007bff;
}

.back-home a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="contact-container">
<h2>Contact Us</h2>
<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>

<label for="email">Your Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="message">Your Message:</label>
<textarea id="message" name="message" placeholder="Type your message here" rows="5" required></textarea>

<button type="submit">Send Message</button>
</form>
<div class="back-home">
<a href="index.html">Back to Home</a>
</div>
</div>
</body>
</html>
5 changes: 4 additions & 1 deletion frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
/>

<link rel="stylesheet" href="styles.css" />

</head>
<body>
<!-- Navigation Bar -->
Expand All @@ -30,12 +31,14 @@
<li><a href="course.html">Courses</a></li>
<li><a href="#">Notes</a></li>
<li><a href="IDE.html">IDE</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#" class="btn " onclick="window.location.href='contact.html'">Contact Us</a></li>
<li><a href="#" class="btn">Sign Up</a></li>
<li><a href="#" class="btn">Login</a></li>
</ul>
</nav>



<!-- Main Section -->
<section class="hero-section">
<h2>Welcome to codeX100</h2>
Expand Down
34 changes: 34 additions & 0 deletions frontend/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
});

106 changes: 105 additions & 1 deletion frontend/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,4 +502,108 @@ body {
width: 100%;
}
}
}
}
/* 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;
}