Lightweight-Website/page3.html at main · pekcus/Lightweight-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
78
<!-- ***** COMP-2057: Intro to the Internet ***** -->
<!-- 		  Assignment 5: My Web Site	 		  -->
<!-- 		  Nonika Reingold #105048918	 	  -->

<!--?xml version="1.0" encoding="UTF-8"?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhmtl11/DTD/xhtml11.dtd">
<!-- XML/XHTML boilerplate code -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
	<link href="style.css" rel="stylesheet"/>
	<link href="https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet"/>
	<link href="bow.png" rel="shortcut icon"/>
        <title>Sanrio's Mariland</title>
</head>

<body>
	<!-- The navigation links (sidebar) -->
	<div id="navigation">
		<a href="index.html">Home</a>
		<a href="page1.html">School</a>
		<a href="page2.html">Hobbies</a>
		<a href="page3.html">Sanrio</a>
		<a href="page4.html">Mail</a>
		<a href="page5.html">Borrowed</a>
		<img src="kuromi.png" width="160px" height="218px" alt="Kuromi"/>
	</div>
	<!-- Back to Top button! -->
	<div id="b2t">
		<a href="#top">Back to Top!</a>
	</div>
	<!-- The main content of the page -->
	<div id="main">
		<div id="top">
			<img src="ptopl.png" width="749px" height="55px" alt="Top Border"/>
		</div>
		<h1>Sanrio's Mariland!</h1>
		<p>
			Sanrio is the Japanese company that creates cute characters and sells products themed around them. Hello Kitty is Sanrio’s
			most popular character—you’ve probably heard of her! Sanrio has so many characters, and I think they’re all precious! Some of
			them (including everyone mentioned on this page) live in the Mariland forest, in London, England. One of my favourite characters
			is Kuromi, which is why I chose her to decorate my left navigation bar!
		</p>
		<p>
			I love Kuromi because she’s a very interesting character: she’s “punk” and mischievous, but not afraid to be girly; she’s stubborn
			for self-improvement because she wants to live her best life; and she holds a “friendly” rivalry with My Melody. Kuromi and My
			Melody are both rabbits who wear cute little hoods which display their opposing personalities. Kuromi’s relationship with My Melody
			was explored in the animated show Onegai My Melody! This show also featured the pink sheep named My Sweet Piano! Aren't they
			absolutely adorable?!
		</p>
		<div class="divider"><img src="pdivl.png" width="749px" height="42px" alt="Divider"/></div>
		<h2>The Cutest Friends</h2>
		<div class="image">
			<img src="friends.jpg" width="700px" height="1244px" alt="My Melody, My Sweet Piano, and Kuromi sitting on various desserts" usemap="#sanrio"/>
		</div>
		<map name="sanrio">
			<area href="https://www.sanrio.co.jp/character/mymelody/" alt="My Sweet Piano" shape="poly"
				coords="280,290,295,360,350,365,385,395,390,485,425,535,490,545,585,525,600,445,555,405,
				585,385,630,405,665,385,675,325,650,275,665,220,628,195,601,215,529,158,459,132,385,153"/>
			<area href="https://www.sanrio.co.jp/character/mysweetpiano/" alt="My Sweet Piano" shape="poly"
				coords="140,350,50,405,15,485,35,605,140,615,80,730,155,770,240,760,265,680,345,615,350,460,260,330"/>
			<area href="https://www.sanrio.co.jp/character/kuromi/" alt="Kuromi" shape="poly"
				coords="265,680,325,640,470,645,655,555,615,715,580,740,585,805,550,855,560,895,525,970,
				480,995,430,1030,345,1015,345,955,315,905,330,860,285,795,230,805"/>

		</map>
		<!-- I chose to style this similar to dd items because it's a mini explanation! -->
		<p style="margin: 5px 35px 15px 35px; border-left: 2px dotted; border-right: 2px dotted; padding: 0px 10px 0px 10px; text-align: left; font-size: 16px;">
			You can click each of the characters in this image to go to their respective Sanrio webpage. I chose the Japanese pages because they
			have a short description of each character, so if you don’t know Japanese, you can right-click the page and select the “Translate to
			English” option! On their pages, Kuromi and My Melo both have links to their “special content” pages—there’s even more to explore there!
			Unfortunately, Piano doesn’t currently have an extra “special content” page because she’s a minor character, but I love her regardless!
		</p>
		<br/><img src="pbotl.png" width="749px" height="55px" alt="Bottom Border"/>
	</div>


</body>
</html>