-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
428 lines (408 loc) · 24.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
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
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
<!DOCTYPE html>
<html lang="en">
<head>
<title>AXIT</title>
<meta charset="UTF-8"/>
<meta name="description" content="second try to use bootstrap">
<meta name="keywords" content="HTML, CSS, JavaScript,bootstrap,fun,design">
<meta name="author" content="Mohammed Taysser">
<!-- bootstrap -->
<!-- for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- style sheet-->
<link rel="stylesheet" href="style//bootstrap.min.css"/>
<link rel="stylesheet" href="style/index.css"/>
<!-- font awesome -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="style/css/all.min.css"/>
<!-- icon tap -->
<link rel="icon" href="sourse/logo.png" type="image/icon">
<!--refresh -->
<!-- <meta http-equiv="refresh" content="3"> -->
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet"> <!-- font-family: 'Open Sans', sans-serif;-->
<style></style>
</head>
<body>
<!-- NavBar Start -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top py-4">
<div class="container">
<a class="navbar-brand text-uppercase font-weight-bold" href="#">ax<span class="text-uppercase">it</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-id" aria-controls="nav-id" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nav-id">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-3 active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item mx-3 feather"><a class="nav-link" href="#">feather</a></li>
<li class="nav-item mx-3 pricing"><a class="nav-link" href="#">pricing</a></li>
<li class="nav-item mx-3 about"><a class="nav-link" href="#">about</a></li>
<li class="nav-item mx-3 reviews"><a class="nav-link" href="#">reviews</a></li>
<li class="nav-item ml-3 contact"><a class="nav-link" href="#">contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- NavBar End -->
<!-- header Start -->
<header>
<div class="overlay text-light">
<div class="container mt-5">
<div class="row align-content-center h-100 pt-5">
<div class="col-lg-7">
<h1 class="my-2 text-uppercase text-center-xs">ax<span class="text-uppercase">it</span></h1>
<p class="my-2 text-uppercase h3 font-weight-normal mb-5 pb-3 text-center-xs special-border">modern single templete for any field like <br> <span class="write-container"> <span class="write-text"></span><span class="write-cursor"></span> </span></p>
<p class="text-center-xs">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque maiores consequuntur aspernatur. Maiores deserunt deleniti cum quae et animi sunt vel non, saepe magni, tempore ab voluptates rerum eaque? Perferendis.</p>
<button type="button" class="btn btn-outline-light px-4 py-2 mt-4 button-header d-block">Download</button>
</div>
<div class="col-lg-5 my-5 text-center align-self-center rounded pl-5 form-section">
<div class="bg-light text-dark rounded mx-auto">
<h4 class="py-3 rounded-top mb-3">try your <span class="font-weight-bold">free</span> trail today</h4>
<form action="" method="post" class="">
<input type="text" class="form-control form-group" placeholder="name" required>
<input type="email" class="form-control form-group" placeholder="E-mail" required>
<input type="password" class="form-control form-group" placeholder="password" required>
<button type="submit" class="btn btn-block p-3 text-light rounded-bottom mt-5 text-capitalize">get start</button>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header End -->
<!-- social media Start -->
<div class="social-media shadow-sm">
<div class="container py-4">
<div class="row">
<div class="col-md-4 my-3 text-center-xs">
<h3 class="mb-2">social media</h3>
<p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<div class="col-md-8 my-3 justify-content-center align-self-center">
<ul class="m-0 list-unstyled list-inline text-center media-icon">
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-facebook-f fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-twitter fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-instagram fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-google-plus-g fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-pinterest fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fa fa-rss fa-3x"></i></a></li>
<li class="list-inline-item mx-4 my-2"><a href="#"><i class="fab fa-stumbleupon fa-3x"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- social media End -->
<!-- tabs Start -->
<div class="tabs py-5">
<div class="container py-5">
<div class="row">
<div class="col-md-3 col-lg-2 my-2">
<div class="nav flex-column text-center tabs-tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link py-5 font-weight-bold bg-dark border-bottom text-light active" id="v-home-tab" data-toggle="pill" href="#v-home" role="tab" aria-controls="v-home" aria-selected="false">Home</a>
<a class="nav-link py-5 font-weight-bold bg-dark border-bottom text-light" id="v-profile-tab" data-toggle="pill" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
<a class="nav-link py-5 font-weight-bold bg-dark border-bottom text-light" id="v-messages-tab" data-toggle="pill" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="true">Messages</a>
</div>
</div>
<div class="col-md-9 col-lg-6 px-5 my-2 all-tabs-content">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
<h2 class="mb-3">tab-1 with soft transition effect.</h2>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit.,uod quas quis ratione minus mollitia perspiciatis illum error eius facilis magni voluptatem, magnam ad harum, maxime facere similique, assumenda molestias.</p>
<p class="text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae ullam rem et officia aperiam? Blanditiis minus provident ratione facere suscipit quaerat, rem vel ducimus quas aut eaque nisi fuga culpa.</p>
<button type="button" class="btn px-4 py-2 mt-3">Download</button>
</div>
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
<h2 class="mb-3">tab-2 with soft transition effect.</h2>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi dolores reiciendis aut voluptates enim corporis illum nostrum veniam, ullam nisi, corram ad harum, maxime facere similique, assumenda molestias.</p>
<p class="text-center">Molestiae ullam rem et officia aperiam? Blanditiis minus provident ratione facere suscipit quaerat, rem vel du ratione minus mollitia perspiciatis illum error eius facilis magni voluptatem,.</p>
<button type="button" class="btn px-4 py-2 mt-3">Download</button>
</div>
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
<h2 class="mb-3">tab-3 with soft transition effect.</h2>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi dolores reiciendis aut voluptates enim corporis illum nostrum veniam, ullam nisi, corrupti incidun.</p>
<p class="text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit..</p>
<button type="button" class="btn px-4 py-2 mt-3">Download</button>
</div>
</div>
</div>
<div class="col-lg-4 align-self-center my-2 d-none d-lg-block">
<img src="sourse/memory.jpg" class="img-fluid rounded" alt="">
</div>
</div>
</div>
</div>
<!-- tabs End -->
<!-- sublist Start -->
<div class="sublist my-5 py-5">
<div class="container py-5">
<div class="row">
<div class="col-lg-6 align-self-center d-none d-lg-block">
<div class="img px-2"><img src="sourse/night.jpg" alt="" class="img-fluid "></div>
</div>
<div class="col-lg-6">
<h2 class="mb-5 special-border text-uppercase text-center-xs">sublist section</h2>
<p class="m-0 text-center-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, voluptates nesciunt aliquam obcaecati alias similique molestiae soluta? Praesentium, quod, debitis perspiciatis quaerat asperiores accusamus fugiat fuga corporis deleniti, quae corrupti?</p>
<ul class="list-unstyled text-center-xs">
<li class=" mt-sm-5 mt-md-2">
<div class="list-item overflow-hidden">
<div class="container">
<div class="row">
<div class="col-md-2 align-self-center">
<div class="rounded-circle text-center list-icon " data-toggle="tooltip" data-placement="top" data-original-title="it just animation not link ^_^">
<i class="fas fa-cloud-download-alt"></i>
</div>
</div>
<div class="col-md-10">
<div class="list-info">
<h5 class="my-3">download</h5>
<p class="m-0">download now is more easy just one press button! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class=" mt-sm-5 mt-md-2">
<div class="list-item overflow-hidden">
<div class="container">
<div class="row">
<div class="col-md-2 align-self-center">
<div class="rounded-circle text-center list-icon" data-toggle="tooltip" data-placement="top" data-original-title="it just animation not link ^_^">
<i class="fas fa-cloud-upload-alt"></i>
</div>
</div>
<div class="col-md-10">
<div class="list-info">
<h5 class="my-3">upload</h5>
<p class="m-0">now upload is more easy just one press button! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, voluptates nesciunt</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- sublist End -->
<!-- stander-pic Start -->
<div class="stander-pic my-5 py-5" id="about">
<div class="container py-5">
<div class="row">
<div class="col-lg-7 text-center-xs">
<h2 class="mb-5 special-border text-uppercase">standerd picture section</h2>
<p class="mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, voluptates nesLorem ipsum, dolor sit amet consectetur adipisicing elit. Facere iusto id repudiandae modi culpa ea beatae? Dolorum</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut blanditiis in molestias ratione assumenda.</p>
</div>
<div class="col-md-5 align-self-center d-none d-lg-block">
<div class="img px-2"><img src="sourse/forest.jpg" alt="" class="img-fluid shadow-sm"></div>
</div>
</div>
</div>
</div>
<!-- stander-pic End -->
<!-- awesome Start -->
<div class="awesome py-5 my-5" id="feather">
<div class="container">
<h2 class="h1 my-5 text-center special-border text-uppercase">why this is awesome</h2>
<p class="text-center">Whenever You Need To, Be Sure To Use Margin Utilities To Keep Things Nice And Tidy.</p>
<div class="row my-5">
<div class="col-md-4 text-center my-2">
<div class="icon rounded-circle" data-toggle="tooltip" data-placement="top" data-original-title="it just animation not link ^_^"><i class="fas fa-lightbulb fa-2x"></i></div>
<h3 class="my-3">creative design</h3>
<p class="text-center">Lorem, ipsum dolor sit amet adipisicing elit. Eveniet id placeat sed velit ullam in esse? Libero accusantium ex aperiam quidem animi optio dicta, quia totam dignissimos.</p>
</div>
<div class="col-md-4 text-center my-2">
<div class="icon rounded-circle" data-toggle="tooltip" data-placement="top" data-original-title="it just animation not link ^_^"><i class="far fa-keyboard fa-2x"></i></div>
<h3 class="my-3">well codeing</h3>
<p class="text-center">Lorem, ipsum dolor sit amet adipisicing elit. Eveniet id placeat sed velit ullam in esse? Libero accusantium ex aperiam quidem animi optio dicta, quia totam dignissimos.</p>
</div>
<div class="col-md-4 text-center my-2">
<div class="icon rounded-circle" data-toggle="tooltip" data-placement="top" data-original-title="it just animation not link ^_^"><i class="fas fa-bolt fa-2x"></i></div>
<h3 class="my-3">easy customize</h3>
<p class="text-center">Lorem, ipsum dolor sit amet adipisicing elit. Eveniet id placeat sed velit ullam in esse? Libero accusantium ex aperiam quidem animi optio dicta, quia totam dignissimos.</p>
</div>
</div>
</div>
</div>
<!-- awesome End -->
<!-- pricing Start -->
<div class="pricing py-5 my-5" id="pricing">
<div class="container">
<h2 class="h1 my-5 text-center special-border text-uppercase">pricing option</h2>
<p class="text-center text-muted mb-5 pb-5">Whenever You Need To, Be Sure To Use Margin Utilities To Keep Things Nice And Tidy.</p>
<div class="row my-5">
<div class=" col-md-4 text-center my-4 ">
<div class="shadow-sm">
<div class="info text-light bg-dark py-3 position-relative">
<p class="border-bottom pb-3 font-weight-bold h5">basic</p>
<h2 class="display-1 my-2 font-weight-bold zero-h"> 0</h2>
<p class="time font-italic text-white-50">free for life</p>
</div>
<div class="content">
<ul class="list-group list-group-flush text-uppercase">
<li class="list-group-item">1 GB space</li>
<li class="list-group-item">10 GB bandwidth </li>
<li class="list-group-item">3 website</li>
<li class="list-group-item">basic customization</li>
<li class="list-group-item">wordpress integration</li>
<li class="list-group-item">email support</li>
</ul>
</div>
</div>
</div>
<div class=" col-md-4 text-center my-4 ">
<div class="shadow-sm position-relative special-price" style="top: -35px;">
<div class="info text-light bg-dark pt-3 position-relative border-0">
<p class="border-bottom pb-3 font-weight-bold h5">professional</p>
<h2 class="display-1 my-2 font-weight-bold">19</h2>
<p class="time font-italic text-white-50">monthly payment</p>
<p class="font-weight-bold m-0 py-3 special-offer">our most popular</p>
</div>
<div class="content">
<ul class="list-group list-group-flush text-uppercase">
<li class="list-group-item">5 GB space</li>
<li class="list-group-item">50 GB bandwidth </li>
<li class="list-group-item">12 website</li>
<li class="list-group-item">advance customize</li>
<li class="list-group-item">wordpress integration</li>
<li class="list-group-item">email support</li>
</ul>
</div>
</div>
</div>
<div class=" col-md-4 text-center my-4 ">
<div class="shadow-sm">
<div class="info text-light bg-dark py-3 position-relative">
<p class="border-bottom pb-3 font-weight-bold h5">enterprise</p>
<h2 class="display-1 my-2 font-weight-bold">70</h2>
<p class="time font-italic text-white-50">monthly payment</p>
</div>
<div class="content">
<ul class="list-group list-group-flush text-uppercase">
<li class="list-group-item">unlimit space</li>
<li class="list-group-item">unlimit bandwidth </li>
<li class="list-group-item">100 website</li>
<li class="list-group-item">advance customize</li>
<li class="list-group-item">wordpress integration</li>
<li class="list-group-item">24/7 support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- pricing End -->
<!-- testemoinal start -->
<div class="testemoinal my-5 py-5" id="reviews">
<div class="container pb-5">
<h2 class="h1 my-5 text-center special-border text-uppercase">what our customer are saying</h2>
<p class="text-center text-muted mb-5 pb-3">Whenever You Need To, Be Sure To Use Margin Utilities To Keep Things Nice And Tidy.</p>
<div class="row">
<div class="col-md-4 my-3">
<div class="content">
<p class="p-3 arrow position-relative text-muted rounded">Lorem ipsum dolor sit amet aepe corporis doloribus. Ducimus ad consequuntur repellendus ipsum maiores dignissimos nihil aspernatur omnis quasi.</p>
<div class="media">
<img src="sourse/user1.jpg" class="mr-3 align-self-center rounded-circle img-thumbnail" alt="..." width="80">
<div class="media-body">
<h5 class="mb-1">dr-strange</h5>
<p class="text-muted">programmer</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="content">
<p class="p-3 arrow position-relative text-muted rounded">Lorem ipsum dolor sit amet aepe corporis doloribus. Ducimus ad consequuntur repellendus ipsum maiores dignissimos nihil aspernatur omnis quasi.</p>
<div class="media">
<img src="sourse/user2.jpg" class="mr-3 align-self-center rounded-circle img-thumbnail" alt="..." width="80">
<div class="media-body">
<h5 class="mb-1">dr-home</h5>
<p class="text-muted">graphic designer</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="content">
<p class="p-3 arrow position-relative text-muted rounded">Lorem ipsum dolor sit amet aepe corporis doloribus. Ducimus ad consequuntur repellendus ipsum maiores dignissimos nihil aspernatur omnis quasi.</p>
<div class="media">
<img src="sourse/user3.jpg" class="mr-3 align-self-center rounded-circle img-thumbnail" alt="..." width="80">
<div class="media-body">
<h5 class="mb-1">dr-stone</h5>
<p class="text-muted">freelancer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- testemoinal End -->
<!-- stylish start -->
<div class="stylish my-5">
<div class="overlay py-5">
<div class="container py-5">
<h2 class="h1 mb-5 text-center special-border text-uppercase text-light">stylish axure design</h2>
<p class="text-center text-white mb-5 lead">This Is A Simple Hero Unit, A Simple Jumbotron-Style Component For Calling Extra Attention To Featured Content Or Information.</p>
<button type="button" class="btn btn-outline-light px-4 py-2 mx-auto d-block">Download</button>
</div>
</div>
</div>
<!-- stylish End -->
<!-- contact start -->
<div class="contact mt-5 py-5" id="contact">
<div class="container">
<h2 class="h1 mb-5 text-center special-border text-uppercase">contact us</h2>
<p class="text-center mb-5 text-muted">This Is A Simple Hero Unit, Extra Attention To Featured Content Or Information.</p>
<form action="" method="post" class="">
<div class="row">
<div class="col-md-6 my-2 px-5">
<input type="text" class="form-control form-group" placeholder="name" required="">
<input type="email" class="form-control form-group" placeholder="E-mail" required="">
<input type="password" class="form-control" placeholder="password" required="">
</div>
<div class="col-md-6 my-2 px-5">
<textarea class="form-control h-100 form-group" placeholder="message"></textarea>
</div>
</div>
<button type="submit" class="btn py-2 px-3 mt-5 text-light rounded-bottom text-capitalize d-block mx-auto">send message</button>
</form>
</div>
</div>
<!-- contact End -->
<!-- footer start -->
<footer class="mt-3 pt-4">
<ul class="m-0 list-unstyled list-inline d-block mx-auto text-center media-icon">
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-facebook-f "></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-twitter "></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-pinterest "></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fa fa-rss "></i></a></li>
<li class="list-inline-item mx-3"><a href="#"><i class="fab fa-stumbleupon"></i></a></li>
</ul>
<p class="py-2 m-0 text-white-50 text-center font-weight-light"><small>Copyright © 2020 -<span id="current-year" class="mx-1"></span> all right reserved | build with</small> <i class="fa fa-heart mx-1"></i> <small>by <a href="https://www.facebook.com/profile.php?id=100009396654971" target="_blank" class="text-white-50">strange.inc</a></small></p>
</footer>
<!-- footer End -->
<!-- script start -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bs-custom-file-input.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>