-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
274 lines (249 loc) · 13.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
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mei Wong Software Developer</title>
<!-- Bootstrap CSS Link -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Custom CSS Link -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="index.html">Mei Wong</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header -->
<header id="hero" class="container">
<!-- section with hero image -->
<section class="row">
<!-- text-center class used to centre all text inside column -->
<div class="col-12 text-center">
<h1 class="display-4 my-4">Mei Wong</h1>
<!-- mb-5 gives extra margin spacing under subheading -->
<h2 class="display-6 mb-5">Software Developer</h2>
<p>
Hello! I'm Mei, a <strong>passionate and creative Software Developer</strong>
dedicated to building engaging, user-friendly websites and
applications. With a keen eye for design and a love for coding,
<strong>I translate complex ideas into smooth, accessible digital
experiences.</strong>
Eager to collaborate and grow, I'm on the lookout for opportunities
to innovate and excel.
</p>
<!-- mb-5 gives extra margin spacing under lead text -->
<p class="lead mb-5">Let's create something amazing together!</p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary sharp-corners" data-bs-toggle="modal" data-bs-target="#modal">
Subscribe to my newsletter!
</button>
</div>
</section>
</header>
<!-- main content -->
<main>
<!-- About section links to #about href in navbar -->
<section id="about" class="container">
<div class="row">
<!-- my-4 used to add top and bottom margin to heading -->
<div class="col-12 text-center my-4">
<h2 class="display-5">About Mei</h2>
</div>
<!-- mb-4 used to add margin under image -->
<div class="col-12 col-md-6 mb-4">
<!-- img-fluid class makes the image responsive to its container -->
<img src="assets/images/mei-wong.webp" class="img-fluid" alt="Mei Wong">
</div>
<!-- mb-4 used to add margin under text -->
<div class="col-12 col-md-6 mb-4">
<p>
As a dedicated software developer, I specialise in crafting
seamless, dynamic user interfaces that prioritize user engagement
and functionality. With a keen interest in web aesthetics and
usability, I've developed a robust skill set in HTML, CSS,
JavaScript, and Bootstrap, ensuring responsive and visually
appealing designs.
</p>
<p>
My approach combines meticulous attention to detail with a
relentless pursuit of user-centric solutions, making me a reliable
contributor to any web development team.
</p>
<p>
I am on the lookout for opportunities to leverage my skills in a
dynamic environment, aiming to contribute to meaningful projects
and grow as part of a forward-thinking team.
</p>
</div>
</div>
</section>
<!-- portfolio section links to #portfolio href in navbar -->
<!-- pb-4 used to add padding under section -->
<section id="portfolio" class="container pb-4">
<div class="row">
<!-- my-4 used to add top and bottom margin to heading -->
<div class="col-12 text-center my-4">
<h2 class="display-5">Portfolio</h2>
</div>
<!--Card 1-->
<div class="col-12 col-md-6">
<div class="card mb-3 sharp-corners">
<img src="./assets/images/wags-and-walks.webp" class="card-img-top"
alt="A man walking several dogs early in the morning">
<div class="card-body">
<h3 class="card-title">Wags & Walks</h3>
<p class="card-text">A platform for a dog walking service designed to fit the busy
lifestyles of pet owners. Focused on promoting a healthy life for dogs, this site
showcases convenient scheduling options and services.</p>
<a href="#" class="btn btn-outline-secondary">Visit site</a>
</div>
</div>
</div>
<!--Card 2-->
<div class="col-12 col-md-6">
<div class="card mb-3 sharp-corners">
<img src="./assets/images/we-wellness.webp" class="card-img-top"
alt="A spa with candles towels and natural material">
<div class="card-body">
<h3 class="card-title">We Wellness</h3>
<p class="card-text">A comprehensive platform offering a wide range of wellness services and
high-end products. From yoga classes to nutritional guidance, users can find everything
they need to nurture their body, mind, and spirit.</p>
<a href="#" class="btn btn-outline-secondary">Visit site</a>
</div>
</div>
</div>
<!--Card 3-->
<div class="col-12 col-md-6">
<div class="card mb-3 sharp-corners">
<img src="./assets/images/math-wiz.webp" class="card-img-top"
alt="A child practicing math at a computer">
<div class="card-body">
<h3 class="card-title">Math Wiz</h3>
<p class="card-text">An interactive website dedicated to helping kids master mathematics
through games and challenges. Designed with young learners in mind, this platform turns
complex problems into engaging activities.</p>
<a href="#" class="btn btn-outline-secondary">Visit site</a>
</div>
</div>
</div>
<!--Card 4-->
<div class="col-12 col-md-6">
<div class="card mb-3 sharp-corners">
<img src="./assets/images/bmi-calculator.webp" class="card-img-top"
alt="Weighing scales seen from the first person view of the person standing on the scales">
<div class="card-body">
<h3 class="card-title">BMI Calculator</h3>
<p class="card-text">Promoting a healthier lifestyle with an easy-to-use BMI Calculator.
Designed to provide quick health assessments, this tool helps users understand and
manage their body mass index with just a few clicks.</p>
<a href="#" class="btn btn-outline-secondary">Visit site</a>
</div>
</div>
</div>
</div>
</section>
<!-- contact section -->
<footer id="contact" class="container">
<div class="row justify-content-center">
<div class="col-12 text-center my-4">
<h2 class="display-5">Contact</h2>
<p class="mt-4">Got questions or ideas? I'd love to hear from you! Whether you're interested in
collaboration, have inquiries about my projects, or wish to request a copy of my CV, please
don't hesitate to get in touch. I'm always open to discussing new opportunities and how we can
work together to create something amazing!</p>
</div>
<!-- Contact Form -->
<div class="col-12 col-md-10 col-lg-8 mb-4">
<form class="row g-3 sharp-corners">
<!--Full name, Phone number, Email -->
<div class="col-12 col-lg-4">
<label for="full-name" class="form-label">Full name</label>
<input type="text" class="form-control" id="full-name">
</div>
<div class="col-12 col-lg-4">
<label for="phonenumber" class="form-label">Phone number</label>
<input type="number" class="form-control" id="phonenumber">
</div>
<div class="col-12 col-lg-4">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<!--Message-->
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<!--Send button-->
<div class="col-12">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content sharp-corners">
<!-- Modal header -->
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-label">Subscribe</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Join my newsletter for the latest updates on my projects, coding tips, and industry insights
delivered straight to your inbox.</p>
<!-- Form -->
<form class="row g-3">
<!--FName, Email -->
<div class="col-12 col-md-6">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 col-md-6">
<label for="modalemail" class="form-label">Email</label>
<input type="email" class="form-control" id="modalemail">
</div>
<!--Subscribe button-->
<div class="col-12 mb-4">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Bootstrap JS Script-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>