diff --git a/css/style.css b/css/style.css
index 26f119b..17c4a6f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,105 @@
+body{
+ background-color: rgb(214, 214, 214);
+ font-family: Arial, Helvetica, sans-serif;
+}
h1 {
- color: salmon;
+ color: rgb(65, 61, 61);
+ text-align: center;
+
+}
+h3 {
+ color: rgb(65, 61, 61);
+ text-align: center;
+ font-size: smaller;
+ margin-top: -10px;
+}
+.sf {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -5;
+ margin-top: 15px;
+}
+.ny {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -4;
+ margin-top: 15px;
+}
+.lnd {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -3;
+ margin-top: 15px;
+}
+#first {
+display: grid;
+grid-template-columns: 20% 20% 20% 20% 20%;
+grid-template-rows: 20% 20% 20% 20% 20%;
+grid-column-start: -3;
+}
+p {
+ display: block;
+ width: 250px;
+ background-color: white;
+ margin: auto;
+ text-align: center;
+ line-height: 30px;
+}
+.buttonone{
+ color: grey;
+ margin-top: 40px;
+ font-family: Arial, Helvetica, sans-serif;
+ width: 275px;
+margin-right: 50px;
+height: 40px;
+
+}
+
+
+
+
+.np {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -5;
+ margin-top: 15px;
+}
+.sanfran {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -4;
+ margin-top: 15px;
+}
+.sm {
+ height: 310px;
+ width: 275px;
+ display: grid;
+ grid-column-start: -3;
+ margin-top: 15px;
+}
+#second {
+display: grid;
+grid-template-columns: 20% 20% 20% 20% 20%;
+grid-template-rows: 20% 20% 20% 20% 20%;
+grid-column-start: -3;
+}
+p {
+ display: block;
+ width: 250px;
+ background-color: white;
+ margin: auto;
+ text-align: center;
+ line-height: 30px;
}
+.buttontwo{
+ color: grey;
+ margin-top: 40px;
+ font-family: Arial, Helvetica, sans-serif;
+ width: 275px;
+margin-right: 50px;
+height: 40px;
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..09b5071
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1 @@
+Both flexbox and grid are helpful but for different situations. Flexbox is aimed more towards columns and rows, where as the grid is focused on squares or a grid across the web page. I would use flexbox to coordinate multiple items across rows and large portions of the webpage. I would then go in and get a bit more specific with my grid, I will choose selected portions of the webpage and move them around to my liking.
diff --git a/index.html b/index.html
index 8cd37ff..7129720 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,46 @@
Hello Front-End
- Hello Front-End
+ Meet Guidebooks
+ Discover hundreds of local spots reccomended by Airbnb hosts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Just for the weekend
+Discover new, inspiring places close to home.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+