-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
327 lines (183 loc) · 8.06 KB
/
index.html
File metadata and controls
327 lines (183 loc) · 8.06 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spin-off of "Project: Blog"</title>
</head>
<body>
<style>
#myBtn{
position:fixed;
top:90%;
left:90%;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
float: right;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
body {
background-image: url('https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/lake.png');
background-size: 100% 100%;
font-size:1.5em;
}
#paragraph {
background-color:rgba(255, 225, 158,0.8);
padding:15px;
}
h1{
text-align: center;
font-size:2.5em;
text-decoration-color: rgb(255, 255, 255);
text-decoration-line: overline underline;
text-decoration-style: dotted;
text-decoration-thickness: 5px;
}
h3{
font-family:cursive;
font-style: italic;
font-size:18px;
text-decoration-color: rgb(255, 255, 255);
text-decoration-line: overline underline;
text-decoration-style: solid;
text-decoration-thickness: 2px;
}
h2{
font-style: italic;
text-decoration-line: underline;
text-decoration-style: dotted;
}
#first-post-link {
color: rgb(227, 13, 67);
font-family:cursive;
font-style: normal;
font-size:15px;
}
#second-post-link {
color: rgb(61, 89, 5);
font-family:cursive;
font-style: normal;
font-size:15px;
}
#dragon {
font-weight:bold;
font-style:italic;
font-size:1.2em;
}
#hmph {
font-family:monospace;
font-size:1.3em;
}
#Humpfy-H{
Font-size:1.5em;
}
#ad {
font-style:italic;
font-size:1.2em;
}
#hether {
font-weight:bold;
}
#today-t {
Font-size:1.5em;
}
#southern-isles {
width:280px;}
#container {
background-color:rgba(255, 235, 168,0.7);
width: 800px;
margin: auto;
border: 1px none rgb(145, 0, 0);
border-top: 10px dashed purple;
padding: 15px;}
</style>
<div id="container">
<div id="headings"><h1>Mely's blog</h1>
<h3>Contents</h3>
<ul>
<li>
<a id="first-post-link" href= "#first-post"> The day I rode my "Hmpfy" for the first time </a>
</li>
<li>
<a id="second-post-link" href= "#second-post">Humphy's dronall got lost! </a>
</li>
</ul></div>
<a href="https://melyfaj.github.io/m2.html">Check out my other webpage</a>
<br><br>
<h2 id="#first-post">The day I rode my "Hmpfy" for the first time</h2>
<h6>26/8/2022</h6>
<br>
<p><div id ="paragraph"><span id="Humpfy-H">H</span>umpfy is my very first pet <span id="dragon">Dragon</span>.<br><br>
I was only 6 then and having a dragon is a huge responsibility.
I wanted fire breathing dragon as all of my friends had one; all of my friends with an older sibling.
Dad said I wasn't ready for such dragons. After much begging and banging,
instead, Dad got me a water-spitting dragon and I hated it. The fact that it'd spit at me was humiliating.
My friends were in awe. They said it was cool, both literally and in slang. <br><br>
I named it "Humpfy" because at the sight of it I only gave one expression, "<span id="hmph">Hmph</span>!". <br><br>
At night, I would leave it on its bed outside my room and when I'd hang between wake and sleep,
it'd find a crack between my arms and cuddle in, and then I'll have no choice but to cuddle with it.
It probably was fond of me because of all the fish and carrots I had to feed it. Even though I hated it,
I can't let it starve. <br><br>
In the morning, I'd wake up all soaked in its drool. Luckily, it's only mineral water and not
stinky saliva filled with enzymes. Well, at least, it saved the time of having to take a shower in the
morning when you always have to hurry for school. <br><br>
As stated, having a dragon was a huge responsibility. I had to feed it 4 times a day, every
day; scrub its scales every Friday, take it on long flights ( actually, just throwing a dronall 4 islands
away for it to bring it back to me to throw it again for 4 to 8 times), clean it's litter box. I thought
my mom was hoping that I'd give up on this dragon-keeping job and won't ask for one until I'm old with gray hairs.
But was determined to show them that I can handle it and was responsible enough to pet a fire-breathing dragon. <br><br>
A year was gone and I finally accomplished my goal. Mom sent Humpfy away to the maintainers and
brought home a <span id="ad">shiny coal black scaled 70 degrees Celcius flame-breathing beach dragon</span>; the coolest dragon
amongst the kids around my age. It was my dream dragon I had pictures of it from books, and magazines filling
my diary cover. And I showed my over-jumpy joy to all. But I didn't feel truly content; I felt a hole
inside my heart. Every night I tried to sleep cuddling with my "<span id="hether">Hether</span>" but didn't feel comfy. Every day,
I rode Hether to school, leaving it occupied with burnt marshmallows in class. <br><br>
Days went by and I missed Humpfy more and more. Comparisons rouse in my head on its own.
Hether doesn't hover up and down like Humpfy at the sight of me rather rolls on the ground and puts
everything on fire at the sight of charcoal like burnt marshmallow. Hether doesn't save me time on
busy mornings rather makes me sleep in often from being awake too many times at night to find a
comfy position as it sleeps on my bed spiraled up.<br><br>
As I couldn't bear it any longer, I begged mom and dad to bring back Humpfy. <br><br>
On July, 30, we all went over to the maintainers and rode Humpfy home. <br><br>
Now Hether is being taken care of by my mom. She says she has grown fond of it.
But I think the real reason mom wants to keep it is probably because it eats all those burnt
marshmallows with such an appetite.</div>
</p>
<br><br>
<h2 id="second-post">Humphy's dronall got lost!</h2>
<h6>26/8/2022</h6>
<br>
<p><div id ="paragraph"><span id="today-t">T</span>oday I was playing long flights with Humphy with his favourite and one and only Dronall.
As I was throwing it, from out of nowhere Hether jumped on my back and I lost track on my GPS, and before I knew it , That drone ball fell into the deep sea of the southern isles.
<br> <img id="southern-isles" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/lava.png" alt="The Southern Isles"> <br>
Wondering How I will retrieve it. <br><br>
Should I rent a deep sea frog?</div></p>
</div>
<button onclick="topFunction()" class="button button1" id="myBtn">Top</button>
<script>
var mybutton = document.getElementById("myBtn");
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>