-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
430 lines (418 loc) · 18.9 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Site Title -->
<title>Voltaic</title>
<!-- Favicon Link -->
<link rel="icon" type="image/png" sizes="512x512" href="./assets/images/favicon/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/images/favicon/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon/favicon-16x16.png">
<link rel="icon" type="image/x-icon" href="./assets/images/favicon/favicon.ico">
<!-- All CSS -->
<link rel="stylesheet" href="./assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/plugins/textillate-master/css/animate.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body data-spy="scroll" data-target="#aside-navbar" data-offset="100">
<!-- Header Section -->
<header class="header w-100">
<nav class="navbar navbar-expand-xl">
<div class="container">
<a class="navbar-brand" href="./index.html">
<img src="./assets/images/logo/logo.png" alt="logo" class="navbar-brand__image img-fluid">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="voltaic-icon-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-center ml-auto">
<li class="nav-item">
<a class="nav-link text-uppercase" href="#!">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#choose">WHY SOLAR</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#services1">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#benefits">BENEFITS</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#!">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#!">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase" href="#!">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Off Canvas Menu Toggler -->
<button class="offCanvasMenuCloser position-fixed border-0" data-toggle="collapse" data-target="#navbarSupportedContent" role="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></button>
<!-- Banner Section -->
<section id="banner" class="banner overflow-hidden">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-12 banner__content-wrapper">
<h1 class="banner__title mx-auto text-animate" data-in-effect="bounceInDown">Power with Voltaic Providing clean and cost-efficient energy to families around the nation.</h1>
<a href="#!" class="outline-btn rounded-pill d-inline-block text-uppercase">Book demo</a>
</div>
<div class="col-xl-6 banner__card-wrapper">
<div class="row align-items-end justify-content-center">
<div class="col-md-4 col-6 mb-4 mb-sm-0">
<div class="banner__card">
<img src="./assets/images/banner/banner-icon-1.png" alt="banner icon" class="banner__card__image img-fluid">
<h2 class="banner__card__title">Solar Panels <br>Service</h2>
</div>
</div>
<div class="col-md-4 col-6 mb-4 mb-sm-0">
<div class="banner__card">
<img src="./assets/images/banner/banner-icon-2.png" alt="banner icon" class="banner__card__image img-fluid">
<h2 class="banner__card__title">25 Years <br>warranty</h2>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="banner__card">
<img src="./assets/images/banner/banner-icon-3.png" alt="banner icon" class="banner__card__image img-fluid">
<h2 class="banner__card__title">Get your ROI in <br>home increase value.</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services1" class="services position-relative">
<div class="container-fluid position-absolute d-none d-xl-block h-100">
<div class="row h-100">
<div class="col-xl-8 offset-xl-4 pr-xl-0 h-100">
<img src="./assets/images/services/services-1.png" alt="services image" class="w-100 h-100">
</div>
</div>
</div>
<div class="section-gap">
<div class="container">
<div class="row">
<div class="col-xl-4 text-center text-xl-left">
<div class="section-header">
<p class="section-header__text">Suntec</p>
<h1 class="section-header__title">Solar Panels <span class="d-xl-block">Services</span></h1>
</div>
<p>The best components, the best tech, the lowest price. <br>Project Solar uses premium, all-black panels with Enphase micro inverters to provide world-class aesthetics and performance. Micro inverters, as opposed to string inverters, come with an app that reports panel-level data so you can monitor and manage your system.</p>
<p>Want to save $8,000, <a href="#!" class="link-btn d-inline-block">Click Here</a></p>
<a href="#!" class="primary-btn d-inline-block text-uppercase rounded-pill mb-3 mr-3">Get a quote</a>
<a href="tel:+" class="outline-btn rounded-pill d-inline-block text-uppercase mb-3 px-4">Call</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services2" class="services position-relative">
<div class="container-fluid position-absolute d-none d-xl-block h-100">
<div class="row h-100">
<div class="col-xl-8 offset-xl-4 pr-xl-0 h-100">
<img src="./assets/images/services/services-2.png" alt="services image" class="w-100 h-100">
</div>
</div>
</div>
<div class="section-gap">
<div class="container">
<div class="row">
<div class="col-xl-4 text-center text-xl-left">
<div class="section-header">
<p class="section-header__text">Suntec</p>
<h1 class="section-header__title">Aero Sealing</h1>
</div>
<p>Our duct and air sealing technologies are proven to make your air cleaner and healthier while delivering comfort and substantial energy savings.</p>
<a href="#!" class="outline-btn rounded-pill d-inline-block text-uppercase fix-space">Get a quote</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services3" class="services position-relative">
<div class="container-fluid position-absolute d-none d-xl-block h-100">
<div class="row h-100">
<div class="col-xl-8 offset-xl-4 pr-xl-0 h-100">
<img src="./assets/images/services/services-3.png" alt="services image" class="w-100 h-100">
</div>
</div>
</div>
<div class="section-gap">
<div class="container">
<div class="row">
<div class="col-xl-4 text-center text-xl-left">
<div class="section-header">
<p class="section-header__text">Suntec</p>
<h1 class="section-header__title">Battery Pack</h1>
</div>
<p>Solar power banks and portable solar chargers offer convenience for the consumer. While they are energy-efficient, they may not always be a money-saving option. So, their worth will largely depend on their application and consumer preference.</p>
<a href="#!" class="primary-btn d-inline-block text-uppercase rounded-pill fix-space">Order Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="benefits" class="services section-gap">
<div class="container">
<div class="row text-center text-xl-left">
<div class="col-xl-3 offset-xl-1 mb-5 mb-xl-0">
<div class="section-header">
<h1 class="section-header__title section-header__title--dark">Dicover the Advantages</h1>
</div>
<ul class="services__list">
<li class="services__list__items">Long Time Use</li>
<li class="services__list__items">Energy Can be Reused</li>
<li class="services__list__items">No Installation Cost</li>
<li class="services__list__items">Always Clean Energy</li>
<li class="services__list__items">Use for Many Purposes</li>
<li class="services__list__items">Easy Installation</li>
</ul>
</div>
<div class="col-xl-4 pr-xl-5 mb-5 mb-xl-0">
<div class="services__block">
<h2 class="services__block__sub-title">Solar Panel Services</h2>
<p class="services__block__text">We serve all southwestern region of the US. Texas TX (El Paso, Laredo, Midland, McAllen) New Mexico NM (Alamogordo, Las Cruces, Albuquerque).</p>
</div>
<div class="services__block">
<h2 class="services__block__sub-title">Extended 25 Year Warranty</h2>
<p class="services__block__text">We offer 25 years performance and 10 year workman ship</p>
</div>
<div class="services__block">
<h2 class="services__block__sub-title">State Of the Art Module Technology</h2>
<p class="services__block__text">Combines Cutting Edge Cell Sparation and Innovating wiring with Technology</p>
</div>
<div class="services__block">
<h2 class="services__block__sub-title">A Lifetime Investment</h2>
<p class="services__block__text">Inclusive 12 year product warranty and 25 year performance guarantee.</p>
</div>
</div>
<div class="col-xl-4 mt-auto">
<img src="./assets/images/benefits/benefits.png" alt="benefits image" class="services__image w-100">
</div>
</div>
</div>
</section>
<!-- Order and Installment Process Section -->
<section id="process" class="process section-gap">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-4 mb-4 mb-xl-0 mb-5 mb-xl-0 text-center text-xl-left">
<div class="section-header">
<p class="section-header__text">Power On</p>
<h1 class="section-header__title">Order and Installment</h1>
</div>
<a href="#!" class="primary-btn d-inline-block text-uppercase rounded-pill">Get In touch</a>
</div>
<div class="col-xl-8">
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 mb-5 mb-lg-0">
<div class="process__card process__card--arrow position-relative text-center">
<img src="./assets/images/process/process-1.svg" alt="process icon" class="process__card__image img-fluid">
<h3 class="process__card__title">Complete The Survey</h3>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5 mb-lg-0">
<div class="process__card process__card--arrow position-relative text-center">
<img src="./assets/images/process/process-2.svg" alt="process icon" class="process__card__image img-fluid">
<h3 class="process__card__title">Schedule Consultation</h3>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="process__card text-center">
<img src="./assets/images/process/process-3.svg" alt="process icon" class="process__card__image img-fluid">
<h3 class="process__card__title">Save a Ton of Money</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section id="choose" class="choose dark-bg section-gap">
<div class="container">
<div class="row text-center text-xl-left">
<div class="col-xl-4 mb-4 mb-xl-0">
<div class="section-header">
<p class="section-header__text">but why?</p>
<h1 class="section-header__title">Why Choose Solar Energy</h1>
</div>
<a href="#!" class="primary-btn d-inline-block text-uppercase rounded-pill">Get In touch</a>
</div>
<div class="col-xl-8">
<p class="mb-0">Whether you're a homeowner, business, or a non profit, electricity costs can make a large portion of your monthly expenses. With solar panel system, you'll generate free power of your system's entire 25+ cycle. Even if you don't produce 100 percent of the energy you consume, solar will reduce your utility bills and you'll still save a lot of money.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact section-gap position-relative">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-4">
<div class="section-header text-center text-xl-left">
<p class="section-header__text">We are waitig</p>
<h1 class="section-header__title">let's Connect</h1>
</div>
<form class="contact__form">
<div class="form-group">
<input type="text" name="firstName" class="form-control shadow-none rounded-0" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" name="lastName" class="form-control shadow-none rounded-0" placeholder="Last Name">
</div>
<div class="form-group">
<input type="text" name="contactNumber" class="form-control shadow-none rounded-0" placeholder="Contact Number">
</div>
<div class="form-group">
<input type="text" name="zipCode" class="form-control shadow-none rounded-0" placeholder="ZIP Code">
</div>
<div class="text-center mt-5">
<button type="submit" class="primary-btn text-uppercase rounded-pill">Get Started</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Banner Section -->
<footer class="footer dark-bg section-gap">
<div class="container">
<div class="row justify-content-lg-center">
<div class="col-xl-2 col-lg-4 col-md-6 mb-5 mb-lg-0">
<div class="footer__block">
<h3 class="footer__block__title">About</h3>
<ul class="footer__block__list">
<li class="footer__block__list__items">
<a href="#!" class="footer__block__list__link d-inline-block">Introducing</a>
</li>
<li class="footer__block__list__items">
<a href="#!" class="footer__block__list__link d-inline-block">Terms of Service</a>
</li>
<li class="footer__block__list__items">
<a href="#!" class="footer__block__list__link d-inline-block">Privacy Policy</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 mb-5 mb-lg-0">
<div class="footer__block">
<h3 class="footer__block__title">Contact</h3>
<a href="mailto:hello@suntec.com" class="footer__block__link">hello@suntec.com</a>
<ul class="footer__block__social-list nav">
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-facebook"></span>
</a>
</li>
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-twitter"></span>
</a>
</li>
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-envelope"></span>
</a>
</li>
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-google"></span>
</a>
</li>
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-instagram"></span>
</a>
</li>
<li class="footer__block__social-list__items nav-items">
<a href="#!" class="footer__block__social-list__link d-inline-block">
<span class="voltaic-icon-linkedin"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="footer__block">
<h3 class="footer__block__title">Newsletter</h3>
<form action="#!" class="footer__block__form">
<label for="emailInput" class="footer__block__form__label">Please enter your e-mail if want to receive updates.</label>
<div class="d-flex footer__block__form__group">
<input type="email" name="email" id="emailInput" class="footer__block__form__input border-right-0 w-100 bg-transparent" placeholder="Your e-mail">
<button type="submit" class="footer__block__form__btn">Subscribe</button>
</div>
</form>
<p class="footer__copyright">Designed by <a href="#!" class="footer__copyright__link">Moazan Ali Ghurki</a>🤙</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Aside Nav Section -->
<div id="aside-navbar" class="aside-navbar position-fixed">
<ul class="aside-nav">
<li class="aside-nav__items">
<a href="#banner" class="aside-nav__link nav-link d-inline-block position-relative active">
<span class="aside-nav__link__text position-absolute text-uppercase">Solar Panels</span>
</a>
</li>
<li class="aside-nav__items">
<a href="#services1" class="aside-nav__link nav-link d-inline-block position-relative">
<span class="aside-nav__link__text position-absolute text-uppercase">Solar Panels</span>
</a>
</li>
<li class="aside-nav__items">
<a href="#services2" class="aside-nav__link nav-link d-inline-block position-relative">
<span class="aside-nav__link__text position-absolute text-uppercase">Solar Panels</span>
</a>
</li>
<li class="aside-nav__items">
<a href="#services3" class="aside-nav__link nav-link d-inline-block position-relative">
<span class="aside-nav__link__text position-absolute text-uppercase">Solar Panels</span>
</a>
</li>
<li class="aside-nav__items">
<a href="#benefits" class="aside-nav__link nav-link d-inline-block position-relative">
<span class="aside-nav__link__text position-absolute text-uppercase">Benefits</span>
</a>
</li>
<li class="aside-nav__items">
<a href="#contact" class="aside-nav__link nav-link d-inline-block position-relative">
<span class="aside-nav__link__text position-absolute text-uppercase">Connect</span>
</a>
</li>
</ul>
</div>
<!-- Scroll To Top Button -->
<div class="scroll-top position-fixed">
<button class="scroll-top__btn border-0 d-inline-flex align-items-center justify-content-center">
<span class="voltaic-icon-chevron-up"></span>
</button>
</div>
<!-- All Scripts -->
<script src="./assets/js/jquery-1.12.4.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/plugins/textillate-master/js/lettering.js"></script>
<script src="./assets/plugins/textillate-master/js/fittext.js"></script>
<script src="./assets/plugins/textillate-master/js/textillate.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>