Miami-University-ETBD · almanacmonday · Oct 5, 2024 · Oct 5, 2024 · Oct 7, 2024 · Oct 17, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+My Mouse Cheese Delivery site! 🐁
+I love telling stories through my artwork, so I thought I'd do the same here with my mouse-centric cheese delivery site. 🧀
+As our class continues, I will be adding more storytelling elements to my website to keep it fun and interesting. You will learn more about a fun quirky cast
+of characters seen around the website, including the Head Mouser, Adventuremouse, Review Mouse, and Mr.Mouser himself!
+more coming soon!
+Best,
+Diana Conner
+🐭
diff --git a/about us.html → about_us.html b/about us.html → about_us.html
@@ -4,13 +4,19 @@
 <title> Mouser's Cheese Cellar About Us </title>
 <link rel="stylesheet" href="styles.css" 
 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+<div class="topnav">
+  <a href="index.html">Home Page</a>
+  <a class="active" href="about_us.html">About Us</a>
+  <a href="cheese_raffle.html">Cheese Raffle</a>
+  <a href="materialize.html"> Materialize</a>
+  <a href="jquery.html"> JQuery</a>
+</div>
 <link rel="icon" type="image/x-icon" href='file:///C:/Users/Diana/Downloads/favicon.ico'>
 </head> 
 <div class=" mydiv">
 <body>
 <header>
-  <p1> Site logo goes here | About Us</p1>
+  <p id="header"> Site logo goes here | About Us</p>
   <h1> About Our Company </h1> <h2> <i> Humble Beginnings </i> </h2>
   </header>
 
@@ -23,10 +29,13 @@ <h1> About Our Company </h1> <h2> <i> Humble Beginnings </i> </h2>
   <p> In 1344, Mr. Mouser was born and on a mission to become the first mouse millionaire. His father abandoned him at birth, and being the youngest of 8 siblings (three of which already passed from carriage accidents and the bubonic plague), he felt it was his duty to take care of his mother until her passing in 1345. When she passed, he made a promise at only one year of age to pass on her recipes. </p>
 
   <h2> Mr. Mouser's Legacy </h2>
-<p> Mr. Mouser was so focused on his company and changing the world, that he hadn't even considered who to give the company to when he did eventually die of natural causes after living a long 7 year lifespan. he had no kin, dying in 1351 with his company associates by his side. The business was given to his assistant Carlyle mouse, then to his assistant and soforth. This system kept the business afloat until the newest CEO started in 2016 who's been supervising the company for 8 years now. <br>
-  <small> **We cannot disclose who the CEO is at this time, check in later for new updates.** </small>
-
-<body>
+<p> Mr. Mouser was so focused on his company and changing the world, that he hadn't even considered who to give the company to when he did eventually die of natural causes after living a long 7 year lifespan. he had no kin, dying in 1351 with his company associates by his side. The business was given to his assistant Carlyle mouse, then to his assistant and soforth. This system kept the business afloat until the newest CEO started in 2016 who's been supervising the company for 8 years now.  <br>
+  <small> **We cannot disclose who the CEO is at this time, check in later for new updates.** </p></small>
+   <p> What's this??? </p>
+   <p id="java2" style="display:none"> <a href=https://www.youtube.com/watch?v=pZ-oEuWMszs target="_blank">NEW CEO!</a> </p>
+   <button id=button2 type="button" onclick="document.getElementById('java2').style.display='block'">Click Me!</button>
+   <br>
+   <br>
   <h3>Evolution of the Company </h3>
 <table style="width:100%">
   <tr>
@@ -42,22 +51,22 @@ <h3>Evolution of the Company </h3>
     <td>Made all mice who work with cheese wash their paws before getting back on the floor.</td>
     <td>Banned uranium packaged cheese due to worker's health complaints. </td>
     <td>Made new company policy that mice and rats must follow regardless of health or disability status. </td>
-  </tr>
   <tr>
     <td>Made the factory Bubonic-plague free by doing frequent tick checks and allowing mice to go on sick leave.</td>
     <td>Promoted safe working environments by bringing in an all-mice HR department.</td>
     <td>Funded Cheese Cube Parties for workers who have reached their quotas.</td>
-
+</tr>
   </table> <br>
