generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
266 lines (257 loc) · 12.4 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
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Custom CSS stylesheet -->
<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>
<!-- Bootstrap modal button -->
<button type="button" class="btn btn-primary sharp-corners" 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>
<!-- cols for cards -->
<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>
<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>
<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>
<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 jusify-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>
<div class="col-12 col-md-10 col-lg-8 mb-4">
<!-- Add form -->
<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="phonenumbe">
</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">Send</button>
</div>
</form>
</div>
</div>
</footer>
<!-- Bootstrap modal -->
<!-- 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">
<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>
<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"></div>
<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">
Sign up!
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>