-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (186 loc) · 9.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clean Energy with Solar Power</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<div class="header">
<img src="logo.png" width="50%" alt="Logo" class="logo">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="/solarbot.html" class="solar-bot-btn"><img src="solarbot.png" alt="SolarBot Icon"> SOLAR BOT</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="hero">
<div class="container">
<h2>The Power of Solar</h2>
<p>
Harness the power of the sun and enjoy sustainable energy with
solar panels. Solar energy is clean, renewable, and cost-effective,
allowing you to save money while reducing your carbon footprint.
</p>
<img src="4.png" width="50%" alt="Hero Image">
</div>
</div>
<section class="feature">
<div class="container">
<div class="grid">
<div class="feature-item">
<h3>Save Money</h3>
<p>
Solar panels allow you to generate your own electricity,
reducing your reliance on the grid and saving you money on your
energy bills. With net metering, you can even earn credits for
the excess energy you produce.
</p>
</div>
<div class="feature-item">
<h3>Reduce Carbon Footprint</h3>
<p>
By using clean, renewable solar energy, you can significantly
reduce your carbon footprint and help combat climate change.
Traditional electricity generation relies on fossil fuels that
produce greenhouse gas emissions, but solar power produces no
pollution.
</p>
</div>
<div class="feature-item">
<h3>Energy Independence</h3>
<p>
With solar panels, you can generate your own clean energy right
at home. This provides you with greater energy independence,
ensuring that you have a reliable source of power, especially
during outages or emergencies.
</p>
</div>
</div>
</div>
</section>
</p>
</div>
</div>
<div class="image-container">
<div class="mx-auto grid aspect-video max-w-600 rounded-xl overflow-hidden items-start">
</div>
<img width="30%" src="5.png" alt="Image" class="object-cover object-center">
</div>
</div>
</section>
<section class="py-12 lg:py-16">
<div class="container px-4 md:px-6">
<div class="grid items-center gap-8 lg:grid-cols-[1fr_1000px] lg:gap-12 xl:grid-cols-[1fr_1200px]">
<div class="space-y-4">
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
Experience the Benefits of Solar Energy
</h2>
<p
class="max-w-[800px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
Discover the advantages of using solar power with our
high-quality solar panels. We offer a range of solutions designed
to help you save money, reduce your carbon footprint, and achieve
energy independence. Embrace clean, renewable energy with our
efficient and reliable solar plates.
</p>
</div>
<div class="grid gap-4 lg:order-first">
<div class="grid items-start gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 opacity-50">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-sm text-gray-500 dark:text-gray-400">
Save money with lower energy bills
</p>
</div>
<div class="grid items-start gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 opacity-50">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-sm text-gray-500 dark:text-gray-400">
Reduce your carbon footprint and help the environment
</p>
</div>
<div class="grid items-start gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 opacity-50">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<p class="text-sm text-gray-500 dark:text-gray-400">
Gain energy independence with your own solar power
<section class="product">
<div class="container">
<h2>Our Solar Panels</h2>
<div class="grid">
<div class="product-item">
<h3>Solar Panel 1</h3>
<img src="3.jpg" width="100%" alt="Solar Panel 1">
<div class="product-details">
<div class="price-button-container">
<button class="btn">Buy Now</button>
<p class="price">$299</p>
</div>
</div>
</div>
<div class="product-item">
<h3>Solar Panel 2</h3>
<img src="1.jpg" width="100%" alt="Solar Panel 2">
<div class="product-details">
<div class="price-button-container">
<button class="btn">Buy Now</button>
<p class="price">$349</p>
</div>
</div>
</div>
<div class="product-item">
<h3>Solar Panel 3</h3>
<img src="2.jpg" width="100%" alt="Solar Panel 3">
<div class="product-details">
<div class="price-button-container">
<button class="btn">Buy Now</button>
<p class="price">$399</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="card">
<h3>Ready to switch to solar energy?</h3>
<p style="color: azure;">Contact us to learn more about our solar panel solutions and how you can start saving using clean renewable energy.</p>
<form action="https://solaremail.azurewebsites.net/api/httptrigger1" method="post">
<input type="email" name="email" placeholder="Enter your email" style="height: 30px;" size="40px" required>
<button id="myButton" type="submit" class="btn">Contact Sales</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Contact Us</a>
</div>
<p>© 2024 Solar Energy Solutions. All Rights Reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>