add folders for example pages; use absolute img urls Hunter Wednesday, July 16th, 2025 at 11:14 AM
Binary files differ.
Binary files differ.
-<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=""guacamole justice is a dish best served cold" - 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>
Binary files differ.
Binary files differ.
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=""guacamole justice is a dish best served cold" - 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>
-<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>
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
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>
-<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>
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>
-<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>
Binary files differ.
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>