diff --git a/css/style.css b/css/style.css
index 26f119b..bf79d6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,83 @@
+body {
+ font-family: sans-serif;
+ display: grid;
+ justify-items: center;
+ background-color: #e8e6e3;
+}
+
+h1, p{
+ color: #5c6467;
+}
+
h1 {
- color: salmon;
+ margin: 20px 0px 2px 0px;
+}
+
+p {
+ margin: 2px 0px 16px 0px;
+}
+
+.images {
+ display: flex;
+ flex-wrap: nowrap;
+ grid-gap: 20px;
+}
+
+.centered {
+ height: 250px;
+ width: 250px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ border-radius: 30px;
+ border: 1px solid rgb(133, 133, 133);
+}
+
+.centered > p{
+ color: white;
+ text-align: center;
+ vertical-align: center;
+ line-height: 250px;
+}
+
+.centered > p, h1 {
+ font-size: 25px;
+ font-weight: bold;
+}
+
+.see-all-button {
+ border-radius: 10px;
+ margin: 30px 30px 10px 30px;
+ border: 1px solid #798285;
+ background-color: white;
+ width: 300px;
+ height: 30px;
+ text-align: center;
+ vertical-align: center;
+ line-height: 30px;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+#san-fran-1 {
+ background-image: url("../img/san-francisco.jpg");
+}
+
+#new-york{
+ background-image: url("../img/new-york.jpg");
+}
+
+#london {
+ background-image: url("../img/london.jpg");
+}
+
+#napa {
+ background-image: url("../img/napa.jpg");
+}
+
+#sonoma {
+ background-image: url("../img/sonoma.jpg");
+}
+
+#san-fran-2 {
+ background-image: url("../img/san-francisco-2.jpg");
}
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..616fce6
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1,5 @@
+Flexbox and grid are both used to position elements. They both can achieve a plethora of the same results while also having separating characteristics that may lead you to using either in different ways.
+
+Flexbox mainly positions elements by only moving them in a one-dimensional direction. This means it's mainly used for a position change in either a row or a column, not typically both at the same time. Flexbox also has a larger compatibility than grid currently for most browsers. You can wrap elements to make them look two dimensional, but bear the consequence of less "customization."
+
+CSS Grid positions elements by moving them in a two-dimensional direction. You can move elements either by a row or column. The grid is great for overall page structure and positioning elements. Grid offers a little more flexibility in this case vs. Flexbox.
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cd37ff..c159201 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,31 @@
- Hello Front-End
+ Main Home Page
-
Hello Front-End
+
Meet GuideBooks
+
Discover hunders of local spots recommended by Airbnb hosts