diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..34811f1
--- /dev/null
+++ 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}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 26f119b..3858c07 100644
--- 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;
+}
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..354c2a8
--- /dev/null
+++ 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
index 8cd37ff..2080cad 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,47 @@
- Hello Front-End
+ Airbnb-Mock-Website
- Hello Front-End
+ Meet Guidebooks
+ Discover hundreds of local spots recommended by Airbnb hosts
+
+
+
+
San-Francisco
+
+
+
+
New-York
+
+
+
+
+
London
+
+
See All Guidebooks
+Just for the weekend
+Discover new, exciting places close to home
+
+
+
+
+
Napa
+
+
+
+
Sonoma
+
+
+
+
+
San-Francisco
+
+
+
See all destinations
+