-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (140 loc) · 6.05 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1">
<meta name="author" content="Samuel Reutcky">
<meta name="description" content="My Web Project">
<meta name="keywords" content="html, css, seo, web devlopment">
<title>Hopper</title>
<link rel="icon" href="./src/img/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mrspecht/cdn/reset.css" media="all">
<link rel="stylesheet" href="./src/css/main.css">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script src="./src/js/app.js" type="module"></script>
</head>
<body>
<header>
<div class="container flex flex-between">
<a href="./index.html"><h1>HOPPR</h1></a>
<div class="hamburger-menu">☰</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#tiers">Order a ride</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div id="home"></div>
<section class="hero-banner">
<div class="title">
<h1>Hoppr</h1>
<p class="slogan">The ride-share app of tomorrow</p>
<a class="hero-button" href="#tiers">Book a ride</a>
</div>
</section>
<div id="about"></div>
<section class="about-us">
<div class="container">
<div class="image-wrapper">
<div class="image image-01">
</div>
<div class="image image-02">
</div>
<div class="image image-03">
</div>
<div class="image image-04">
</div>
</div>
<p>
At Hoppr, we're not just a ride share service—we're your travel
companion, your personal chauffeur, and your ticket to getting
where you need to go, your way. Whether you're saving every penny,
riding in style, or looking for something in between, we've got a
tier for you: Brokie, Standard, and Baller.
</p>
<p>
Our mission? To redefine how you move. From the budget-savvy to the
luxury lover, we believe everyone deserves a ride that fits their
vibe. With reliable service, friendly drivers, and options to suit
your wallet and lifestyle, we make sure you're not just going
places—you're doing it on your terms.
</p>
<p>
Why settle for ordinary when you can ride with Hoppr? Wherever
life takes you, we're here to get you there.
</p>
</div>
</section>
<div id="tiers"></div>
<section class="tiers">
<div class="container">
<h3>Tiers</h3>
<div class="tier-wrapper">
<div class="tier">
<h4>Brokie</h4>
<img src="./src/img/tier-01.png" alt="Rusty Honda Civic">
<p>
Who says you can't get around without draining your wallet? The
Brokie tier is all about getting you where you need to go
without the fancy frills. No need for extra luxuries when all
you need is a ride that's affordable and gets the job done.
Perfect for when you're ballin' on a budget.
</p>
<a class="order-now" href="#order">Order Now</a>
</div>
<div class="tier">
<h4>Standard</h4>
<img src="./src/img/tier-02.png" alt="Normal looking suv">
<p>
It's the sweet spot between affordable and comfortable. The
Standard tier delivers a smooth ride with just enough perks to
feel like you're getting your money's worth. You get the
convenience, you get the ride, and you still have cash left
for that extra coffee.
</p>
<a class="order-now" href="#order">Order Now</a>
</div>
<div class="tier baller">
<h4>Baller</h4>
<img class="baller-image" src="./src/img/tier-03.png" alt="Dope AF Rolls Royce">
<p>
You don't do basic, so why settle for anything less? The Baller
tier is all about luxury. Fancy cars, premium service, and no
compromises. It's for those who want to roll in style, where
every ride feels like a VIP experience. Because you're not just
getting from point A to B—you're doing it with flair.
</p>
<a class="order-now" href="#order">Order Now</a>
</div>
</div>
</div>
<section class="map-area flex f-col">
<div id="map"></div>
<div class="button-container">
<button type="button" id="order" class="show-location flex">
Find me
</button>
</div>
</section>
</main>
<footer>
<div class="container footer-wrapper flex flex-between">
<p>© 2022 Hoppr. All rights reserved.</p>
<ul class="social-links">
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-x-twitter"></i></a></li>
</ul>
</div>
</footer>
</body>
</html>