Untitled
unknown
plain_text
a month ago
4.6 kB
4
Indexable
<!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>© 2024 SNA Solar Power. All rights reserved.</p> </footer> </body> </html>
Editor is loading...
Leave a Comment