-
Notifications
You must be signed in to change notification settings - Fork 48
/
index.html
385 lines (371 loc) · 16.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AMY - Portfolio</title>
<link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Scroll Top Button -->
<div class="scroll-top">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7l4-4m0 0l4 4m-4-4v18" />
</svg>
</div>
<!-- Navigation -->
<section id="navigation">
<div class="nav-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
</section>
<div id="nav-content">
<div class="close-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<div class="wrapper">
<h2 class="section-heading">Menu</h2>
<nav>
<ul>
<li><a data-text="Home" href="./index.html#hero">Home</a></li>
<li><a data-text="About" href="./index.html#about">About</a></li>
<li><a data-text="Projects" href="./index.html#projects">Projects</a></li>
<li><a data-text="Testimonial" href="./index.html#testimonial">Testimonial</a></li>
<li><a data-text="Contact" href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- Hero section -->
<section id="hero">
<div class="container">
<div class="left">
<p class="subheading">I'm AMY</p>
<h2 class="heading">
<div class="wrapper"><span>Pixels</span></div>
<div class="wrapper"><span>with</span></div>
<div class="wrapper"><span>purpose</span></div>
</h2>
<p class="desc">I work with companies and agencies around the world, building Web sites and application UIs with
strong focus on
responsive design, accessibility, performance,</p>
<div class="buttons">
<a href="#projects" class="primary-btn">See My Works</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
</div>
<div class="right">
<img src="./image/profile.jpg" alt="">
</div>
</div>
</section>
<!-- services Section -->
<section id="services">
<div class="container">
<h2 class="section-heading" data-outline="Services">Services</h2>
<div class="all-items">
<div class="item">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="item-heading">Web Design</h3>
<p class="item-desc">I build up the high performance website with blazing fast speed. Website with high
performance can lead the visitor more. </p>
</div>
<div class="item">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
</div>
<h3 class="item-heading">UI/UX</h3>
<p class="item-desc">I do ui/ux design for the website that assists website to get an outstanding look. Unique
design creates an unique personality for websites.</p>
</div>
<div class="item">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
</svg>
</div>
<h3 class="item-heading">SEO</h3>
<p class="item-desc">With SEO, your business wants to increase its visibility in search results on search
engines. I also provide SEO services
to rank your website.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section id="testimonial">
<div class="container">
<h1 class="section-heading" data-outline="Testimonial">Testimonial</h1>
<div class="all-items">
<div class="item">
<div class="img">
<img src="./image/sayed.jpg" alt="">
</div>
<h3 class="testimonial-heading">Mr. Sayed</h3>
<p class="testimonial-sub-heading">CTO, TechG</p>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</div>
<p class="testimonial-desc">AMY conveys quality work. She is an excellent individual and an extraordinary
cooperative person. She is extremely
straightforward and puts all her energy to follow through on schedule. </p>
</div>
<div class="item">
<div class="img">
<img src="./image/arfan.jpg" alt="">
</div>
<h3 class="testimonial-heading">Shaif Arfan</h3>
<p class="testimonial-sub-heading">CEO, WEBc.</p>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</div>
<p class="testimonial-desc">I've worked with many individuals who are tendentious and driven by things other
than the work they're doing. AMY is genuinely energetic about the web and the items she makes for it and
that is
quite darn
marvelous.</p>
</div>
<div class="item">
<div class="img">
<img src="./image/ayan.jpg" alt="">
</div>
<h3 class="testimonial-heading">Ayan Khan</h3>
<p class="testimonial-sub-heading">Singer</p>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>
</div>
<p class="testimonial-desc">AMY is a wonderfully creative, collaborative, and gifted developer who excels at
creating inclusive digital solutions.
</p>
</div>
</div>
</div>
</section>
<!-- stats Section -->
<section id="stats">
<div class="container">
<h2 class="section-heading" data-outline="Stats">Stats</h2>
<div class="all-items">
<div class="item">
<h2 class="number">50+</h2>
<h3 class="stats-sub-heading">Projects done</h3>
<p>I worked on more than 50+ projects. I know how to make things fascinating and eye-catching. Making high
performance website is always a sign of mine.</p>
</div>
<div class="item">
<h2 class="number">30+</h2>
<h3 class="stats-sub-heading">Happy clients</h3>
<p>I worked with more than 30+ clients. Client satisfaction is my main priority. I generally attempt to
complete the work
before the deadline.</p>
</div>
<div class="item">
<h2 class="number">4+</h2>
<h3 class="stats-sub-heading">Years experience</h3>
<p>I worked with more than 30+ clients. Client satisfaction is my main priority. I generally attempt to
complete the work
before the deadline.</p>
</div>
</div>
</div>
</section>
<!-- END Stats Section -->
<!-- About -->
<section id="about">
<div class="container">
<h2 class="section-heading" data-outline="about">About</h2>
<div class="wrapper">
<div class="left">
<div class="card">
<div class="img">
<img src="./image/profile.jpg" alt="">
</div>
<p class="card-desc">I’m a freelance web designer and developer based in Bangladesh. I love the Web platform
and I need to improve it for
everybody. What's more, I believe myself to be totally honored that I will assemble it professionally.</p>
<h3 class="card-name">AMY Jr</h3>
<p class="card-sub-title">CEO of My Com</p>
</div>
</div>
<div class="right">
<p class="subheading">Hi! This is AMY</p>
<h2 class="slogan">Freelance Web Designer</h2>
<p class="right-text">I work with companies and agencies around the world, building Web sites and application
UIs with strong focus on
responsive design, accessibility, performance, and the latest in the area of front-end (Javascript, react,
gatsby, node,
Python, djengo)
I also speak and run workshops across the globe, also focusing on CSS, SVG, Responsive Design and
accessibility,
covering practical tips on how to build full stack using modern tools and techniques that scale and are
future-proof.
</p>
<div class="buttons">
<a href="./resume.txt" class="primary-btn" download="">Download Resume</a>
<a href="./contact.html" class="primary-btn outline">Hire Me</a>
</div>
</div>
</div>
</div>
</section>
<!-- projects -->
<section id="projects">
<div class="container">
<h2 class="section-heading" data-outline="Projects">Projects</h2>
<div class="all-items">
<div class="item">
<div class="left">
<div class="img">
<img src="./image/project-1.jpg" alt="">
</div>
</div>
<div class="right">
<h2 class="project-title">Real Chat</h2>
<h3 class="project-sub-title">Online real time chat app.</h3>
<p class="project-desc">I made this application for a USA customer. This application is truly Amazing. Here
you can chat with your friend
constantly inside a secure environment and there will be no information reserved after the end of the
session.</p>
<div class="buttons">
<a href="#" class="primary-btn">Know More</a>
<a href="#" class="primary-btn outline external-link"> <span>Preview</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
</div>
<div class="item">
<div class="left">
<div class="img">
<img src="./image/project-3.jpg" alt="">
</div>
</div>
<div class="right">
<h2 class="project-title">Hotel Zaman Website
</h2>
<h3 class="project-sub-title">A website for hotel zaman.
</h3>
<p class="project-desc">Hotel zaman is one of the famous hotel in Chittagong. We created their website. The
client wanted a clean and smooth
design which I was able to provide at the end of the project.</p>
<div class="buttons">
<a href="#" class="primary-btn">Know More</a>
<a href="#" class="primary-btn outline external-link"> <span>Preview</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
</div>
<div class="item">
<div class="left">
<div class="img">
<img src="./image/project-2.jpg" alt="">
</div>
</div>
<div class="right">
<h2 class="project-title">Prinazz Website</h2>
<h3 class="project-sub-title">A website for music studio</h3>
<p class="project-desc">Piranz is one of the famous music composer in UAE. The challenge was to keep the
music environment in the web. It was
hard but in the end
we provided a good quality website that satisfied the client.</p>
<div class="buttons">
<a href="#" class="primary-btn">Know More</a>
<a href="#" class="primary-btn outline external-link"> <span>Preview</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<section id="footer">
<div class="container">
<footer>
<div class="col-1">
<div class="logo"><a href="#">
<img src="./image/light-logo.svg" alt="">
</a></div>
<p>A freelance web designer and developer from Chittagong, Bangladesh. I generally make websites that have
extraordinary
designs and also have a good performance rate. </p>
</div>
<div class="col-2">
<h2 class="column-heading">Important<br>Links</h2>
<ul>
<li><a href="./index.html#home">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./index.html#Project">Project</a></li>
<li><a href="./index.html#testimonial">Testimonial</a></li>
</ul>
</div>
<div class="col-3">
<h2 class="column-heading">Contact<br>Info</h2>
<ul>
<li><a href="#">Webcifar@gmail.com</a></li>
<li><a href="#">+192482354</a></li>
<li><a href="#">Chittagong, Bangladesh</a></li>
</ul>
</div>
<div class="col-4">
<h2 class="column-heading">Social<br>Links</h2>
<ul>
<li><a href="#">FB</a></li>
<li><a href="#">TW</a></li>
<li><a href="#">IG</a></li>
<li><a href="#">Li</a></li>
</ul>
</div>
</footer>
</div>
</section>
<section id="copyright">
<div class="container">
<p> © Copyright 2021 AMY. All right Reserved</p>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>