Ada-C19 · janice15 · May 16, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/agreements.md b/agreements.md
@@ -0,0 +1,38 @@
+Accessibility Needs
+What does each team member need access to in order to succeed and show up the best they can?
+J: open communication, guess culture
+E: time to reread instructions at beginning of work period, guess culture 
+
+
+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?
+- switch between driving and navigating, collaboration work
+
+
+Learning Style
+How does each team member learn best in project settings?
+J: hands on, read over instructions
+E: trading off driving and navigating using VS live code share
+
+
+Preferred Feedback Style
+How does each team member best receive feedback?
+J: face to face, nicely 
+E: give me all the feedback, but kindly 
+
+
+One Team Communication Skill to Improve
+What is a teamwork-related skill you want to work on?
+J: talk out loud about code, explain code and talk through it 
+E: celebrate progress 
+
+
+Optional: Other agreements
+Other co-working agreements that were not captured in the above sections.
+J: 
+E:
+
+
+Signatures
+Ericka Moreno
+Janice Nguyen
diff --git a/ideas.md b/ideas.md
@@ -0,0 +1,7 @@
+- Greys anatomy
+
+fun facts: 
+- longest running show with female showrunner (?)
+- etc from google 
+
+gallery: pictures of characters with funny quotes
diff --git a/images/alex-karav.jpg b/images/alex-karav.jpg
diff --git a/images/christina-yang.jpg b/images/christina-yang.jpg
diff --git a/images/cristina_yang.jpg b/images/cristina_yang.jpg
diff --git a/images/derek-shepard.jpg b/images/derek-shepard.jpg
diff --git a/images/derek-shepard1.jpg b/images/derek-shepard1.jpg
diff --git a/images/george-omalley.jpg b/images/george-omalley.jpg
diff --git a/images/greys anatomy.jpg b/images/greys anatomy.jpg
diff --git a/images/greys season 1.webp b/images/greys season 1.webp
diff --git a/images/greys_cast.jpeg b/images/greys_cast.jpeg
diff --git a/images/izzie-stevens.jpg b/images/izzie-stevens.jpg
diff --git a/images/meredith-grey.jpg b/images/meredith-grey.jpg
diff --git a/images/miranda-bailey.jpg b/images/miranda-bailey.jpg
diff --git a/images/richard-webber.jpg b/images/richard-webber.jpg
diff --git a/pages/facts.html b/pages/facts.html
@@ -4,9 +4,27 @@
   <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/styles.css">
+  <link rel="stylesheet" href="/styles/facts.css">
   <title>Document</title>
 </head>
 <body>
+  <nav class="nav">
+		<h1>Janice and Ericka's Grey's Anatomy Fan Page!</h1>
+    <h3>Fun Facts!</h3>
+		<a class="active" href="/pages/index.html">Home</a>
+		<a href="/pages/facts.html" rel="import">Fun Facts</a>
+		<a href=/pages/gallery.html rel="import">Gallery</a>
+	</nav>
+  <ol>
+    <li>Most episodes are named after songs</li>
+    <li>There are 2 spinoff shows made from Grey's Anatomy</li>
+    <li>Only 3 of the main season 1 cast members are still on the show</li>
+  </ol>
+
 
 </body>
+<footer>
+  copyright Janice and Ericka 2023
+</footer>
 </html>
diff --git a/pages/gallery.html b/pages/gallery.html
@@ -1,12 +1,60 @@
 <!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>
+	<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/styles.css">
+	<link rel="stylesheet" href="/styles/gallery.css">
+	<title>Gallery</title>
 </head>
+
 <body>
