generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
258 lines (247 loc) · 13 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
<!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>
<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 custom-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
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 starts here -->
<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>
<!-- Wags and Walks card -->
<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>
<!-- We Wellness card -->
<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>
<!-- Math Wiz card -->
<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>
<!-- BMI Calculator card -->
<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>
</main>
<!-- 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 ab out 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>
<div class="col-12 col-md-10 col-lg-8 mb-4">
<!-- Add form content here -->
<form class="row g-3 sharp-corners">
<div class="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-lg-4">
<label for="phonenumber" class="form-label">Phone number</label>
<input type="number" class="form-control" id="phonenumber">
</div>
<div class="col-lg-4">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary custom-button">Send</button>
</div>
</form>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content sharp-corners">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Subscribe</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<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>
</div>
<form class="row g-3">
<div class="col-lg-6">
<label for="inputName" class="form-label">Name</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="col-lg-6">
<label for="inputEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail">
</div>
<div class="col-12 mb-4">
<button type="submit" class="btn btn-primary custom-button">Sign up!</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS link -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
</body>
</html>