-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbootstrap.html
608 lines (561 loc) · 31.6 KB
/
bootstrap.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
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
<!DOCTYPE HTML>
<html>
<head lang="an">
<meta charset="utf-8"/>
<!--ie compatibility meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--first mobile meta-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>special desgin</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/style7.css"/>
<link rel="stylesheet" href="css/default-theme.css"/>
<link rel="stylesheet" href="css/media.css"/>
<link rel="stylesheet" href="css/animate.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<section class="option-box text-center">
<div class="color-option">
<h4>Color Options</h4>
<ul class="list-unstyled ">
<li data-value="css/yellow-theme.css"></li>
<li data-value="css/red-theme.css"></li>
<li data-value="css/blue-theme.css"></li>
<li data-value="css/orange-theme.css"></li>
<li data-value="css/default-theme.css"></li>
</ul>
</div>
<i class="fas fa-cog fa-2x cog-check"></i>
</section>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Elsami <span>Inc</span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="bootstrap.html">Home <span class="sr-only">(current)</span></a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Programming</a></li>
<li><a href="#">Web Desgin</a></li>
<li><a href="#">desktop</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Web Hosting</a></li>
</ul>
</li>
<li><a href="#">Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="myslide" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myslide" data-slide-to="0" class="active"></li>
<li data-target="#myslide" data-slide-to="1"></li>
<li data-target="#myslide" data-slide-to="2"></li>
<li data-target="#myslide" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive center-block" src="images/dlanor-s-ATgfRqpFfFI-unsplash.jpg" alt="pic.1">
<div class="carousel-caption ">
<h1>Alstroemerias</h1>
<p class="lead" >Alstroemerias are more often called either Peruvian Lilies or Lilies of the Incas and are native to South America. Peruvian Lilies come in a variety of warm colors like pink and orange and are symbolic of friendship, wealth and devotion. These flowers bloom in late spring/early summer when exposed to direct sunlight and watered weekly (water more often when you notice soil looking dry, water less when the soil looks soggy).</p>
</div>
</div>
<div class="item">
<img class="img-responsive center-block" src="images/002.jpg" alt="pic.2">
<div class="carousel-caption ">
<h1>Calla Lilies</h1>
<p class="lead" >The Calla Lily is associated with faith and purity. For this reason, religious figures like the Virgin Mary are often depicted holding a bouquet of calla lilies. Calla lilies are also often associated with sympathy and rebirth, making them a popular flower at sympathy occasions. These beauties grow in full to partial sunlight and should be planted in spring to bloom in late summer. with continued care, they can grow up to two feet long! Once cut, calla lilies can last 2 weeks in a vase.
</p>
</div>
</div>
<div class="item">
<img class="img-responsive center-block" src="images/003.jpg" alt="pic.3">
<div class="carousel-caption ">
<h1>Shiseido</h1>
<p class="lead" >As this feminine fragrance unfolds on your skin, it’s like lifting an assortment of jasmine, gardenia and orange blossom to your nose, fresh from the garden soil. </p>
</div>
</div>
<div class="item">
<img class="img-responsive center-block" src="images/004.jpg" alt="pic.4">
<div class="carousel-caption ">
<h1>Chanel</h1>
<p class="lead" >Chanel’s reimaginating of the light and floral ‘Chance’ fragrance enriches its rose bouquet with jasmine absolute and creamy musks that emerge throughout the day.
</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myslide" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myslide" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<section class="about text-center wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10" >
<div class="container">
<h1 class="hidden-xs">Meet our new template <span>Elsami Inc.</span></h1>
<h2 class="visible-xs-block">Meet our new template <span>Elsami Inc.</span></h2>
<p class="lead">Hello! Let me introduce our template Elsami Inc. created with all the love with <strong>Bootstrap</strong>3.3.4</p>
</div>
</section>
<section class="features text-center">
<div class="container">
<h1 class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10">Our Features</h1>
<div class="row">
<div class="col-lg-3 wow animate__animated animate__fadeInLeft" data-wow-duration="1s" data-wow-offset="10">
<div class="feat">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<h4>100% responsive</h4>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. </p>
</div>
</div>
<div class="col-lg-3 wow animate__animated animate__fadeInBottomLeft" data-wow-duration="1s" data-wow-offset="10">
<div class="feat">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<h4>100% responsive</h4>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. </p>
</div>
</div>
<div class="col-lg-3 wow animate__animated animate__fadeInBottomRight" data-wow-duration="1s" data-wow-offset="10">
<div class="feat">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<h4>100% responsive</h4>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. </p>
</div>
</div>
<div class="col-lg-3 wow animate__animated animate__fadeInRight" data-wow-duration="1s" data-wow-offset="10">
<div class="feat">
<span class="glyphicon glyphicon-heart " aria-hidden="true"></span>
<h4>100% responsive</h4>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. </p>
</div>
</div>
</div>
</div>
</section>
<section class="testimonials text-center">
<div class="container">
<h1 class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10">Our Clients' Opinions </h1>
<div id="testimonials-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10" role="listbox">
<div class="item active">
<p class="lead " >"Alstroemerias are more often called either Peruvian Lilies or Lilies of the Incas and are native to South America. Pe"ruvian Lilies come in a variety of warm colors like pink and orange and are symbolic of friendship, wealth and devotion. These flowers bloom in late spring/early summer when exposed to direct sunlight and watered weekly (water more often when you notice soil looking dry, water less when the soil looks soggy)."
</p>
<span>Sara Sami</span>
</div>
<div class="item">
<p class="lead " >"The Calla Lily is associated with faith and purity. For this reason, religious figures like the Virgin Mary are often depicted holding a bouquet of calla lilies. Calla lilies are also often associated with sympathy and rebirth, making them a popular flower at sympathy occasions. These beauties grow in full to partial sunlight and should be planted in spring to bloom in late summer. with continued care, they can grow up to two feet long! Once cut, calla lilies can last 2 weeks in a vase."
</p>
<span>Mahmoud Sami</span>
</div>
<div class="item">
<p class="lead " >"As this feminine fragrance unfolds on your skin, it’s like lifting an assortment of jasmine, gardenia and orange blossom to your nose, fresh from the garden soil."
</p>
<span>Abeer Orabi</span>
</div>
<div class="item">
<p class="lead " >"Chanel’s reimaginating of the light and floral ‘Chance’ fragrance enriches its rose bouquet with jasmine absolute and creamy musks that emerge throughout the day."
</p>
<span>Zienab Hassan</span>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonials-carousel" data-slide-to="0" class="active wow animate__animated animate__fadeInBottomLeft" data-wow-duration="1s" data-wow-offset="10">
<img src="images/005.jpg" alt="pic.5" >
</li>
<li data-target="#testimonials-carousel" data-slide-to="1" class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10">
<img src="images/007.jpg" alt="pic.7">
</li>
<li data-target="#testimonials-carousel" data-slide-to="2" class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="10">
<img src="images/006.jpg" alt="pic.6">
</li>
<li data-target="#testimonials-carousel" data-slide-to="3" class="wow animate__animated animate__fadeInBottomRight" data-wow-duration="1s" data-wow-offset="10">
<img src="images/008.jpg" alt="pic.8">
</li>
</ol>
</div>
</div>
</section>
<section class="price-table text-center">
<div class="container">
<h1 class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="20">Our Amazing Prices</h1>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__fadeInLeft" data-wow-duration="1s" data-wow-offset="20">
<div class="price-box">
<h3 class="text-primary">Hosting</h3>
<p class="center-block">$40</p>
<ul class="list-unstyled">
<li>space: 30GB</li>
<li>Emails: 20</li>
<li>Ips: 2IP</li>
<li>Databases: 10</li>
<li>Ftp Acconts: 5</li>
</ul>
<a href="#" class="btn btn-primary">Order now</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__fadeInBottomLeft" data-wow-duration="1s" data-wow-offset="20">
<div class="price-box">
<h3 class="text-success">Dedicated</h3>
<p class="center-block">$50</p>
<ul class="list-unstyled">
<li>space: 30GB</li>
<li>Emails: 20</li>
<li>Ips: 2IP</li>
<li>Databases: 10</li>
<li>Ftp Acconts: 5</li>
</ul>
<a href="#" class="btn btn-success">Order now</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__fadeInBottomRight" data-wow-duration="1s" data-wow-offset="20">
<div class="price-box">
<h3 class="text-info">CLoud</h3>
<p class="center-block">$60</p>
<ul class="list-unstyled">
<li>space: 30GB</li>
<li>Emails: 20</li>
<li>Ips: 2IP</li>
<li>Databases: 10</li>
<li>Ftp Acconts: 5</li>
</ul>
<a href="#" class="btn btn-info">Order now</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__fadeInRight" data-wow-duration="1s" data-wow-offset="20">
<div class="price-box">
<h3 class="text-danger">Vps</h3>
<p class="center-block">$70</p>
<ul class="list-unstyled">
<li>space: 30GB</li>
<li>Emails: 20</li>
<li>Ips: 2IP</li>
<li>Databases: 10</li>
<li>Ftp Acconts: 5</li>
</ul>
<a href="#" class="btn btn-danger">Order now</a>
</div>
</div>
</div>
</div>
</section>
<section class="ourteam text-center">
<div class="overlay">
<div class="container">
<h1 class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">Meet Our Awesome Team</h1>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="person wow animate__animated animate__fadeInTopLeft" data-wow-duration="1s" data-wow-offset="30">
<img class="img-circle"src="images/0.jpg" alt="">
</div>
<div class="links wow animate__animated animate__fadeInBottomLeft" data-wow-duration="1s" data-wow-offset="30">
<h2>chris Simpson</h2>
<p class="lead">Envisioning and evangelizing the future of Open Web technologies
</p>
<i class="fab fa-facebook fa-2x"></i>
<img src="images/google.jpg" class="img-circle">
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="person wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">
<img class="img-circle"src="images/0 (1).jpg" alt="">
</div>
<div class="links wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">
<h2>Kyle Simpson</h2>
<p class="lead">Marketing Director pushing boundaries and living my life with all friends! </p>
<i class="fab fa-facebook fa-2x"></i>
<img src="images/google.jpg" class="img-circle">
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="person wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">
<img class="img-circle"src="images/ethan-thumb.jpg" alt="">
</div>
<div class="links wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">
<h2>Steive Gakson </h2>
<p class="lead">Envisioning and evangelizing the future of Open Web technologies
</p>
<i class="fab fa-facebook fa-2x"></i>
<img src="images/google.jpg" class="img-circle">
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="person wow animate__animated animate__fadeInTopRight" data-wow-duration="1s" data-wow-offset="30">
<img class="img-circle"src="images/thumb@2x.jpg" alt="">
</div>
<div class="links wow animate__animated animate__fadeInBottomRight" data-wow-duration="1s" data-wow-offset="30">
<h2>Rahaf Ilol </h2>
<p class="lead">Marketing Director pushing boundaries and living my life with all friends! </p>
<i class="fab fa-facebook fa-2x"></i>
<img src="images/google.jpg" class="img-circle">
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="subscribe text-center " >
<div class="container wow animate__animated animate__zoomIn" data-wow-duration="1s" data-wow-offset="30">
<h1>Keep In Touch</h1>
<p class="lead">Sign up for newsletter .Don't worry about spam ,we hate it too.</p>
<form class="form-inline">
<input class="form-control input-lg" type="text" placeholder="write your email ">
<button class="btn btn-danger btn-lg"><i class="far fa-edit"></i> Subscribe</button>
</form>
</div>
</section>
<section class="statistics text-center">
<div class="overlay">
<div class="container">
<h1 class="wow animate__animated animate__bounceIn" data-wow-duration="1s" data-wow-offset="30">Our Main Statistics</h1>
<div class="row">
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__bounceInLeft" data-wow-duration="1s" data-wow-offset="30">
<div class="stats">
<i class="fas fa-users fa-5x"></i>
<p>9,550</p>
<span>Statistic Users</span>sl
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__bounceInUp" data-wow-duration="1s" data-wow-offset="30">
<div class="stats">
<i class="fas fa-comments fa-5x"></i>
<p>25,600</p>
<span>Posted Comments</span>i
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__bounceInUp" data-wow-duration="1s" data-wow-offset="30">
<div class="stats">
<i class="fas fa-suitcase fa-5x"></i>
<p>3,260</p>
<span>Projects Done</span>
</div>
</div>
<div class="col-lg-3 col-md-6 col-xs-12 wow animate__animated animate__bounceInRight" data-wow-duration="1s" data-wow-offset="30">
<div class="stats">
<i class="far fa-life-ring fa-5x"></i>
<p>95,350</p>
<span>Tickets Archived</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="progress-ourskills text-center">
<div class="container wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="50">
<h1 >Our Skills</h1>
<div class="row">
<div class="col-lg-5">
<div class="ourprogress ">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">Php/MySQL</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">Wordpress</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">Html5/Css3</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">javascript/jQuery</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-offset-1">
<div class="ourskills text-left">
<h3>About the Team</h3>
<p class="leada">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. Fusce vitae consectetur libero, ut accumsan libero. Nam elementum massa a metus rutrum efficitur. Aliquam iaculis ornare tortor vitae tincidunt. Proin convallis sem vitae faucibus aliquet. Suspendisse porttitor finibus nulla. Proin blandit rutrum mauris quis porta. Morbi finibus vitae eros sed porttitor. Fusce et erat in turpis consectetur pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<button type="button" class="btn btn-info">Talk to a Professional</button>
</div>
</div>
</div>
</div>
</section>
<section class="contact-us text-center">
<div class="overlay">
<div class="container">
<div class="row">
<i class="fas fa-headphones fa-5x wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="40"></i>
<h1 class="wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="40">Tell us What You Feel</h1>
<p class="lead wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="40">Feel free to contact us anytime</p>
<form >
<div class="col-md-6 wow animate__animated animate__fadeInTopLeft" data-wow-duration="1s" data-wow-offset="30">
<div class="form-group ">
<i class="fas fa-user"></i>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group ">
<i class="fas fa-at"></i>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="form-group ">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
<input type="text" class="form-control" placeholder="Call phone">
</div>
</div>
<div class="col-md-6 wow animate__animated animate__fadeInBottomRight" data-wow-duration="1s" data-wow-offset="30">
<div class="form-group">
<i class="fas fa-envelope"></i>
<textarea placeholder="Your massege" class="form-control"></textarea>
</div>
<button type="button" class="btn btn-danger btn-block btn-lg">contact us</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="our-clients">
<div class="container">
<div class="row">
<ul class="list-unstyled">
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="0.3s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download%20(1).jpg" alt="bbc">
</li>
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="0.6s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download%20(2).png" alt="cnn">
</li>
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="0.9s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download.jpg" alt="forbes">
</li>
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="1.2s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download%20(7).png" alt="wsa">
</li>
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="1.5s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download%20(6).png" alt="wired">
</li>
<li class="col-md-2 col-xs-4 wow animate__animated animate__fadeInLeft" data-wow-delay="1.8s" data-wow-duration="1s" data-wow-offset="50">
<img class="img-responsive center-block" src="images/clients/download%20(3).jpg" alt="techrada">
</li>
</ul>
</div>
</div>
</section>
<section class="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12 wow animate__animated animate__fadeInLeft" data-wow-duration="1s" data-wow-offset="30">
<h3>Sitemap</h3>
<ul class="list-unstyled lists ">
<li>Home</li>
<li>About</li>
<li>Company</li>
<li>Code</li>
<li>Desgin</li>
<li>Host</li>
<li>Solutions</li>
<li>Sitemap</li>
<li>Contact</li>
</ul>
<ul class="list-unstyled socialicon">
<li><img src="images/social-icons/iconfinder_social-facebook-circle_771367.png" alt="facebook"></li>
<li><img src="images/social-icons/iconfinder_social-circle-google-plus_682223.png" alt="googleplus"></li>
<li><img src="images/social-icons/iconfinder_rss_2142573.png" alt="rss"></li>
<li><img src="images/social-icons/iconfinder_social-pinterest-circle_771394.png" alt="pinterest"></li>
<li><img src="images/social-icons/iconfinder_Mail_1891029.png" alt="email"></li>
<li><img src="images/social-icons/iconfinder_social-twitter-circle_771365.png" alt="twitter"></li>
</ul>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 wow animate__animated animate__fadeInUp" data-wow-duration="1s" data-wow-offset="30">
<h3>Latest Articls</h3>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/media/media1.png" alt="media1">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Programmming</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. Fusce vitae consectetur libero, ut accumsan libero. Nam elementum massa a metus rutrum efficitur.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/media/media2.png" alt="media2">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Coding</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. Fusce vitae consectetur libero, ut accumsan libero. Nam elementum massa a metus rutrum efficitur.
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="images/media/media3.png" alt="media3">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Web Design</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in arcu sollicitudin, pulvinar massa non, dapibus arcu. Integer in ornare nisl, quis fringilla felis. Fusce vitae consectetur libero, ut accumsan libero. Nam elementum massa a metus rutrum efficitur.
</div>
</div>
</div>
<div class="col-lg-4 col-xs-12 wow animate__animated animate__fadeInRight" data-wow-duration="1s" data-wow-offset="30 ">
<h3>Our Awesome Work</h3>
<div class="works">
<img class="img-thumbnail" src="images/works/work1.jpg" alt="work1">
<img class="img-thumbnail" src="images/works/work2.jpg" alt="work2">
<img class="img-thumbnail" src="images/works/work3.jpg" alt="work3">
<img class="img-thumbnail" src="images/works/work4.jpg" alt="work4">
</div>
</div>
</div>
</div>
<div class="copyright text-center">
Copyright ©2021 <span>Your Templet Name</span> .Inc
</div>
</section>
<section class="loading">
<div class="overlay">
<div class="lds-heart">
<div></div>
</div>
</div>
</section>
<div id="scroll-top">
<i class="fas fa-chevron-up fa-2x"></i>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/master.js"></script>
<script src="js/wow.min.js"></script>
<script> new WOW().init();</script>
</body>
</html>