index.html (8.1 KB)
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>