diff --git a/css/style.css b/css/style.css
index 26f119bf..d0d6a84e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,39 @@
-h1 {
-  color: salmon;
+* {
+  /* browser css reset */
+  margin: 0;
+  box-sizing: border-box;
+  /* set some basic font styling */
+  font-family: "Raleway", sans-serif;
+  /* use digital color picker to get hex values */
+  color: #4b4c4e;
 }
+body {
+  background-color: #E9EBE7;
+}
+button {
+  padding: 1rem 6rem;
+  font-weight: 600;
+}
+.images img {
+  width: 20rem;
+  height: 25rem;
+  object-fit: cover;
+}
+.card {
+  text-align: center;
+}
+.card section {
+  display: inline-block;
+  position: relative;
+  padding: 20px;
+}
+.images p {
+  color: white;
+  font-size: 35px;
+  font-weight: 600;
+  width: max-content;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ffb..46f43349 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,65 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" type="text/css" href="css/style.css">
-  <title>Hello Front-End</title>
-</head>
-<body>
-  <h1>Hello Front-End</h1>
-</body>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" type="text/css" href="css/style.css" />
+		<title>Hello Front-End</title>
+	</head>
+	<body>
+		<!-- First card -->
+    <div class="card">
+      <section>
+        <h1>Meet Guidebooks</h1>
+        <p>Discover hundreds of local spots recommended by Airbnb hosts</p>
+      </section>
+      <div class="images">
+        <!-- start of images -->
+        <section>
+          <img src="./img/san-francisco.jpg" alt="san francscio"/>
+          <p>San Francisco</p>
+        </section>
+        <section>
+          <img src="./img/new-york.jpg" alt="new york"/>
+          <p>New York</p>
+        </section>
+        <section>
+          <img src="./img/london.jpg" alt="london"/>
+          <p>London</p>
+        </section>
+        <!-- end of images -->
+        <div>
+          <button>See All Guidebooks</button>
+        </div>
+      </div>
+    </div>
+    <!-- End of card -->
+		<!-- Second card -->
+    <div class="card">
+      <section>
+        <h1>Just for the weekend</h1>
+        <p>Discover new, inspiring places close to home</p>
+      </section>
+      <div class="images">
+        <!-- start of images -->
+        <section>
+          <img src="./img/napa.jpg" alt="napa"/>
+          <p>Napa</p>
+        </section>
+        <section>
+          <img src="./img/sonoma.jpg" alt="sonoma"/>
+          <p>Sonoma</p>
+        </section>
+        <section>
+          <img src="./img/san-francisco-2.jpg" alt="san francscio"/>
+          <p>San Francisco</p>
+        </section>
+        <!-- end of images -->
+        <div>
+          <button>See All Destinations</button>
+        </div>
+      </div>
+    </div>
+    <!-- End of card -->
+	</body>
 </html>
diff --git a/notes.md b/notes.md
new file mode 100644
index 00000000..b315df81
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,29 @@
+- First let's all create the pull request
+- Fist to 5, how do you feel after working on that deliverable? 
+- What is semantic html? [slack thread]
+- How would you translate this to an outline format? [discussion - how did you organize the information in your head? what sections do you see?]
+- Given our file structure, how do you link to the New York image? [slack thread]
+- How does css class inheiritance work?
+- What is the alt tag used for? [slack thread]
+- Who can link to div dicumentation on csstricks fastest? [slack thread]
+- Who can get a link to rem documentation fastest? [slack thread]
+- Tell me one thing you learned? [slack thread before I cede the floor]
+
+
+OUTLINE
+- Title: Meet Guidebooks
+    - Sub-title: Discover hundreds of local spots recommended by Airbnb hosts
+    - Images:
+        - San Francisco
+        - New York 
+        - London
+    - Button: See All Guidebooks
+- Title: Just for the Weekend
+    - Sub-title: Discover new, inspiring places close to home
+    - Images:
+        - Napa
+        - Sonoma
+        - San Francisco
+    - Button: See All Destinations
+
+I'm using a div when I want to effect the flow of objects inside, and using a section when I want to group things together so they can be styled as one
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 2fc29d76..035855fe 100644
--- a/readme.md
+++ b/readme.md
@@ -34,4 +34,4 @@ Here's a screenshot of the portion that should be replicated. Deliver the mockup
 
 ## Licensing
 1. All content is licensed under a CC-BY-NC-SA 4.0 license.
-2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.
+2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.
\ No newline at end of file
