-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
331 lines (317 loc) · 17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clone Portfolio Ibrahim Memon</title>
<link rel="stylesheet" href="./public/styles/styles.css" />
</head>
<body>
<header id="page-header">
<div class="container header-wrapper">
<div class="header-logo">
<img
loading="lazy"
class="logo-img"
src="./public/images/logo.png"
alt="logo"
/>
</div>
<nav class="navbar">
<a class="nav-item" href="#main">Home</a>
<a class="nav-item" href="#about">About</a>
<a class="nav-item" href="#lab">Lab</a>
</nav>
</div>
</header>
<main id="main">
<section class="container introduction">
<div class="basic-information">
<div class="me">
<div class="arrow">
<img
src="./public/images/arrow.png"
alt="arrow-image"
class="arrow-image"
/>
<div class="greeting">
Hello! I Am <span class="purple-text">Ibrahim Memon</span>
</div>
</div>
<div class="avatar">
<img
loading="lazy"
class="avatar-image"
src="./public/images/avatar.png"
alt="avatar"
/>
</div>
</div>
<div class="quote">
<p class="who">A Designer who</p>
<p class="judges-a-book">
Judges a book <br />
by its <span class="purple-text">cover</span>...
</p>
<p class="affirmative">
Because if the cover does not impress you what else can?
</p>
</div>
</div>
<div id="about" class="position">
<h1 class="current">I'm a Software Engineer.|</h1>
<p class="where">
Currently, I'm a Software Engineer at
<span class="icon-facebook">
<img
loading="lazy"
src="./public/images/icon-facebook.png"
alt="icon-facebook"
/>
</span>
Facebook,
</p>
</div>
<div class="objective">
A self-taught UI/UX designer, functioning in the industry for 3+ years
now. I make meaningful and delightful digital products that create an
equilibrium between user needs and business goals.
</div>
</section>
<section class="container work-experience">
<h2>Work Experience</h2>
<div class="experience-cards">
<img
loading="lazy"
class="experience-gradient-background"
src="./public/images/experience-gradient-background.png"
alt="experience-gradient-background"
/>
<div class="card">
<img
loading="lazy"
class="card-image"
src="./public/images/clb-on-the-mobile.png"
alt="clb-on-the-mobile"
/>
<div class="card-content">
<div class="title">CIB on the Mobile</div>
<div class="description">
Take your client onboard seamlessly by our amazing tool of
digital onboard process.
</div>
<a class="button-learn-more" href="#learn-more">LEARN MORE </a>
</div>
</div>
<div class="card">
<img
loading="lazy"
class="card-image"
src="./public/images/clb-on-the-mobile.png"
alt="clb-on-the-mobile"
/>
<div class="card-content">
<div class="title">CIB on the Mobile</div>
<div class="description">
Take your client onboard seamlessly by our amazing tool of
digital onboard process.
</div>
<a class="button-learn-more" href="#learn-more">LEARN MORE </a>
</div>
</div>
<div class="card">
<img
loading="lazy"
class="card-image"
src="./public/images/clb-on-the-mobile.png"
alt="clb-on-the-mobile"
/>
<div class="card-content">
<div class="title">CIB on the Mobile</div>
<div class="description">
Take your client onboard seamlessly by our amazing tool of
digital onboard process.
</div>
<a class="button-learn-more" href="#learn-more">LEARN MORE </a>
</div>
</div>
<div class="card">
<img
loading="lazy"
class="card-image"
src="./public/images/clb-on-the-mobile.png"
alt="clb-on-the-mobile"
/>
<div class="card-content">
<div class="title">CIB on the Mobile</div>
<div class="description">
Take your client onboard seamlessly by our amazing tool of
digital onboard process.
</div>
<a class="button-learn-more" href="#learn-more">LEARN MORE </a>
</div>
</div>
</div>
<div class="skills">
<div class="experience-towards">
<p>
I'm currently looking to join a
<span class="purple-text-light">cross-functional</span> team
</p>
<p>
that values improving people's lives through accessible design
</p>
</div>
<div class="space-skills">
<img
loading="lazy"
class="space-skills-image"
src="./public/images/space-skills.png"
alt="space-skills"
/>
</div>
</div>
<div id="lab" class="projects">
<div class="featured-project">
<div class="content">
<div class="tag">Featured Project</div>
<div class="title">Example Project</div>
<div class="description">
<!-- <img loading="lazy" src="./public/images/card-gradient.png" alt="" /> -->
A web app for visualizing personalized Spotify data. View your
top artists, top tracks, recently played tracks, and detailed
audio information about each track. Create and save new
playlists of recommended tracks based on your existing playlists
and more.
</div>
<div class="icons">
<img
loading="lazy"
src="./public/images/icon-park-solid_click.png"
alt="icon-park-solid_click"
/>
<img
loading="lazy"
src="./public/images/icon-park-solid_click.png"
alt="icon-park-solid_click"
/>
</div>
</div>
<div class="project-image-wrapper">
<img
loading="lazy"
class="project-gradient-background"
src="./public/images/project-gradient-background.png"
alt="project-gradient-background"
/>
<img
loading="lazy"
class="project-image"
src="./public/images/project-image.png"
alt="project-image"
/>
</div>
</div>
<div class="featured-project">
<div class="content">
<div class="tag">Featured Project</div>
<div class="title">Example Project</div>
<div class="description">
<!-- <img loading="lazy" src="./public/images/card-gradient.png" alt="" /> -->
A web app for visualizing personalized Spotify data. View your
top artists, top tracks, recently played tracks, and detailed
audio information about each track. Create and save new
playlists of recommended tracks based on your existing playlists
and more.
</div>
<div class="icons">
<img
loading="lazy"
src="./public/images/icon-park-solid_click.png"
alt="icon-park-solid_click"
/>
<img
loading="lazy"
src="./public/images/icon-park-solid_click.png"
alt="icon-park-solid_click"
/>
</div>
</div>
<div class="project-image-wrapper">
<img
loading="lazy"
class="project-gradient-background"
src="./public/images/project-gradient-background.png"
alt="project-gradient-background"
/>
<img
loading="lazy"
class="project-image"
src="./public/images/project-image.png"
alt="project-image"
/>
</div>
</div>
</div>
</section>
</main>
<footer id="page-footer">
<section class="container contact">
<h2 class="title">Contact</h2>
<div class="cap">
I'm currently looking to join a cross-functional team that values
improving people's lives through accessible design. or have a project
in mind? Let's connect.
<address>[email protected]</address>
</div>
<div class="social-media">
<a href="#!" class="instagram">
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
>
<path
d="M9.13586 0C6.65661 0 6.34485 0.0114198 5.37074 0.0548151C4.39663 0.100494 3.73314 0.25352 3.15187 0.479632C2.54216 0.708964 1.98989 1.0687 1.53368 1.53368C1.06898 1.99013 0.709293 2.54233 0.479632 3.15187C0.25352 3.732 0.0993524 4.39663 0.0548151 5.36732C0.0114198 6.34371 0 6.65433 0 9.137C0 11.6174 0.0114198 11.928 0.0548151 12.9021C0.100494 13.8751 0.25352 14.5386 0.479632 15.1198C0.713739 15.7205 1.0255 16.2298 1.53368 16.738C2.04072 17.2462 2.55005 17.5591 3.15073 17.7921C3.73314 18.0182 4.39549 18.1724 5.36846 18.2169C6.34371 18.2603 6.65433 18.2717 9.13586 18.2717C11.6174 18.2717 11.9269 18.2603 12.9021 18.2169C13.8739 18.1712 14.5397 18.0182 15.121 17.7921C15.7303 17.5626 16.2822 17.2029 16.738 16.738C17.2462 16.2298 17.558 15.7205 17.7921 15.1198C18.0171 14.5386 18.1712 13.8751 18.2169 12.9021C18.2603 11.928 18.2717 11.6174 18.2717 9.13586C18.2717 6.65433 18.2603 6.34371 18.2169 5.36846C18.1712 4.39663 18.0171 3.732 17.7921 3.15187C17.5625 2.54231 17.2028 1.9901 16.738 1.53368C16.282 1.06852 15.7297 0.708766 15.1198 0.479632C14.5374 0.25352 13.8728 0.0993524 12.901 0.0548151C11.9257 0.0114198 11.6162 0 9.13357 0H9.137H9.13586ZM8.31705 1.64674H9.137C11.5763 1.64674 11.8652 1.65473 12.8279 1.69927C13.7186 1.73924 14.2028 1.88884 14.5249 2.01331C14.9508 2.1789 15.2557 2.37761 15.5755 2.69736C15.8952 3.01712 16.0928 3.32088 16.2584 3.74799C16.384 4.06888 16.5325 4.55308 16.5724 5.44383C16.617 6.40652 16.6261 6.69544 16.6261 9.13357C16.6261 11.5717 16.617 11.8618 16.5724 12.8245C16.5325 13.7152 16.3829 14.1983 16.2584 14.5203C16.1119 14.917 15.8781 15.2757 15.5744 15.5698C15.2546 15.8895 14.9508 16.0871 14.5237 16.2527C14.204 16.3783 13.7198 16.5268 12.8279 16.5679C11.8652 16.6113 11.5763 16.6215 9.137 16.6215C6.69773 16.6215 6.40766 16.6113 5.44497 16.5679C4.55422 16.5268 4.07117 16.3783 3.74913 16.2527C3.35229 16.1064 2.99328 15.8731 2.6985 15.5698C2.39445 15.2752 2.16031 14.9162 2.01331 14.5192C1.88884 14.1983 1.73924 13.7141 1.69927 12.8233C1.65587 11.8606 1.64674 11.5717 1.64674 9.13129C1.64674 6.69201 1.65587 6.40424 1.69927 5.44154C1.74038 4.5508 1.88884 4.0666 2.01446 3.74456C2.18004 3.3186 2.37875 3.01369 2.6985 2.69394C3.01826 2.37418 3.32203 2.17662 3.74913 2.01103C4.07117 1.88541 4.55422 1.73695 5.44497 1.69584C6.28775 1.65702 6.61436 1.6456 8.31705 1.64445V1.64674ZM14.0133 3.16329C13.8693 3.16329 13.7267 3.19165 13.5937 3.24674C13.4607 3.30184 13.3399 3.38259 13.2381 3.48439C13.1363 3.58619 13.0555 3.70705 13.0004 3.84006C12.9453 3.97307 12.917 4.11562 12.917 4.25959C12.917 4.40356 12.9453 4.54612 13.0004 4.67913C13.0555 4.81214 13.1363 4.933 13.2381 5.0348C13.3399 5.1366 13.4607 5.21735 13.5937 5.27244C13.7267 5.32754 13.8693 5.3559 14.0133 5.3559C14.304 5.3559 14.5829 5.24039 14.7885 5.0348C14.9941 4.8292 15.1096 4.55035 15.1096 4.25959C15.1096 3.96884 14.9941 3.68999 14.7885 3.48439C14.5829 3.27879 14.304 3.16329 14.0133 3.16329ZM9.137 4.44459C8.5147 4.43489 7.89669 4.54907 7.31894 4.7805C6.74119 5.01193 6.21525 5.35598 5.77175 5.79262C5.32824 6.22926 4.97603 6.74976 4.73562 7.32383C4.4952 7.89789 4.37139 8.51405 4.37139 9.13643C4.37139 9.7588 4.4952 10.375 4.73562 10.949C4.97603 11.5231 5.32824 12.0436 5.77175 12.4802C6.21525 12.9169 6.74119 13.2609 7.31894 13.4924C7.89669 13.7238 8.5147 13.838 9.137 13.8283C10.3687 13.809 11.5434 13.3063 12.4076 12.4285C13.2718 11.5507 13.7562 10.3683 13.7562 9.13643C13.7562 7.9046 13.2718 6.72218 12.4076 5.84438C11.5434 4.96658 10.3687 4.46381 9.137 4.44459ZM9.137 6.09019C9.94476 6.09019 10.7194 6.41107 11.2906 6.98224C11.8618 7.55342 12.1827 8.3281 12.1827 9.13586C12.1827 9.94362 11.8618 10.7183 11.2906 11.2895C10.7194 11.8606 9.94476 12.1815 9.137 12.1815C8.32924 12.1815 7.55456 11.8606 6.98339 11.2895C6.41221 10.7183 6.09133 9.94362 6.09133 9.13586C6.09133 8.3281 6.41221 7.55342 6.98339 6.98224C7.55456 6.41107 8.32924 6.09019 9.137 6.09019Z"
fill="white"
/>
</svg>
</a>
<a href="#!" class="dribbble">
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.18078 0C4.13779 0 0.0449219 4.09286 0.0449219 9.13586C0.0449219 14.1788 4.13779 18.2717 9.18078 18.2717C14.2146 18.2717 18.3166 14.1788 18.3166 9.13586C18.3166 4.09286 14.2146 0 9.18078 0ZM15.215 4.21163C16.3397 5.58118 16.9622 7.29412 16.9794 9.0662C16.7213 9.01709 14.145 8.49178 11.5492 8.81839C11.4899 8.69048 11.4396 8.55116 11.3802 8.41298C11.2215 8.03613 11.0434 7.65014 10.8652 7.28242C13.7384 6.11417 15.0471 4.42975 15.2162 4.21049L15.215 4.21163ZM9.18078 1.34754C11.1621 1.34754 12.9756 2.08983 14.354 3.30946C14.2146 3.50817 13.035 5.08296 10.2611 6.12331C8.98207 3.77539 7.56602 1.85229 7.3479 1.55538C7.9487 1.4151 8.56382 1.34534 9.18078 1.34754ZM5.86104 2.08069C6.90672 3.52992 7.87275 5.03499 8.75482 6.58924C5.10847 7.55992 1.88808 7.54051 1.54092 7.54051C1.79199 6.35939 2.3125 5.25222 3.06187 4.30537C3.81123 3.35851 4.76919 2.59755 5.86104 2.08183V2.08069ZM1.37305 9.14728V8.90746C1.70993 8.91888 5.4956 8.96799 9.38976 7.7986C9.61701 8.23369 9.82486 8.68021 10.0236 9.12558L9.71523 9.21465C5.69317 10.5131 3.55309 14.0601 3.3738 14.3581C2.08544 12.9279 1.37265 11.0711 1.37305 9.14613V9.14728ZM9.18078 16.9436C7.44673 16.9463 5.7619 16.3673 4.39587 15.2991C4.53291 15.0114 6.11912 11.96 10.518 10.424C10.5386 10.4137 10.5477 10.4137 10.5683 10.4046C11.3099 12.319 11.867 14.2998 12.2322 16.3201C11.2683 16.7342 10.2298 16.9464 9.18078 16.9436ZM13.5317 15.6063C13.4518 15.1301 13.035 12.8519 12.0152 10.0472C14.4624 9.66117 16.6025 10.295 16.8697 10.384C16.7033 11.4377 16.3207 12.4455 15.7461 13.3443C15.1715 14.243 14.4172 15.0131 13.5306 15.6063H13.5317Z"
fill="white"
/>
</svg>
</a>
<a href="#!" class="google">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="19"
viewBox="0 0 18 19"
fill="none"
>
<path
d="M17.842 7.48972C17.9485 8.10292 18.0016 8.72421 18.0007 9.34659C18.0007 12.1262 17.0072 14.4764 15.2782 16.0672H15.2805C13.7685 17.4638 11.6901 18.2723 9.2257 18.2723C6.80272 18.2723 4.47898 17.3098 2.76567 15.5965C1.05237 13.8832 0.0898438 11.5594 0.0898438 9.13646C0.0898438 6.71348 1.05237 4.38974 2.76567 2.67643C4.47898 0.963128 6.80272 0.000602837 9.2257 0.000602837C11.4936 -0.0259578 13.6838 0.826065 15.3376 2.37821L12.7293 4.9865C11.7865 4.08773 10.5281 3.59555 9.2257 3.61612C6.84238 3.61612 4.81765 5.22403 4.09592 7.38923C3.71325 8.52379 3.71325 9.75255 4.09592 10.8871H4.09934C4.8245 13.0489 6.84581 14.6568 9.22913 14.6568C10.4602 14.6568 11.5177 14.3416 12.3376 13.7843H12.3342C12.8103 13.4689 13.2175 13.0603 13.5314 12.5832C13.8452 12.106 14.0591 11.5703 14.1602 11.0082H9.2257V7.49086H17.842V7.48972Z"
fill="white"
/>
</svg>
</a>
</div>
</section>
</footer>
<script src="./public/scripts/scripts.js" defer></script>
</body>
</html>