-  <p3> <b>-->CLICK OR TAP NOW TO PLAY ADVENTURE MICE OUT NOW ON ALL PLATFORMS!<--</b> </p3> <p4> <small> <b> #ad </b> </small> <br>
-    <p5> Fellow Gamermice! Have you ever wanted to search the jungle for hidden treasure? In our new game, ADVENTURE MICE, you can! 
-      <ul> 
+  <img src="./Images/adventuremouse.png" alt="ADVENTURE MOUSE IS THE BEST GAME" width="300" height="300"> 
+  <p id="avh"> <b>-->CLICK OR TAP NOW TO PLAY ADVENTURE MICE OUT NOW ON ALL PLATFORMS!<--</b> <small>  <b> #ad </b> </small> </p> 
+    <p id="adventuremouse"> Fellow Gamermice! Have you ever wanted to search the jungle for hidden treasure? In our new game, ADVENTURE MICE, you can! </p> 
+      <ul id="adventuremouse"> 
     <li>Join Adventuremouse on a quest to find the hidden treasure! </li>
     <li>Play with friends in our new PVP battle arena! </li>
     <li>Have something you can vaguely ask your coworkers about on your shift! </li>
-        </p5></ul>
-    <p> The Possibilities Are Endless, What Are You Waiting For?</p> 
-    <p3> <b> <small> Trademarked by MEGA Mouse CO. </b>  </small> </p3>
+    </ul>
+    <p id="adventuremouse"> The Possibilities Are Endless, What Are You Waiting For?</p> 
+    <p id="adventuremouse"> <b> <small> Trademarked by MEGA Mouse CO. </b>  </small> 
 <footer>
  <p><b>Mouser's Cheese Cellar </b>|Westcheeserton, Massachusetts.| </p></footer>
     </body>

diff --git a/cheese reviews.html b/cheese reviews.html
diff --git a/cheese raffle.html → cheese_raffle.html b/cheese raffle.html → cheese_raffle.html
@@ -1,33 +1,41 @@
-<!DOCTYPE html>
-<html lang="en"
+
+<script> windows.alert("Congracheeslations! Your first cheese raffle ticket was awarded!"); </script>
+  <!DOCTYPE html>
+<html lang="en">
 <head>
 <title> Mouser's Cheese Cellar Cheese Raffle Info </title>
 <link rel="stylesheet" href="styles.css">
 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+<div class="topnav">
+  <a href="index.html">Home Page</a>
+  <a href="about_us.html">About Us</a>
+  <a class="active"  href="cheese_raffle.html">Cheese Raffle</a>
+<a href="materialize.html"> Materialize </a>
+<a href="jquery.html"> JQuery</a>
+</div>
 <link rel="icon" type="image/x-icon" href='file:///C:/Users/Diana/Downloads/favicon.ico'>
 </head> 
  <div class=" div3">
 <header>
     <body>
-  <p1> Site logo goes here | Exclusive Event Page </p1>
-  <h1> The Mouser's Annual Cheese Raffle!</h1> <h2> <i> Information </i> </h2>
+  <p id="header"> Site logo goes here | Exclusive Event Page </p> 
+  <h1> The Mouser's Annual Cheese Raffle!</h1> 
+
+  <h2> <i> Information </i> </h2>
   </header>
 
   <aside>
 <p> <b> Ticket Info. </b> <br> Every mouse on the factory floor gets two tickets for the raffle, while the delivery and order mice get one ticket each.  </p>
   </aside>
   <p> Since Mr.Mousers untimely death in 1351, Carlyle Mouse wanted to honor Mr. Mouser's Business every November with a cheese raffle for all of our loyal workers around the world and in the cheese factory making his dreams a reality. </p>
-  <p> <b> Raffle Rules </b> <p>
+  <p> <b> Raffle Rules </b> </p>
  <ol> <li> You are NOT allowed to barter tickets with a work buddy to have a bigger chance of winning the raffle, if you get caught doing such heinous activities, the Head Mouser will have no choice but to terminate you. </li> <br>
    <li> Sharing prize cheese with coworkers is prohibited. Any acts of "kindness" will be considered conspiracy against the company and will be punished. </li> <br>
-     <li> If you participate, you are under contract not to sue us for any damage that may occur. If you win, we are in no way, shape or form liable for anything that happens to you.
-  </body1>
+     <li> If you participate, you are under contract not to sue us for any damage that may occur. If you win, we are in no way, shape or form liable for anything that happens to you. </li></ol>
   <h2> Winner's Benefits </h2>
-<p>Benefits include a handshake from the CEO, a "congradulations" from the head mouser, and two days of vacation time for a year!
-
-<body>
+<p>Benefits include a handshake from the CEO, a "congradulations" from the head mouser, and two days of vacation time for a year! </p>
   <h3>This Year's Prizes </h3>
+  <img src="./Images/glowing_cheese.png" alt="Cheese Propaganda" width="400" height="400">
 <table style="width:100%">
   <tr>
     <th>First Place</th>
