-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
442 lines (419 loc) · 19 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
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>PSD to HTML / UPWORK</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font Awesome Plugin -->
<link rel="stylesheet" href="css/font-awesome.css">
<!-- Hover CSS Plugin -->
<link rel="stylesheet" href="css/hover.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">
<!-- Costume CSS files & Plugins -->
<link rel="stylesheet" href="css/style.css">
<!-- WOW JS -->
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<!-- Start Of Header -->
<div class="header">
<!-- Start of NavBar -->
<nav class="navbar navbar-default navbar-fixed-top wow slideInDown" data-wow-duration=".3s">
<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 hvr-grow" href="#"><i class="fa fa-diamond" aria-hidden="true"></i> avirea</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="#">home <span class="sr-only">(current)</span></a></li>
<li><a href="#" class="hvr-bounce-to-right">about</a></li>
<li><a href="#" class="hvr-bounce-to-right">services</a></li>
<li><a href="#" class="hvr-bounce-to-right">team</a></li>
<li><a href="#" class="hvr-bounce-to-right">porfolio</a></li>
<li><a href="#" class="hvr-bounce-to-right">blog</a></li>
<li><a href="#" class="hvr-bounce-to-right">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- End of NavBar -->
<!-- Start of Banner -->
<div class="banner text-center wow fadeIn" data-wow-delay=".3s">
<i class="fa fa-diamond" aria-hidden="true"></i>
<h1>Welcome</h1>
<h3>the art of creative avirea</h3>
</div>
<!-- End of Banner -->
</div>
<!-- End of Header -->
<!-- Start of Description -->
<div class="description text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 wow fadeIn" data-wow-delay=".3s">
<div class="desc">
<i class="fa fa-heart fa-4x" aria-hidden="true"></i>
<h1>bootstrap 3</h1>
<p>this powered by bootstrap 3. the incredible mobile first framework is the best option to run your website.</p>
</div>
</div>
<div class="col-lg-4 col-md-12 wow fadeIn" data-wow-delay=".6s">
<div class="desc">
<i class="fa fa-heart fa-4x" aria-hidden="true"></i>
<h1>bootstrap 3</h1>
<p>this powered by bootstrap 3. the incredible mobile first framework is the best option to run your website.</p>
</div>
</div>
<div class="col-lg-4 col-md-12 wow fadeIn" data-wow-delay=".9s">
<div class="desc">
<i class="fa fa-heart fa-4x" aria-hidden="true"></i>
<h1>bootstrap 3</h1>
<p>this powered by bootstrap 3. the incredible mobile first framework is the best option to run your website.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End of Description -->
<!-- Start of About -->
<div class="about">
<div class="container">
<div class="row">
<h1 class="text-center">a little about our agency</h1>
<hr/>
<div class="col-lg-6 wow fadeInLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptatem aspernatur aperiam suscipit beatae ex voluptatibus omnis vero maxime nihil, esse sunt placeat! Dolore nesciunt, aut temporibus. Quis, ratione sapiente! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptatem aspernatur aperiam suscipit beatae ex voluptatibus omnis vero maxime nihil, esse sunt placeat! Dolore nesciunt, aut temporibus. Quis, ratione sapiente! esse sunt placeat! Dolore nesciunt, aut temporibus. Quis, ratione sapiente! esse sunt placeat! Dolore nesciunt, aut temporibus. Quis, ratione sapiente!
</p>
</div>
<div class="col-lg-6 wow fadeInRight">
<h2>Skill : </h2>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
HTML
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
Web Design
</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: 40%;">
Typography
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-alert" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
Graphic Design
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
3D Modeling
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of About -->
<!-- Start of Design -->
<div class="design text-center">
<div class="overlay">
<div class="container wow fadeIn">
<h1>design expand boundaries</h1>
<hr/>
<p>
to achieve real change, we have to expand boundaries. because the wild west of what-could-be is unexplored but rife with opportunity.
</p>
</div>
</div>
</div>
<!-- End of Design -->
<!-- Start of Brand Section -->
<div class="brand">
<div class="container wow fadeIn">
<h1>one brand, one voice.</h1>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis atque temporibus quod quae beatae cupiditate deleniti ea minus et nobis rem quas, autem sit non totam ex odio vel voluptates. beatae cupiditate deleniti ea minus et nobis rem quas, autem sit non totam ex odio vel voluptates.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eius, architecto doloremque maxime dolores quisquam odit molestiae, iusto est inventore voluptate. Nesciunt nobis hic praesentium quam earum adipisci porro, est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis atque temporibus quod quae beatae cupiditate deleniti ea minus et nobis rem quas, autem sit non totam ex odio vel voluptates. beatae cupiditate.</p>
<h2>mobile first thinking, always.</h2>
<hr/>
<img src="images/mobile.png" alt="Mobile Mockup" class="center-block img-responsive">
</div>
</div>
<!-- End of Brand Section -->
<!-- Start of Design -->
<div class="design d2 text-center">
<div class="overlay">
<div class="container wow fadeIn">
<h1>design is interaction</h1>
<hr/>
<p>
to develope a deeper and meaningful connection with consumers, we belive design must invite them back to take part in the conversation.
</p>
</div>
</div>
</div>
<!-- End of Design -->
<!-- Start of Our Team -->
<div class="team text-center">
<div class="container wow fadeIn">
<h1>meet our awesome team</h1>
<hr>
<div class="row">
<div class="col-lg-3">
<div class="member">
<img src="images/avatar.png" alt="" class="center-block img-responsive img-circle">
<h3>Bill Gates</h3>
<span class="role">- Microsoft CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis quas ipsa cum voluptate aspernatur quo, consectetur eligendi dicta earum iusto ex architecto libero odit itaque ducimus necessitatibus, maxime alias.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
<div class="col-lg-3">
<div class="member">
<img src="images/avatar.png" alt="" class="center-block img-responsive img-circle">
<h3>Bill Gates</h3>
<span class="role">- Microsoft CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis quas ipsa cum voluptate aspernatur quo, consectetur eligendi dicta earum iusto ex architecto libero odit itaque ducimus necessitatibus, maxime alias.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
<div class="col-lg-3">
<div class="member">
<img src="images/avatar.png" alt="" class="center-block img-responsive img-circle">
<h3>Bill Gates</h3>
<span class="role">- Microsoft CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis quas ipsa cum voluptate aspernatur quo, consectetur eligendi dicta earum iusto ex architecto libero odit itaque ducimus necessitatibus, maxime alias.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
<div class="col-lg-3">
<div class="member">
<img src="images/avatar.png" alt="" class="center-block img-responsive img-circle">
<h3>Bill Gates</h3>
<span class="role">- Microsoft CEO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis quas ipsa cum voluptate aspernatur quo, consectetur eligendi dicta earum iusto ex architecto libero odit itaque ducimus necessitatibus, maxime alias.</p>
<a href="#" class="button">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- End of Our Team -->
<!-- Start of Hire -->
<div class="hire">
<div class="container wow fadeIn">
<div class="announce">
<div class="row">
<div class="col-lg-8">
<img src="images/imac.png" class="img-responsive" alt="">
</div>
<div class="col-lg-4 text-center">
<h2>we are hiring!</h2>
<p>do you want to be one of us? sure you want, because we are awesome team! here we work hard every day to craft pixel perfect sites.</p>
<a href="#" class="button">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- End of Hire -->
<!-- Start of Design -->
<div class="design d3 text-center">
<div class="overlay">
<div class="container wow fadeIn">
<h1>design solve problemes</h1>
<hr/>
<p>From the purely partical to the richly philosophical, design is the solution to a host of challenges.</p>
</div>
</div>
</div>
<!-- End of Design -->
<!-- Start of Portfolio -->
<div class="portfolio">
<div class="container wow fadeIn">
<h1>we create cool stuff</h1>
<hr>
<div class="row">
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="item">
<img src="images/ipad.jpg" class="img-responsive" alt="">
<div class="over">
<button class="upper">SHOW PROJECT</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Portfolio -->
<!-- Start of Design -->
<div class="design d4 text-center">
<div class="overlay wow fadeIn">
<div class="container">
<h1>design creates emotional connection</h1>
<hr/>
<p>
There's more to design than meets the eye, it's when it meets the heart that design creates a magnificul, lasting connection with the audience.
</p>
</div>
</div>
</div>
<!-- End of Design -->
<!-- Start of Story letters -->
<div class="story">
<div class="container wow fadeIn">
<h1>we are storyletters</h1>
<hr>
<div class="row">
<div class="col-lg-2">
<img src="images/avatar.png" class="img-responsive img-circle" alt="">
<h4>Bills Gates</h4>
<span class="date">Published Aug 30.</span>
</div>
<div class="col-lg-4">
<h1>we define success</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe pariatur, illo quam laborum molestias quos laboriosam eveniet dolorum vitae veniam modi, labore soluta. Consequuntur reprehenderit, eos facere illo, ratione quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae deserunt labore aut expedita, totam? Eum iste recusandae veniam tenetur voluptatem, quae. Magnam dolores libero provident! Repellendus officiis nemo natus officia.</p>
<a href="#" class="button">read more <i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div class="col-lg-2">
<img src="images/avatar.png" class="img-responsive img-circle" alt="">
<h4>Bills Gates</h4>
<span class="date">Published Aug 30.</span>
</div>
<div class="col-lg-4">
<h1>we define success</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe pariatur, illo quam laborum molestias quos laboriosam eveniet dolorum vitae veniam modi, labore soluta. Consequuntur reprehenderit, eos facere illo, ratione quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae deserunt labore aut expedita, totam? Eum iste recusandae veniam tenetur voluptatem, quae. Magnam dolores libero provident! Repellendus officiis nemo natus officia.</p>
<a href="#" class="button">read more <i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<!-- End of Story letters -->
<!-- Start of Design -->
<div class="design d5 text-center">
<div class="overlay">
<div class="container wow fadeIn">
<div class="row">
<h1>crafted in tunisia</h1>
<hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus assumenda aperiam, perspiciatis minima, eveniet,. </p>
</div>
</div>
</div>
</div>
<!-- End of Design -->
<!-- Start of Contact Form -->
<div class="contact">
<div class="container wow fadeIn">
<h1>contact us</h1>
<hr>
<div class="row">
<form action="">
</form>
<div class="col-lg-6">
<div class="form-group form-group-md">
<input type="text" class="form-control" placeholder="Full Name">
</div>
<div class="form-group form-group-md">
<input type="text" class="form-control" placeholder="Object">
</div>
<div class="form-group form-group-md">
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" placeholder="Type your message here..." cols="30" rows="9"></textarea>
<button type="submit" class="btn btn-danger btn-block btn-lg"> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send</button>
</div>
</div>
</div>
</div>
<!-- End of Contact Form -->
<!-- Copyright section -->
<div class="copyright">
<div class="container wow fadeIn">
<div class="row">
All right reserved © 2016 | Designed by Arfaoui Hamouda with <i class="fa fa-heart fa-lg"></i>
</div>
</div>
</div>
<!-- Copyright section -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- NiceScroll Plugin -->
<script src="js/jquery.nicescroll.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- wowJS-->
<script src="js/wow.js"></script>
<!-- Costume jQuery plugins -->
<script src="js/plugins.js"></script>
</body>
</html>