-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (171 loc) · 9.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nafiu.xyz</title>
<!-- Font Link Azeret Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- CSS Link -->
<link rel="stylesheet" href="style/style.css">
<!-- favicon logo -->
<link rel="shortcut icon" href="./assets/Group.png" type="image/x-icon">
</head>
<body class="azeret-mono-normal">
<!-- Nav bar -->
<header >
<nav>
<div class="container-flex">
<a href="index.html" class="logo">Nafiu.xyz</a>
<a href="./demo.txt" download ><button class="btn-primary">Download Resume</button></a>
</div>
</nav>
</header>
<!-- Banner Section -->
<section class="banner">
<div class="banner-flex">
<img src="./assets/Group.png" alt="a programmer" class="boy-logo">
<h1 class="banner-headline">"In the near future, I hope to become a Developer."</h1>
<p class="all-p">
My motive for becoming a MERN developer is to craft dynamic, responsive web applications, mastering MongoDB, Express.js, React, and Node.js to drive impactful, innovative solutions for users and businesses.
</p>
<a href="#contact" ><button class="contact-btn">Contact With Me</button></a>
</div>
</section>
<!-- Why web development -->
<section class="why">
<div class="first">
<h1>Why Web Development??</h1>
<p class="all-p">Web development empowers me to transform ideas into interactive experiences. It combines creativity with technical skill, enabling me to build dynamic, user-friendly websites that solve real-world problems, enhance user engagement, and drive digital innovation in a constantly evolving field.</p>
</div>
<div class="second">
<div class="second-details">
<h1 class="all-title">I will Do Coding and Change The World</h1>
<p class="all-p">
It's reflects my commitment to leveraging programming skills to create innovative solutions, drive technological advancements, and make a positive impact on society through transformative, impactful web development projects.
</p>
<a href="#" ><button class="btn-primary">Learn More</button></a>
</div>
<img src="./assets/Layer_1.png" alt="group4">
</div>
<div class="second">
<img src="./assets/Group 3.png" alt="group4">
<div class="second-details">
<h1 class="all-title">I will help People by creating Modern Web System</h1>
<p class="all-p">
It's highlights my dedication to developing advanced, user-friendly web solutions that address needs, improve lives, and enhance experiences through cutting-edge technology and innovative design.
</p>
<a href="#" ><button class="btn-primary">Learn More</button></a>
</div>
</div>
<div class="second">
<div class="second-details">
<h1 class="all-title">I can Do and I will Do for Mine improvement</h1>
<p class="all-p">
It's emphasizes my determination to continuously enhance my skills, achieve personal growth, and strive for excellence in web development, ensuring I deliver outstanding, innovative solutions.
</p>
<a href="#" ><button class="btn-primary">Learn More</button></a>
</div>
<img src="./assets/Group 4.png" alt="group4">
</div>
</section>
<!-- My Inspiration -->
<section class="inspiration">
<div class="first">
<h1>My Inspiration</h1>
<p class="all-p">"My inspiration" signifies my driving force and passion, motivating me to excel in web development, create impactful solutions, and continuously push the boundaries of innovation and creativity in the tech world.field.</p>
</div>
<div class="video">
<iframe width="100%" height="650" src="https://www.youtube.com/embed/DGHn2uOAVCE?si=r_Fbr0UwOzHJUY2o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<!-- My Current Target -->
<section class="current-target">
<div class="first">
<h1>My Current Target</h1>
<p class="all-p">"My current target" underscores my focus on achieving specific goals, advancing my skills in web development, and delivering high-quality, innovative projects that meet client needs and drive technological progress.</p>
</div>
<div class="lang">
<div class="lang-box bg-colour1">
<img src="./assets/html.png" alt="html">
<h1 class="all-title1">HTML</h1>
<p class="all-p">HTML knowledge empowers me to craft structured, accessible, and responsive web content efficiently and effectively.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
<div class="lang-box bg-colour2">
<img src="./assets/css.png" alt="html">
<h1 class="all-title1">CSS</h1>
<p class="all-p">CSS expertise allows me to design visually appealing, responsive, and user-friendly web interfaces with precision.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
<div class="lang-box bg-colour3">
<img src="./assets/js.png" alt="html">
<h1 class="all-title1">JavaScript</h1>
<p class="all-p">JavaScript proficiency enables me to develop dynamic, interactive, and engaging web applications with enhanced functionality.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
</div>
</section>
<!-- My Next Target -->
<section class="next-target">
<div class="first">
<h1>My Next Target</h1>
<p class="all-p">My next target is mastering React, Node.js, and MongoDB to build robust, scalable, and high-performance web applications with seamless user experiences.
</p>
</div>
<div class="target-box">
<div class="lang-box">
<img src="./assets/react.png" alt="html">
<div class="target-details">
<h1 class="all-title1">React</h1>
<p class="all-p">My next target is mastering React to create dynamic, responsive, and efficient user interfaces for modern web applications.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
</div>
<div class="lang-box">
<img src="./assets/nodejs.png" alt="html">
<div class="target-details">
<h1 class="all-title1">NodeJs</h1>
<p class="all-p">My next target is mastering Node.js to develop scalable, high-performance server-side applications with seamless backend functionality.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
</div>
<div class="lang-box">
<img src="./assets/mongodb.png" alt="html">
<div class="target-details">
<h1 class="all-title1">React</h1>
<p class="all-p">My next target is mastering MongoDB to manage and store data efficiently, enabling robust and scalable web application development.</p>
<a href="#" ><button class="btn-target">Learn More</button></a>
</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact">
<h1 class="all-title">I Need Support</h1>
<p class="all-p">I need support to enhance my skills, overcome challenges, and achieve my goals in web development, ensuring continuous growth and success.</p>
<div class="form">
<input type="text" name="text" id="text" placeholder="Suggest me any feedback for me">
<input type="submit" value="Submit" class="btn-primary">
</div>
</section>
<footer>
<div class="footer">
<h1>An Open Commitment by Nafiu</h1>
<div class="social">
<a href="https://www.facebook.com/abdullaal.nafiu/" target="_blank">
<img src="./assets/facebook.png" alt="facebook">
</a>
<a href="https://github.com/aanafiu" target="_blank">
<img src="./assets/github.png" alt="github">
</a>
<a href="https://www.linkedin.com/in/aanafiu/" target="_blank">
<img src="./assets/linkedin-icon 1.png" alt="linkedin">
</a>
</div>
</div>
</footer>
</body>
</html>