Ada-C19 · louloera · 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": 5501
+}
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ When first starting out, it is common for developers to create a small website t
 We will use HTML & CSS to create a static site whose content is a fansite about something your group is passionate about. Your group fansite should contain a home page with some introductory information about your chosen topic, a fun facts page about your topic, and a gallery showcasing pictures about your topic.
 
 ### Sample Site
-View a simple sample website [here](https://adaanswers.github.io/group-fansite-example/index.html). 
+View a simple sample website [here](://adaanswers.github.io/group-fansite-example/index.html). https
 
 ## Learning Goals:
 - Practice creating semantic HTML

diff --git a/coworking_agreement.md b/coworking_agreement.md
@@ -0,0 +1,48 @@
+# 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?*
+
+- Julie will be online Thursday.
+- Just work together in-person during coworking time.
+
+## 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?*
+
+- Each work on our own page. Do some agreements on general style sheet. 
+
+## Learning Style
+*How does each team member learn best in project settings?*
+
+- Lou: Likes watching things break and understanding why they break.
+- Mel: Visually, looking at examples.
+- Julie: Working alongside one another and talking through our approach.
+
+## Preferred Feedback Style
+*How does each team member best receive feedback?*
+
+- Direct feedback when possible. Don't be mean about it, focus on what you're giving feedback on and what best practices are. 
+- Jokes are a plus.
+
+## One Team Communication Skill to Improve
+*What is a teamwork-related skill you want to work on?*
+
+- Lou: Self-conscious about grammar, generally wants to improve team communication in English.
+- Mel: Asking for help from your teammates or in general.
+- Julie: Code reviewing in GitHub if possible. 
+
+## Optional: Other agreements
+*Other co-working agreements that were not captured in the above sections.*
+
+Group Fansite Topic: Our Dogs
+
+## Improvised Project
+- Work on index.html together.
+- We each work on a page for our own dog, that includes facts and a gallery for our dog.
+- We will also each create our own css stylesheets for our own pages.
+
+## Signatures
+Julie Loh, Melinda Mott, Lou Loera _______________
+Date: __5/16/2023____
diff --git a/images/Boowie.jpg b/images/Boowie.jpg
diff --git a/images/Bowie/Bowie.jpg b/images/Bowie/Bowie.jpg
diff --git a/images/Bowie/bowie_carpet.jpg b/images/Bowie/bowie_carpet.jpg
diff --git a/images/Bowie/bowie_carpet_2.jpg b/images/Bowie/bowie_carpet_2.jpg
diff --git a/images/Bowie/bowie_cherry_blossom.jpg b/images/Bowie/bowie_cherry_blossom.jpg
diff --git a/images/Bowie/bowie_grass.jpg b/images/Bowie/bowie_grass.jpg
diff --git a/images/Bowie/bowie_hike.jpg b/images/Bowie/bowie_hike.jpg
diff --git a/images/Bowie/bowie_lou.jpg b/images/Bowie/bowie_lou.jpg
diff --git a/images/Bowie/bowie_snow.jpg b/images/Bowie/bowie_snow.jpg
diff --git a/images/Bowie/bowie_wet.jpg b/images/Bowie/bowie_wet.jpg
diff --git a/images/Keiiko.jpeg b/images/Keiiko.jpeg
diff --git a/images/Keiko/Keiko1.jpeg b/images/Keiko/Keiko1.jpeg
diff --git a/images/Keiko/Keiko2.jpeg b/images/Keiko/Keiko2.jpeg
diff --git a/images/Keiko/Keiko3.jpeg b/images/Keiko/Keiko3.jpeg
diff --git a/images/Keiko/Keiko4.jpeg b/images/Keiko/Keiko4.jpeg
diff --git a/images/Keiko/Keiko5.jpeg b/images/Keiko/Keiko5.jpeg
diff --git a/images/Keiko/Keiko6.jpeg b/images/Keiko/Keiko6.jpeg
diff --git a/images/Keiko/Keiko7.jpeg b/images/Keiko/Keiko7.jpeg
diff --git a/images/Snoopy/beachtime_snoopy.jpeg b/images/Snoopy/beachtime_snoopy.jpeg
diff --git a/images/Snoopy/flower_crown_snoopy.jpeg b/images/Snoopy/flower_crown_snoopy.jpeg
diff --git a/images/Snoopy/golden_hour_snoopy.jpeg b/images/Snoopy/golden_hour_snoopy.jpeg
diff --git a/images/Snoopy/packing_snoopy.jpeg b/images/Snoopy/packing_snoopy.jpeg
diff --git a/images/Snoopy/rain_fit_snoopy.jpeg b/images/Snoopy/rain_fit_snoopy.jpeg
diff --git a/images/Snoopy/smiling_snoopy.jpeg b/images/Snoopy/smiling_snoopy.jpeg
diff --git a/images/Snoopy/under_the_desk_snoopy.jpeg b/images/Snoopy/under_the_desk_snoopy.jpeg
diff --git a/images/beach-dog-paw-prints-foot-prints-sand.jpg b/images/beach-dog-paw-prints-foot-prints-sand.jpg
diff --git a/images/dog-paw-footprints-sand.jpeg b/images/dog-paw-footprints-sand.jpeg
diff --git a/images/footprint-dog-paw-animal.jpg b/images/footprint-dog-paw-animal.jpg
diff --git a/images/puppaws.jpeg b/images/puppaws.jpeg
diff --git a/images/snooopy.jpeg b/images/snooopy.jpeg
diff --git a/pages/Bowie.html b/pages/Bowie.html
@@ -0,0 +1,81 @@
+<!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>Bowie</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="../styles/bowie.css">
+
+</head>
+<body class="bowie">
+  <header>
+    <h1>
+      BOWIE
+    </h1>
+  </header>
+    <nav> 
+      <ul class = "box">
+        <li>
+          <a href="index.html">Main Menu</a>
+        </li>
+        <li>
+          <a href="Keiko.html">Keiko</a>
+        </li>
+        <li>
+          <a href="snoopy.html">Snoopy</a>
+        </li>
+      </ul>
+    </nav>
+    <main>
+      <aside>
+      <h2>
+        Facts about Bowie
+      </h2>
+      <p>
+        He's a puddle water somelier
+      </p>
+      <p>
+        Loves the snow and was extremly disapointed when he realized it melted in spring 
+      </p>
+      <p>
+        He recently lost his fear of water and has learned to swim, ironically he hates baths 
+      </p>
+      <p>
+        He will give his walker exactly 40 seconds to put shoes on, you will hear his roar if you fail 
+        <p>
+        Bowie's mantra: No treat, No trick 
+      </p>
+      <p>
+        He came from Texas but acts like he's alergic to the heat
+      </p>
+        <!-- <p>
+        Bowie has come a long way from when he was first rescued, he peed when happy or frightened, he did not know
+        how to go on walks, he tried to escape and succesfully did it for the first month, Bowie did not know how to play 
+        with humans and did not know how to fetch (now he knows but is not interested)
+
+      </p> -->
+      </aside>
+      <section class="bowie-image-section"> 
+        <h2>
+          The Fluff!
+        </h2>
+      <div class="box">
+          <img src="/images/Bowie/bowie_cherry_blossom.jpg" alt="Bowie under the cherry Blossom">
+          <img src="/images/Bowie/bowie_carpet_2.jpg" alt="Bowie Snuggling in the carpet">
+          <img src="/images/Bowie/bowie_hike.jpg" alt = "Bowie enjoying the hike views">
+          <img src="/images/Bowie/bowie_snow.jpg" alt="Bowie upset about spring">
+          <img src="/images/Bowie/bowie_grass.jpg" alt= "Bowie enjoying his fav ball">
+          <img src="/images/Bowie/bowie_wet.jpg" alt = "Bowie mad he cant swim">
+          <img src="/images/Bowie/Bowie.jpg" alt="Bowie">
+          <img src="/images/Bowie/bowie_carpet.jpg"  alt="Bowie enjoying the carpet">
+          <!-- <img src="/images/Bowie/bowie_lou.jpg" class="bowie-photo" acr="Bowie and his owner"> -->
+      </div>
+    </section>
+    </main>
+  <footer>
+    &copy;Julie Loh, Melinda Mott, Lou Loera
+  </footer>
+</body>
+</html>
diff --git a/pages/Keiko.html b/pages/Keiko.html
@@ -0,0 +1,37 @@
+<!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">
+  <link rel="stylesheet" href="../styles/keiko.css">
+  <title>Keiko's Sass Floof Life</title>
+</head>
+<body>
+<div class="container">
+  <h2 class="ptitle">Keiko</h2>
+  <div id="mySidenav" class="sidenav">
+    <a href="/pages/index.html" id="home">Home</a>
+    <a href="/pages/snoopy.html" id="snoopy">Snoopy</a>
+    <a href="/pages/Bowie.html" id="bowie">Bowie</a>
+    <a href="mailto:[email protected]" id="contact">Contact</a>
+  </div>
+  </div>
+
+  <div class="gallery">
+    <img src="/images/Keiiko.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko1.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko2.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko3.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko4.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko5.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko6.jpeg" alt="...">
+    <img src="/images/Keiko/Keiko7.jpeg" alt="...">
+
+    <!-- as many times as we want -->
+  </div>
+  <div class="facts">
+    <h3>I am a floof of the highest degree, an order of FLOOOOFEEE. I enjoy running through the woods and rolling in the stinkiest things that I can find. I am a good mole hunter. My best friend is a chi-hee of the blue variety named Pepper.  </h3>
+  </div>
+</body>
+</html>
diff --git a/pages/facts.html b/pages/facts.html
diff --git a/pages/gallery.html b/pages/gallery.html
diff --git a/pages/index.html b/pages/index.html
@@ -4,9 +4,39 @@
   <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>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
+  <title>Bowie, Keiko, Snoopy (BKS)</title>
 </head>
-<body>
+  <body class="grid-container">
+    <div class="item1"> <header>
+        A Tail of 3 Floofs
+    </header></div>
 
-</body>
-</html>
+    <main class="item3">
+        <div class="picture-container">
+          <div class="polaroid image1" data-caption="Snoopy">
+            <a href="/pages/snoopy.html">
+            <img src="/images/snooopy.jpeg" class="sizephoto" alt="Snoopy">
+            </a>
+          </div>
+          <div class="polaroid image2" data-caption="Bowie">
+            <a href="/pages/Bowie.html">
+            <img src="/images/Boowie.jpg" class="sizephoto" alt="Bowie">
+            </a>
+          </div>
+          <div class="polaroid image3" data-caption="Keiko">
+            <a href="/pages/Keiko.html">
+            <img src="/images/Keiiko.jpeg" class="sizephoto" alt="Keiiko">
+            </a>
+          </div>
+        </div>
+
+    </main>
+
+    <footer class="item5">
+      &copy;Julie Loh, Melinda Mott, Lou Loera
+    </footer>
+  </body>
+
+</html>
diff --git a/pages/snoopy.html b/pages/snoopy.html
@@ -0,0 +1,85 @@
+<!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>Snoopy</title>
+  <link rel="stylesheet" href="../styles/style.css">
+  <link rel="stylesheet" href="../styles/snoopy.css">
+</head>
+
+<body class="flex-container">
+
+  <nav class="col-1">
+      <ul>
+        <li>
+          <h2><a href="index.html">Home</a></h2>
+        </li>
+        <li>
+          <h3><a href="Bowie.html">Bowie</a></h3>
+        </li>
+        <li>
+          <h3><a href="Keiko.html">Keiko</a></h3>
+        </li>
+        <li>
+          <h3><a href="snoopy.html">Snoopy</a></h3>
+        </li>
+      </ul>
+  </nav>
+
+  <div class="col-2">
+    <header class="snoopy-header">
+      <h1 id="snoopy-header-text">
+        Snoopy the Floofy
+      </h1>
+    </header>
+
+    <main class="content">
+      <article>
+        <h2>The pics!</h2>
+        <ul id="gallery">
+          <li>
+            <img src="../images/Snoopy/smiling_snoopy.jpeg" alt="fluffy corgi looking up with a smile">
+          </li>
+          <li>
+            <img src="../images/Snoopy/golden_hour_snoopy.jpeg" alt="fluffy corgi looking at the camera on grass during golden hour">
+          </li>
+          <li>
+            <img src="../images/Snoopy/packing_snoopy.jpeg" alt="fluffy corgi looking concerned sitting next to a packed suitcase">
+          </li>
+          <li>
+            <img src="../images/Snoopy/rain_fit_snoopy.jpeg" alt="fluffy corgi sitting next to tricolor Cavalier King Charles Spaniel that is wearing a blue gingham snood and yellow rain boots">
+          </li>
+        </ul>
+      </article>
+
+      <aside class="snoopy-facts">
+        <h2>Facts about Snoopy</h2>
+        <p>Snoopy is a 3 year old fluffy corgi that loves frolicking in big open spaces and stealing socks of his favorite people. Snoopy is always ready to give lots of kisses and bark at construction noises.</p>
+        <ul>
+          <li>
+            Favorite place is the beach!
+          </li>
+          <li>
+            Hates the rain!
+          </li>
+          <li>
+            Hates the heat!
+          </li>
+          <li>
+            Will eat anything!
+          </li>
+        </ul>
+      </aside>
+    </main>
+
+    <footer class="snoopy-footer">
+      <p>
+      &copy;Julie Loh, Melinda Mott, Lou Loera
+      </p>
+    </footer>
+
+  </div>
+</body>
+</html>