add folders for example pages; use absolute img urls

Hunter
Wednesday, July 16th, 2025 at 11:14 AM

images/coffee.pngnew
images/hacking.gifnew
pages/avocado.htmldeleted
pages/avocado_warehouse/images/avocado.jpgnew
pages/avocado_warehouse/images/richmond.pngnew
pages/avocado_warehouse/index.htmlnew
pages/jennos_picnic_world.htmldeleted
pages/jennos_picnic_world/images/bagoot.pngnew
pages/jennos_picnic_world/images/coffee_spill.pngnew
pages/jennos_picnic_world/images/grass_background.jpegnew
pages/jennos_picnic_world/images/half_worm.pngnew
pages/jennos_picnic_world/images/napkin.pngnew
pages/jennos_picnic_world/images/picnic_basket.pngnew
pages/jennos_picnic_world/images/pink_stain.pngnew
pages/jennos_picnic_world/images/puppy.pngnew
pages/jennos_picnic_world/images/strawberry_line.pngnew
pages/jennos_picnic_world/images/wine.pngnew
pages/jennos_picnic_world/images/worm.pngnew
pages/jennos_picnic_world/index.htmlnew
pages/my_homepage.htmldeleted
pages/my_homepage/index.htmlnew
pages/pizza_heaven.htmldeleted
pages/pizza_heaven/images/pizza_picture.jpgnew
pages/pizza_heaven/index.htmlnew

images/coffee.png
Binary files differ.
images/hacking.gif
Binary files differ.
pages/avocado.html
  -<html>
  -	<head>
  -		<style>
  -			body {background-color:green}
  -			body {color:white; text-shadow: 2px 2px black;}
  -			img {width:100%}
  -			p, ul {font-size: 35}
  -			hr {color: white}
  -			h1 {font-size: 42}
  -		</style>
  -	</head>
  -	<body>
  -		<marquee><h1>πŸ₯‘ hello πŸ₯‘ to πŸ₯‘ all πŸ₯‘ the πŸ₯‘ avocado πŸ₯‘ farmers πŸ₯‘ of πŸ₯‘ the πŸ₯‘ world πŸ₯‘</h1></marquee>
  -		<h1>welcome to the avocado warehouse</h1>
  -		<img src="https://media.self.com/photos/5b43712e4d0c3c282a8878d1/master/pass/avocado.jpg">
  -		<p>
  -			so you're looking for some avocados, eh? πŸ₯‘</p>
  -		<p>
  -			well, you came to the right place.
  -		</p>
  -			<img src="https://openclipart.org/image/800px/270173">
  -		<p>
  -			hi, my name is richmond pocatillo, and my family
  -			has been in the avocado business for <b>5 generations.</b>
  -		</p>
  -		<p>
  -			there isn't a guac recipe we haven't tried.
  -			here are some of our favorites:
  -		</p>
  -		<i><h1>Our family's Top 3 Guac Recipes.......... πŸ₯‘</h1></i>
  -		<hr>
  -		<ul>
  -			<li><b>Classic Guac</b> – Avocado, lime, salt, red onion, and cilantro.</li>
  -			<li><b>Spicy Fiesta</b> – Add jalapeΓ±o, garlic, and diced tomatoes.</li>
  -			<li><b>Tropical Twist</b> – Mix in mango, pineapple, and a dash of chili powder.</li>
  -		</ul>
  -		<center>
  -			<h1 style="color:goldenrod">Try it Now!! Our yummy avocado coffee beverage</h1>
  -			<img src="https://openclipart.org/image/800px/188782" style="width:200px; height:200px;">
  -			<i><p>"What the? Eww..." - Jen Lu</p></i>
  -			<hr>
  -			<p>Avocados in the courtroom?<br>This vid made us L-O-L<br>(Laff Out Loud)</p>
  -			<iframe width="100%" height="500px" src="https://www.youtube.com/embed/EEcKyVOkj5g" title="&quot;guacamole justice is a dish best served cold&quot; - judge judy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  -			<br><br>
  -			<hr>
  -			<br>
  -			<img src="images/sun.png" style="background-color:LemonChiffon; max-width:400px">
  -			<p>Anyway, thanks for checking out the site! Stay tuned for our family's prized avocado growing tips! 🌞</p>
  -		</center>
  -	</body>
  -</html>
pages/avocado_warehouse/images/avocado.jpg
Binary files differ.
pages/avocado_warehouse/images/richmond.png
Binary files differ.
pages/avocado_warehouse/index.html
 1 +<html>
 2 +	<head>
 3 +		<style>
 4 +			body {background-color:green}
 5 +			body {color:white; text-shadow: 2px 2px black;}
 6 +			img {width:100%}
 7 +			p, ul {font-size: 35}
 8 +			hr {color: white}
 9 +			h1 {font-size: 42}
