lapio-website/index.html at main · Uxusino/lapio-website · GitHub

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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Lapio website</title>
</head>

<body>
  <div class="content">
    <!--Tee tehtävät tänne-->
    <h1>I Am A Human Head</h1>
    <!--This picture of a head illustrates the song.-->
    <img src="assets/human-head-and-shoulders.jpg" alt="Picture of a human head" height="309" width="384"/>
    <div class="characters">
      <h2>Tärkeät päähenkilöt</h2>
      <ul>
        <li>Päähenkilöt</li>
        <ul>
          <li>Human Head</li>
          <li>Scalp</li>
          <li>Hair</li>
        </ul>
        <li>Sivuhenkilöt</li>
        <ul>
          <li>Best Friend</li>
        </ul>
      </ul>
    </div>
    <h3 class="song-text">
      I am a human head<br>
      And my best friend is also a head<br>
      I don't really need my best friend
    </h3>
    <p class="song-text">
      Now my <b>friend</b> is gone<br>
      And I'm only a <i>head</i> by myself<br>
      I find I don't need my <b><i>whole head</i></b>
    </p>
    <p class="song-text">
      Now I'm just the top of a head<br>
      Just the scalp and a hair<br>
      I don't like the scalp, just the hair
    </p>
    <p class="song-text">
      What do I really need?<br>
      Best friend, also a head<br>
      Just the head, just the scalp<br>
      Hair
    </p>
    <p class="song-text">
      Friend, no<br>
      Head, no<br>
      Scalp, no<br>
      Hair
    </p>
    <p class="song-text">
      I am only one human hair<br>
      With no scalp for a home<br>
      All I need's the top of a head
    </p>
    <p class="song-text">
      Now all I am is just a scalp<br>
      I don't have any head<br>
      I'd be glad if I had a head
    </p>
    <p class="song-text">
      Now I have a head look at me<br>
      I'm a fine floating head<br>
      Where is my friend, the other head?
    </p>
    <i id="continued">To be continued...</i>
</div>
</body>

</html>