-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
204 lines (194 loc) · 9.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import style.css and related code -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Add Font Awesome -->
<script src="https://kit.fontawesome.com/25e71e3313.js" crossorigin="anonymous"></script>
<title>CityScoot Home</title>
</head>
<body>
<!-- Header -->
<header class="container text-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="./index.html">Home</a></li>
</ol>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/index.html">
<img src="images/city-scoot-logo.png" width="30" height="30" class="d-inline-block align-top"
alt="CityScoot logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="./pages/routes.html" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Routes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="./pages/routes.html">Routes</a>
<a class="dropdown-item" href="./pages/route.html">Route</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/guides.html">Guides</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/scooter.html">Scooter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/safety.html">Safety</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/contact.html">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/favourites.html">Favourite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/login.html">Login</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<h1 class="display-4">CityScoot</h1>
<hr class="my-4">
<p class="lead">CityScoot offers an eco-friendly, safe and fun way of seeing the sights of London.</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#service" role="button">Learn more</a>
</p>
</div>
</header>
<!-- Main -->
<main class="container-fluid text-center">
<div class="row">
<section class="col">
<div id="service" class="jumbotron jumbotron-fluid">
<div class="container">
<img src="./images/city-scoot-banner.jpg" class="img-fluid mt-2 mb-5" alt="Responsive image">
<h2 class="display-4">We offer</h2>
<p class="lead">We offer tours that take in most of the best-known sites and areas of the city, including
Soho, Westminster, Camden Town, Notting Hill, Hampstead Heath, Greenwich and Wapping. We provide reliable
safety-tested scooters and helmets. All tours are led by experienced and knowledgeable guides.</p>
</div>
</div>
</section>
</div>
<div class="row mx-auto">
<section class="col-xs-12 col-sm-6 col-lg-3">
<div class="card border-success mb-3">
<div class="card-header bg-transparent border-success"><i class="fas fa-route"></i></div>
<div class="card-body text-success">
<h5 class="card-title font-weight-bold">Routes subsection</h5>
<p class="card-text">Routes are designed to take in the highlights of London.<br>They are also designed to
optimise safety.<br>Where possible they make use of the city’s extensive cycle superhighways and cycle
lanes.</p>
</div>
<div class="card-footer bg-transparent border-success font-weight-bold"><a href="./pages/routes.html">Read
more</a></div>
</div>
</section>
<section class="col-xs-12 col-sm-6 col-lg-3">
<div class="card border-success mb-3">
<div class="card-header bg-transparent border-success"><i class="fas fa-map-signs"></i></div>
<div class="card-body text-success">
<h5 class="card-title font-weight-bold">Guides subsection</h5>
<p class="card-text">Our guides are handpicked for their in-depth knowledge of London and for their ability
to communicate that knowledge effectively. They are also trained in road safety, first aid, and basic
scooter maintenance.</p>
</div>
<div class="card-footer bg-transparent border-success font-weight-bold"><a href="./pages/guides.html">Read
more</a></div>
</div>
</section>
<section class="col-xs-12 col-sm-6 col-lg-3">
<div class="card border-success mb-3">
<div class="card-header bg-transparent border-success"><i class="fas fa-heart"></i></div>
<div class="card-body text-success">
<h5 class="card-title font-weight-bold">Safety subsection</h5>
<p class="card-text">CityScoot takes a safety-first approach to its tours. All scooters are safety tested
and regularly serviced. High quality safety helmets are provided. Tours are scheduled for low traffic
times – typically for Sunday mornings.</p>
</div>
<div class="card-footer bg-transparent border-success font-weight-bold"><a href="./pages/safety.html">Read
more</a></div>
</div>
</section>
<section class="col-xs-12 col-sm-6 col-lg-3">
<div class="card border-success mb-3">
<div class="card-header bg-transparent border-success"><i class="fas fa-motorcycle"></i></div>
<div class="card-body text-success">
<h5 class="card-title font-weight-bold">Scooters subsection</h5>
<p class="card-text">CityScoot uses the very latest Blast scooters. Reliable, robust and really very nippy
about town. These scooters provide a fast, comfortable way of seeing the city without wearing out your
shoes or being cooked up on a bus.</p>
</div>
<div class="card-footer bg-transparent border-success font-weight-bold"><a href="./pages/scooter.html">Read
more</a></div>
</div>
</section>
</div>
</main>
<!-- Footer -->
<div class="container card text-center mt-5">
<div class="card-header">
CityScoot
</div>
<div class="card-body">
<p class="card-text">Made with <span class="h4 text-danger">♥</span> in London by Marco Valeri <br>
©
- 2021 - All rights reserverd</p>
<a href="#" class="btn btn-primary">Scroll up</a>
</div>
<div class="card-footer text-muted">
<a href="" class="p-1">Accessibility</a>
<a href="" class="p-1">Privacy</a>
<a href="" class="p-1">Corporate</a>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary mt-4" data-toggle="modal" data-target="#exampleModalLong">
Cookie Poicy
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Cookie Policy</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
We use cookies and similar methods to recognize visitors and remember their preferences. We
also use them to measure ad campaign effectiveness, target ads and analyze site traffic. To
learn more about these methods, including how to disable them, view our Cookie Policy.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Accept</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Import jQuery 3.5.1 | popper.js | bootstrap.js -->
<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/popper.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
</body>
</html>