generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
114 lines (110 loc) · 5.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Electrillo is an app designed to show users how much money they can save bby driving electric">
<link rel="stylesheet" href="assets/css/style.css">
<!--Bootstrap 5 CDN-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Font Awesome 5.14-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet">
<!--Favicon Link-->
<link rel="shortcut icon" type="image/ico" href="assets/images/favicon.ico" />
<link rel="shortcut icon" type="image/ico" href="assets/images/favicon.png" />
<title>Electrillo</title>
</head>
<body>
<header>
<div class="container">
<div id="navbar-container"></div>
</div>
</header>
<main class="mt-3 mt-md-5">
<section class="container jumbotron landing-page">
<div class="row d-flex align-items-center justify-content-center">
<div class="col-12 col-md-5 pt-3" id="hero-text">
<h1 class="display-4">Welcome to Electrillo</h1>
<p class="lead my-3 my-md-4 my-lg-5 pe-3 pe-md-5">Electrillo is a simple way to find out how what doing your
bit for the planet can do for you. See how much you can save switching to an electric car and get your
search
started with our suggestions! </p>
<a class="btn btn-main btn-lg cta-button me-2 me-md-4" href="questions.html" role="button">Start saving</a>
</div>
<div class="col-12 col-md-7" id="img-column">
<img src="assets/images/electrillo.png" alt="electrillo" class="img img-fluid" width="640" height="360" >
</div>
</div>
</section>
<section class="container mission-container" id="mission">
<!--container for mission page starts here-->
<div class="row py-5 mt-5">
<div class="col-12 text-center mission-bg pb-4 pt-4">
<h1 class="display-4">Our Mission</h1>
<p class="mission-statement mt-5">With climate change becoming a increasing urgent problem in our lives,
there is a no better time to start looking for more eco-friendly
vehicles for the planets health. Electric Vehicles (EVs) and Hybrid
Vehicles are improving rapidly and Electrillo are dedicated to taking
the guesswork out of how a switching to these vehicles can be beneficial
for both the planet and you. </p>
</div>
</div>
<!--grid for mission section features-->
<div class="row d-flex my-0 mx-auto justify-content-center text-center my-3 my-md-5 pb-2 pb-md-4">
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-charging-station fa-3x mb-3"></i>
<h3>EV-aluator</h3>
<p class="m-3 m-md-4 m-xxl-5">Our state of the art EV/Fuel comparison calculator can help you save thousands
of dollars on fuel each year!</p>
</div>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-handshake fa-3x mb-3"></i>
<h3>Commitment</h3>
<p class="m-3 m-md-4 m-xxl-5">Our team is committed to providing tools & resources that will help both you &
our Planet Earth in the long run. </p>
</div>
</div>
<div class="col-xs-8 col-sm-4">
<div class="text-center">
<i class="fas fa-globe-americas fa-3x mb-3"></i>
<h3>Your Part</h3>
<p class="m-3 m-md-4 m-xxl-5">The tools & resources we provide at Electrillo were built to educate our users
& reduce fuel emissions. </p>
</div>
</div>
</div>
</section>
</main>
<!--footer-->
<div id="footer-container" class="container-fluid g-0"></div>
<!-- Local Script Links -->
<script src="assets/js/create-nav-and-footer.js"></script>
<script src="assets/js/script.js"></script>
<!--Bootstrap JS Bundle-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!--Autoclose navbar on click-->
<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, { toggle: false })
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
</script>
</body>
</html>