10 +		</style>
11 +	</head>
12 +	<body>
13 +		<marquee><h1>πŸ₯‘ hello πŸ₯‘ to πŸ₯‘ all πŸ₯‘ the πŸ₯‘ avocado πŸ₯‘ farmers πŸ₯‘ of πŸ₯‘ the πŸ₯‘ world πŸ₯‘</h1></marquee>
14 +		<h1>welcome to the avocado warehouse</h1>
15 +		<img src="https://hunterirving.github.io/web_workshop/pages/avocado_warehouse/images/avocado.jpg">
16 +		<p>
17 +			so you're looking for some avocados, eh? πŸ₯‘</p>
18 +		<p>
19 +			well, you came to the right place.
20 +		</p>
21 +			<img src="https://hunterirving.github.io/web_workshop/pages/avocado_warehouse/images/richmond.png">
22 +		<p>
23 +			hi, my name is richmond pocatillo, and my family
24 +			has been in the avocado business for <b>5 generations.</b>
25 +		</p>
26 +		<p>
27 +			there isn't a guac recipe we haven't tried.
28 +			here are some of our favorites:
29 +		</p>
30 +		<i><h1>Our family's Top 3 Guac Recipes.......... πŸ₯‘</h1></i>
31 +		<hr>
32 +		<ul>
33 +			<li><b>Classic Guac</b> – Avocado, lime, salt, red onion, and cilantro.</li>
34 +			<li><b>Spicy Fiesta</b> – Add jalapeΓ±o, garlic, and diced tomatoes.</li>
35 +			<li><b>Tropical Twist</b> – Mix in mango, pineapple, and a dash of chili powder.</li>
36 +		</ul>
37 +		<center>
38 +			<h1 style="color:goldenrod">Try it Now!! Our yummy avocado coffee beverage</h1>
39 +			<img src="https://hunterirving.github.io/web_workshop/images/coffee.png" style="width:200px; height:200px;">
40 +			<i><p>"What the? Eww..." - Jen Lu</p></i>
41 +			<hr>
42 +			<p>Avocados in the courtroom?<br>This vid made us L-O-L<br>(Laff Out Loud)</p>
43 +			<iframe width="100%" height="500px" src="https://www.youtube.com/embed/EEcKyVOkj5g" title="&quot;guacamole justice is a dish best served cold&quot; - judge judy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
44 +			<br><br>
45 +			<hr>
46 +			<br>
47 +			<img src="https://hunterirving.github.io/web_workshop/images/sun.png" style="background-color:LemonChiffon; max-width:400px">
48 +			<p>Anyway, thanks for checking out the site! Stay tuned for our family's prized avocado growing tips! 🌞</p>
49 +		</center>
50 +	</body>
51 +</html>
pages/jennos_picnic_world.html
  -<html>
  -	<head>
  -		<style>
  -			body {
  -				padding: 0;
  -				margin: 0;
  -				height: 100%;
  -				width: 100%;
  -				display: flex;
  -				align-items: center;
  -				justify-content: center;
  -				font-family: sans-serif;
  -			}
  -			h1, h2, h3, h4 {
  -				padding: 0;
  -				margin: 0;
  -				color: #880044;
  -				font-family: sans-serif;
  -			}
  -
  -			.main {
  -			  position: relative;
  -			  width: 100vw;
  -			  height: 100vh;
  -			  overflow: hidden;
  -				display: flex;
  -				align-items: center;
  -				justify-content: center;
  -			}
  -
  -			.grass-background {
  -				z-index: -10;
  -				position: absolute;
  -				width: 100vw;
  -				height: 100vh;
  -			  background-image: url("https://i.imgur.com/09PVTWE.jpeg");
  -			  background-repeat: no-repeat;
  -			  background-size: cover;
  -			  background-position: center center;
  -				overflow: hidden;
  -			}
  -			
  -			.picnic-blanket {
  -				height: 90vh;
  -				width: 90vw;
  -				box-sizing: border-box;
  -				padding: 18px 20px;
  -				background: conic-gradient(
  -					#AA1155 90deg,
  -					#F9E4BC 90deg 180deg,
  -					#DD1155 180deg 270deg,
  -					#F9E4BC 270deg
  -				);
  -				background-repeat: repeat;
  -				background-size: 30vw 15vw;
  -				background-color: rgba(150, 175, 116, 0.7);
  -			}
  -
  -			.pink-stain {
  -				position: absolute;
  -				width: 90vw;
  -				height: 90vh;
  -				left: 50%;
  -				transform: translate(-50%, -2%);
  -				z-index: 0;
  -			}
  -
  -			.floating-header {
  -				position: absolute;
  -				top: 20px;
  -				left: 0px;
  -				background-color: #A5C882;
  -				width: 50%;
  -				height: 80px;
  -				padding: 20px 30px;
  -				display: flex;
  -				align-items: center;
  -				justify-content: center;
  -				text-align: center;
  -				border-radius: 50%;
  -				box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1), inset 5px -5px 10px 5px rgba(120, 145, 96, 0.9);
  -				/* animation: moveHeader 1s steps(1, end) infinite;
  -				animation-timing-function: ease;
  -				animation-name: moveHeader;
  -				animation-duration: 5s; */
  -				z-index: 1;
  -			}
  -
  -			.strawberry {
  -				position: absolute;
  -				top: 10px;
  -				right: 10px;
  -				font-size: 5rem;
  -				z-index: 10;
  -			}
  -
  -			.strawberry:hover {
  -				transform: scale(0.8) rotateY(180deg);
  -				cursor: pointer;
  -			}
  -
  -			.worm {
  -				position: absolute;
  -				width: 5rem;
  -				bottom: 8vh;
  -				left: 55px;
  -			}
  -
  -			.half-worm {
  -				position: absolute;
  -				right: -550px;
  -				transform: scale(0.3);
  -			}
  -
  -			.half-worm:hover {
  -				transition-duration:0.5s;
  -				animation: halfWormAnimation 2.5s forwards;
  -			}
  -
  -			.half-worm-comment {
  -				border: 3px solid black;
  -				position: absolute;
  -				display: flex;
  -				align-items: center;
  -				justify-content: center;
  -				width: 8rem;
  -				height: 3rem;
  -				font-family: sans-serif;
  -				text-align: center;
  -				font-weight: bold;
  -				background-color: white;
  -				border-radius: 50%;
  -				bottom: 50%;
  -				right: 0;
  -			}
  -
  -			.comment-point {
  -			  position: absolute;
  -			  background-color: white;
  -			  width: 3rem;
  -			  height: 2rem;
  -			  clip-path: polygon(39% 0, 0 30%, 100% 100%);
  -			  right: 0;
  -			  bottom: 50%;
  -			}
  -			.comment-point::before,
  -			.comment-point::after {
  -			  content: '';
  -			  position: absolute;
  -			  background: black;
  -			  width: 3px;
  -			}
  -
  -			/* left comment border  */
  -			.comment-point::before {
  -			  height: 110%;
  -			  left: 47%;
  -			  top: 7%;
  -			  transform: rotate(-64deg);
  -			}
  -
  -			/* right comment border */
  -			.comment-point::after {
  -			  height: 100%;
  -			  right: 22%;
  -			  top: 5px;
  -			  transform: rotate(-43deg);
  -			}
  -
  -			.half-worm:hover ~ .half-worm-comment {
  -			  right: 70px;
  -				transition-duration: 1s;
  -			}
  -			
  -			.half-worm:hover ~ .comment-point {
  -			  right: 70px;
  -				transition-duration: 1s;
  -			}
  -
  -			.picnic-items {
  -			  display: grid;
  -			  grid-template-columns: repeat(2, 1fr);
  -			  grid-auto-rows: 200px;
  -			  gap: 1rem;
  -			  margin-top: 3rem;
  -			  width: 100%;
  -			}
  -
  -			.picnic-items > * {
  -			  display: flex;
  -			  align-items: center;
  -			  justify-content: center;
  -			}
  -
  -			.picnic-item > p {
  -			  position: absolute;
  -			  z-index: 100;
  -			  display: flex;
  -			  align-items: center;
  -			  background-color: rgba(255, 255, 255, 0.8);
  -			  color: #5AB1BB;
  -			  padding: 10px 20px;
  -			  height: 30px;
  -			  border-radius: 50%;
  -			  font-weight: bold;
  -			  opacity: 0;
  -			  visibility: hidden;
  -			  transition: opacity 0.5s ease, visibility 0.5s ease;
  -			}
  -			
  -			.picnic-item:hover > p {
  -			  opacity: 1;
  -			  visibility: visible;
  -			}
  -
  -			.picnic-basket {
  -				z-index: 10;
  -				width: 130%;
  -				max-width: 350px;
  -				transform: scaleX(-1);
  -				margin: 10px 0 0 0;
  -				animation: wiggle 2s infinite;
  -			}
  -
  -			.coffee-spill {
  -				width: 60%;
  -				opacity: 60%;
  -				margin: -150px 0 0 10px;
  -			}
  -
  -			.bagoot {
  -				z-index: 10;
  -				width: 80%;
  -				margin: 0 0 13rem 0;
  -				transform: scaleX(-1);
  -				animation: wiggle 1s infinite;
  -			}
  -			.bagoot-item > p{
  -			  bottom: 35rem;
  -			}
  -
  -			.wine {
  -				z-index: 10;
  -				width: 60%;
  -				margin: 0 0 150px 10px;
  -				animation: oppositeWiggle 1.5s infinite;
  -			}
  -
  -			.napkin {
  -				z-index: 9;
  -				width: 100%;
  -			}
  -
  -			.puppy {
  -				z-index: 10;
  -				width: 120%;
  -				margin: 10vw 0 0 20px;
  -			}
  -
  -			.strawberry-line {
  -				position: absolute;
  -				width: 90vw;
  -				left: 50%;
  -				bottom: 30px;
  -			  transform: translate(-50%, 30%);
  -				height: 100px;
  -				object-fit: cover;
  -			}
  -			
  -			/* KEYFRAMES  */
  -
  -			@keyframes moveHeader {
  -				0%, 12%, 80%, 100% {
  -					transform: translate(0) rotateY(-10deg);
  -				}
  -				20% {
  -					transform: translateX(100px) rotateY(15deg);
  -				}
  -				2%, 64%{
  -					margin: 0;
  -				}
  -				4%, 67%{
  -					margin: 10px 0;
  -				}
  -				6%, 70%{
  -					margin: -10px;
  -				}
  -				8%, 73%{
  -					margin: 10px 0;
  -				}
  -				74% {
  -					transform: translateX(100px) rotateY(15deg);
  -				}
  -			}
  -
  -			@keyframes halfWormAnimation {
  -				0% {
  -					right: -550px;
  -				}
  -				70% {
  -					right: -410px;
  -				}
  -				100% {
  -					right: -530px;
  -				}
  -			}
  -
  -			@keyframes wiggle {
  -				0% {
  -					transform: rotate(0deg) scaleX(-1);
  -				}
  -				50% {
  -					transform: rotate(30deg) scaleX(-1);
  -				}
  -			}
  -			
  -			@keyframes oppositeWiggle {
  -				0%, 100% {
  -					transform: rotate(40deg);
  -				}
  -				50% {
  -					transform: rotate(-40deg);
  -				}
  -			}
  -		</style>
  -	</head>
  -	<body>
  -		<div class="main">
  -			<div class="grass-background"></div>
  -			<div class="strawberry">πŸ“</div>
  -			<div class="floating-header"><h1>Jenno's Picnic World</h1></div>
  -			<div><img class="worm" src="https://i.imgur.com/6swkRtk.png"/></div>
  -			<div class="picnic-blanket">
  -				<img class="pink-stain" src="https://i.imgur.com/DF5VToZ.png"/>
  -				<div class="half-worm-container">
  -					<img class="half-worm" src="https://imgur.com/PWcfIUV.png"/>
  -					<p class="half-worm-comment">HEWO???</p>
  -					<div class="comment-point"></div>
  -				</div>
  -				<div class="picnic-items">
  -					<div class="picnic-item">
  -						<p>Ew, who brought the veggies?</p>
  -						<img class="picnic-basket" src="https://imgur.com/cTqGq8W.png"/>
  -					</div>
  -					<div class="picnic-item">
  -						<p>Oops, spilled some coffee</p>
  -						<img class="coffee-spill" src="https://i.imgur.com/NrwvPsl.png"/>
  -					</div>
  -					<div class="picnic-item">
  -						<p>*Smearing some goo around*</p>
  -						<img class="napkin" src="https://i.imgur.com/mMwxDaL.png"/>
  -					</div>
  -					<div class="picnic-item bagoot-item">
  -						<p>Mmm bagoot</p>
  -						<img class="bagoot" src="https://i.imgur.com/kUkZ4Dc.png"/>
  -					</div>
  -					<div class="picnic-item">
  -						<p>Sip sip, slurp slurp</p>
  -						<img class="wine" src="https://i.imgur.com/CZqVzuX.png"/>
  -					</div>
  -					<div class="picnic-item">
  -						<p>Zzz... Food coma</p>
  -						<img class="puppy" src="https://i.imgur.com/oDxsZbx.png"/>
  -					</div>
  -
  -				</div>
  -			</div>
  -			<img class="strawberry-line" src="https://i.imgur.com/KyeZwHG.png"/>
  -		</div>
  -	</body>
  -</html>
