commit 24fae3abe4d0f1162acb70784e049c55b69a32df parent db8077ce080685293216ccd8a9a41bbd5c6e4234 Author: Hunter Date: Wed, 16 Jul 2025 11:14:11 -0400 add folders for example pages; use absolute img urls Diffstat:
24 files changed, 572 insertions(+), 572 deletions(-)
diff --git a/images/coffee.png b/images/coffee.png Binary files differ. diff --git a/images/hacking.gif b/images/hacking.gif Binary files differ. diff --git a/pages/avocado.html b/pages/avocado.html @@ -1,51 +0,0 @@ -<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> -\ No newline at end of file diff --git a/pages/avocado_warehouse/images/avocado.jpg b/pages/avocado_warehouse/images/avocado.jpg Binary files differ. diff --git a/pages/avocado_warehouse/images/richmond.png b/pages/avocado_warehouse/images/richmond.png Binary files differ. diff --git a/pages/avocado_warehouse/index.html b/pages/avocado_warehouse/index.html @@ -0,0 +1,51 @@ +<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://hunterirving.github.io/web_workshop/pages/avocado_warehouse/images/avocado.jpg"> + <p> + so you're looking for some avocados, eh? 🥑</p> + <p> + well, you came to the right place. + </p> + <img src="https://hunterirving.github.io/web_workshop/pages/avocado_warehouse/images/richmond.png"> + <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://hunterirving.github.io/web_workshop/images/coffee.png" 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="https://hunterirving.github.io/web_workshop/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> +\ No newline at end of file diff --git a/pages/jennos_picnic_world.html b/pages/jennos_picnic_world.html @@ -1,371 +0,0 @@ -<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 diff --git a/pages/jennos_picnic_world/images/bagoot.png b/pages/jennos_picnic_world/images/bagoot.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/coffee_spill.png b/pages/jennos_picnic_world/images/coffee_spill.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/grass_background.jpeg b/pages/jennos_picnic_world/images/grass_background.jpeg Binary files differ. diff --git a/pages/jennos_picnic_world/images/half_worm.png b/pages/jennos_picnic_world/images/half_worm.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/napkin.png b/pages/jennos_picnic_world/images/napkin.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/picnic_basket.png b/pages/jennos_picnic_world/images/picnic_basket.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/pink_stain.png b/pages/jennos_picnic_world/images/pink_stain.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/puppy.png b/pages/jennos_picnic_world/images/puppy.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/strawberry_line.png b/pages/jennos_picnic_world/images/strawberry_line.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/wine.png b/pages/jennos_picnic_world/images/wine.png Binary files differ. diff --git a/pages/jennos_picnic_world/images/worm.png b/pages/jennos_picnic_world/images/worm.png Binary files differ. diff --git a/pages/jennos_picnic_world/index.html b/pages/jennos_picnic_world/index.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://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/grass_background.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://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/worm.png"/></div> + <div class="picnic-blanket"> + <img class="pink-stain" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/pink_stain.png"/> + <div class="half-worm-container"> + <img class="half-worm" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/half_worm.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://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/picnic_basket.png"/> + </div> + <div class="picnic-item"> + <p>Oops, spilled some coffee</p> + <img class="coffee-spill" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/coffee_spill.png"/> + </div> + <div class="picnic-item"> + <p>*Smearing some goo around*</p> + <img class="napkin" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/napkin.png"/> + </div> + <div class="picnic-item bagoot-item"> + <p>Mmm bagoot</p> + <img class="bagoot" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/bagoot.png"/> + </div> + <div class="picnic-item"> + <p>Sip sip, slurp slurp</p> + <img class="wine" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/wine.png"/> + </div> + <div class="picnic-item"> + <p>Zzz... Food coma</p> + <img class="puppy" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/puppy.png"/> + </div> + + </div> + </div> + <img class="strawberry-line" src="https://hunterirving.github.io/web_workshop/pages/jennos_picnic_world/images/strawberry_line.png"/> + </div> + </body> +</html> +\ No newline at end of file diff --git a/pages/my_homepage.html b/pages/my_homepage.html @@ -1,49 +0,0 @@ -<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> -\ No newline at end of file diff --git a/pages/my_homepage/index.html b/pages/my_homepage/index.html @@ -0,0 +1,49 @@ +<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="https://hunterirving.github.io/web_workshop/images/welcome.gif" width=400px> + <p> + brace yourself. you are in for a wild ride!! + </p> + <a href="https://hunterirving.com"><img src="https://hunterirving.github.io/web_workshop/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="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> + </center> + <h1 class="heading"> + Here are a few of my favorite images... 🍀 + </h1> + <center> + <img src="https://hunterirving.github.io/web_workshop/images/cd.gif" style="width:150px"> + <br><br> + <img src="https://hunterirving.github.io/web_workshop/images/pika_construction.gif" style="width:50%; image-rendering: pixelated;"> + </center> + </body> +</html> +\ No newline at end of file diff --git a/pages/pizza_heaven.html b/pages/pizza_heaven.html @@ -1,97 +0,0 @@ -<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> -\ No newline at end of file diff --git a/pages/pizza_heaven/images/pizza_picture.jpg b/pages/pizza_heaven/images/pizza_picture.jpg Binary files differ. diff --git a/pages/pizza_heaven/index.html b/pages/pizza_heaven/index.html @@ -0,0 +1,97 @@ +<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="https://hunterirving.github.io/web_workshop/images/smiling_pizza.gif"> + <img src="https://hunterirving.github.io/web_workshop/images/gaia.gif" width=200px> + <img src="https://hunterirving.github.io/web_workshop/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://hunterirving.github.io/web_workshop/pages/pizza_heaven/images/pizza_picture.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> +\ No newline at end of file
