generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (218 loc) · 12.6 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
<!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>
<!-- CSS for Bootstrap styles -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<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 sharp-corners" 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"></li>
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"></li>
<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">
<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>
<div class="row row-cols-1 row-cols-md-2 g-4">
<!-- Cards -->
<div class="col">
<div class="card 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">
<h5 class="card-title">Wags & Walks</h5>
<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>
<button type="button" class="btn btn-outline-secondary">Visit Site</button>
</div>
</div>
</div>
<div class="col">
<div class="card 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">
<h5 class="card-title">We Wellness</h5>
<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>
<button type="button" class="btn btn-outline-secondary">Visit Site</button>
</div>
</div>
</div>
<div class="col">
<div class="card 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">
<h5 class="card-title">Math Wiz</h5>
<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>
<button type="button" class="btn btn-outline-secondary">Visit Site</button>
</div>
</div>
</div>
<div class="col">
<div class="card 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">
<h5 class="card-title">BMI Calculator</h5>
<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>
<button type="button" class="btn btn-outline-secondary">Visit Site</button>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer id="contact" class="container">
<div class="row justify-content-center">
<div class="col-12 text-center my-4">
<h2 class="display">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 sharp-corners">
<!-- Contact Form -->
<form class="row g-3">
<div class="mb-3 col-lg-4">
<label for="formGroupExampleInput" class="form-label">Full Name</label>
<input type="text" class="form-control" id="formGroupExampleInput">
</div>
<div class="mb-3 col-lg-4">
<label for="formGroupExampleInput" class="form-label">Phone Number</label>
<input type="text" class="form-control" id="formGroupExampleInput">
</div>
<div class="mb-3 col-lg-4">
<label for="exampleFormControlInput1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1">
</div>
<div class="mb-3 col-lg-12">
<label for="exampleFormControlTextarea1" class="form-label">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary custom-button">Send</button>
</div>
</form>
</div>
</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>
<form>
<div class="row">
<div class="mb-3 col-md-6">
<label for="formGroupExampleInput" class="form-label">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput">
</div>
<div class="mb-3 col-md-6">
<label for="exampleInputEmail1" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary custom-button">Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Javascript for Bootstrap styles -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>