pages/jennos_picnic_world/images/bagoot.png
Binary files differ.
pages/jennos_picnic_world/images/coffee_spill.png
Binary files differ.
pages/jennos_picnic_world/images/grass_background.jpeg
Binary files differ.
pages/jennos_picnic_world/images/half_worm.png
Binary files differ.
pages/jennos_picnic_world/images/napkin.png
Binary files differ.
pages/jennos_picnic_world/images/picnic_basket.png
Binary files differ.
pages/jennos_picnic_world/images/pink_stain.png
Binary files differ.
pages/jennos_picnic_world/images/puppy.png
Binary files differ.
pages/jennos_picnic_world/images/strawberry_line.png
Binary files differ.
pages/jennos_picnic_world/images/wine.png
Binary files differ.
pages/jennos_picnic_world/images/worm.png
Binary files differ.
pages/jennos_picnic_world/index.html
  1 +<html>
  2 +	<head>
  3 +		<style>
  4 +			body {
  5 +				padding: 0;
  6 +				margin: 0;
  7 +				height: 100%;
  8 +				width: 100%;
  9 +				display: flex;
 10 +				align-items: center;
 11 +				justify-content: center;
 12 +				font-family: sans-serif;
 13 +			}
 14 +			h1, h2, h3, h4 {
 15 +				padding: 0;
 16 +				margin: 0;
 17 +				color: #880044;
 18 +				font-family: sans-serif;
 19 +			}
 20 +
 21 +			.main {
 22 +			  position: relative;
 23 +			  width: 100vw;
 24 +			  height: 100vh;
 25 +			  overflow: hidden;
 26 +				display: flex;
 27 +				align-items: center;
 28 +				justify-content: center;
 29 +			}
 30 +
 31 +			.grass-background {
 32 +				z-index: -10;
 33 +				position: absolute;
 34 +				width: 100vw;
 35 +				height: 100vh;
 36 +			  background-image: url("https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/grass_background.jpeg");
 37 +			  background-repeat: no-repeat;
 38 +			  background-size: cover;
 39 +			  background-position: center center;
 40 +				overflow: hidden;
 41 +			}
 42 +			
 43 +			.picnic-blanket {
 44 +				height: 90vh;
 45 +				width: 90vw;
 46 +				box-sizing: border-box;
 47 +				padding: 18px 20px;
 48 +				background: conic-gradient(
 49 +					#AA1155 90deg,
 50 +					#F9E4BC 90deg 180deg,
 51 +					#DD1155 180deg 270deg,
 52 +					#F9E4BC 270deg
 53 +				);
 54 +				background-repeat: repeat;
 55 +				background-size: 30vw 15vw;
 56 +				background-color: rgba(150, 175, 116, 0.7);
 57 +			}
 58 +
 59 +			.pink-stain {
 60 +				position: absolute;
 61 +				width: 90vw;
 62 +				height: 90vh;
 63 +				left: 50%;
 64 +				transform: translate(-50%, -2%);
 65 +				z-index: 0;
 66 +			}
 67 +
 68 +			.floating-header {
 69 +				position: absolute;
 70 +				top: 20px;
 71 +				left: 0px;
 72 +				background-color: #A5C882;
 73 +				width: 50%;
 74 +				height: 80px;
 75 +				padding: 20px 30px;
 76 +				display: flex;
 77 +				align-items: center;
 78 +				justify-content: center;
 79 +				text-align: center;
 80 +				border-radius: 50%;
 81 +				box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1), inset 5px -5px 10px 5px rgba(120, 145, 96, 0.9);
 82 +				/* animation: moveHeader 1s steps(1, end) infinite;
 83 +				animation-timing-function: ease;
 84 +				animation-name: moveHeader;
 85 +				animation-duration: 5s; */
 86 +				z-index: 1;
 87 +			}
 88 +
 89 +			.strawberry {
 90 +				position: absolute;
 91 +				top: 10px;
 92 +				right: 10px;
 93 +				font-size: 5rem;
 94 +				z-index: 10;
 95 +			}
 96 +
 97 +			.strawberry:hover {
 98 +				transform: scale(0.8) rotateY(180deg);
 99 +				cursor: pointer;
100 +			}
101 +
102 +			.worm {
103 +				position: absolute;
104 +				width: 5rem;
105 +				bottom: 8vh;
106 +				left: 55px;
107 +			}
108 +
109 +			.half-worm {
110 +				position: absolute;
111 +				right: -550px;
112 +				transform: scale(0.3);
113 +			}
114 +
115 +			.half-worm:hover {
116 +				transition-duration:0.5s;
117 +				animation: halfWormAnimation 2.5s forwards;
118 +			}
119 +
120 +			.half-worm-comment {
121 +				border: 3px solid black;
122 +				position: absolute;
123 +				display: flex;
124 +				align-items: center;
125 +				justify-content: center;
126 +				width: 8rem;
127 +				height: 3rem;
128 +				font-family: sans-serif;
129 +				text-align: center;
130 +				font-weight: bold;
131 +				background-color: white;
132 +				border-radius: 50%;
133 +				bottom: 50%;
134 +				right: 0;
135 +			}
136 +
137 +			.comment-point {
138 +			  position: absolute;
139 +			  background-color: white;
140 +			  width: 3rem;
141 +			  height: 2rem;
142 +			  clip-path: polygon(39% 0, 0 30%, 100% 100%);
143 +			  right: 0;
144 +			  bottom: 50%;
145 +			}
146 +			.comment-point::before,
147 +			.comment-point::after {
148 +			  content: '';
149 +			  position: absolute;
150 +			  background: black;
151 +			  width: 3px;
152 +			}
153 +
154 +			/* left comment border  */
155 +			.comment-point::before {
156 +			  height: 110%;
157 +			  left: 47%;
158 +			  top: 7%;
159 +			  transform: rotate(-64deg);
160 +			}
161 +
162 +			/* right comment border */
163 +			.comment-point::after {
164 +			  height: 100%;
165 +			  right: 22%;
166 +			  top: 5px;
167 +			  transform: rotate(-43deg);
168 +			}
169 +
170 +			.half-worm:hover ~ .half-worm-comment {
171 +			  right: 70px;
172 +				transition-duration: 1s;
173 +			}
174 +			
175 +			.half-worm:hover ~ .comment-point {
176 +			  right: 70px;
177 +				transition-duration: 1s;
178 +			}
179 +
180 +			.picnic-items {
181 +			  display: grid;
182 +			  grid-template-columns: repeat(2, 1fr);
183 +			  grid-auto-rows: 200px;
184 +			  gap: 1rem;
185 +			  margin-top: 3rem;
186 +			  width: 100%;
187 +			}
188 +
189 +			.picnic-items > * {
190 +			  display: flex;
191 +			  align-items: center;
192 +			  justify-content: center;
193 +			}
194 +
195 +			.picnic-item > p {
196 +			  position: absolute;
197 +			  z-index: 100;
198 +			  display: flex;
199 +			  align-items: center;
200 +			  background-color: rgba(255, 255, 255, 0.8);
201 +			  color: #5AB1BB;
202 +			  padding: 10px 20px;
203 +			  height: 30px;
204 +			  border-radius: 50%;
205 +			  font-weight: bold;
206 +			  opacity: 0;
207 +			  visibility: hidden;
208 +			  transition: opacity 0.5s ease, visibility 0.5s ease;
209 +			}
210 +			
211 +			.picnic-item:hover > p {
212 +			  opacity: 1;
213 +			  visibility: visible;
214 +			}
215 +
216 +			.picnic-basket {
217 +				z-index: 10;
218 +				width: 130%;
219 +				max-width: 350px;
220 +				transform: scaleX(-1);
221 +				margin: 10px 0 0 0;
222 +				animation: wiggle 2s infinite;
223 +			}
224 +
225 +			.coffee-spill {
226 +				width: 60%;
227 +				opacity: 60%;
228 +				margin: -150px 0 0 10px;
229 +			}
230 +
231 +			.bagoot {
232 +				z-index: 10;
233 +				width: 80%;
234 +				margin: 0 0 13rem 0;
235 +				transform: scaleX(-1);
236 +				animation: wiggle 1s infinite;
237 +			}
238 +			.bagoot-item > p{
239 +			  bottom: 35rem;
240 +			}
241 +
242 +			.wine {
243 +				z-index: 10;
244 +				width: 60%;
245 +				margin: 0 0 150px 10px;
246 +				animation: oppositeWiggle 1.5s infinite;
247 +			}
248 +
249 +			.napkin {
250 +				z-index: 9;
251 +				width: 100%;
252 +			}
253 +
254 +			.puppy {
255 +				z-index: 10;
256 +				width: 120%;
257 +				margin: 10vw 0 0 20px;
258 +			}
259 +
260 +			.strawberry-line {
261 +				position: absolute;
262 +				width: 90vw;
263 +				left: 50%;
264 +				bottom: 30px;
265 +			  transform: translate(-50%, 30%);
266 +				height: 100px;
267 +				object-fit: cover;
268 +			}
269 +			
270 +			/* KEYFRAMES  */
271 +
272 +			@keyframes moveHeader {
273 +				0%, 12%, 80%, 100% {
274 +					transform: translate(0) rotateY(-10deg);
275 +				}
276 +				20% {
277 +					transform: translateX(100px) rotateY(15deg);
278 +				}
279 +				2%, 64%{
280 +					margin: 0;
281 +				}
282 +				4%, 67%{
283 +					margin: 10px 0;
284 +				}
285 +				6%, 70%{
286 +					margin: -10px;
287 +				}
288 +				8%, 73%{
289 +					margin: 10px 0;
290 +				}
291 +				74% {
292 +					transform: translateX(100px) rotateY(15deg);
293 +				}
294 +			}
295 +
296 +			@keyframes halfWormAnimation {
297 +				0% {
298 +					right: -550px;
299 +				}
300 +				70% {
301 +					right: -410px;
302 +				}
303 +				100% {
304 +					right: -530px;
305 +				}
306 +			}
307 +
308 +			@keyframes wiggle {
309 +				0% {
310 +					transform: rotate(0deg) scaleX(-1);
311 +				}
312 +				50% {
313 +					transform: rotate(30deg) scaleX(-1);
314 +				}
315 +			}
316 +			
317 +			@keyframes oppositeWiggle {
318 +				0%, 100% {
319 +					transform: rotate(40deg);
320 +				}
321 +				50% {
322 +					transform: rotate(-40deg);
323 +				}
324 +			}
325 +		</style>
326 +	</head>
327 +	<body>
328 +		<div class="main">
329 +			<div class="grass-background"></div>
330 +			<div class="strawberry">πŸ“</div>
331 +			<div class="floating-header"><h1>Jenno's Picnic World</h1></div>
332 +			<div><img class="worm" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/worm.png"/></div>
333 +			<div class="picnic-blanket">
334 +				<img class="pink-stain" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/pink_stain.png"/>
335 +				<div class="half-worm-container">
336 +					<img class="half-worm" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/half_worm.png"/>
337 +					<p class="half-worm-comment">HEWO???</p>
338 +					<div class="comment-point"></div>
339 +				</div>
340 +				<div class="picnic-items">
341 +					<div class="picnic-item">
342 +						<p>Ew, who brought the veggies?</p>
343 +						<img class="picnic-basket" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/picnic_basket.png"/>
344 +					</div>
345 +					<div class="picnic-item">
346 +						<p>Oops, spilled some coffee</p>
347 +						<img class="coffee-spill" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/coffee_spill.png"/>
348 +					</div>
349 +					<div class="picnic-item">
350 +						<p>*Smearing some goo around*</p>
351 +						<img class="napkin" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/napkin.png"/>
352 +					</div>
353 +					<div class="picnic-item bagoot-item">
354 +						<p>Mmm bagoot</p>
355 +						<img class="bagoot" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/bagoot.png"/>
356 +					</div>
357 +					<div class="picnic-item">
358 +						<p>Sip sip, slurp slurp</p>
359 +						<img class="wine" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/wine.png"/>
360 +					</div>
361 +					<div class="picnic-item">
362 +						<p>Zzz... Food coma</p>
363 +						<img class="puppy" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/puppy.png"/>
364 +					</div>
365 +
366 +				</div>
367 +			</div>
368 +			<img class="strawberry-line" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/strawberry_line.png"/>
369 +		</div>
370 +	</body>
371 +</html>
pages/my_homepage.html
  -<html>
  -	<head>
  -		<style>
  -			body {
  -				color: white;
  -				background-color:mediumslateblue;
  -				text-shadow: 2px 2px 2px black;
  -			}
  -			.heading {
  -				font-size: 40px;
  -				background-color: teal;
  -				padding:8px;
  -				box-shadow: 4px 4px black;
  -				border: 1px solid black;
  -			}
  -			p {
  -				font-size: 35px;
  -			}
  -			h3 {
  -				font-size: 35px;
  -			}
  -			img {
  -				max-width:100%;
  -			}
  -		</style>
  -	</head>
  -	<body>
  -		<h1 class="heading">
  -			Welcome to my World Wide Web Site 🌞
  -		</h1>
  -		<center>
  -			<img src="images/welcome.gif" width=400px>
  -			<p>
  -				brace yourself. you are in for a wild ride!!
  -			</p>
  -			<a href="https://hunterirving.com"><img src="images/windows.gif" style="padding:10px;"></a>
  -			<h3>enter by "clicking" on the window above....<br>if you <i><span style="color:red">dare</span></i>.....!</h3>
  -			<img src="images/scared_mouse.gif" style="transform: scaleX(-1); margin-bottom:25px"><img src="images/mac.png" width=200px>
  -		</center>
  -		<h1 class="heading">
  -			Here are a few of my favorite images... πŸ€
  -		</h1>
  -		<center>
  -			<img src="images/cd.gif" style="width:150px">
  -			<br><br>
  -			<img src="images/pika_construction.gif" style="width:50%; image-rendering: pixelated;">
  -		</center>
  -	</body>
  -</html>
