header {
background-color: #00ff4c;
color: rgb(218, 10, 10);
padding: 15px 20px;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: rgb(16, 170, 221);
text-decoration: none;
}
main {
padding: 20px;
}
form {
background-color: rgb(163, 93, 13);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: auto;
}
form label {
display: block;
margin-bottom: 5px;
}
form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
form button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background-color: #0056b3;
}
footer {
text-align: center;
padding: 10px;
background-color: #007bff;
color: white;
position: relative;
bottom: 0;
width: 100%;
margin-top: 20px;
}
.category {
margin-bottom: 20px;
}
</style>
<script>
function showPage(page) {
document.querySelectorAll('.content').forEach(content => {
content.style.display = 'none';
});
document.getElementById(page).style.display = 'block';
}
document.addEventListener('DOMContentLoaded', () => {
showPage('home'); // Show home page by default
});
function handleSubmit(formId, alertMessage) {
document.getElementById(formId).onsubmit = function () {
alert(alertMessage);
return false; // Prevent actual form submission for demonstration
};
}
handleSubmit('contactForm', 'Message sent!');
handleSubmit('signInForm', 'Sign In functionality not implemented.');
handleSubmit('forgotPasswordForm', 'Password reset link sent!');
</script>
<main>
<div id="home" class="content">
<h2>Welcome to Our Clothing Store!</h2>
<p>Discover the latest trends in fashion. Shop now!</p>
</div>
<div id="contact" class="content" style="display: none;">
<h2>Contact Us</h2>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="message">Message:</label>
<textarea id="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
<div id="menu" class="content" style="display: none;">
<h2>Menu Dashboard</h2>
<div class="category">
<h3>Men's Clothing</h3>
<ul>
<li>T-Shirts</li>
<li>Jeans</li>
<li>Shirts</li>
<li>Jackets</li>
<li>Shorts</li>
</ul>
</div>
<div class="category">
<h3>Women's Clothing</h3>
<ul>
<li>Dresses</li>
<li>Blouses</li>
<li>Skirts</li>
<li>Leggings</li>
<li>Coats</li>
</ul>
</div>
<div class="category">
<h3>Accessories</h3>
<ul>
<li>Bags</li>
<li>Watches</li>
<li>Belts</li>
<li>Sunglasses</li>
<li>Scarves</li>
</ul>
</div>
<div class="category">
<h3>Sale Items</h3>
<ul>
<li>Discounted T-Shirts</li>
<li>Clearance Jeans</li>
<li>End of Season Dresses</li>
<li>Seasonal Accessories</li>
<li>Special Offer Coats</li>
</ul>
</div>
</div>
<div id="signIn" class="content" style="display: none;">
<h2>Sign In</h2>
<form id="signInForm">
<label for="loginEmail">Email:</label>
<input type="email" id="loginEmail" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" required>
<button type="submit">Sign In</button>
</form>
</div>
<div id="forgotPassword" class="content" style="display: none;">
<h2>Forgot Password</h2>
<form id="forgotPasswordForm">
<label for="resetEmail">Email:</label>
<input type="email" id="resetEmail" required>
<button type="submit">Reset Password</button>
</form>
</div>
</main>
<footer>
<p>© PAUL 2024 Clothing Store. All rights reserved.</p>
</footer>