@@ -39,6 +47,7 @@ <h3>This Year's Prizes </h3>
     <td>50 blocks of cheese.</td>
     <td>20 blocks of cheese. </td>
     </tr>
+    <tr>
     <td>A copy of the limited edition "Adventure Mice" Videogame including the "Cheese Pass" for the PVP Battle Arena.</td>
     <td>A copy of the #1 Game of The Year "Adventure Mice" </td>
     <td> A cheese voucher to use with your next purchase at Mouser's Cheese Cellar. </td>
@@ -47,10 +56,11 @@ <h3>This Year's Prizes </h3>
     <td>A trip to the Bahamas, all expenses paid.</td>
     <td>A trip to Cheesinatti and a tour of the Mr.Mouser Museum, the tour is paid.</td>
     <td>A pat on the back from your head mouser.</td>
-
-  </table> </body> <br>
-
-  <p3> <b>-->ADVENTURE MICE 2 IS IN THE WORKS!<--</b> </p3> <p4> <small> <b> #ad </b> </small></p4>
+</tr>
+  </table> <br>
+  <p id="java"> To be entered into the raffle, click the button below!</p>
+  <button type="button" onclick='document.getElementById("java").innerHTML = "Thank you for your patronage! You have been entered."'>CLICK ME!!!</button>
+  <p id="adventuremouse"> <b>-->ADVENTURE MICE 2 IS IN THE WORKS!<--</b> </p3> <p4> <small> <b> #ad </b> </small></p4>
 <footer>
  <p><b>Mouser's Cheese Cellar </b>|Westcheeserton, Massachusetts.| </p></footer>
     </body>

diff --git a/images/Office.mouse.png b/images/Office.mouse.png
diff --git a/images/adventuremouse.png b/images/adventuremouse.png
diff --git a/images/anthro.mouse.LOVES.cheese.png b/images/anthro.mouse.LOVES.cheese.png
diff --git a/images/glowing_cheese.png b/images/glowing_cheese.png
diff --git a/images/mice.American.party.png b/images/mice.American.party.png
diff --git a/images/mice.friends.picknick.png b/images/mice.friends.picknick.png
diff --git a/images/moldycheese1.png b/images/moldycheese1.png
diff --git a/images/moldycheese2.png b/images/moldycheese2.png
diff --git a/images/mouse.family.png b/images/mouse.family.png
diff --git a/images/mouse.thumbs.up.png b/images/mouse.thumbs.up.png
diff --git a/images/mouse_pic.png b/images/mouse_pic.png
diff --git a/images/normal.mouse.png b/images/normal.mouse.png
diff --git a/images/ourcheeseprestine.png b/images/ourcheeseprestine.png
diff --git a/images/party.mouse.png b/images/party.mouse.png
diff --git a/images/promotional.material.png b/images/promotional.material.png
diff --git a/index.html b/index.html
@@ -4,13 +4,20 @@
 <title> Mouser's Cheese Cellar </title>
 <link rel="stylesheet" href="styles.css" 
 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+<div class="topnav">
+  <a class="active" 
+ href="index.html">Home Page</a>
+  <a href="about_us.html">About Us</a>
+  <a href="cheese_raffle.html">Cheese Raffle</a>
+  <a href="materialize.html"> Materialize </a>
+  <a href="jquery.html"> JQuery</a>
+</div>
 <link rel="icon" type="image/x-icon" href='file:///C:/Users/Diana/Downloads/favicon.ico'>
 </head>
 <div class="div1">
 <body>
 <header>
-  <p1> Site logo goes here | Mouser's Cheese Cellar | est. 1346.</p1>
+  <p id="header"> Site logo goes here | Mouser's Cheese Cellar | est. 1346.</p>
   <h1> Welcome to Mouser's Cheese Cellar </h1> <h2> <i> The Finest Cheese, for the Finest Mice. </i> </h2>
 
 
@@ -19,30 +26,28 @@ <h1> Welcome to Mouser's Cheese Cellar </h1> <h2> <i> The Finest Cheese, for the
 <aside> *Excluding Idaho and South Carolina* </aside>
 <br>
   <h2> Frequently Asked Questions</h2>