-
+	<nav class="nav">
+		<h1>Janice and Ericka's Grey's Anatomy Fan Page!</h1>
+		<h3>Gallery</h3>
+		<a class="active" href="/pages/index.html">Home</a>
+		<a href="/pages/facts.html" rel="import">Fun Facts</a>
+		<a href=/pages/gallery.html rel="import">Gallery</a>
+	</nav>
+	<section class="image-container">
+		<div class="item1">
+			<img src="/images/meredith-grey.jpg" alt="Meredith Grey">
+			<p class="character">Meredith Grey</p>
+		</div>
+		<div class="item2">
+			<img src="/images/cristina_yang.jpg" alt="Cristina Yang">
+			<p class="character">Christina Yang</p>
+		</div>
+		<div class="item3">
+			<img src="/images/alex-karav.jpg" alt="Alex Karev">
+			<p class="character">Alex Karev</p>
+		</div>
+		<div class="item4">
+			<img src="/images/george-omalley.jpg" alt="George O'malley">
+			<p class="character">George O'malley</p>
+		</div>
+		<div class="item5">
+			<img src="/images/izzie-stevens.jpg" alt="Izzy Stevens">
+			<p class="character">Izzie Stevens</p>
+		</div>
+		<div class="item6">
+			<img src="/images/derek-shepard1.jpg" alt="Derek Shepard"> 
+			<p class="character">Derek Shepard</p>
+		</div>
+		<div class="item7">
+			<img src="/images/miranda-bailey.jpg" alt="Miranda Bailey">
+			<p class="character">Miranda Bailey</p>
+		</div>
+		<div class="item8"><img src="/images/richard-webber.jpg" alt="Richard Webber">
+			<p class="character">Richard Webber</p>
+		</div>
+	</section>
 </body>
-</html>
+<footer>
+	copyright Janice and Ericka 2023
+</footer>
+
+</html>
+
diff --git a/pages/index.html b/pages/index.html
@@ -1,12 +1,28 @@
 <!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">
+        <link rel="stylesheet" href="/styles/styles.css">
+		<link rel="stylesheet" href="/styles/index.css">
+        <title>Document</title>
+    </head>
+	<body>
+
+		<nav class="nav">
+			<h1>Janice and Ericka's Grey's Anatomy Fan Page!</h1>
+			<a class="active" href="#home">Home</a>
+			<a href="/pages/facts.html" rel="import">Fun Facts</a>
+			<a href=/pages/gallery.html rel="import">Gallery</a>
+		</nav>
+		<img src="/images/greys_cast.jpeg" alt="cast photo">
+		<p class="main">We are #1 Grey's Anatomy fans!</p>
+
+	</body>
+	<footer>
+		copyright Janice and Ericka 2023
+	</footer>
+</html>
+
+
diff --git a/styles/facts.css b/styles/facts.css
@@ -0,0 +1,13 @@
+.nav {
+    color: darkslategrey;
+    text-align: left;
+    background-color: lightblue;
+    display: inline-block;
+    border-style: dotted;
+    border-color: slateblue;
+    border-width: medium;
+}
+
+h3 {
+    color: peru;
+}
diff --git a/styles/gallery.css b/styles/gallery.css
@@ -0,0 +1,51 @@
+body {
+        background-color: lightblue;
+}
+
+p {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 20px;
+        color: black
+}
+
+.nav {
+        color: darkslategrey;
+        text-align: left;
+        background-color: lightblue;
+        display: inline-block;
+        border-style: dotted;
+        border-color:lightseagreen;
+    }
+
+img {
+    width:150px;
+    height: auto;
+}
+
+.character {
+    color: grey;
+}
+.image-container {
+    display: grid;
+    grid-template-columns: repeat (4, 1fr);
+    grid-template-rows: repeat (2, 1fr);
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+}
+
+.item1 {
+        grid-column:1/2;
+        grid-row: 1/2;
+}
+
+.item2 {
+        grid-column: 2/3;
+}
+
+.item3 {
+        grid-column: 3/4;
+}
+
+.item4 {
+        grid-column: 4/5;
+} 
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,7 @@
+.main {
+    color: black;
+}
+
+img {
+    width: 800px;
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,20 @@
+* {
+    background-color: lightblue;
+    margin: 10px;
+}
+
+.nav {
+    color: darkslategrey;
+    text-align: left;
+    background-color: lightblue;
+    display: flex;
+    display: inline-block;
+    border-style: dotted;
+    border-color: plum;
+}
+
+p {
+    color: darkolivegreen;
+}
+
+