diff --git a/css/style.css b/css/style.css
index 26f119b..12c9994 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,110 @@
h1 {
- color: salmon;
+ color: #454545;
+ font-weight: 500;
+ font-size: 25px;
+}
+h4 {
+ color: #454545;
+ font-weight: 300;
+ font-size: 15px;
+ padding: 0px 0px 10px 0px;
+}
+body {
+ background-color: #ebf0ec;
+ font-family: 'Roboto', sans-serif;
+ margin: 0 auto;
+ text-align: center;
+ width: 50%;
+ max-width: 900px;
+ padding: 40px 0px 0px 0px;
+}
+.first-row .second-row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+}
+#sf {
+ background-image: url(/img/san-francisco.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+#ny {
+ background-image: url(/img/new-york.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+#lon {
+ background-image: url(/img/london.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+
+.box1 {
+ font-weight: 400;
+ font-size: 12px;
+ color: #454545;
+ border: 1px solid darkgrey;
+ background-color: white;
+ margin: 1px 2px 3px 4px;
+ width: 300px;
+ margin: 0 auto;
+ padding: 5px 8px;
+}
+
+#napa {
+ background-image: url(/img/napa.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+#sono {
+ background-image: url(/img/sonoma.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+#sf2 {
+ background-image: url(/img/san-francisco-2.jpg);
+ height: 200px;
+ width: 200px;
+ color: white;
+ position: relative;
+ text-align: center;
+ font-weight: 500;
+ font-size: 25px;
+}
+
+.box2 {
+ font-weight: 400;
+ color: #454545;
+ font-size: 12px;
+ border: 1px solid darkgrey;
+ background-color: white;
+ margin: 1px 2px 3px 4px;
+ width: 300px;
+ margin: 0 auto;
+ padding: 5px 8px;
}
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..b7fbb18
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1,5 @@
+Prompt: Write a paragraph or two comparing/contrasting flexbox and grid in this file. What did you learn about the two? How are they the same? How are they different?
+
+Flexbox and grid are two modern CSS tools that both provide a solution to one of the challenges with layout (specifically alignment) consistency across varying browsers. They make website layout much more versatile and easier to write.
+
+Beyond their similarities, flexbox is single-axis–oriented meaning it is useful for one-dimensional layout whereas grid, hence its namesake, supports two-dimension layouts. With grid, you're able to divide screens in rows and columns allowing for more sleek, versailte, and modern website layouts.
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ff..9a4e9ad 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,51 @@
- Hello Front-End
+
+ Archived: Airbnb
- Hello Front-End
+ Meet Guidebooks
+ Discover hundreds of local spots recommended by Airbnb hosts
+
+
+
+
+ See All Guidebooks
+
+
+ Just for the weekend
+ Discover new, inspiring places close to home.
+
+
+
+
+ See All Destinations
+
+