Ada-C19 · anasilverx · May 16, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/coworking-agreement.md b/coworking-agreement.md
@@ -0,0 +1,46 @@
+# Coworking Agreement
+*Talk through each section with your partner. Add notes on what you discussed and agreed upon in each section. At the bottom, type your names to sign off on your agreement.*
+
+## Accessibility Needs
+*What does each team member need access to in order to succeed and show up the best they can?*
+Ana:  summarize tasks at hand, punctuality 
+Kathleen: need time to process.
+Ariel: slow down before jumping in to take time to read directions on my own, patience 
+
+
+## Collaboration vs. individual work expectations
+*Clarify your collaboration expectations- does your group want to write code together all of the time? Or divide work to do independently, then come together to share accomplishments? What tools and technologies can help your collaboration?*
+We will work together to set up the HTML on the main page. Then we will each individually create our own page and come together for help, to discuss, and share ideas. 
+
+
+## Learning Style
+*How does each team member learn best in project settings?*
+Ana: take time to digest the info and make sense of it and talk it out to have overall understanding
+Kathleen: come together after completing each smaller task and making sure we are all on the same page
+Ariel: visuals are really important when you are discussing code and how it shows up on the front end
+
+
+## Preferred Feedback Style
+*How does each team member best receive feedback?*
+Ana: don’t give the answer right away, leave some time for you to figure it out on your own
+Kathleen: direct feedback, some time to figure it out on your own and you are still stuck reaching out for help. If you are stubborn, ask if help is needed.
+Ariel: if going down a rabbit hole, help recenter and ask guiding questions to get me back on track. 
+
+
+## One Team Communication Skill to Improve
+*What is a teamwork-related skill you want to work on?*
+Ana: time management, managing tasks for each day so we can complete the project, not being side side-tracked
+Kathleen: Being proactive about checking in whether that is because I’m struggling or I’ve figured out what I am trying to do.
+Ariel: checking in with the group so I don’t get behind, making sure I check with others to make sure we are all at the same checkpoint at the end of every task
+
+
+## Optional: Other agreements
+*Other co-working agreements that were not captured in the above sections.*
+Enjoy the learning experience. Don’t forget to have fun. Don’t take it home. 
+Signatures
+
+Ariel Williams, 
+Ana Silvera,
+Kathleen Shin
+Date: _May 16, 2023________
+
diff --git a/images/el-duderino-milk-punch.jpg b/images/el-duderino-milk-punch.jpg
diff --git a/images/fruity-pebbles-milk-punch.jpg b/images/fruity-pebbles-milk-punch.jpg
diff --git a/images/lavender-earl-grey-milk-punch.jpeg b/images/lavender-earl-grey-milk-punch.jpeg
diff --git a/images/miami-vice-milk-punch.jpg b/images/miami-vice-milk-punch.jpg
diff --git a/images/milk-lady-milk-punch.jpg b/images/milk-lady-milk-punch.jpg
diff --git a/images/pina-colada-milk-punch.jpg b/images/pina-colada-milk-punch.jpg
diff --git a/images/pumpkin-spice-latte-milk-punch.jpg b/images/pumpkin-spice-latte-milk-punch.jpg
diff --git a/images/tita-nitas-milk-punch.jpg b/images/tita-nitas-milk-punch.jpg
diff --git a/images/vodka-black-tea-milk-punch.jpg b/images/vodka-black-tea-milk-punch.jpg
diff --git a/pages/facts.html b/pages/facts.html
@@ -1,12 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Milk Punchies Facts</title>
+    <link rel="stylesheet" href="../styles/style.css" />
+    <link rel="stylesheet" href="../styles/facts.css" />
+  </head>
+  <body>
+    <div class="header-container">
+      <header>
+        <h1>Fun Facts Page</h1>
+      </header>
+    </div>
+
+    <main>
+      <div class="container">
+        <h2>Fun Facts About Clarified Milk Punch:</h2>
+        <ul>
+          <li>
+            <p>
+              Clarified Milk Punch is a forgotten classic cocktail! This
+              cocktail requires a lot of time and space which is why it's not
+              commonly found on bar menus.
+            </p>
+          </li>
+          <li>
+            <p>
+              How does it transform from opaque to clear?! The citrus interacts
+              with the milk which causes it to curdle. Then you pour the liquid
+              through a strainer which leaves behind the curdles and other solid
+              ingredients. This leaves behind the beautiful clear liquid of the
+              gods!
+            </p>
+          </li>
+          <li>
+            <p id="abv-mystery">
+              How much alcohol is in a milk punch? Milk punch is an ABV mystery!
+              Drink at your own risk!
+            </p>
+          </li>
+        </ul>
+      </div>
+    </main>
+    <footer>
+      <nav class="links-container">
+        <a href="index.html">Home Page</a> |
+        <a href="gallery.html">Gallery Page</a>
+      </nav>
+      <div class="footer-container">
+        <h4>&copy;The Milk Punch Website Copyright 2023</h4>
+      </div>
+    </footer>
+  </body>
+</html>
+
+<!-- header and links can be children to a div to be a container main 1 container -->
+
+<!-- nav main footer are siblings and direct children to body -->
diff --git a/pages/gallery.html b/pages/gallery.html
@@ -1,12 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-
-</body>
-</html>
+
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gallery</title>
+    <link rel="stylesheet" href="../styles/style.css" />
+    <link rel="stylesheet" href="../styles/gallery.css" />
+  </head>
+  <body>
+    <header class="header-container">
+      <h1>
+        Gallery Page
+      </h1>
+    </header>
+    <nav class="nav-container">
+      <a href="index.html">Home Page</a>
+      <a href="facts.html">Facts Page</a>
+      <a href="https://food52.com/drinks/spirits-liquor/27796-history-of-milk-punch">History</a>
+    </nav>
+    <div class="images-container">
+      <ul>
+        <li><img src="../images/fruity-pebbles-milk-punch.jpg" alt="Fruity Pebbles Milk Punch"></li>
+        <li><img src="../images/miami-vice-milk-punch.jpg" alt="Miami Vice Milk Punch"></li>
+        <li><img src="../images/pina-colada-milk-punch.jpg" alt="Pina Colada Milk Punch"></li>
+        <li><img src="../images/el-duderino-milk-punch.jpg" alt="El Duderino Milk Punch"></li>
+        <li><img src="../images/lavender-earl-grey-milk-punch.jpeg" alt="Lavender Earl Grey Milk Punch"></li>
+        <li><img src="../images/milk-lady-milk-punch.jpg" alt="Milk Lady Milk Punch"></li>
+        <li><img src="../images/pumpkin-spice-latte-milk-punch.jpg" alt="Pumpkin Spice Latte Milk Punch"></li>
+        <li><img src="../images/tita-nitas-milk-punch.jpg" alt="Tita Nitas Milk Punch"></li>
+        <li><img src="../images/vodka-black-tea-milk-punch.jpg" alt="Vodka Black Tea Milk Punch"></li>
+      </ul>
+    </div>
+    <div class="footer-links-container">
+      <a href="index.html">Home Page</a>
+      <a href="facts.html">Facts Page</a>
+      <a href="https://food52.com/drinks/spirits-liquor/27796-history-of-milk-punch">History</a>
+    </div>
+    <footer class="footer-container">
+      <h4>&copy; The Milk Punch Website Copyright 2023</h4>
+    </footer>
+  </body>
+</html>
diff --git a/pages/index.html b/pages/index.html
@@ -4,9 +4,41 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Milk Punchies Home Page</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="../styles/index.css">
 </head>
