TaylorDarneille · granddivino · Aug 20, 2020 · Aug 22, 2020
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,8 +2,11 @@
 
 Please describe your comfort and completeness levels before submitting.
 
-Comfort Level (1-5): 
+Comfort Level (1-5): 2.5
 
-Completeness Level (1-5):
+Completeness Level (1-5): 3
 
 Do you have any remaining questions about this deliverable?:
+I couldn't figure out how to edit the button itself after adding it in. Wanted to center it and make it bigger, but it didn't seem to work in CSS unless I was doing something wrong.
+I also couldn't for the life of me figure out how to make the images stay aligned in the right spots without making the images too big and too small.
+I couldn't remember how to put the font directly over the images in the center.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,46 @@
+body {
+  background-color: lightgray;
+
+}
+
+
 h1 {
-  color: salmon;
+  margin: 60px 0 0 0;
+  text-align: center;
+  color: gray;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 45px;
+}
+
+h2 {
+  text-align: center;
+  color: gray;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 25px;
+}
+
+  * {
+    box-sizing: border-box;
+  }
+
+.column {
+  float: left;
+  width: 33.33%;
+  padding: 5px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 25px;
+  color: white;
+  align-content: center;
+}
+
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 25px;
+  color: white;
+  align-content: center;
 }
+
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1 @@
+Seemed to be a pretty creative way to learn how learn commands for positioning. The main difference between the two as far as I could tell is that the grid garden is just that, a grid. The lines were visible and you could see exactly where you were positioning the water/carrots. In the flexbox, the idea was still the same in a grid type formation but without the lines. Everything between the two seemed to be defined in rows and columns. The main difference between the two that I noticed was that the commands to enter in the CSS was that in the grid garden the commands mostly seemed to start with "grid", or "rows" and "columns. In the flexbox, the commands all seemed to start with "justify", "align", or "flex".
diff --git a/index.html b/index.html
@@ -4,9 +4,62 @@
   <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>
+  <title>AirBnb</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+
+  <h1>Meet Guidebooks</h1>
+
+  <h2>Discover hundreds of local spots recommended by Airbnb hosts</h2>
+
+  <div class="row">
+  <div class= "column">
+    <p>San Francisco</p>
+    <img src= "img/san-francisco.jpg" style="width:33.33% ">
+  </div>
+
+  <div class= "column">
+    <p>New York</p>
+    <img src= "img/new-york.jpg" style="width:33.33%">
+    </div>
+
+  <div class= "column">
+    <p>London</p>
+    <img src = "img/london.jpg " style="width:33.33%">
+    </div>
+
+  </div>
+
+  <button type="button">See All Guidebooks</button>
+
+
+  <h1>Just for the weekend</h1>
+
+  <h2>Discover new, inspiring places close to home.</h2>
+
+  <div class="row">
+  <div class= "column">
+    <p>Napa</p>
+    <img src= "img/napa.jpg" style="width:33.33%">
+  </div>
+
+  <div class= "column">
+    <p>Sonoma</p>
+    <img src= "img/sonoma.jpg" style="width:33.33%">
+  </div> 
+
+  <div class= "column">
+    <p>San Francisco</p>
+    <img src= "img/san-francisco-2.jpg" style="width:33.33%">
+  </div>
+
+</div>
+
+<button type="button">See All Destinations</button>
+
+
 </body>
 </html>
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Seemed to be a pretty creative way to learn how learn commands for positioning. The main difference between the two as far as I could tell is that the grid garden is just that, a grid. The lines were visible and you could see exactly where you were positioning the water/carrots. In the flexbox, the idea was still the same in a grid type formation but without the lines. Everything between the two seemed to be defined in rows and columns. The main difference between the two that I noticed was that the commands to enter in the CSS was that in the grid garden the commands mostly seemed to start with "grid", or "rows" and "columns. In the flexbox, the commands all seemed to start with "justify", "align", or "flex".