EV/index.html at main · jose-jimmy/EV · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>EV</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center  header-transparent ">
    <div class="container d-flex align-items-center justify-content-between">

      <div class="logo">
        <h1><a href="index.html">EV</a></h1>
        <!-- Uncomment below if you prefer to use an image logo -->
        <!-- <a href="index.html"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->
      </div>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto " href="#portfolio">Gallery</a></li>
          <li><a class="nav-link scrollto" href="#testimonials">Testimonial</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex flex-column justify-content-end align-items-center">
    <div id="heroCarousel" data-bs-interval="5000" class="container carousel carousel-fade" data-bs-ride="carousel">

      <!-- Slide 1 -->
      <div class="carousel-item active">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">WELCOME TO <span>THE FUTURE</span></h2>
          <p class="animate__animated fanimate__adeInUp">
            An EV is a shortened acronym for an electric vehicle. EVs are vehicles that are either partially or fully powered on electric power.Electric car sales reached a record 3 million in 2020, up 40% from 2019.
          </p>
          <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <div class="carousel-container">
          <h2 class="animate__animated animate__fadeInDown">WHAT IS ELECTRIC VEHICLE
</h2>
          <p class="animate__animated animate__fadeInUp">An electric vehicle (EV) is one that operates on an electric motor, instead of an internal-combustion engine that generates power by burning a mix of fuel and gases. Therefore, such as vehicle is seen as a possible replacement for current-generation automobile, in order to address the issue of rising pollution, global warming, depleting natural resources, etc.</p>
          <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
        </div>
      </div>

      <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
      </a>

      <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
      </a>

    </div>

    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
      <defs>
        <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
      </defs>
      <g class="wave1">
        <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
      </g>
      <g class="wave2">
        <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
      </g>
      <g class="wave3">
        <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
      </g>
    </svg>

  </section><!-- End Hero -->

  <main id="main">


      <!-- ======= Features Section ======= -->
    <section id="about" class="features">
      <div class="container">
          <div class="section-title" data-aos="zoom-out">
          <h2>How it works</h2>
          <p>Technology behind</p>
        </div>

         <div class="row content" data-aos="fade-up">
          <div class="col-lg-6">
            <p>
              While the specifics of how an electric vehicle operates depends on what type of EV it is (i.e., whether it’s a hybrid, battery-electric, or fuel cell electric - more on this shortly) they all broadly work in the same manner. All EVs are powered by an electric motor. This gets its power from a stack of batteries, and in most cases electric cars must be plugged in to recharge these batteries. In earlier iterations of the EV, these batteries were of the lead-acid variety but nowadays, most electric cars will use lithium-ion batteries as they’re far superior and can store a lot more energy.
            </p>
            <ul>
              <li><i class="ri-check-double-line"></i>Battery electric vehicles are powered by electricity stored in a battery pack.</li>
              <li><i class="ri-check-double-line"></i>Plug-in hybrids combine a gasoline or diesel engine with an electric motor and large rechargeable battery.</li>
              <li><i class="ri-check-double-line"></i>Fuel cell vehicles split electrons from hydrogen molecules to produce electricity to run the motor.</li>
            </ul>
          </div>
          <div class="col-lg-6 pt-4 pt-lg-0">
            <p>

            </p>

          </div>
        </div>

        <ul class="nav nav-tabs row d-flex">
          <li class="nav-item col-3" data-aos="zoom-in">
            <a class="nav-link active show" data-bs-toggle="tab" href="#tab-1">
              <i class="ri-gps-line"></i>
              <h4 class="d-none d-lg-block">Electric motor</h4>
            </a>
          </li>
          <li class="nav-item col-3" data-aos="zoom-in" data-aos-delay="100">
            <a class="nav-link" data-bs-toggle="tab" href="#tab-2">
              <i class="ri-body-scan-line"></i>
              <h4 class="d-none d-lg-block">Different types of electric vehicle</h4>
            </a>
          </li>
          <li class="nav-item col-3" data-aos="zoom-in" data-aos-delay="200">
            <a class="nav-link" data-bs-toggle="tab" href="#tab-3">
              <i class="ri-sun-line"></i>
              <h4 class="d-none d-lg-block">How do you charge an EV?</h4>
            </a>
          </li>
          <li class="nav-item col-3" data-aos="zoom-in" data-aos-delay="300">
            <a class="nav-link" data-bs-toggle="tab" href="#tab-4">
              <i class="ri-store-line"></i>
              <h4 class="d-none d-lg-block">The electric vehicle market and the future of electric cars</h4>
            </a>
          </li>
        </ul>

        <div class="tab-content" data-aos="fade-up">
          <div class="tab-pane active show" id="tab-1">
            <div class="row">
              <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
                <p class="fst-italic">
                  The electric motor draws power from the battery to drive the car’s wheels and enable propulsion. Two motors can be used - one on each of the car’s two axles - to provide four-wheel drive. Today, all electric motors are fundamentally AC. They spin when the rotor chasing an alternating magnetic field is induced by an alternating electrical current. Older electric motors were ‘DC brushed’ which used mechanical brushes to create an alternating current. These had a high failure rate making them unsuitable for commercial electric cars.
                </p>


              </div>
              <div class="col-lg-6 order-1 order-lg-2 text-center">
                <img src="assets/img/features-1.jpg" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="tab-pane" id="tab-2">
            <div class="row">
              <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
                <h3>Battery Electric Vehicles (BEVs)</h3>
                <p class="fst-italic">
                  Battery electric vehicles - often referred to as ‘fully-electric’ or ‘all-electric’ vehicles - are vehicles fitted with a rechargeable battery as the sole power source. These vehicles have no gasoline engine at all. BEVs store electricity onboard with high-capacity (usually lithium-ion) battery packs. Their battery power is then used to run the electric motor and onboard electronics. Due to the absence of an ICE, BEVs do not emit any harmful emissions at all. BEVs are charged by electricity from an external power source, with their chargers classified according to the speed at which they recharge a battery (see the below section on EV charging for more information).
                  Examples of BEVs include the Tesla Model 3, BMW i3, Volkswagen e-Golf, and the Hyundai Ioniq.
                </p>
                <h3>Plug-in Hybrid Electric Vehicles (PHEV)</h3>
                <p class="fst-italic">
                  The plug-in-hybrid electric vehicle combines a battery and electric motor with an economical petrol or diesel engine. As can be deduced from the name, PHEVs can be recharged by plugging into an external electricity source. In addition, PHEVs can also be powered by their onboard engines and generators, and they’re able to substitute electricity from the grid for gasoline. In a PHEV, the onboard battery will usually be much smaller and have a lower capacity than those found in all-electric cars. This means that PHEVs can’t drive very far on electricity alone, requiring the combustion engine to eventually kick in.
