-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (229 loc) · 9.89 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
<!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>Personal Portfolio || Website</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="favicon/fav.png" type="image/x-icon" />
</head>
<body>
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ HEADER SECTION START ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!------------------------- 🚩 NAV SECTION START 💭 ---------------------------->
<header></header>
<!------------------------- 🚩 NAV SECTION END 💭 ------------------------------>
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ HEADER SECTION END ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ MAIN SECTION START ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<main>
<!----------------------- 🚩 TOP BANNER SECTION START 💭 ----------------------->
<section>
<div class="first-banner">
<div>
<h1 class="top-text">
Stay Focused on <br />
<span class="custom-color">Mission 2023</span>
</h1>
<p id="first-banner-text">
<b>Who are the mern stack developer?</b>
</p>
<p id="first-banner-text">
A MERN stack developer is an expert in MongoDB, Express, <br />
React and Node. They are proficient in JavaScript and use <br />
HTML, CSS and JavaScript to handle front-end operations <br />
and JavaScript with Node. js to handle back-end operations.
</p>
<a
target="blank"
class="explore-button"
href="https://www.linkedin.com/in/nurulahsanbd"
>Explore Now</a
>
<p class="about-text">Scroll down to explore more about us.</p>
</div>
<div class="first-banner-img">
<img width="430px" src="images/person/my-pic.png" alt="" />
</div>
</div>
</section>
<!------------------------- 🚩 TOP BANNER SECTION END 💭 ----------------------->
<!----------------------- 🚩 My Mission SECTION START 💭 ----------------------->
<section class="mission-section">
<h1 class="mission-title">
My Mission in <span class="custom-color">2023</span>
</h1>
<div class="flexible-container">
<div class="custom-img-size" id="bg-color-one">
<img src="images/illustrators/illustrator-1.png" alt="" />
<div class="custom-text">
<h3>Mission</h3>
<p>
Mission needs a Full Stack Developer to join our not bored but
very busy in a good way team. As a important Mission dev team
member, proficiency been perfecting the last few years building
custom websites in MERN Stack.
</p>
</div>
</div>
<div class="custom-img-size" id="bg-color-two">
<img src="images/illustrators/illustrator-2.png" alt="" />
<div class="custom-text">
<h3>Vision</h3>
<p>
My Vision of Tomorrow... <br />
Tomorrow's world will be much different and also, much better in
many ways. We will have developed much better technology. We
will have made huge medical advancements.
</p>
</div>
</div>
<div class="custom-img-size" id="bg-color-three">
<img src="images/illustrators/illustrator-3.png" alt="" />
<div class="custom-text">
<h3>Goals</h3>
<p>
Setting a goal is crucial to keep yourself on track. Also let’s
be honest it’s much more fun learning to code when you know what
you want to achieve. First, Also let’s be honest think about
what you want.
</p>
</div>
</div>
</div>
</section>
<!----------------------- 🚩 My Mission SECTION END 💭 ----------------------->
<!----------------------- 🚩 Develop SECTION START 💭 ----------------------->
<section>
<div class="develop-section">
<div class="develop-img bg-img-one">
<img src="images/pictures/coding.png" alt="" />
</div>
<div class="develop-custom-text">
<h1 class="develop-text">
Develop <br />
Without Limits
</h1>
<p>
Development Without Limits’ strategic vision and attention to
detail were key to our project’s success—that, and our shared
commitment to developing and strengthening the afterschool
profession.
</p>
<a class="documentation-button" href="#">Read the Documentation</a>
</div>
</div>
</section>
<!----------------------- 🚩 Develop SECTION END 💭 ----------------------->
<!----------------------- 🚩 Global Community SECTION START 💭 ----------------------->
<section>
<div class="global-community-section">
<div class="global-community-custom-text">
<h1 class="develop-text">
Know our <br />
Global Community
</h1>
<p>
Know our Global Communities delivers essential solutions to
complex challenges from the intersection of humanitarian
assistance, sustainable development and financial inclusion.We
work to advance inclusive development and equitable growth.
</p>
<a class="documentation-button" href="#">Read the Documentation</a>
</div>
<div class="project-img bg-img-two">
<img src="images/pictures/project.png" alt="" />
</div>
</div>
</section>
<!----------------------- 🚩 Global Community SECTION END 💭 ----------------------->
<!----------------------- 🚩 Corona Application SECTION START 💭 ----------------------->
<section>
<h1 class="corona-app-title">
Build <span class="custom-color">Corona Application</span>
</h1>
<div class="corona-app-section">
<div class="corona-app-img">
<img src="images/pictures/app.png" alt="" />
</div>
<div class="stay-safe-text">
<h1 class="corona-text">
Stay safe with <br />
Go<span class="custom-color">Corona.</span>
</h1>
<p>
COVID Safe app The COVIDSafe app is a tool that helps identify
<br />
people exposed to coronavirus (COVID-19). This helps us support
<br />
and protect you, your friends and family. Please read the content
<br />
on this page before downloading.
</p>
<a class="documentation-button" href="#">App Features</a>
</div>
</div>
</section>
<!----------------------- 🚩 Corona Application SECTION END 💭 ----------------------->
</main>
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ MAIN SECTION END ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ BONUS SECTION START ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!------------------------ 🚩 footer section START 💭 ------------------------------------>
<section>
<h1 class="corona-app-title">
Recently I Completed Some <br />
<span class="custom-color">MERN Stack Projects</span>
</h1>
<div class="project-section">
<div class="project-img-size box-shadow">
<img src="images/project/1.png" alt="" />
<div class="live-text">
<h3>Best Traveling Website</h3>
<a
target="blank"
class="documentation-button live-btn"
href="https://best-travel-webapp.web.app"
>Live Link</a
>
</div>
</div>
<div class="project-img-size box-shadow">
<img src="images/project/2.png" alt="" />
<div class="live-text">
<h3>Arabic University Website</h3>
<a
target="blank"
class="documentation-button live-btn"
href="https://ahsanul-uloom-cadet-madrasha.netlify.app"
>Live Link</a
>
</div>
</div>
<div class="project-img-size box-shadow">
<img src="images/project/3.png" alt="" />
<div class="live-text">
<h3>Apollo Hospital Website</h3>
<a
target="blank"
class="documentation-button live-btn"
href="https://apollo-health-care.netlify.app"
>Live Link</a
>
</div>
</div>
</div>
</section>
<!------------------------ 🚩 footer section END 💭 ------------------------------------>
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ BONUS SECTION START ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ FOOTER SECTION START ▒▒▒▒▒▒▒▒▒▒▒▓ -->
<!------------------------ 🚩 footer section START 💭 ------------------------------------>
<section class="footer-section">
<div class="footer-section-text">
<h1>Mission <span class="footer-text-color">2023</span></h1>
<h4>Hard work, Perseverance, and Determination for 2023</h4>
<h5>©Muhammad Nurul Ahsan 2023</h5>
</div>
</section>
<!------------------------- 🚩 footer section END 💭 ------------------------------------>
<!-- ▓▒▒▒▒▒▒▒▒▒▒▒ FOOTER SECTION END ▒▒▒▒▒▒▒▒▒▒▒▓ -->
</body>
</html>