index.html (1.9 KB)

 1 <html>
 2 	<head>
 3 		<title>hunter's trinket collection</title>
 4 		<style>
 5 			html {
 6 				overscroll-behavior: none;
 7 			}
 8 			body {
 9 				background-image: linear-gradient(to left,seagreen, cornflowerblue);
10 				font-size: 25px;
11 				font-family: sans-serif;
12 			}
13 			h1, h2, h3 {
14 				color: white;
15 				text-shadow: 2px 2px 5px black;
16 			}
17 			p {
18 				font-family: serif;
19 				font-size: 30px;
20 			}
21 			.bag {
22 				filter: drop-shadow(13px 13px 13px black);
23 				animation: float 3s ease-in-out infinite;
24 			}
25 			img {
26 				max-width: 100%;
27 			}
28 			@keyframes float {
29 				0% {
30 					transform: translateY(0);
31 				}
32 		
33 				50% {
34 					transform: translateY(-20px);
35 				}
36 		
37 				100% {
38 					transform: translateY(0);
39 				}
40 	    }
41 		</style>
42 	</head>
43 	<body>
44 		<center>
45 		<h1>hunter's trinket collection</h1>
46 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/bag.png" class="bag">
47 			<br>
48 			<p>
49 				This is my trinket bag.<br>Within it, my greatest treasures are contained.<br><br>
50 			</p>
51 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/lil_mutant.jpg">
52 			<h2>
53 				weird lil' mutant
54 			</h2>
55 			<p>
56 				he fell into some toxic goop and his hands
57 				turned into claws. poor guy.
58 			</p>
59 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/defender.jpg">
60 			<h2>
61 				defender
62 			</h2>
63 			<p>
64 				this guy loves to talk about swords.
65 			</p>
66 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/weird_pikmin.jpg">
67 			<h2>
68 				ugly pikmin
69 			</h2>
70 			<p>
71 				he says he's a pikmin, but i'm not so sure.
72 			</p>
73 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/bonker.jpg">
74 			<h2>bonker</h2>
75 			<p>i tried to take his hammer away and he bonked me.</p>
76 			<img src="https://hunterirving.github.io/web_workshop/pages/trinkets/images/leaf_eater.jpg">
77 			<h2>leaf eater</h2>
78 			<p>loves to eat leafs.</p>
79 		</center>
80 	</body>
81 </html>