-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
259 lines (258 loc) · 9.97 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
<!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.0" />
<!-- Main Style Sheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Icon stylesheet CDN https://remixicon.com/ and github https://github.com/Remix-Design/RemixIcon -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<title>Waseem Khan - Portfolio</title>
</head>
<body>
<!-- Header Primary Start -->
<header class="header-primary" id="home">
<div class="logo">
<a href="/">
<img src="assets/images/Waseem-Khan-Logo-165x39.png" alt="Site Logo" />
</a>
</div>
<div id="navigation" class="navigation">
<nav class="nav-bar">
<ul id="nav-list" class="nav-list">
<li class="nav-item">
<a href="/" class="nav-link bounce">Home</a>
</li>
<li class="nav-item">
<a href="#project" class="nav-link">Project</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="call-to-action">
<a href="#contact">
<button class="primary-btn">
Book a Call
<span class="action-icon">
<img src="assets/icons/1f919.svg" alt="Book a call icon" />
</span>
</button>
</a>
</div>
<div class="navigation-icon">
<i class="ri-menu-fold-line" id="toggle"></i>
</div>
</header>
<!-- Hero Section Start -->
<section class="hero">
<div class="img-author">
<img src="assets/images/waseem.jpeg" alt="Author Image" />
</div>
<div class="author-info">
<p>
You can count on me to work tirelessly until your project is completed to your
satisfaction.
</p>
<h1>
Hi, I'm Waseem Khan
<span class="action-icon icon2">
<img class="icon2" src="assets/icons/1f44b.svg" alt="Book a call icon" />
</span>
</h1>
<h3>I'm a Passionate Front-end Developer & WordPress Enthusiast</h3>
<a href="#contact"><button class="primary-btn contact">Contat me!</button></a>
<div class="social-icon">
<a href="https://www.linkedin.com/in/wasimkhan96/" target="_blank">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://twitter.com/WasimKhan96" target="_blank">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/Wacemk96" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</div>
</div>
</section>
<!-- About Section Start -->
<section class="main about" id="about">
<div class="about-title">
<h1># About me</h1>
<hr />
</div>
<div class="about-author">
<div class="about-author-info">
<p>
I am highly skilled in creating functional and visually appealing websites that meet the
needs of businesses and organizations. As specialize in front-end development and
WordPress, and I have a keen eye for detail that allows me to bring simple ideas to life
in a creative and effective way. As a freelance web developer, I am passionate about
helping people from around the world by developing highly SEO-optimized and
user-friendly websites and landing pages for businesses of any size or industry.
</p>
<li>JavaScript (ES6+)</li>
<li>HTML</li>
<li>CSS</li>
<li>WordPress</li>
</div>
<div class="img-author">
<img
class="about-img"
src="assets/images/waseem-removebg-preview.png"
alt="Author Image"
/>
</div>
</div>
</section>
<!-- Project Section -->
<section class="main projects" id="project">
<div class="about-title project-title">
<h1># Projects</h1>
<hr />
</div>
<h1 class="project-heading">
My track record speaks for itself - I have a proven ability to deliver high-quality work
that meets and exceeds client expectations.
</h1>
<!-- Project One -->
<div class="project-data">
<div class="project-img one"></div>
<div class="project-info">
<h1 class="project-title">Digital Marketing Web (WP)</h1>
<p class="project-text">
Syedalishah.com is a digital marketing website that was created from scratch in a
remarkably short time frame. The entire process, including website design, logo design,
domain acquisition, development, and delivery, was completed within a mere two hours.
</p>
<button class="primary-btn life-demo">
<i class="fa-solid fa-paperclip"></i>
Live Demo
</button>
</div>
</div>
<!-- Project Two -->
<div class="project-data">
<div class="project-info">
<h1 class="project-title">Dropshiping Store (Shopify)</h1>
<p class="project-text">
I built this dropshipping store using the free Shopify theme, Dawn, which provided a
solid foundation for the website's design and functionality. To further customize and
enhance the site's features, I utilized the powerful GemPages Page builder. With this
user-friendly tool, I was able to create a visually stunning and easy-to-navigate
storefront, complete with all the necessary components for a successful dropshipping
business.
</p>
<button class="primary-btn life-demo">
<i class="fa-solid fa-paperclip"></i>
Live Demo
</button>
</div>
<div class="project-img two"></div>
</div>
<!-- Project Three -->
<div class="project-data">
<div class="project-img three"></div>
<div class="project-info">
<h1 class="project-title">ClaimFlowHealth (WP)</h1>
<p class="project-text">
I recently completed an interesting project for a client who had no prior experience
with websites. I consulted him on WordPress and website functionality and helped him
purchase his domain. I completed the project within two days, designing his website from
scratch and assisting him in purchasing his first domain and Bluehost hosting.
</p>
<button class="primary-btn life-demo">
<i class="fa-solid fa-paperclip"></i>
Live Demo
</button>
</div>
</div>
<!-- Project Four -->
<div class="project-data">
<div class="project-info">
<h1 class="project-title">Clothing Fashion (WooCommerce)</h1>
<p class="project-text">
I recently had the opportunity to work on a Clothing Fashion website using WordPress,
Elementor, and WooCommerce. This was an exciting project, as it allowed me to create a
visually appealing and functional website for my client's fashion business.
</p>
<button class="primary-btn life-demo">
<i class="fa-solid fa-paperclip"></i>
Live Demo
</button>
</div>
<div class="project-img four"></div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section" id="contact">
<div class="contact-me">
<p>
Hello
<span class="icon-3">
<img class="" src="assets/icons/1f919.svg" alt="Book a call icon" />
</span>
would you like to contact me
</p>
<h1>Get in touch!</h1>
<p class="contact-text">
Although I’m currently looking for new opportunities, or freelance projects my inbox is
always open. Whether you have a question or just want to say hi, I’ll try my best to get
back to you!
</p>
<a href="mailto:[email protected]">
<button class="primary-btn sayhello">
Say Hello!
<span class="icon-hello">
<img class="" src="assets/icons/1f44b.svg" alt="Book a call icon" />
</span>
</button>
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="bookacall">
<div class="footer-nav">
<div class="w-icon">
<img src="assets/icons/w icon logo.png" alt="" />
</div>
<div class="social-icon-footer">
<a target="_blank" href="https://www.facebook.com/waseem.khan096">
<i class="fa-brands fa-facebook footer-icon"></i>
</a>
<a target="_blank" href="https://twitter.com/WasimKhan96">
<i class="fa-brands fa-twitter footer-icon"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/wasimkhan96/">
<i class="fa-brands fa-linkedin footer-icon"></i>
</a>
<a target="_blank" href="https://github.com/Wacemk96">
<i class="fa-brands fa-github footer-icon"></i>
</a>
<a target="_blank" href="https://www.pinterest.com/firstblogging/">
<i class="fa-brands fa-pinterest footer-icon"></i>
</a>
</div>
</div>
<div class="backtotop">
<img src="assets/icons/back to the top icon.png" alt="" />
</div>
<p class="footer-text">
Designed & Developer with HTML/CSS/JavaScript <br />
by Waseem Khan
</p>
</footer>
<!-- Script Font Awesome -->
<script src="https://kit.fontawesome.com/a9bf99198c.js" crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
</body>
</html>