pages/my_homepage/index.html
 1 +<html>
 2 +	<head>
 3 +		<style>
 4 +			body {
 5 +				color: white;
 6 +				background-color:mediumslateblue;
 7 +				text-shadow: 2px 2px 2px black;
 8 +			}
 9 +			.heading {
10 +				font-size: 40px;
11 +				background-color: teal;
12 +				padding:8px;
13 +				box-shadow: 4px 4px black;
14 +				border: 1px solid black;
15 +			}
16 +			p {
17 +				font-size: 35px;
18 +			}
19 +			h3 {
20 +				font-size: 35px;
21 +			}
22 +			img {
23 +				max-width:100%;
24 +			}
25 +		</style>
26 +	</head>
27 +	<body>
28 +		<h1 class="heading">
29 +			Welcome to my World Wide Web Site 🌞
30 +		</h1>
31 +		<center>
32 +			<img src="https://hunterirving.github.io/web_workshop/images/welcome.gif" width=400px>
33 +			<p>
34 +				brace yourself. you are in for a wild ride!!
35 +			</p>
36 +			<a href="https://hunterirving.com"><img src="https://hunterirving.github.io/web_workshop/images/windows.gif" style="padding:10px;"></a>
37 +			<h3>enter by "clicking" on the window above....<br>if you <i><span style="color:red">dare</span></i>.....!</h3>
38 +			<img src="https://hunterirving.github.io/web_workshop/images/scared_mouse.gif" style="transform: scaleX(-1); margin-bottom:25px"><img src="https://hunterirving.github.io/web_workshop/images/mac.png" width=200px>
39 +		</center>
40 +		<h1 class="heading">
41 +			Here are a few of my favorite images... πŸ€
42 +		</h1>
43 +		<center>
44 +			<img src="https://hunterirving.github.io/web_workshop/images/cd.gif" style="width:150px">
45 +			<br><br>
46 +			<img src="https://hunterirving.github.io/web_workshop/images/pika_construction.gif" style="width:50%; image-rendering: pixelated;">
47 +		</center>
48 +	</body>
49 +</html>
pages/pizza_heaven.html
  -<html>
  -	<head>
  -		<style>
  -			body {
  -				background-color:orange;
  -				text-shadow: 3px 3px 5px brown;
  -				font-family: monospace;
  -				font-size: 32px;
  -			}
  -			img {
  -				filter: drop-shadow(5px 5px 5px black);
  -				max-width: 50%;
  -			}
  -			.block {
  -				background-color: red;
  -				margin-top: 20px;
  -				color: white;
  -				filter: drop-shadow(5px 5px 0px black);
  -				text-shadow: 3px 3px 5px brown;
  -			}
  -			p {
  -				color: black;
  -				text-shadow: 3px 3px 10px white;
  -			}
  -			h1 {
  -				font-family: serif;
  -			}
  -			table {
  -				font-size: 40px;
  -				border:1px solid black;
  -			}
  -			th, td {
  -				border:1px solid black;
  -				padding: 10px;
  -			}
  -			th {
  -				background-color: red;
  -				color: white;
  -			}
  -		</style>
  -	</head>
  -	<body>
  -		<center>
  -			<h1>PIZZA HEAVEN</h1>
  -			<p>
  -				<b><span style="color: red; text-shadow: 3px 3px 5px white;">THE BEST</span> <span style="color:green; text-shadow: 3px 3px 5px white;">PIZZA</span> <span style="color:white">IN THE WORLD</span></b>
  -			</p>
  -				<hr>
  -			<img src="images/smiling_pizza.gif">
  -			<img src="images/gaia.gif" width=200px>
  -			<img src="images/smiling_pizza.gif">
  -			<div class="block">
  -				<marquee scrollamount=20>AYY, I'M MAKIN' PIZZA HERE !</marquee>
  -			</div>
  -		</center>
  -			<br>
  -			<p>Have you ever tasted a pizza pie and then ya thought to yourself...</p>
  -			<p>What the HECK am I even munching on here???</p>
  -			<p>Look. We all been there.</p>
  -			<p>But that DON'T mean you gotta put up with a subpar pizza pie anymore. Cause you just discovered pizza perfection!</p>
  -			<p>Welcome to PIZZA HEAVEN, baby.</p>
  -			<center><img src="https://images.ctfassets.net/j8tkpy1gjhi5/5OvVmigx6VIUsyoKz1EHUs/b8173b7dcfbd6da341ce11bcebfa86ea/Salami-pizza-hero.jpg"></center>
  -			<i></i><h1 style="text-align: right">"oh yeah. that's the good stuff." β€” you</h1>
  -			<p>You're gonna love the way it tastes. Try it now in one of these exciting flavors.</p>
  -			<center>
  -				<table>
  -					<tr>
  -						<th>Pizza Pie</th>
  -						<th>Pizza Price</th>
  -						<th>Notes</th>
  -					</tr>
  -					<tr>
  -						<td>
  -							Pepperon
  -						</td>
  -						<td>
  -							$100
  -						</td>
  -						<td>
  -							Yup, that's pizza
  -						</td>
  -					</tr>
  -				</table>
  -			</center>
  -			<br>
  -		<p>
  -		What, you want another kind of pizza?<br>
  -		Pepperon not good enough for youse?<br>
  -		Get the h*ll outta here.<br>No, seriously.<br>
  -		Get the H*LL outta here!!<br><br>
  -		Just kidding.<br><br>
  -		But you better not disparage our pizza pies again, capeeshe???
  -		</p>
  -		<br><br>
  -		<center><img src="images/smiling_pizza.gif"></center><br><br>
  -	</body>
  -</html>
