commit b9676398428b565a24fb477789f7690626b17e78
parent bbec80dacf7330516b1d88178ac0d028c217b24d
Author: Jen Lu
Date: Sun, 13 Jul 2025 23:02:19 -0400
add Jenno's Picnic World
Diffstat:
1 file changed, 372 insertions(+), 0 deletions(-)
diff --git a/pages/jennos_picnic_world.html b/pages/jennos_picnic_world.html
@@ -0,0 +1,371 @@
+<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>
+\ No newline at end of file