-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (128 loc) · 6.25 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hannah M - a web programmer & designer</title>
<link rel="icon" href="images\favicon.ico">
<link rel="stylesheet" href="css\styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="home">
<div class="home-top">
<a href="index.html"><img class="home-profile" src="https://media2.giphy.com/media/Y2aYAKoapEL0O4O8Ir/200w.webp?cid=ecf05e472hp5rcz8e23zbjlyj9fcczund5xw2rvqh33vvwx8&rid=200w.webp&ct=s" alt="universe image - giphy"></a>
<a class="home-nav" href="maintenance.html">Notes</a>
<a class="home-nav" href="maintenance.html">Journey</a>
<a class="home-nav" href="maintenance.html">About</a>
</div>
<div class="top-container">
<img class="constellation one" src="https://media2.giphy.com/media/dt5SQ3wlpT5z9LztNp/giphy.gif?cid=790b76110180b1179cd714e459705baf3cbc3c1a8e2cfa38&rid=giphy.gif&ct=s" alt="costellation image - giphy">
<h1>I'm Hannah,</h1>
<h2 class="start">a web <span>pro</span>grammer.</h2>
<img class="constellation two" src="https://media2.giphy.com/media/dt5SQ3wlpT5z9LztNp/giphy.gif?cid=790b76110180b1179cd714e459705baf3cbc3c1a8e2cfa38&rid=giphy.gif&ct=s" alt="costellation image - giphy">
<img class="astronaut" src="https://media3.giphy.com/media/gyr5H37A484WqdFXJ7/giphy.gif?cid=790b7611cbd3f7efca7d7a5eb0dc6d270c49d312aeabfb03&rid=giphy.gif&ct=s" alt="astronaut image - giphy">
</div>
</div>
<div class="intro-container">
<img class="astro-profile" src="https://media4.giphy.com/media/sPEr7fsAbCdx6rwkBi/giphy.webp" alt="waving astronaut - Mr.Urbina Giphy">
<h3>Hi!</h3>
<p class="intro">
I am a web programming student based in Bicol, Philippines. I recently found out my passion in coding and plans to take a Computer Science degree this coming academic year.
Oh, I also enjoy drinking tea while doing my computer works!
</p>
</div>
<hr>
<div class="middle-container">
<div>
<h2 class="header-middle">
What I love to do
</h2>
</div>
<div class="do">
<div class="do-s">
<img class="coding-img" src="https://media3.giphy.com/media/paTz7UZbPfTZFRYnnB/200w.webp" alt="girl coding">
<h3 class="do-header">Programming</h3>
<p>
I have always been fascinated oh how computer works.
When I started learning coding, I realized that it might have been my calling. And it is!
</p>
</div>
<div class="do-s">
<img class="arts-img" src="https://media1.giphy.com/media/KxWGoCb5IoWj8HNoqF/200w.webp?cid=ecf05e47y8wweis54n5bg5jpm65tuwio06mt64ikef2069ry&rid=200w.webp&ct=s" alt="palette and brush gif">
<h3 class="do-header">Arts and design</h3>
<p>
The moment I dreamt of becoming an architect and coupled with my mom being a dressmaker, I embraced the colorful and imaginative world of arts.
And now, its my dream to incorporate this hobby of mine in web programming. So exciting!
</p>
</div class="do-s">
<div>
<img class="lang-img" src="https://media4.giphy.com/media/HVofJOWFXGpDX4xeg1/giphy.gif?cid=ecf05e475j83gfiyr5xxu5cblcxckci0hke1n086bme6a4yp&rid=giphy.gif&ct=s" alt="language image - giphy">
<h3 class="do-header">Language learning</h3>
<p>
Travelling has been one of my top-notch goals every year and learning new languages make it much easier and enjoyable.
I am currently at the <b>N5 level</b> of my Nihongo (Japanese Language) learning. A long way to go for me...
<p>
<table>
<tr>
<th>Local language/dialect</th>
<th></th>
<th>Traditional Writing</th>
<th></th>
<th>Foreign Language</th>
<th></th>
</tr>
<tr>
<td>Bicol</td>
<td class="col-padding">★★★★☆</td>
<td>Baybayin</td>
<td class="col-padding">★★★☆☆</td>
<td>English</td>
<td>★★★★☆</td>
</tr>
<tr>
<td>Tagalog</td>
<td class="col-padding">★★★★★</td>
<td></td>
<td></td>
<td>Nihongo</td>
<td>★☆☆☆☆</td>
</tr>
<tr>
<td>Nabua-Rinconada</td>
<td>★★★★☆</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</p>
</div>
<div class="do-s">
<img class="tea-img" src="https://media0.giphy.com/media/9cghZPGI3DiSygM6j7/giphy.gif?cid=790b761166e5e75c82f24ee199e5223f00f4f3274cd9ff36&rid=giphy.gif&ct=s" alt="drinking tea while working image - giphy">
<h3 class="do-header">Drinking Tea</h3>
<p>
The more I focus my eyes on something [like a computer screen], the more I feel wear and older. But drinking teas saves my day! Having tea breaks make things better and comfortable.
</p>
</div>
</div>
</div>
<hr>
<div class="bottom-container">
<h2 class="contact-header">Get In Touch</h2>
<h3>Looking for collaborations? Or simply up for a chat?</h3>
<p class="contact-p">I'm in! Feel free to message me and let's talk about it with a freshly brewed hot tea.</p>
<a class="btn" href="mailto:[email protected][email protected]">Contact Me</a>
</div>
<div class="footer-background">
<div class="footer-container">
<a class="footer-link" href="https://github.com/hannskie"><img class="footer-img" src="images\github.png" alt="GitHub"></a>
<a class="footer-link" href="#"><img class="footer-img" src="images\instagram.png" alt="Instagram"></a>
<a class="footer-link" href="#"><img class="footer-img" src="images\globe.png" alt="website"></a>
<p class="w-d">© 2021 Hannah Mendoza. Oceana Designs</p>
</div>
</div>
</body>
</html>