pages/pizza_heaven/images/pizza_picture.jpg
Binary files differ.
pages/pizza_heaven/index.html
 1 +<html>
 2 +	<head>
 3 +		<style>
 4 +			body {
 5 +				background-color:orange;
 6 +				text-shadow: 3px 3px 5px brown;
 7 +				font-family: monospace;
 8 +				font-size: 32px;
 9 +			}
10 +			img {
11 +				filter: drop-shadow(5px 5px 5px black);
12 +				max-width: 50%;
13 +			}
14 +			.block {
15 +				background-color: red;
16 +				margin-top: 20px;
17 +				color: white;
18 +				filter: drop-shadow(5px 5px 0px black);
19 +				text-shadow: 3px 3px 5px brown;
20 +			}
21 +			p {
22 +				color: black;
23 +				text-shadow: 3px 3px 10px white;
24 +			}
25 +			h1 {
26 +				font-family: serif;
27 +			}
28 +			table {
29 +				font-size: 40px;
30 +				border:1px solid black;
31 +			}
32 +			th, td {
33 +				border:1px solid black;
34 +				padding: 10px;
35 +			}
36 +			th {
37 +				background-color: red;
38 +				color: white;
39 +			}
40 +		</style>
41 +	</head>
42 +	<body>
43 +		<center>
44 +			<h1>PIZZA HEAVEN</h1>
45 +			<p>
46 +				<b><span style="color: red; text-shadow: 3px 3px 5px white;">THE BEST</span> <span style="color:green; text-shadow: 3px 3px 5px white;">PIZZA</span> <span style="color:white">IN THE WORLD</span></b>
47 +			</p>
48 +				<hr>
49 +			<img src="https://hunterirving.github.io/web_workshop/images/smiling_pizza.gif">
50 +			<img src="https://hunterirving.github.io/web_workshop/images/gaia.gif" width=200px>
51 +			<img src="https://hunterirving.github.io/web_workshop/images/smiling_pizza.gif">
52 +			<div class="block">
53 +				<marquee scrollamount=20>AYY, I'M MAKIN' PIZZA HERE !</marquee>
54 +			</div>
55 +		</center>
56 +			<br>
57 +			<p>Have you ever tasted a pizza pie and then ya thought to yourself...</p>
58 +			<p>What the HECK am I even munching on here???</p>
59 +			<p>Look. We all been there.</p>
60 +			<p>But that DON'T mean you gotta put up with a subpar pizza pie anymore. Cause you just discovered pizza perfection!</p>
61 +			<p>Welcome to PIZZA HEAVEN, baby.</p>
62 +			<center><img src="https://hunterirving.github.io/web_workshop/pages/pizza_heaven/images/pizza_picture.jpg"></center>
63 +			<i></i><h1 style="text-align: right">"oh yeah. that's the good stuff." β€” you</h1>
64 +			<p>You're gonna love the way it tastes. Try it now in one of these exciting flavors.</p>
65 +			<center>
66 +				<table>
67 +					<tr>
68 +						<th>Pizza Pie</th>
69 +						<th>Pizza Price</th>
70 +						<th>Notes</th>
71 +					</tr>
72 +					<tr>
73 +						<td>
74 +							Pepperon
75 +						</td>
76 +						<td>
77 +							$100
78 +						</td>
79 +						<td>
80 +							Yup, that's pizza
81 +						</td>
82 +					</tr>
83 +				</table>
84 +			</center>
85 +			<br>
86 +		<p>
87 +		What, you want another kind of pizza?<br>
88 +		Pepperon not good enough for youse?<br>
89 +		Get the h*ll outta here.<br>No, seriously.<br>
90 +		Get the H*LL outta here!!<br><br>
91 +		Just kidding.<br><br>
92 +		But you better not disparage our pizza pies again, capeeshe???
93 +		</p>
94 +		<br><br>
95 +		<center><img src="images/smiling_pizza.gif"></center><br><br>
96 +	</body>
97 +</html>