-  <p> <b> Q: Is it required to place an order online or through the mail? </b> <br>
-    <b> A: </b> Of course it's not required! We here at Mouser's Cheese Cellar know just how difficult it is to get ahold of those bright screens in rectangle boxes. They are also extremely difficult to operate with paws, which is why we also accept delivery requests through word of mouth. Just find an employee stationed near your area with a <mark> <b> bright yellow </mark> </b> vest on and tell them your order, and we'll take care of the rest.
+  <p> <b> Q: Is it required to place an order online or through the mail? </b> <br> </p>
+  <p> <b> A: </b> Of course it's not required! We here at Mouser's Cheese Cellar know just how difficult it is to get ahold of those bright screens in rectangle boxes. They are also extremely difficult to operate with paws, which is why we also accept delivery requests through word of mouth. Just find an employee stationed near your area with a <mark> <b> bright yellow </b> </mark>  vest on and tell them your order, and we'll take care of the rest. </p>
   <p> <b> Q: Do you accept orders from rats? </b> <br>
-  <b> A: </b> Here at Mouser's, we are aware that times are changing. During the black plague, our founder established our motto which we used up until 2016: <br>
+  <p> <b> A: </b> Here at Mouser's, we are aware that times are changing. During the black plague, our founder established our motto which we used up until 2016: </p> <br>
     <blockquote>
     <em> "Rats are pests, rats are fiends, keep the Mouser's cheese pristine." <br>
-      Mr. Mouser, 1346. </blockquote> </em>
+      Mr. Mouser, 1346. </em> </blockquote> 
 <p> Nowadays, we are open to orders from rats and working to uplift the Rat population. Our current CEO has donated over 600 blocks of cheese to the <strong> Speak Up For Rats! </strong> campaign to curb the harm we've done over the many decades of our mice-only delivery service. </p> 
-  <p> <b> Q: How do we pay for the cheese delivery? </b> <br>
-Mouser's knows how the burrow prices have skyrocketed, and it's hard to pay for a single cube of cheese nowadays, so we have plenty of payment options to suit your needs!
+  <p> <b> Q: How do we pay for the cheese delivery? </b> </p> 
+<p> Mouser's knows how the burrow prices have skyrocketed, and it's hard to pay for a single cube of cheese nowadays, so we have plenty of payment options to suit your needs! </p>
 <dl>
   <dt> <b> Cash or Credit Card </b> </dt> <br>
   <dd> If you've been in contact with one of our delivery mice, they will give you your itemized receipt and you can pay them in cash upfront. If you take the online route, you will have to pay with a human's credit card information. </dd> <br>
   <dt> <b> Precious Metals and Stones</b> </dt> <br>
-  <dd> We know how frequently humans often drop or discard expensive jewelry, and if you're not using it for your burrow, you can always send the most valuable ones to liquidate to our address: <address> <b>
+  <dd> We know how frequently humans often drop or discard expensive jewelry, and if you're not using it for your burrow, you can always send the most valuable ones to liquidate to our address: </dd> <address> <br>
     584 Abandoned Cheese Factory Way, <br>
-    Westcheeserton, MA, 02128, </b></address>
-    or to one of our delivery mice in exchange for cheese. <br>
-  <br><dt> <b> Nefarious means <ins> *NOT RECOMMENDED* </ins> </b> 
-    <br><dd> We cannot disclose the contents here, to get in touch with one of our expert mousers for more details, e-mail <a href="mailto:[email protected]>">[email protected] </a> </p>
-
-  <h1> Cheese In Stock </h1>
-
-<table style="width:100%">
+    Westcheeserton, MA, 02128, </address> </br>
+  <dd> or to one of our delivery mice in exchange for cheese. </dd> <br>
+  <br><dt> <b> Nefarious means <ins> *NOT RECOMMENDED* </ins> </b> </dt> 
+    <br><dd> We cannot disclose the contents here, to get in touch with one of our expert mousers for more details, e-mail: <a href="mailto:[email protected]>">[email protected] </a> </p>
+ </dl>
+ <h1> Cheese In Stock </h1>
   <tr>
     <th>Cheese</th>
     <th>No. of Cubes per pound</th> 
@@ -67,22 +72,38 @@ <h1> Cheese In Stock </h1>
     <td>every 30 cubes</td>
     <td>$30.00</td>
   </tr>
-
-  </tr>
 </table>
 <p> <b>These prices can fluctuate at any time. </b> </p>
-
 <h1 style="text-align: center;color:white; background-color: red">NOW HIRING!!!</h1>
+<img src="./Images/mouse_pic.png" alt="happy working mice" width="300" height="300">
 <p style="text-align: center;color:black;background-color: white"> We want to hire dedicated mousers who will sign our NDA. <br>
   Starting at 2 cents per hour, you will be hired onto a committed team that is dedicated to making an impact! Start your future career here! <br>
