-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
537 lines (421 loc) · 21.2 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>amirshafizadeh</title>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Caslon+Display:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Oswald:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rambla&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oxygen&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100&display=swap" rel="stylesheet">
<!-- END GOOGLE FONTS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- parallax -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simpleParallax.min.js"></script>
<!-- end parallax -->
<!-- START ANIMATE.CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="animate.css-master/animate.min.css">
<!-- END ANIMATE.CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<a class="navbar-brand text-white" href="#">Amir Shafizadeh</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link text-white" href="#home">HOME <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link text-white pl-4" href="#about">ABOUT</a>
<a class="nav-item nav-link text-white pl-4" href="#skills">SKILLS</a>
<a class="nav-item nav-link text-white pl-4" href="#services">SERVICES</a>
<a class="nav-item nav-link text-white pl-4" href="#contact">CONTACT</a>
</div>
</div>
</nav>
<!-- parallax -->
<section id="home">
<div class="container-fluid intro">
<h2 class="hello">Hello
<!-- start type string -->
<div class="typed">
<div class="text-dark" id="typed-strings">
<span>I Am a Web Developer</span>
<span>I Am a Web Designer</span>
<span>I Am a UX/UI Designer</span>
<span>Responsive Design</span>
</div>
<span id="typed"></span>
</div>
<!-- end type string -->
</h2>
<!-- start type string -->
<!-- <div class="typed">
<div class="text-dark" id="typed-strings">
<span>I Am a Web Developer</span>
<span>I Am a Web Designer</span>
<span>I Am a UX/UI Designer</span>
<span>Responsive Design</span>
</div>
<span id="typed"></span>
</div> -->
</div>
</div>
</section>
<section class="about" id="about">
<div class="header-about">
<h2 class="animated flipInX delay-1s">ABOUT ME</h2>
</div>
<div class="container">
<div class="row">
<div class="col-4 py-5">
<div class="undraw-1">
<div class="info-h6">
<p class="animated slideInLeft delay-2s">INFORMATION</p>
</div>
<img src="img/undraw_quiz_nlyh.svg" alt="" class="img-fluid">
</div>
</div>
<div class="col-8 py-5">
<h6 class="about-me-h6">ABOUT ME</h6>
<h4 class="me">I am Shafizadeh Amir</h4>
<p class="about-p">
I'm a Freelance Web Designer based in London. I specialise in creating responsive websites for great individuals and small-medium sized businesses, helping them to market their product or services successfully on the web . <br> My process is very collaborative. I like to involve my clients closely in every stage of the project, listening and fully understanding your requirements so I deliver an online solution that meets your businesses goals.</p>
<!-- BUTTONS -->
<button class="btn-about">HIRE ME</button>
<button class="btn-about">DOWNLOAD C.V</button>
</div>
</div>
</div>
</section>
<!-- END ABOUT -->
<!-- START MY SKILLS -->
<section id="skills" >
<div class="container-fluid skills">
<div class="row">
<div class="col-12 undraw-col" >
<div class="undraw-2">
<img src="img/undraw_static_website_0107.svg" >
</div>
</div>
<div class="col-6 my-skills-p text-center">
<h2 class="skills-header">MY SKILLS</h2>
<h6 class="abilities">ABILITIES</h6>
<p>I have a certification in Responsive Web Design which lead me to begin my career as a web designer. I specialise in creating unique landing pages or multi-page websites that carefully express my client's personality and also help companies and small-businesses to discover their identity.
<br>
<br>
In order to create and build all my projects I use all the latest technologies and I stay updated on all the latest trends and developments associated with the industry.
</p>
</div>
<div class="col-6 pro-bars text-center">
<span class="progress-title">web Design</span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div>
</div>
<br>
<span class="progress-title"> Photoshop</span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%</div>
</div>
<br>
<span class="progress-title"> Web Development</span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<br>
<span class="progress-title"> Social Media</span>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
</div>
</div>
</div>
</div>
</section>
<div class="container serv-header text-center mt-5" id="services">
<h2 class="animated pulse infinite slower">SERVICES</h2>
<p>WHAT I DO</p>
</div>
<div class="section">
<div class="container box-main">
<div class="row">
<div class="col-sm-3 text-center box">
<i class="fas fa-laptop icons-boxes"></i>
<h3>Responsive Web Design</h3>
<p>The website has a flexible structure considering the device that it's accessed from, oferring the best experience. </p>
</div>
<div class="col-sm-3 text-center box">
<i class="fas fa-magic icons-boxes"></i>
<h3>SEO Optimization</h3>
<p>
Optimization of the website design and content in order to help it appear in the most favorable place in Google search engine.
</p>
</div>
<div class="col-sm-3 text-center box">
<i class="fab fa-autoprefixer icons-boxes"></i>
<h3>Content Administration</h3>
<p>Add or change the content of your website anytime you need by using WordPress Administration system</p>
</div>
<div class="col-sm-3 text-center box">
<i class="fas fa-mobile-alt icons-boxes"></i>
<h3>Fully Responsive</h3>
<p>The website it's fully responsive and user friendly and it can be easily accessed from any smartphone</p>
</div>
</div>
</div>
</div>
<!-- END MY SKILLS -->
<!-- parallax-2 -->
<div class="container-fluid parallax-2">
</div>
<!-- end parallax-2 -->
<!-- START 7 QUESTION -->
<div class="container text-center questions-header">
<div class="row">
<div class="col-12">
<h2>7 Frequently Asked Questions</h2>
<img src="img/question.svg">
</div>
</div>
</div>
<!-- start acordion -->
<div id="accordion">
<!-- CARD-1 -->
<div class="card text-center ">
<div class="card-header bg-white" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
What benefits I have <br> from having my own website?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Having a website doesn't just lead your business to exist in the digital world; it helps it to thrive in the physical world as well. A website helps a business in various areas of growth involving your customers, your reputation, and your visibility in your community and industry.
</div>
</div>
</div>
<!-- CARD-2 -->
<div class="card text-center">
<div class="card-header bg-white" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How much it cost to create a website?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Depending on your needs, building a website can cost anywhere between $150 and $1.000. If you need a feature-rich, custom-built website, it can go as high as $30,000 or more. To build a small website, you'll need to have a budget for the domain name and web hosting.
</div>
</div>
</div>
<!-- CARD-3 -->
<div class="card text-center">
<div class="card-header bg-white" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
when is the website ready?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
A typical website will take 2-4 weeks to design and be ready to go. If you want a feature-rich, custom built website it can take up to 2-3 months of work Depending on the design and the content.
</div>
</div>
</div>
<!-- CARD-4 -->
<div class="card text-center">
<div class="card-header bg-white" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Can I administrate my website?
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
With WordPress Managing Panel, administering your content has never been that easy! When deciding to add new content to your website you do so by creating a post entry. Your post includes the material you want to present. It can be anything from your thoughts upon a topic, an article, a video or in case you have an e-shop your products and the description that accompanies them. You can also add pictures, links and anything else you think that might interest your target audience. You can also modify the way your posts will appear in your website. Remember though that posts are entries that by default display in reverse chronological order at your home page and are included in your site’s RSS feed.
</div>
</div>
</div>
<!-- CARD-5 -->
<div class="card text-center">
<div class="card-header bg-white" id="headingFive">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
What info do I need for my website?
</button>
</h5>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
<div class="card-body">
1.Determine the purpose of your website. Is it an ecommerce site designed to sell items online? Is it mainly an informational brochure for your business? <br> Is it a blog that you intend to update regularly with posts? This will be your starting point.
<br>
2. Domain Name
Choose and register a domain name for your Web address.
<br>
3. Priorities
Determine what is critical for your website today. Can you start with a simple site and add more bells and whistles later? Write down what you need now, versus later.
<br>
4. Site Pages and Features
Develop a list of your website requirements. For example:
Number of website pages
Amount of website storage (images and videos mean more storage space)
Tools such as online forms, blogs, customer reviews, maps, slideshows
Links to or integration with social media
Video and/or audio players
Shopping cart
Tech support
Mobile device optimization (so your website looks good on mobile devices)
</div>
</div>
</div>
<!-- CARD-6 -->
<div class="card text-center">
<div class="card-header bg-white" id="headingSix">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Domain,Hosting,Email, How it all works?
</button>
</h5>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
<div class="card-body">
Web hosting is a service that allows organizations and individuals to post a website or web page onto the Internet. A web host, or web hosting service provider, is a business that provides the technologies and services needed for the website or webpage to be viewed in the Internet. Websites are hosted, or stored, on special computers called servers. When Internet users want to view your website, all they need to do is type your website address or domain into their browser. Their computer will then connect to your server and your webpages will be delivered to them through the browser. A domain name is the address where Internet users can access your website.
</div>
</div>
</div>
</div>
<!-- end acordion -->
<!-- END 7 QUESTION -->
<!-- START PARALLAX-3 SKYLINE -->
<div class="container-fluid parallax-3">
</div>
<!-- END PARALLAX-3 SKYLINE -->
<!-- START HELP AREA -->
<div class="container-fluid help-main">
<div class="row">
<div class="col-12 text-center help-header">
<h3>THIS IS HOW YOUR NEW WEBSITE IT'S GOING TO HELP YOU</h2>
<hr>
<h6>Everyday more people and companies need personalized informations in the shortest time possible. <br>
Below you will find 6 benefits for creating your presentation website that helps you presenting <br>
the world your personality or your company's identity.</h6>
</div>
<div class="col-5 help-list text-center mt-5">
<h6 class="visibility">VISIBILITY: Offer useful informations to users who might search about your products or servicies on web. </h6>
<br class="break-line">
<h6>ACCESSIBILITY: Your website is available 24/24 everywhere, locally and globally.</h6>
<br>
<h6>TRUST: Your clients will know that they will find more informations about you or your company on the internet.</h6>
</div>
<div class="col-5 help-list2 text-center mt-5">
<h6>CREDIBILITY:Your online presence express stability and investment, an important decision making factor.</h6>
<br>
<h6>COMPETITIVITY: The progress is a result of a competition, and the client will be pleased. </h6>
<br>
<h6>MOBILITY: With a responsive website you are closer to your clients 24/24.</h6>
</div>
<div class="col-12 text-center">
<img src="img/hand-shake.svg" alt="" class="hand-shake" height="200px">
</div>
</div>
</div>
<!-- END HELP AREA -->
<!-- START CONTACT-SECTION -->
<section id="contact" class="py-5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="contact-header">
<h1>Contact</h1>
<p class="line2">Need Some Help?</p>
</div>
</div>
<div class="col-6 img-col">
<img src="img/contact.svg" alt="" class="contact-img">
</div>
<div class="col-6 py-5 contact-form">
<form name="register" action="register.php" method="POST" id="contact-form">
<input type="text" name="name" id="name" placeholder="Name" require autocomplete="off">
<br>
<input type="email" name="Email" id="Email" placeholder="Email" require autocomplete="off">
<br>
<input type="text" name="Message" id="message" placeholder="Message" require autocomplete="off">
</form>
<br>
<div>
<button type="button" name="send" value="Send" class="btn-contact btn-md btn-block">Send</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-12 contact-info">
<p class="contact-p">CONTACT: (+40) 7721 477 36</p>
<p class="email-p">EMAIL: [email protected]</p>
<p class="social-media">LET'S BE SOCIAL</p>
<div class="media-icons">
<a href="https://www.instagram.com/amirshafizadeh/"><i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/shafizadeh.amir"><i class="fab fa-facebook-f"></i></a>
<a href="https://github.com/hbkdesign"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/shafizadeh-amir-484806196/"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- END CONTACT SECTION -->
<!-- start typed -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
loop:true,
typeSpeed: 65,
backDelay:1000,
});
</script>
<!-- SMOOTH-SCROLLING -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1200, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<!-- END SMOOTH-SCROLLING -->
</body>
</html>