Merge pull request #1 from jenlu33/main
add Jenno's Picnic World
Hunter Irving
Sunday, July 13th, 2025 at 11:05 PM
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://i.imgur.com/09PVTWE.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://i.imgur.com/6swkRtk.png"/></div>
333 + <div class="picnic-blanket">
334 + <img class="pink-stain" src="https://i.imgur.com/DF5VToZ.png"/>
335 + <div class="half-worm-container">
336 + <img class="half-worm" src="https://imgur.com/PWcfIUV.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://imgur.com/cTqGq8W.png"/>
344 + </div>
345 + <div class="picnic-item">
346 + <p>Oops, spilled some coffee</p>
347 + <img class="coffee-spill" src="https://i.imgur.com/NrwvPsl.png"/>
348 + </div>
349 + <div class="picnic-item">
350 + <p>*Smearing some goo around*</p>
351 + <img class="napkin" src="https://i.imgur.com/mMwxDaL.png"/>
352 + </div>
353 + <div class="picnic-item bagoot-item">
354 + <p>Mmm bagoot</p>
355 + <img class="bagoot" src="https://i.imgur.com/kUkZ4Dc.png"/>
356 + </div>
357 + <div class="picnic-item">
358 + <p>Sip sip, slurp slurp</p>
359 + <img class="wine" src="https://i.imgur.com/CZqVzuX.png"/>
360 + </div>
361 + <div class="picnic-item">
362 + <p>Zzz... Food coma</p>
363 + <img class="puppy" src="https://i.imgur.com/oDxsZbx.png"/>
364 + </div>
365 +
366 + </div>
367 + </div>
368 + <img class="strawberry-line" src="https://i.imgur.com/KyeZwHG.png"/>
369 + </div>
370 + </body>
371 +</html>