-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
342 lines (307 loc) · 15.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
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta tags-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--website's title-->
<title>Antwi Ebenezer</title>
<!--website's favicon-->
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<!--linking css file to the html file-->
<link rel="stylesheet" href="style.css">
<!--font-awesome icons cdn-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--animate on scroll css cdn-->
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">
</head>
<body>
<!-- preloader -->
<div class="container">
<div class="wrapper">
<div class="loader">
<div class="dot">
</div>
</div>
<div class="loader">
<div class="dot">
</div>
</div>
<div class="loader">
<div class="dot">
</div>
</div>
<div class="loader">
<div class="dot">
</div>
</div>
<div class="loader">
<div class="dot">
</div>
</div>
<div class="loader">
<div class="dot">
</div>
</div>
</div>
</div>
<!--header section-->
<header class="header">
<!--logo section-->
<a href="#"><h2 class="nav-links"><span class="logo nav-links">EB</span> Code<span class="sign nav-links">$</span></h2></a>
<nav>
<!--menu links-->
<ul class="main-menu">
<a href="#" class="menu-item nav-links">Home</li></a>
<a href="#about" class="menu-item nav-links"><li>About</li></a>
<a href="#projects" class="menu-item nav-links"><li>Projects</li></a>
<a href="#certificates" class="menu-item nav-links"><li>Certificates</li></a>
<a href="#contact" class="menu-item nav-links"><li>Contact</li></a>
<!--dark and light section-->
<div class="light-and-dark-container">
<div class="switch-button">
<i class="fa-solid fa-moon"></i>
</div>
</div>
</ul>
<!--hamburger menu for smaller screens-->
<div class="menu-bar">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
<!--home section-->
<section id="home-section">
<!--home section h1 elements-->
<div data-aos="slide-right" data-aos-delay="40" data-aos-duration="700">
<h1>Hey there!</h1>
<h1>I am Ebenezer Antwi,</h1>
</div>
<!--home section p elements-->
<div data-aos="slide-left" data-aos-delay="40" data-aos-duration="700">
<p class="nav-links">a front-end web developer.</p>
</div>
<!--download CV button-->
<div class="cv-button-container">
<a href="#" id="cv-download" class="menu-item">Download CV</a>
</div>
</section>
<!--about section-->
<section id="about">
<!--about title-->
<h2 class="heading">About Me</h2>
<div class="about">
<!--about information-->
<p class="text nav-links" data-aos="slide-right" data-aos-delay="40" data-aos-duration="700">Hi there! My name is Antwi Ebenezer and I'm a front-end web developer with expertise in HTML,
CSS, and JavaScript. I love creating beautiful and responsive websites
that are both user-friendly and engaging.<br><br>
I have a passion for design and enjoy bringing my ideas to life through code. I enjoy working on
projects from start to finish and thrive in a collaborative team environment. Whether it's building a
new website from scratch or improving an existing one, I am always eager to take on new
challenges and learn new skills.
<br>
<!--read more section-->
<span class="display-more-text">
<br>
In my free time, I enjoy exploring new technologies and tools to improve my development skills.
I also enjoy attending tech conferences and meetups to network with other developers and stay up-to-date
with the latest industry trends.<br>
Thank you for taking the time to read a bit about me!
</span>
<!--read more button-->
<button class="read-more">Read More</button>
</p>
<!--about image-->
<div class="my-image" data-aos="fade-in" data-aos-delay="40" data-aos-duration="1000">
<img src="assets/images/my-image.jpg" alt="my-image">
</div>
</div>
</section>
<!--projects section-->
<section id="projects">
<!--projects title-->
<h2 class="heading">Projects</h2>
<!--projects container-->
<div class="projects-wrapper">
<!--project-1 container-->
<div class="project-container" data-aos="zoom-in" data-aos-delay="40" data-aos-duration="700">
<!--project-1-->
<a href="https://responsive-web-design-project-4.netlify.app" target="_blank">
<!--project-1 image-->
<img src="assets/images/project-1.png" alt="Project 1 image">
</a>
<!--project-1 description-->
<p class="nav-links">Product Landing Page</p>
</div>
<!--project-2 container-->
<div class="project-container" data-aos="slide-left" data-aos-delay="40" data-aos-duration="700">
<!--project-2-->
<a href="https://frontend-mentor-project.netlify.app/" target="_blank">
<!--project-2 image-->
<img src="assets/images/project-7.png" alt="Project 2 image">
</a>
<!--project-2 description-->
<p class="nav-links">Fylo Landing Page</p>
</div>
<!--project-3 container-->
<div class="project-container" data-aos="slide-right" data-aos-delay="40" data-aos-duration="700">
<!--project-3-->
<a href="https://responsive-web-design-project-3.netlify.app" target="_blank">
<!--project-3 image-->
<img src="assets/images/project-4.png" alt="Project 4 image">
</a>
<!--project-3 description-->
<p class="nav-links">Technical Documentation Page</p>
</div>
<!--project-4 container-->
<div class="project-container" data-aos="zoom-in-up" data-aos-delay="40" data-aos-duration="700">
<!--project-4-->
<a href="https://kwadwo-ambitious.netlify.app" target="_blank">
<!--project-4 image-->
<img src="assets/images/project-2.png" alt="Project 3 image">
</a>
<!--project-4 description-->
<p class="nav-links">3 Column Preview Card</p>
</div>
<!--see more projects section-->
<span class="show-more-projects">
<!--project-5 container-->
<div class="project-container" data-aos="flip-up" data-aos-delay="40" data-aos-duration="700">
<!--project-5-->
<a href="https://responsive-web-design-project-2.netlify.app" target="_blank">
<!--project-5 image-->
<img src="assets/images/project-5.png" alt="Project 5 image">
</a>
<!--project-5 description-->
<p class="nav-links">Tribute Page</p>
</div>
<!--project-6 container-->
<div class="project-container" data-aos="flip-down" data-aos-delay="40" data-aos-duration="700">
<!--project-6-->
<a href="https://responsive-web-design-project-1.netlify.app" target="_blank">
<!--project-6 image-->
<img src="assets/images/project-6.png" alt="Project 6 image">
</a>
<!--project-6 description-->
<p class="nav-links">Survey Form</p>
</div>
</span>
</div>
<!--see more projects button-->
<div >
<p class="show-more-btn">See More</p>
</div>
</section>
<!--awards section-->
<section id="certificates">
<!--awards title-->
<h2 class="heading">Awards</h2>
<!--awards container-->
<div class="awards">
<!-- award-1 -->
<a href="https://www.coursera.org/account/accomplishments/certificate/NCG2M8UKH65Z" target="_blank" data-aos="zoom-in-up" data-aos-delay="40" data-aos-duration="700">
<!--award-1 image-->
<img src="assets/certificates/Programming_with_JavaScript.png" alt="award 1">
</a>
<!---award-2-->
<a href="https://www.freecodecamp.org/certification/antwiebenezer/responsive-web-design" target="_blank" data-aos="slide-left" data-aos-delay="40" data-aos-duration="700">
<!--award-2 image-->
<img src="assets/certificates/Responsive-Web-Design-Certificate(freeCodeCamp).png" alt="award 2">
</a>
<!--award-3-->
<a href="https://www.sololearn.com/Certificate/CT-Y4HSQYNM/png" target="_blank" data-aos="slide-right" data-aos-delay="40" data-aos-duration="700">
<!--award-3 image-->
<img src="assets/certificates/HTML_certificate.jpg" alt="award 3">
</a>
<!--award-4-->
<a href="https://www.sololearn.com/Certificate/CT-KHVQLLZH/png" target="_blank" data-aos="flip-down" data-aos-delay="40" data-aos-duration="700">
<!--award-4 image-->
<img src="assets/certificates/Responsive-Web-Design_certificate.jpg" alt="award 4">
</a>
</div>
</section>
<!--contact section-->
<section id="contact" data-aos="fade-in" data-aos-delay="40" data-aos-duration="1500">
<!--contact title-->
<h2 class="heading">Contact Me</h2>
<!--contact information-->
<p class="nav-links">Do you have something to tell or discuss with me?<br>
If yes, then please don't hesitate to send me a message by filling the form below:
</p>
<!--contact container-->
<form class="contact" method="POST" action="https://getform.io/f/cbe23328-67b2-419c-b253-58fa67eb45e0">
<label for="input">
<!--first name input field-->
<input type="text" name="First Name" id="first-name" class="input-field"
placeholder="Enter your first name" autocomplete="off"
style="font-family: 'Kanit', sans-serif; font-size: 1.7rem;" required>
<span style="font-family: 'Kanit', sans-serif;" class="error"></span>
</label>
<label for="input">
<!--last name input field-->
<input type="text" name="Last Name" id="last-name" class="input-field" placeholder="Enter your last name" autocomplete="off"
style="font-family: 'Kanit', sans-serif; font-size: 1.7rem;" required>
<span style="font-family: 'Kanit', sans-serif;" class="error"></span>
</label>
<label for="input">
<!--email input field-->
<input type="email" name="Email Address" id="email" class="input-field" placeholder="Enter your email address" autocomplete="off"
style="font-family: 'Kanit', sans-serif; font-size: 1.7rem;" required>
<span style="font-family: 'Kanit', sans-serif;" class="error"></span>
</label>
<label>
<textarea placeholder="Enter your message here..." class="input-field" name="Message"
id="message" rows="3" columns="50" style="font-family: 'Kanit', sans-serif; font-size: 1.7rem;" required ></textarea>
<span style="font-family: 'Kanit', sans-serif;" class="error"></span>
</label>
<!--submit button-->
<input type="submit" name="submit" id="submit" class="input-field submit-button" value="send">
</form>
</section>
<!--social media section-->
<section id="socials" data-aos="fade-in" data-aos-delay="40" data-aos-duration="2000">
<!--social media descriptions-->
<h2 class="nav-links">Let's get connected...</h2>
<p class="nav-links">You can connect with me on:</p>
<!--social media icons section-->
<div class="icons">
<!--github icon and it's description-->
<a href="https://github.com/kwadwoambitious" target="_blank" class="icon nav-links">
<i class="fa-brands fa-github"></i> Github
</a>
<!--linkedin icon and it's description-->
<a href="https://www.linkedin.com/in/antwi-ebenezer/" target="_blank" class="icon nav-links">
<i class="fa-brands fa-linkedin"></i> LinkedIn
</a>
<!--twitter icon and it's description-->
<a href="https://twitter.com/_antwiebenezer" target="_blank" class="icon nav-links">
<i class="fa-brands fa-twitter"></i> Twitter
</a>
<!--facebook icon and it's description-->
<a href="https://web.facebook.com/profile.php?id=100082920992879" target="_blank" class="icon nav-links">
<i class="fa-brands fa-facebook"></i> Facebook
</a>
</div>
</section>
<!--footer section-->
<footer>
<!--footer p elements-->
<p class="after nav-links">Built by <span class="logo nav-links">EB</span> Code$</p>
<p class="nav-links">© Copyright 2023. All Rights reserved.</p>
</footer>
<!--linking javascript file to the html file-->
<script src="index.js"></script>
<!--animate on scroll javascript cdn-->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="https://smtpjs.com/v3/smtp.js">
</script>
</body>
</html>