Lightweight-Website/index.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
<!-- ***** 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>Home Page</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>Welcome!</h1>
		<p>
			Hiya, my name is Nonika, and this website is all about me! The only problem is that I love way too many things to
			explore here. How? Well, I love learning and trying new things, and all of those interests and experiences can add
			up very quickly! To make this website a bit more manageable, I focused on the most basic things: school, hobbies,
			and one of my interests! I made a page for each of them, so when you’re ready, click any of the links in my
			navigation bar to the left!
		</p>
		<div class="divider"><img src="pdivl.png" width="749px" height="42px" alt="Divider"/></div>
		<h2>My Web-spiration</h2>
		<p style="text-align:center;">
			Did you know that this is my very first website? I’ve been using the internet since I was a kid, and I’ve always been
			impressed by the really cool websites and games that others would make. I wanted to learn how to make websites and games
			for a while now, and I never really got around to it… until now, that is. I took this Intro to the Internet class as a
			push to get myself started, and I’ve been really enjoying researching and implementing all the features to make my website
			unique! Hopefully I’ll keep learning more about website and browser game development—I think it would be really cool to
			make my own game someday!
		</p>
		<div class="image"><img src="avatar.png" width="300px" height="300px" alt="A pixel art avatar made in picrew"/></div>
		<p style="text-align:center;">
			Maybe I'll start by making a picrew...
		</p>
		<div class="divider"><img src="pdivl.png" width="749px" height="42px" alt="Divider"/></div>
		<p style="font-size:16px; text-align:right;">
			You may be wondering: “what’s up with this childish theme?” While the clean minimalist design is popular for the largest
			websites today (like search engines and social media sites), to be honest, I think it’s pretty boring… Personally, I prefer
			to incorporate fun colours and images; whether online or in real life, visual excitement can add a much needed pop of fun to
			a space! It was the old websites for kids that first inspired me as a child, which is why I wanted that style to be my main
			inspiration for my first complete website! The most recognizable attributes of those websites were the pixel art images, the
			patterned backgrounds, and the use of decorative images. I incorporated all three of those to give my website a clean yet
			retro look, which I tied together with a cute purple theme! Feel free to take a look around, I hope you like it!!!
		</p>
		<br/><img src="pbotl.png" width="749px" height="55px" alt="Bottom Border"/>
	</div>


</body>
</html>