+
 <body>
+  <div class="container">
+    <nav>
+        <a class="nav-target" href="index.html">Home Page</a>
+        <a class="nav-target" href="facts.html">Fun Facts!</a> 
+        <a class="nav-target" href="gallery.html">Gallery Page</a>
+    </nav>
+
 
+    <main class="content-container">
+      <h1 class="page-header">Milk Punch: The Forgotten Classic Cocktail</h1>
+      <section>
+        <p>
+          Picture this: milk and alcohol. 
+          You heard that right! Not to worry my lactase-deficient friends. 
+          Milk punch is a delightful cocktail artisanally made from milk and spices, magically reduced down into a wonderully clear alcocholic beverage. 
+          Learn more about it on this website. 
+        </p>
+      </section>
+    </main>
+
+    <footer>
+      <div class="links-container">
+        <a href="https://www.thecarlile.com/menu/cocktail-culture/">Find Milk Punch in Seattle</a>
+        <a href="https://www.bittersandbottles.com/products/rockeys-milk-punch">Buy Milk Punch Online</a>
+        <a href="https://www.youtube.com/watch?v=X17NxjRPeb4&ab_channel=TheWeePearl">Make Your Own Milk Punch</a>
+      </div>
+      <h4>&copy; The Milk Punch Website Copyright 2023</h4>
+    </footer>
+  </div>
+
 </body>
 </html>
diff --git a/styles/facts.css b/styles/facts.css
@@ -0,0 +1,45 @@
+h1 {
+    font-size: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    margin: 20px;
+}
+
+
+h2 {
+    color: rgb(42, 162, 124);
+    font-size: 50px;
+}
+
+
+
+.footer-container h4 {
+    color: rgb(163, 64, 107);
+}
+
+* {
+    color: slateblue;
+}
+
+#abv-mystery:hover {
+    color: red;
+}
+
+
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.links-container{
+    font-size: 30px;
+}
diff --git a/styles/gallery.css b/styles/gallery.css
@@ -0,0 +1,60 @@
+h1 {
+    font-size: 100px;
+    color: lemonchiffon;
+    -webkit-text-stroke: 2px black;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    padding: 1rem;
+}
+
+.images-container > ul > li > img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: auto;
+    width: 300px;
+    text-align: center;
+    border-radius: 10%;
+}
+
+.images-container > ul > li {
+    list-style-type: none;
+    margin-bottom: 15px
+}
+
+.images-container {
+    margin: auto;
+    display: grid;
+    flex-direction: column
+}
+
+.nav-container {
+    margin: auto;
+    display: flex;
+    padding: 1rem;
+    justify-content: space-between;
+    width: 75%;
+    font-size: 30px;
+}
+
+.header-container {
+    margin: auto;
+    display: grid;
+    padding: 1rem
+}
+
+.footer-container {
+    margin: auto;
+    display: flex;
+    padding: 1rem;
+    justify-content: center;
+}
+
+.footer-links-container {
+    margin: auto;
+    display: flex;
+    padding: 2rem;
+    justify-content: space-between;
+    width: 50%
+}