- <small> <ul> 
-    <li>No bathroom breaks permitted while on the job.
-    <li> Expressing political affiliations to the mice or rat parties on the clock will lead to termination.
-      <li> No bright boxes of blue light or non-sanctioned company devices allowed.
-        <li> ***If any of these rules are broken you will suffer severe concequences from the <b>HEAD MOUSER</b>.*** </small> </ul>
-  </p>
+  <ul> <small> 
+    <li>No bathroom breaks permitted while on the job.</li>
+    <li> Expressing political affiliations to the mice or rat parties on the clock will lead to termination.</li>
+      <li> No bright boxes of blue light or non-sanctioned company devices allowed.</li>
+        <li> ***If any of these rules are broken you will suffer severe concequences from the <b>HEAD MOUSER</b>.*** </li> </small> </ul>  <br>
+        <br>
+       <br>
+  </p> </style> 
+
+<div1>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+  var elems = document.querySelectorAll('.carousel');
+  var instances = M.Carousel.init(elems); });
+</script>
+<div class="container, row, carousel">
+<a class="carousel-item" href="#one!"><img src="images/Office.mouse.png"></a>
+<a class="carousel-item" href="#two!"><img src="images/mice.friends.picknick.png"></a>
+<a class="carousel-item" href="#three!"><img src="images/party.mouse.png"></a>
+<a class="carousel-item" href="#four!"><img src="images/mice.American.party.png"></a>
+<a class="carousel-item" href="#five!"><img src="images/normal.mouse.png"></a>
+</div>
 <footer>
- <p><b>Mouser's Cheese Cellar </b>|Westcheeserton, Massachusetts.| </p></footer>
+ <p><b>Mouser's Cheese Cellar </b>|Westcheeserton, Massachusetts.| </p></footer> </div1>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     </body>
-</div1>
-</html>
+  </div1>
+</html>
diff --git a/jquery.html b/jquery.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<head>
+    <title> Mouser's Cheese Cellar </title>
+    <link rel="stylesheet" href="styles.css" 
+    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <div class="topnav">
+      <a href="index.html">Home Page</a>
+      <a href="about_us.html">About Us</a>
+      <a href="cheese_raffle.html">Cheese Raffle</a>
+      <a href="materialize.html"> Materialize </a>
+      <a class="active" href="jquery.html"> JQuery</a>
+    </div>
+    <link rel="icon" type="image/x-icon" href='file:///C:/Users/Diana/Downloads/favicon.ico'>
+    </head>
+    <body>
+<script>
+$(document).ready(function(){
+  $("button").click(function(){
+    $("#div1").fadeTo("slow", 0.15);
+    $("#div2").fadeTo("slow", 0.4);
+    $("#div3").fadeTo("slow", 0.7);
+  });
+});
+</script>
+
+    <h1>Our Competitors VS Mr. Mouser's Cheese Cellar quality!</h1>
+
+    <button>Gross, right? CLICK ME to hide our competitor's cheese cubes.</button><br><br>
+
+    <div id="div1" href="moldycheese1"><img src="images/moldycheese1.png" width="500" height="500"> </div><br>
+    <div id="div2" href="moldycheese2"><img src="images/moldycheese2.png" width="500" height="500"></div><br>
+    <div id="div3" href="yummycheese1"><img src="images/ourcheeseprestine.png"width="500" height="500"></div>
+<!-- Second Jquery -->
+
+<script>
+    $(document).ready(function(){
+      $("button1").click(function(){
+        $("#p1").css("color", "brown",).slideUp(2000).slideDown(2000);
+      });
+    });
+    </script>
+    <p id="p1"> <b>Our Cheese is all you need! </b></p>
+
+    <!-- Third Jquery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script>
+    $(document).ready(function(){
+      $("button1").click(function(){
+        $("h1, h2, p").addClass("brown");
+        $("div").addClass("important");
+      });
+    });
+    </script>
+    <style>
+    .important {
+      font-weight: bold;
+      font-size: xx-large;
+    }
+
+    .brown {
+        color:#7b4b00; outline-style: dotted; outline-color: #d3b565; background-color:#ffdf80 
+    }
+    </style>
+<br> 
+
+  <button1><mark>!!!CLICK ME!!!</mark></button1>
+    <h1>"The Mouser's cheese is so prestine, you'll be writing home about it."</h1>
+    <h2>-A Valued Customer</h2>
+
+    <p> <b>NOTHING BEATS OUR CHEESE </b></p>
+    <p>No returns, because we know it's just <b>THAT</b> good.</p>
+
+    <div>Use Our Delivery Services Now!</div><br>
+
+    </body>
+    </html>