-
Notifications
You must be signed in to change notification settings - Fork 1
/
our-units.html
358 lines (337 loc) · 13.1 KB
/
our-units.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
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/21ee7ce0f9.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<title>lockr - Units & prices</title>
</head>
<body>
<!-- menu -->
<header>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="img/logo-lokr.png" alt="LOCKR"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-bars"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav" id="menu">
<li class="nav-item" id="home">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active" id="unit">
<a class="nav-link" href="our-units.html">Units & prices <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="contact">
<a class="nav-link" href="contact.html">Contact us</a>
</li>
<li class="nav-item auth">
<a class="nav-link" href="create-account.html"><i class="fa-solid fa-fingerprint"></i> Create an
account</a>
</li>
<li class="nav-item auth">
<a class="nav-link" href="login.html"><i class="fa-solid fa-user"></i> Log in</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- end menu -->
<!-- section -->
<section>
<!-- Our units section -->
<div class="space">
<div class="container-fluid bg-purple" id="our-units">
<div class="row">
<div class="col-md-8">
<h2>Our units</h2>
<h4>
Experience hassle-free storage with Lockr's smart design. <br>
Our modern and innovative approach to technology helps <br>
manage risk, drive down prices, and ensure ease of use.
</h4>
</div>
<div class="col-md-4 text-center">
<div class="bg-orange card-clock" >
<img src="img/clock.png" alt="clock">
<p>
Access Lockr 06:00-20:00,
every day of the year
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Our units section -->
<!-- Storage solution section -->
<div class="container space">
<div class="text-center">
<h2 class="title">What's the right storage <br> <span class="color-purple">solution</span> for you?</h2>
<p>
Our simple yet affective set of storage options is designed to meet the diverse needs of businesses, <br>
families, and individuals with utmost efficiency. Choose a unit size, add any additional height you? <br>
need, and select a wider entrance if outsized items are likely to require it.
</p>
<h4 class="space-md">Floor area <i class="fa-sharp fa-solid fa-arrow-right color-orange"></i> Height <i
class="fa-sharp fa-solid fa-arrow-right color-orange"></i> Door width</h4>
<p class="space-md">
All prices includes VAT. <a class="color-orange" href="wrong.html" id="termsCondition">Terms & Conditions</a> apply.
</p>
</div>
</div>
<!-- End Storage solution section -->
<!-- Standard Lockr -->
<div class="container space">
<div class="row">
<div class="col-md-3">
<img src="img/standard-lockr.png" alt="">
</div>
<div class="col-md-9">
<h2 id="standard-lockr"><span class="color-orange">Standard</span> Lockr</h2>
<p class="space-sm">
Traveling, relocating, or simply decluttering? Store furniture, appliances,seasonal gear, equipment,
documentation, and
other items in our spacious Standard Lockr units. You'll be able to fit the contents of a small apartment
from S26 up -
maybe even more, if you're clever about it.
</p>
<form>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<h6>Select your unit height</h6>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control lockr-input" placeholder="2.2m" value="2.2m">
</div>
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="2.4m" value="2.4m">
</div>
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="2.6m" value="2.6m">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col">
<h6>Select your door width</h6>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="1.65" value="1.65">
</div>
<div class="col">
<input type="text" class="form-control lockr-input" placeholder="2.6" value="2.6">
</div>
</div>
</div>
</div>
<h3 class="space-sm">Total cost: <span class="color-purple">R985</span><span class="text-small"> Per month</span></h3>
<a class="btn bg-orange" href="wrong.html" role="button">Rent this unit</a>
</form>
</div>
</div>
</div>
<!-- End Standard Lockr -->
<!-- Large Lockr -->
<div class="container space">
<div class="row">
<div class="col-md-3">
<img src="img/large-lockr.png" alt="">
</div>
<div class="col-md-9">
<h2 id="large-lockr"><span class="color-purple">Large</span> Lockr</h2>
<p class="space-sm">
Need extra space for your growing business's inventory or paperwork or to keep things safe during a large renovation or
move? Our Large Lockr units have got you covered. They'll accommodate the contents of a medium-sized house, office,
or vehicle, no problem.
</p>
<form>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">
<h6>Select your unit height</h6>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control lockr-input" placeholder="2.2m" value="2.2m">
</div>
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="2.4m" value="2.4m">
</div>
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="2.6m" value="2.6m">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col">
<h6>Select your door width</h6>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" class="form-control lockr-input-2" placeholder="1.65" value="1.65">
</div>
<div class="col">
<input type="text" class="form-control lockr-input" placeholder="2.6" value="2.6">
</div>
</div>
</div>
</div>
<h3 class="space-sm">Total cost: <span class="color-purple">R985</span><span class="text-small"> Per month</span></h3>
<a class="btn bg-purple" href="wrong.html" role="button">Rent this unit</a>
</form>
</div>
</div>
</div>
<!-- End Standard Lockr -->
<!-- Call us -->
<div class="container space">
<div class="row">
<div class="col-md-4">
<img src="img/confused-lockr.png" alt="">
</div>
<div class="col-md-8">
<div class="text-center space-md">
<h2 class="title">Not sure what size to choose</h2>
<h4>No problem! We are here to help.</h4>
<h4>Call us now on <span class="color-orange">0XX XXX XXXX</span>.</h4>
</div>
</div>
</div>
</div>
<!-- End Call us -->
<!-- security service -->
<div class="container text-center space">
<div class="row">
<div class="col">
<h2 class="title">Concerned about <span class="color-purple">security</span>?</h2>
<p>
At Lockr, we prioritise the safetyand security of your stored belongings. Our state-of-the-art <br>
facility is equipped with robuste security measures to give you peace in mind.
</p>
</div>
</div>
<div class="space">
<div class="row">
<div class="col-md-6">
<img src="img/camera.png" alt="camera" class="space-sm">
<h3>24/7 surveillance</h3>
<p>
Our premises are monitored round the clock by advanced <br>
surveillance systems. With strategically placed cameras, we <br>
maintain constant vigilance over the facility.
</p>
</div>
<div class="col-md-6">
<img src="img/home-3.png" alt="lock" class="space-sm">
<h3>Strict access control</h3>
<p>
Electrified palisade fencing and a sophisticated access control <br>
system ensure that only authorised individuals have entry to the <br>
entire facility.
</p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<img src="img/light.png" alt="orange light" class="space-sm">
<h3>Well-it premises</h3>
<p>
To enhance safety and defer potencial risks, our facility is well-it <br>
both indoors and outdoors.
</p>
</div>
<div class="col-md-6">
<img src="img/officer.png" alt="officer" class="space-sm">
<h3>Trained staff</h3>
<p>
Our dedicated staff members are vigilant in monitoring activities, <br>
ensuring the safety of the premises, and promptly addressing any <br>
concerns.
</p>
</div>
</div>
</div>
</div>
<!-- end security service -->
</section>
<!-- end section -->
<!-- footer -->
<footer>
<div class="container-fluid">
<img src="img/logo-lokr-negative.png" alt="">
<div class="row">
<div class="col-md-5">
<P>
Lockr Self Storage is your affordable and convenient self-storage solution in
Riversands, Midrand. Experience the future of storage with our budget-friendly
options, ease of use, and smart design. Simplify life. Leave it to Lockr!
</P>
</div>
<div class="col-md-2">
<h6>Contact us</h6>
<ul>
<li>[email protected]</li>
<li>0XX XXX XXXX</li>
</ul>
</div>
<div class="col-md-2">
<h6>Legal</h6>
<ul>
<li><a href="">Privacy policy</a></li>
<li><a href="">Terms & conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h6>Follow us</h6>
<ul>
<li>
<a href="#">Facebook</a>
</li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<p>
2023 © Lockr Self Storage. All rights reserved.
</p>
</div>
<div class="col-md-6">
<p class="float-right">Developed by <a href="#">bryanthxo</a></p>
</div>
</div>
</footer>
<!-- end footer -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>