-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (163 loc) · 8.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS link -->
<link text="text/css" rel="stylesheet" href="style.css">
<!-- Google fonts -->
<!-- <link href="https://fonts.googleapis.com/css?family=Londrina+Outline&display=swap" rel="stylesheet"> -->
<title>MHT here!</title>
</head>
<!-- body onclick for iOS -->
<body id="body" class="day-time" onclick>
<div class="title">
<h1 class="welcome font-style">Welcome to my Home!</h1>
<h2 class="instruction font-style">Please do browse around by hovering over or clicking elements</h2>
</div>
<div class="sky-line">
<div class="sun-moon-container">
<div class="sun satellite">
</div>
<div class="moon satellite">
</div>
</div>
<div class="smoke-container">
<div class="smoke1 smoke">
<a href="https://www.freecodecamp.org/mhtien" target="_blank" alt="freecodecamp">
<img class="links-logo" src="images\freeCodeCamp-logo.svg" alt="freeCodeCamp logo">
</a>
</div>
<div class="smoke2 smoke">
<a href="https://github.com/mhtien/my-house" target="_blank" alt="github website repo">
<img class="links-logo" src="images\github-logo.svg" alt="github logo">
</a>
</div>
<div class="smoke3 smoke">
<a href="https://www.codewars.com/users/mhtien" target="_blank" alt="codewars">
<img class="links-logo" src="images\CodeWars.png" alt="codewars logo">
</a>
</div>
</div>
</div>
<div class="house-container elements-width">
<div class="circle-window-container">
<div class="circle-night circle-window">
<p class="circle-night-text circle-text text-box text-box-style">I have thoroughly enjoyed the
experience of
applying to FAC, I did not think I would learn so much about code whilst doing the
prerequisites
so thank you. There have already been times where I have struggled to get passed a challenge
but
it feels even better once you get over the hurdle!
</p>
</div>
<div class="circle-day circle-window">
<p class="circle-text text-box text-box-style">I want to become a web developer and I hope I am able to
do this
with Founders and Coders. I was interested in your programme because of the peer-learning
aspect; I find it more beneficial to work with other people to reach the same goal.
</p>
</div>
</div>
<div class="gf-container">
<div class="rectangle-window-container">
<div class="rectangle-window-night rectangle-window">
<p class="window-night-text window-text text-box text-box-style">I spent most evenings and weekends
learning to
code. The webpage was difficult at first but as I got further and further with HTML, CSS, and
Javascript I was more comfortable with my decisions. There was a lot of googling as well...</p>
</div>
<div class="rectangle-window-day rectangle-window">
<div id="image-carousel" class="img-carousel">
<div class="carousel-btns">
<!-- play/pause -->
<div class="play btn-play-pause">
<button class="button">
<img src="images\play.svg" alt="play">
</button>
</div>
<div class="pause btn-play-pause play-hide">
<button class="button">
<img src="images\pause.svg" alt="pause">
</button>
</div>
<!-- arrow keys -->
<div class="right-arrow btn-arrow">
<button class="button">
<img src="images\right-arrow.svg" alt="right-arrow">
</button>
</div>
<div class="left-arrow btn-arrow">
<button class="button">
<img src="images\left-arrow.svg" alt="left-arrow">
</button>
</div>
<div class="dots-container">
</div>
</div>
<!-- slides -->
<div id="carousel-slides">
<div class="slide">
<img src="images\char-eating.svg" alt="me-eating">
<div class="text-caption">eating</div>
</div>
<div class="slide">
<img src="images\char-pruning.svg" alt="image2">
<div class="text-caption">plants...</div>
</div>
<div class="slide">
<img src="images\char-solving-puzzle.svg" alt="me-solving">
<div class="text-caption">solving puzzles</div>
</div>
<div class="slide">
<img src="images\char-bathing.svg" alt="me-bathing">
<div class="text-caption">the occasional bath</div>
</div>
<div class="slide">
<img src="images\char-other.svg" alt="me-mess">
<div class="text-caption">loads of other things</div>
</div>
</div>
</div>
<p class="window-text text-box text-box-style">This is my Image Carousel showing just
a few of my
favourite things</p>
</div>
</div>
<div class="door-container">
<div class="door-night door">
<p class="door-night-text door-text text-box text-box-style">I have been thinking about becoming a
developer for
the past few months as I believe technology will become more integrated within our lives than it
already is, and I would like to be part of that change. I decided to commit to changing
careers at the beginning of this year and by luck stumbled across FAC and started the
pre-requisites as soon as I could</p>
</div>
<div class="door-day door">
<img class="me-char" src="images\me-door.svg" alt="me-door">
<p class="door-text text-box text-box-style">Hey! My name is My Hoa <span>(mi-ha)</span>. Thank you
for
dropping by and getting to know me. Please take a look around, there is no order to this
just hover/click away!</p>
</div>
</div>
</div>
<div class="letterbox">
<p class="letterbox-text text-box text-box-style">Contact me <a href="https://uk.linkedin.com/in/my-hoa-tien-15b0b656" target="_blank">here</a></p>
</div>
<!-- </div> -->
</div>
<hr class="ground-line elements-width">
<div class="ground-container elements-width">
<p class="ground-text text-box-style">I have been an Architect for just over 5 years and I am currently working
in a
practice that specialises in healthcare. I enjoy the array of problem solving aspects from space
planning and user experience to buildability and on-site lessons. I think the skills I have gained
as an Architect relate to the skills required for a developer; to be creative, organised, have good
communication skills, and working as a team.</p>
</div>
<script text="text/javascript" src="script.js"></script>
</body>
</html>