Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SNA Solar Power</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f8ff; /* Light blue background */
            color: #000080; /* Dark blue text */
        }

        header {
            background-color: #000080; /* Dark blue header */
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        nav {
            background-color: #e6f7ff; /* Lighter blue navbar */
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            color: #000080; /* Dark blue links */
            text-decoration: none;
            padding: 10px 20px;
            margin: 0 10px;
        }

        nav a:hover {
            background-color: #b0e0e6; /* Light blue hover */
            border-radius: 5px;
        }

        .hero {
            background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('solar-panel-background.jpg'); /* Replace with your image */
            background-size: cover;
            background-position: center;
            text-align: center;
            padding: 100px 0;
            color: #000080;
        }

        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.2em;
            margin-bottom: 30px;
        }

        .btn {
            background-color: #000080;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 5px;
        }

        .btn:hover {
            background-color: #4169e1;
        }

        .services {
            padding: 50px 20px;
            text-align: center;
        }

        .service {
            display: inline-block;
            width: 30%;
            margin: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #000080;
            color: white;
            text-align: center;
            padding: 20px 0;
        }
    </style>
</head>
<body>

    <header>
        <h1>SNA Solar Power</h1>
    </header>

    <nav>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About Us</a>
        <a href="#contact">Contact</a>
    </nav>

    <section class="hero" id="home">
        <h1>Harness the Power of the Sun</h1>
        <p>Sustainable and Affordable Solar Solutions for Your Home and Business.</p>
        <a href="#contact" class="btn">Get a Free Quote</a>
    </section>

    <section class="services" id="services">
        <h2>Our Services</h2>
        <div class="service">
            <h3>Residential Solar Installation</h3>
            <p>Customized solar solutions for your home to reduce energy costs.</p>
        </div>
        <div class="service">
            <h3>Commercial Solar Installation</h3>
            <p>Scalable solar systems for businesses to maximize energy savings.</p>
        </div>
        <div class="service">
            <h3>Solar Maintenance & Repair</h3>
            <p>Comprehensive maintenance and repair services to keep your system running efficiently.</p>
        </div>
    </section>

    <section class="about" id="about">
        <div style="padding: 50px 20px; text-align: center;">
            <h2>About Us</h2>
            <p>SNA Solar Power is dedicated to providing high-quality, sustainable solar solutions. With years of experience and a commitment to customer satisfaction, we help you make the switch to clean, renewable energy.</p>
        </div>
    </section>

    <section class="contact" id="contact">
        <div style="padding: 50px 20px; text-align: center;">
            <h2>Contact Us</h2>
            <p>Get in touch with us today to learn more about our solar solutions and how we can help you save money and reduce your carbon footprint.</p>
            <p>Email: info@snasolarpower.com</p>
            <p>Phone: +1 (555) 123-4567</p>
        </div>
    </section>

    <footer>
        <p>&copy; 2024 SNA Solar Power. All rights reserved.</p>
    </footer>

</body>
</html>
Editor is loading...