TaylorDarneille · nmuchiri · Aug 22, 2020
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,22 @@
+{
+    // 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": [
+        {
+            "name": "Launch Chrome",
+            "request": "launch",
+            "type": "pwa-chrome",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "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,86 @@
 h1 {
-  color: salmon;
+  color: grey;
+  text-align: center;
 }
+
+h2 {
+  color:grey;
+  text-align: center;
+}
+.row1{
+  display: flex;
+  margin: 10px;
+}
+.container1{
+  position: relative;
+  text-align: center;
+  color: white;
+  font-size: 30px;
+  flex: 33.33%;
+  padding: 10px;
+
+}
+.row2{
+  display: flex;
+  margin: 10px;
+}
+.container2{
+  position: relative;
+  text-align: center;
+  color: white;
+  font-size: 30px;
+  flex: 33.33%;
+  padding: 10px;
+}
+.San-Francisco{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.New-York{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.London{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.Napa{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.sonoma{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.San-Francisco-2{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.box {
+  width: 320px;
+  padding: 10px;
+  border: 5px solid grey;
+  margin: 0;
+  text-align: center;
+  position: relative;
+  top: 50%;
+  left: 50%;
+}
+.box2{
+  width: 320px;
+  padding: 10px;
+  border: 5px solid grey;
+  margin: 1;
+
+}
+
+body{
+  background-color: lightgrey;
+}
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1 @@
+ I generally found flex to be easier to use than grid. However I would have to practice using both to really understand what the commands are doing and how to use them more effectively.  I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands.I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands.
diff --git a/index.html b/index.html
@@ -4,9 +4,47 @@
   <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-Mock-Website</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 ="row1">
+  <div class= "container1">
+    <img src= "/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/san-francisco.jpg">
+    <div class= "San-Francisco">San-Francisco</div>
+  </div>
+    <div class="container1">
+      <img src= "/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/new-york.jpg">
+      <div class= "New-York">New-York</div>
+
+    </div>
+    <div class= " container1">
+       <img src="/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/london.jpg">
+       <div class= " London">London</div>
+    </div>
+  </div>
+
+<div class="box">See All Guidebooks</div>
+<h1>Just for the weekend</h1>
+<h2>Discover new, exciting places close to home</h2>
+
+<div class ="row2">
+  <div class= "container2">
+    <img src= "/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/napa.jpg">
+     <div class= "Napa">Napa</div>
+  </div> 
+  <div class="container2">
+    <img src= "/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/sonoma.jpg">
+    <div class= "New-York">Sonoma</div>
+</div>  
+<div>
+  <div class="container2">
+    <img src= "/Users/cirusegal/Desktop/GA-Codes/CSS-positioning-practice/img/san-francisco-2.jpg">
+    <div class= "San-Francisco-2">San-Francisco</div>
+</div>
+
+<div= class="box2">See all destinations</div>
+
 </body>
 </html>
diff --git a/san-francisco.jpg b/san-francisco.jpg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		I generally found flex to be easier to use than grid. However I would have to practice using both to really understand what the commands are doing and how to use them more effectively. I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands.I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands.