diff --git a/css/style.css b/css/style.css
index 26f119b..522e2b0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,74 @@
-h1 {
- color: salmon;
+body {
+ text-align: center;
+ margin-right: 25%;
+ margin-left: 25%;
+ background-color: #efefef;
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ /* background color and font values sourced from http://web.archive.org/web/20140301054800/https://www.airbnb.com/?cdn_locale_redirect=1
+*/
}
+h3, h6, button {
+ color: rgb(83, 83, 83);
+ /* border: 2px solid; */
+}
+
+h3 {
+ margin-bottom: 0;
+}
+h6{
+ margin-top: 2px;
+ font-weight: normal;
+}
+
+.locations {
+ display: flex;
+ justify-content: space-evenly;
+}
+
+button {
+ background-color: white;
+ margin-top: 25px;
+ border-radius: 0;
+ border: 1px solid lightgray;
+ font-size: .75em;
+ width: 200px;
+ padding: .5em ;
+}
+
+.locations div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ height: 200px;
+ width: 200px;
+ background-size: cover;
+}
+
+p {
+ color: #efefef;
+ font-size: 1.5em;
+}
+
+#san-francisco-guidebook {
+ background-image: url("../img/san-francisco.jpg")
+}
+
+#new-york-guidebook {
+ background-image: url("../img/new-york.jpg")
+}
+
+#london-guidebook {
+ background-image: url("../img/london.jpg")
+}
+
+#napa-destination {
+ background-image: url("../img/napa.jpg")
+}
+
+#sonoma-destination {
+ background-image: url("../img/sonoma.jpg")
+}
+
+#san-francisco-destination {
+ background-image: url("../img/san-francisco-2.jpg")
+}
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..0355eef
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1,5 @@
+# Flexbox vs Grid
+
+Both the flexbox and grid are tools used to position HTML elements on a page. Both appear to be attempts to optimize placement of elements in relation to each other without the need to account for the relationships between individual elements as meticulously as may be needed when using CSS positioning properties.
+
+While both do a lot of the work for you in optimizing the placement of elements within a space, flexbox and grid seem optimized for different approaches. Flexbox seems to be more useful for manipulating a group of elements in a uniform way within a space, whereas grid allows for more specification in how space is divided, giving you more versatility in the exact placement of individual elements relative to each other.
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ff..8eb1e12 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,31 @@
- Hello Front-End
+ CSS Positioning Practice
-
Hello Front-End
+
+
Meet Guidebooks
+
+
Discover hundreds of local spots recommended by Airbnb hosts