-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (198 loc) · 10.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio Website using Tailwind CSS</title>
<link href="/dist/output.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-background overflow-x-hidden">
<!-- header -->
<header class="fixed top-0 right-0 left-0 md:py-1 transition-all duration-300">
<nav class="max-w-7xl mx-auto bg-gray-800 md:bg-transparent p-5 order-[10001]">
<div class="flex items-center justify-between">
<a href="/" class="text-white font-bold text-lg flex items-center gap-3"><img src="src/img/Logo.svg" alt=""
class="w-8 h-8" /> Portfolio</a>
<!-- only for large device -->
<div class="hidden md:flex space-x-10">
<a href="/" class="text-primary hover:text-gray-300">Home</a>
<a href="#about" class=" text-white hover:text-gray-300">About</a>
<a href="#projects" class="text-white hover:text-gray-300">Projects</a>
<a href="#skills" class="text-white hover:text-gray-300">Skills</a>
<a href="#contact" class="text-white hover:text-gray-300">Contact Us</a>
</div>
<!-- menu btn, only disply on mobile -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white text-2xl">
<i class="bx bx-menu"></i>
</button>
</div>
</div>
<!-- mobile menu -->
<div id="mobile-menu" class="hidden md:hidden">
<a href="#" class="block text-white py-2 mt-3 hover:bg-gray-700">Home</a>
<a href="#about" class=" hover:text-gray-300 text-white">About</a>
<a href="#projects" class="block text-white py-2 hover:bg-gray-700">Projects</a>
<a href="#skills" class="text-white hover:text-gray-300">Skills</a>
<a href="#contact" class="text-white hover:text-gray-300">Contact Us</a>
</div>
</nav>
</header>
<!-- banner section -->
<section class="max-w-7xl mx-auto px-5 my-12" id="about">
<div class="flex md:flex-row flex-col justify-between items-center text-white gap-4 py-10">
<div class="md:w-1/2">
<p class="text-xl font-medium mb-4">
Hello, <span class="text-white">I'm</span>
</p>
<h1 class="font-bold text-4xl tracking-[3.22px] mb-5"><span class="text-primary">Mohd Azbar Khan</span></h1>
<p class="text-2xl font-montserrat mb-5">
Frontend Web Developer
</p>
<p class="text-xl mb-12 md:w-3/4 text-justify leading-8">
I am committed to finding innovative solutions and continuously
experimenting to help an organization to success growth at immense rate.
</p>
<button class="py-4 px-10 rounded-md bg-primary text-white font-bold">
Let's Talk
</button>
<!-- social btn -->
<div class="mt-12 mb-8 flex gap-4 items-center">
<p>Check out My:</p>
<div class="flex space-x-3">
<a href="https://www.linkedin.com/in/mohd-azbar-khan-303107245/" target="_blank"><img
src="src/icons/linkedIn.svg" alt="" class="w-8 h-8" /></a>
<a href="#" target="_blank"><img src="src/icons/twitter.svg" alt="" class="w-8 h-8" /></a>
</div>
</div>
</div>
<div class="md:w-1/2 order-first md:order-none">
<img src="src/img/hero.jpg" alt="my-image" class="md:ml-20 w-full rounded-full " />
</div>
</div>
</section>
<!-- What I Do -->
<section class="max-w-7xl mx-auto px-5 my-6 text-white" id="Services">
<div class="text-center">
<h3 class="text-primary text-3xl font-bold mb-16">What I Do</h3>
</div>
<div class="my-16 flex flex-col md:flex-row justify-around items-center gap-12">
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">Web Developer</h5>
<p class="text-justify">
Strive to create visually impact designs that effectively
communicate ,messages & meet their unique needs.
</p>
</div>
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">Frontend Developer</h5>
<p class="text-justify">
Passionate Frontend Developer with a keen eye for design and a strong foundation in modern web technologies.
</p>
</div>
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">UI/UX</h5>
<p class="text-justify">
My work in UI (User Interface) design focuses on crafting clean, modern layouts and interactive elements that
captivate users at first glance.
</p>
</div>
</div>
</section>
<!-- skills section -->
<section class="max-w-7xl mx-auto px-5 my-6 text-white" id="skills">
<div class="text-center">
<h3 class="text-primary text-3xl font-bold mb-16">What Skills I have</h3>
</div>
<div class="my-16 flex flex-col md:flex-row justify-around items-center gap-12">
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/graphic-design.png" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">HyperText <span class="text-primary">Markup </span>Languaga</h5>
<p class="text-justify">
It's a markup language to struture content of the webpage
</p>
</div>
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/css.png" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">Cascading <span class="text-primary">Style </span> Sheets</h5>
<p class="text-justify">
It is used for styling purpose for styling the webpages
</p>
</div>
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
<img src="src/img/js.png" alt="" class="w-[196px] mb-12 mx-auto" />
<h5 class="text-center my-5 text-xl">JavaScript
<p class="text-justify">
It allows the user to make an interactive websites
</p>
</div>
</div>
</section>
<!-- projects -->
<section class="px-5 my-32 mx-auto max-w-7xl" id="projects">
<div class="text-center text-white">
<h3 class="text-3xl font-bold mb-5">
Recent <span class="text-primary">Projects</span>
</h3>
<p class="mb-6 md:w-3/4 mx-auto">
I am passionate about crafting user-friendly experiences and staying ahead of design trends and technologies to
deliver high-quality designs that not only meet user needs but also exceed their expectations.
</p>
</div>
<div class="flex md:flex-row flex-col items-center justify-between gap-8 my-20">
<div
class="border border-primary shadow-xl shadow-[#5dadec3b] md:w-[741px] md:h-96 mx-auto rounded-2xl p-5 md:p-0">
<img src="src/img/project-1.png" alt="" class="p-5 w-full" />
</div>
<div class="border border-primary shadow-xl shadow-[#5dadec3b] md:w-[741px] md:h-96 mx-auto rounded-2xl p-5">
<img src="src/img/project-2.png" alt="" class="w-full p-5" />
</div>
</div>
</section>
<!-- Contact Form-->
<div class="contactus-form-container " id="contact">
<div class="container">
<h1 class="contactus-heading text-center">Contact me</h1>
<h3 class="contactus-subheading text-center ">Want to <span class="text-primary">discuss</span> something?</h3>
<div class="contactus-form-container">
<form class="form w-full md:w-3/4 lg:w-2/3" action="">
<div class="formfield-container">
<input
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
type="text" name="name" id="" placeholder="Enter your name">
<input
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
type="email" name="email" id="" placeholder="Enter your email" />
<input
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
type="text" name="subject" id="" placeholder="Enter your subject">
<textarea
class="formfield formfield-textarea w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
name="message" type="text" id="" cols="30" rows="10" placeholder="Enter your message"></textarea>
<div>
<button type="submit" class="btn font-bold bg-primary text-white" id="submit-btn">Send Message
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<footer class="bg-gray-900 text-white py-10 flex flex-col items-center justify-center space-y-2 relative">
<!-- Faded Portfolio Text -->
<h1 class="text-lg font-bold text-white opacity-10">Portfolio</h1>
<!-- Copyright Text -->
<p class="text-sm text-gray-400 opacity-60">Copyright©2025</p>
</footer>
<!-- script tags -->
<script src="src/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="src/review.js"></script>
</body>
</html>