-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (261 loc) · 12.5 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
<!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">
<title>Hasan Naim</title>
<!-- Add Icon In Title Bar -->
<link rel = "icon" href =
"./img/avatar.png"
type = "image/x-icon">
<!-- Font-Awesome Css -->
<link rel="stylesheet" href="/font-awesome files/all.min.css">
<!-- Coustom Css -->
<link rel="stylesheet" href="/dist/css/main.css">
</head>
<body onload="hide_preloaderDiv">
<!-- Preloader For The whole page -->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<!-- Go To Github Section, -->
<section class="go_to_github">
<div class="container">
<a href="https://github.com/hasan-naim/hasan-naim.github.io" target="_blank">
<div class="content">
<p class="content_text">Go to github to this project</p>
<span class="githubBtn"><i class="fab fa-github"></i></span>
</div>
</a>
<span class="exitBtn"><i class="fas fa-times"></i></span>
</div>
</section>
<div class="go_to_github_btn opacity-0">
<div class="text">
<a href="https://github.com/hasan-naim/hasan-naim.github.io" target="_blank">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<!-- Header Section, Code for Header, Navigation -->
<header>
<div class="container">
<div class="logoAndIcon">
<div class="navbar_link logo navbar_links">
<a href="#home">MHN</a>
</div>
<!-- Toggle Icon -->
<div class="navbar_toggle navbar_link">
<i class="fas fa-bars"></i>
</div>
</div>
<!-- Code for navigation items -->
<div class="div_items">
<ul class="navbar_items navbar_items_first">
<li class="navbar_link navbar_links"><a href="#home">Home</a></li>
<li class="navbar_link navbar_links"><a href="#project">Projects</a></li>
<li class="navbar_link navbar_links"><a href="#contact">Contact</a></li>
<li class="navbar_link navbar_links"><a href="#about">About</a></li>
</ul>
<ul class="navbar_items navbar_items_social">
<li class="navbar_link navbar_links">
<a href="https://www.github.com/hasan-naim" target="_blank">
<i class="fab fa-github"></i>
</a>
</li>
<li class="navbar_link navbar_links">
<a href="https://www.facebook.com/hasan.naim6246" target="_blank">
<i class="fab fa-facebook"></i></a>
</li>
<li class="navbar_link navbar_links">
<a href="https://twitter.com/HasanNaim20" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="navbar_link navbar_links">
<a href="mailto:[email protected]" target="_blank" title="[email protected]">
<i class="fas fa-at "></i>
</a>
</li>
</ul>
</div>
</div>
</header>
<!-- Home section , code for home sectin -->
<section class="home" id="home">
<div class="container">
<div class="home_div">
<img src="/img/avatar.png" alt="pictur of a avatar" class="home_img my_img">
<h1 class="home_heading heading" alt="Hasan Naim" title="Hasan Naim">Hasan Naim</h1>
<span class="home_subHeading" title="Hasan Naim Is a Web Designer">I'm a web designer</span>
<div class="div_social_media">
<a href="https://github.com/hasan-naim" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="https://www.facebook.com/hasan.naim6246" target="_blank">
<i class="fab fa-facebook"></i>
</a>
<a href="https://twitter.com/HasanNaim20" target="_blank">
<i class="fab fa-twitter"></i>
</a>
<a href="mailto:[email protected]" target="_blank" title="[email protected]">
<i class="fas fa-at "></i>
</a>
</div>
</div>
<div class="div_scroll">
<span class="scroll_text">Scroll down</span>
<i class="fas fa-angle-double-down"></i>
</span>
</div>
</div>
</section>
<!-- About Section, code for about section -->
<section class="about_me" id="about">
<div class="container">
<div class="div_about_me">
<div class="about_me_imgAndText">
<img src="/img/avatar.png" alt="">
<span class="component_heading">About Me</span>
</div>
<div class="div_about_me_text">
<p>My name is Hasan Naim. I'm a front-end Web Developer. I also design websites in FIGMA. I have pretty much experience in this field about 2+ years. <a href="#" class="read_in_details"> read in details</a></p>
</div>
</div>
</div>
</section>
<!-- About Me In Details Section In details-->
<section class="about_me_in_details display_hide">
<div class="container about_me_container">
<div class="about_me_header">
<h1 class="heading">About Me</h1>
<span class="about_me_icon"><i class="fas fa-times"></i></span>
</div>
<div class="description_about_me">
<p>HI! I am Hasan Naim. At this time I am a Front-End Web Developer. Currently I am living in Bangladesh.</p>
<p>I am a High School kid whose passion is contributing to the world by programming. I love to build new things every day.</p>
<p>I am an introverted boy more than an extrovert. I like being at home and do some programming or watching movies. And I love to being healthy that's why sometimes I cook for myself. </p>
<p>You can call me a tech boy because I love technology. They are fascinating.</p>
</div>
</div>
</section>
<!-- code for project sectin -->
<section class="section_project" id="project">
<div class="container">
<div class="div_project">
<h1 class="component_heading">Project</h1>
<!-- Projects -->
<div class="all_projects">
<!-- Music Player with js website project -->
<div class="project component_project">
<a href="https://hasan-naim.github.io/music-player/" target="_blank" class="">
<div class="project_img">
<img src="/img/music-player(js).png" alt="Music-player" srcset="">
</div>
<div class="project_description">
<h2 class="title">Music Player(JS)
</h2>
<p class="desc">This is a music player. I designed this website and made functionable. This is made with vanila javascript.</p>
</div>
</a>
</div>
<!-- Calculator Project -->
<div class="project component_project">
<a href="/projects/Calculator/calculator.html" target="_blank" class="">
<div class="project_img">
<img src="/img/calculator_project.png" alt="a calculator website" srcset="">
</div>
<div class="project_description">
<h2 class="title">Calculator</h2>
<p class="desc">This project is made with ES6 Javascript(Class).</p>
</div>
</a>
</div>
<!-- learn bootstrap and sass by building a website -->
<div class="project component_project">
<a href="https://hasan-naim.github.io/learning-bootstrap5-and-scss/" target="_blank" class="">
<div class="project_img">
<img src="/img/learn-bootstrap-and-sass.jpg" alt="a website with bootstrap and sass" srcset="">
</div>
<div class="project_description">
<h2 class="title">Bootstrap And Scss
</h2>
<p class="desc">This website is made with bootstrap 5 and scss.</p>
</div>
</a>
</div>
<!-- Around website project -->
<div class="project component_project">
<a href="https://hasan-naim.github.io/Around/" target="_blank" class="">
<div class="project_img">
<img src="/img/aroundProject.png" alt="Around Website image" srcset="">
</div>
<div class="project_description">
<h2 class="title">Around Website
</h2>
<p class="desc">I made this website to understand better bootstrap 5 and how to customize bootstrap default property.</p>
</div>
</a>
</div>
<!-- Basic todo with js website project -->
<div class="project component_project">
<a href="https://hasan-naim.github.io/basic-todoApp/" target="_blank" class="">
<div class="project_img">
<img src="/img/basic-todo(js).png" alt="Todo app" srcset="">
</div>
<div class="project_description">
<h2 class="title">A Basic Todo(JS)
</h2>
<p class="desc">I made this todo app to understand javascript core functionality. This project teach me how to work with multiple functions.</p>
</div>
</a>
</div>
<!-- Social Project -->
<div class="project component_project">
<a href="https://hasan-naim.github.io/Social" target="_blank">
<div class="project_img">
<img src="/img/social-project.png" alt="Social website">
</div>
<div class="project_description">
<h2 class="title">Social
</h2>
<p class="desc">I made this website to understand better html and css.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Code For Skill Section -->
<section class="skill_section" id="skill">
<div class="container">
<div class="div_skill">
<h1 class="component_heading">Skill</h1>
<ul>
<li><i class="fab fa-html5"></i> HTML 5</li>
<li><i class="fab fa-css3-alt"></i> CSS 3</li>
<li><i class="fab fa-js-square"></i> Javascript</li>
<li><i class="fab fa-sass"></i> Sass</li>
<li><i class="fab fa-bootstrap"></i> Bootstrap</li>
<li><i class="fab fa-github"></i> Git and Github</li>
<li><i class="fab fa-react"></i> React Js (beginner)</li>
</ul>
</div>
</div>
</section>
<!-- code for footer section -->
<footer>
<div class="container">
<div class="footer_div">
<p>Created By <span> @Hasan Naim</span></p>
</div>
</div>
</footer>
<!-- font-Awesome Javascript -->
<script src="/font-awesome files/all.min.js"></script>
<!-- Coustom Javascript -->
<script src="/js/main.js"></script>
</body>
</html>