Examples of PHEVs include the BMW i8, Toyota Prius, Ford C-Max Energi, and the Mini Cooper SE Countryman.
                </p>

              </div>
              <div class="col-lg-6 order-1 order-lg-2 text-center">
                <img src="assets/img/features-2.jpg" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="tab-pane" id="tab-3">
            <div class="row">
              <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
                <p class="fst-italic">
                  An electric vehicle can be charged by either plugging it into a socket or a charging unit. Charging units are being found in more and more public places as the popularity of EVs grows, and you’re usually never too far from your nearest one. Common locations for charging points include car parks and fuel stations.
                </p>
              </div>
              <div class="col-lg-6 order-1 order-lg-2 text-center">
                <img src="assets/img/features-3.jpg" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="tab-pane" id="tab-4">
            <div class="row">
              <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
                <p class="fst-italic">
                  The sales of BEVs and PHEVs exceeded the two-million mark for the first time in 2019. The latest electric vehicle market predictions are strong, too. Deloitte’s global EV forecast is a compound annual growth rate of 29 percent achieved over the next 10 years into 2030, with total EV sales growing from 2.5 million in 2020 to 11.2 million in 2025, then reaching 31.1 million by 2030.

                    By this time, EVs are expected to make up roughly 32 percent of the total market share for new car sales as per the above graph. What’s more, the market hasn’t been impacted by COVID-19 insofar as others have; the pace of recovery for the EV market will be high, with EVs having a positive trajectory during the COVID-19 recovery period.
                </p>

              </div>
              <div class="col-lg-6 order-1 order-lg-2 text-center">
                <img src="assets/img/features-4.jpg" alt="" class="img-fluid">
              </div>
            </div>
          </div>
        </div>

      </div>
    </section><!-- End Features Section -->

    <!-- ======= Portfolio Section ======= -->
    <section id="portfolio" class="portfolio">
      <div class="container">

        <div class="section-title" data-aos="zoom-out">
          <h2>Gallery</h2>
          <p>Latest releases</p>
        </div>

        <div class="row portfolio-container" data-aos="fade-up">

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-img"><img src="assets/img/portfolio-1.jpg" class="img-fluid" alt=""></div>


          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-img"><img src="assets/img/portfolio-2.jpg" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-img"><img src="assets/img/portfolio-3.jpg" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-img"><img src="assets/img/portfolio-4.JPG" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web">
            <div class="portfolio-img"><img src="assets/img/portfolio-5.JPG" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-img"><img src="assets/img/portfolio-6.JPG" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-img"><img src="assets/img/portfolio-7.jpg" class="img-fluid" alt=""></div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-card">
            <div class="portfolio-img"><img src="assets/img/portfolio-8.jpg" class="img-fluid" alt=""></div>
          </div>

        </div>

      </div>
    </section><!-- End Portfolio Section -->


   <!-- ======= Testimonials Section ======= -->
    <section id="testimonials" class="testimonials">
      <div class="container">

        <div class="section-title" data-aos="zoom-out">
          <h2>Testimonials</h2>
          <p>What they are saying about EVs</p>
        </div>

        <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
          <div class="swiper-wrapper">

            <div class="swiper-slide">
              <div class="testimonial-item">
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  In order to have clean air in cities, you have to go electric
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
                <img src="assets/img/testimonials/elon.jpg" class="testimonial-img" alt="">
                <h3>Elon Musk</h3>
                <h4>Ceo , Tesla</h4>
              </div>
            </div><!-- End testimonial item -->

            <div class="swiper-slide">
              <div class="testimonial-item">
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  The time is right for electric cars - in fact, the time is critical
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
                <img src="assets/img/testimonials/carlos.jpg" class="testimonial-img" alt="">
                <h3>Carlos Ghosh</h3>
                <h4>Bussiness-man</h4>
              </div>
            </div><!-- End testimonial item -->

            <div class="swiper-slide">
              <div class="testimonial-item">
                <p>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  Electric vehicles are an essential strategy in the immediate term to reduce local emissions and help improve local air quality.
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </p>
                <img src="assets/img/testimonials/kevin.jpg" class="testimonial-img" alt="">
                <h3>Kevin Emerson</h3>
                <h4>Utah Clean Energy</h4>
              </div>
            </div><!-- End testimonial item -->
          </div>
          <div class="swiper-pagination"></div>
        </div>

      </div>
    </section><!-- End Testimonials Section -->


  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer">
    <div class="container">
      <h3>EV</h3>
      <p>We will not stop until every car on the road is electric -Elon Musk</p>
      <div class="copyright">
        &copy; Copyright <strong><span>EV</span></strong>. All Rights Reserved
      </div>
      <div class="credits">

        Designed by Jose,Omal,Roshan
      </div>
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>