JIT
create css code for a smart salon website layout
Log in
@simransainisaini394
generate a css code for following html code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About - Smart Salon</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <h1>Smart Salon</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="services.html">Services</a></li> <li><a href="appointments.html">Appointments</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="payment.html">Payment</a></li> <li><a href="login.html">Login</a></li> <li><a href="signup.html">Signup</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <main> <h2>About Us</h2> <p>Smart Salon provides a variety of beauty services to help you look and feel your best.</p> </main> <footer> <p>&copy; 2023 Smart Salon. All rights reserved.</p> </footer> </body> </html>
DeepSeek V3

I'll help you create the CSS for this HTML structure. Here's a clean, responsive CSS code for your Smart Salon website:

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

/* Header styles */
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #ecf0f1;
}

/* Navigation styles */
nav ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    gap: 1rem;
}

nav a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #34495e;
}

/* Main content styles */
main {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

main h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

main p {
    margin-bottom: 1rem;
    color: #555;
}

/* Footer styles */
footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    header {
        padding: 1rem;
    }
    
    main {
        padding: 1rem;
    }
}

This CSS provides:

  1. A clean reset and base styling
  2. Responsive navigation that stacks on mobile
  3. Consistent color scheme with the dark blue theme
  4. Proper spacing and typography
  5. Hover effects for navigation
  6. Responsive adjustments for smaller screens

You should save this in your css/styles.css file as referenced in your HTML. The styling is modern, clean, and professional for a salon website.*

Preview not available