-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (230 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="images/favblue.png">
<script src="https://kit.fontawesome.com/bdf808e509.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<title>OK Diver | The best diving spots in the world curated by divers just like you</title>
</head>
<body>
<!-- Navbar start -->
<div class="navbar navbar-expand-lg navbar-light bg-white py-1">
<div class="container">
<a class="navbar-brand py-0" href="#">
<img src="images/logoblack.png" alt="OK Diver logo" height="60px">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse py-3 justify-content-end" id="navbar-toggle">
<button class="btn btn-primary brand-blue me-2" type="button">Create account</button>
<button class="btn btn-sm btn-outline-dark" type="button">Login</button>
</div>
</div>
</div>
<!-- Navbar end -->
<!-- Hero start -->
<div class="container-fluid hero" style="height: 85vh;">
<div style="padding-top: 160px">
<h2 class="text-white text-center fw-bold display-4">Find your next dive</h2>
</div>
<div class="row d-flex justify-content-center mt-4">
<div class="col-md-6 col-9">
<div class="search">
<input type="text" class="search-input" placeholder="Search by city, state or country" name="">
<a href="#" class="search-icon">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="container pt-4 text-center">
<a href="#" class="text-white fw-bold fs-5 small-text">or explore diving spots near you</a>
</div>
</div>
<!-- Hero end -->
<!-- top rated cards start-->
<div class="container-fluid bg-light pb-3">
<div class="container">
<h4 class="fw-bold pt-5 pb-3">Top rated spots in and around <a href="#">Honolulu</a></h4>
<div class="row">
<div class="col-12 col-lg-3">
<div class="card mb-3 w-100">
<img src="images/card1.jpg" class="card-img-top card-img-height" alt="Diving Spot 1">
<div class="card-body">
<p class="small mb-2"><span class="text-success">Easy </span>· <i class="fa fa-star text-warning"></i> 4.8 (5221)</p>
<h5 class="card-title fw-bold">Diving Spot 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" target="_blank">Learn more</a>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card mb-3 w-100">
<img src="images/card2.jpg" class="card-img-top card-img-height" alt="Diving Spot 2">
<div class="card-body">
<p class="small mb-2"><span class="text-primary">Moderate </span>· <i class="fa fa-star text-warning"></i> 4.6 (2423)</p>
<h5 class="card-title fw-bold">Diving Spot 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" target="_blank">Learn more</a>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card mb-3 w-100">
<img src="images/card3.jpg" class="card-img-top card-img-height" alt="Diving Spot 3">
<div class="card-body">
<p class="small mb-2"><span class="text-danger">Challenging </span>· <i class="fa fa-star text-warning"></i> 4.2 (4120)</p>
<h5 class="card-title fw-bold">Diving Spot 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" target="_blank">Learn more</a>
</div>
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card mb-3 w-100">
<img src="images/card4.jpg" class="card-img-top card-img-height" alt="Diving Spot 4">
<div class="card-body">
<p class="small mb-2"><span class="text-success">Easy </span>· <i class="fa fa-star text-warning"></i> 4.1 (3219)</p>
<h5 class="card-title fw-bold">Diving Spot 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" target="_blank">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Top rated cards end -->
<!-- world map start-->
<div class="container bg-white py-5">
<div class="container">
<div class="row gx-5">
<div class="col-12 col-lg-6">
<img src="images/map3.png" class="img-fluid">
</div>
<div class="col-12 col-lg-6 mt-3 text-center text-lg-start">
<h2 class="fw-bold pb-3 fs-1 ">The best diving spots in the world curated by divers just like you</h2>
<p>Whether you are gearing up for your first dive or a seasoned pro, we've got you covered.</p>
<p>Filter by <a href="#">difficulty</a>, <a href="#">ease of access</a>, <a href="#">features</a>, <a href="#">overall rating</a> and more.</p>
</div>
</div>
</div>
</div>
<!-- world map end -->
<!-- logbook section start-->
<div class="container-fluid logbook-hero py-5">
<div class="container ps-lg-5 py-5">
<div class="col-lg-6 text-white">
<h2 class="fw-bold display-1 pb-3">Share your <span class="text-warning">favourite</span> spots</h2>
</div>
<div class="col-lg-4 text-white lh-lg">
<p>Use our <strong>online loogbook</strong> to record your dives and then share them with the <span class="text-warning fw-bold">OK Diver</span> community.</p>
<p>Traveling with a physical logbook is so 2020. Our online logbook is designed to meet the standards of PADI and other international accreditation bodies.</p>
<p>Proudly display your greatest adventures on your profile page and create your own diving bucketlist from around the world.</p>
<a href="#" class="btn btn-primary brand-blue mt-3 me-2 col-12 col-lg-5">Create your account</a>
<a href="#" class="btn btn-sm btn-outline-light mt-3 me-2 col-12 col-lg-5">Login and add your dive</a>
</div>
</div>
</div>
<!-- logbook section end-->
<!-- features start -->
<div class="container-fluid bg-light py-5">
<div class="container">
<h2 class="fw-bold text-center pb-4">Features:</h2>
<div class="row gx-5">
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100 bg-white">
<div class="card-body text-center">
<img src="images/icons/question.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Online logbook</h5>
<p class="card-text brand-text fw-bolder">Say goodbye to that paper logbook</p>
<p class="card-text">Track the details of your dive - along with tips to help other divers in the future.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100">
<div class="card-body text-center">
<img src="images/icons/pin.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Find amazing dives</h5>
<p class="card-text brand-text fw-bolder">Check out diving spots near you (or far away)</p>
<p class="card-text">Browse other diver's logbook entries and create the ultimate diving bucketlist.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100">
<div class="card-body text-center">
<img src="images/icons/profile.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Showcase your adventures</h5>
<p class="card-text brand-text fw-bolder">Create your own highlight reel</p>
<p class="card-text">Display your greatest dives and memories from around the world on your profile page.</p>
</div>
</div>
</div>
</div>
<div class="row gx-5">
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100">
<div class="card-body text-center">
<img src="images/icons/reuse.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Trade your gear</h5>
<p class="card-text text-danger fw-bolder">Coming soon</p>
<p class="card-text">List yours or browse diving gear for sale in our marketplace.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100">
<div class="card-body text-center">
<img src="images/icons/hand.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Find a dive buddy</h5>
<p class="card-text text-danger fw-bolder">Coming soon</p>
<p class="card-text">Share your upcoming plans with the community and find buddies to join you.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card mb-3 w-100">
<div class="card-body text-center">
<img src="images/icons/shop.png" class="feature-img" alt="Diving Spot 1">
<h5 class="card-title fw-bold py-3">Explore rental shops</h5>
<p class="card-text text-danger fw-bolder">Coming soon</p>
<p class="card-text">Find the top rated rental stores in every location with reviews from other divers.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container text-center">
<a href="#" class="btn btn-primary brand-blue btn-lg my-3 col-12 col-lg-3">Create your account</a>
</div>
</div>
<!-- features end -->
<!-- Footer start -->
<div class="container-fluid bg-dark py-5">
<div class="container">
<!-- <div class="row"> -->
<div class="text-center">
<img src="images/logowhite.png" width="150px">
<p class="text-white tiny-font pt-2"><strong>OK Diver</strong> ™ 2022 // Registered in Dubai, UAE // Created with <i class="fa fa-heart text-danger"></i> in Honolulu, Hawaii</p>
<ul class="list-inline text-white">
<li class="list-inline-item"><i class="fab fa-facebook fa-1x"></i></li>
<li class="list-inline-item"><i class="fab fa-instagram fa-1x"></i></li>
<li class="list-inline-item"><i class="fa-brands fa-tiktok fa-1x"></i></li>
</ul>
</div>
</div>
</div>
<!-- Footer end -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>