diff --git a/css/style.css b/css/style.css
index 26f119b..37ee2b0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,100 @@
-h1 {
- color: salmon;
+body {
+
+ display: grid;
+ grid-template-columns: 1fr 200px 200px 200px 1fr;
+ grid-template-rows: 60px 220px 60px 60px 220px 100px;
+ grid-gap: 15px;
+ text-align: center;
+ background-color: #edefec;
+ color: #414344;
+ /* font-family taken from current Airbnb website */
+ font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
}
+
+h5 {
+ font-weight: 500;
+ font-size: 18px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+.imgtxt {
+ color: white;
+ font-weight: 500;
+ font-size: 20px;
+ margin-top: -120px;
+}
+
+p.subtxt {
+ font-size: 10px;
+ margin-bottom: 10px;
+}
+
+
+.photo {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+button {
+ height: 30px;
+ width: 200px;
+ margin-top: 15px;
+ background-color: white;
+ border: none;
+ color: #414344;
+ font-size: 8px;
+ font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important;
+}
+
+
+#item1 {
+ grid-column: 2 / 5;
+ grid-row: 1 / 2;
+}
+
+#item2 {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+}
+
+#item3 {
+ grid-column: 3 / 4;
+ grid-row: 2 / 3;
+}
+
+#item4 {
+ grid-column: 4 / 5;
+ grid-row: 2 / 3;
+}
+
+#item5 {
+ grid-column: 3 / 4;
+ grid-row: 3 / 4;
+}
+
+#item6 {
+ grid-column: 2 / 5;
+ grid-row: 4 / 5;
+}
+
+#item7 {
+ grid-column: 2 / 3;
+ grid-row: 5 / 6;
+}
+
+#item8 {
+ grid-column: 3 / 4;
+ grid-row: 5 / 6;
+}
+
+#item9 {
+ grid-column: 4 / 5;
+ grid-row: 5 / 6;
+}
+
+#item10 {
+ grid-column: 3 / 4;
+ grid-row: 6 / 7;
+}
\ No newline at end of file
diff --git a/finished.txt b/finished.txt
new file mode 100644
index 0000000..fed6a25
--- /dev/null
+++ b/finished.txt
@@ -0,0 +1 @@
+"I'm pretty happy with the way my final product looks on my own full-screen. That being said, it is not a responsive design and would not do well on a browser that isnt full screen and a laptop. I honestly spent a lot of time on this and I'm not even sure I did it right I just found ways that made it work...sorta. Games were fun but putting the concepts into use was a lot harder. Did a good amount of googling but I do still have questions and would love feedback and suggestions because, again, I feel like I did it wrong. Visually they are very similar but I just couldn't figure out how to get that slim border around my button. Better luck next time!"
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..05392b3
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1 @@
+Flexbox and grid are both a type of CSS styling that work with display. Grid allows for my specific value inputs while flexbox seems that its more determined by loose concepts such as left/right/top/bottom/center. With grid tyling you can establish different sizing for the template and from there the ordering and placement of items are more determined by number placement within rows and columns. Another big difference between the two is that flexbox is single-axis oriented and grid optimizes 2-dimensional layouts(cells can take up multiple rows and columns).
diff --git a/index.html b/index.html
index 8cd37ff..3ae42a1 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,53 @@
- Hello Front-End
+ Airbnb
+
-
Hello Front-End
+
+
Meet Guidebooks
+
Discover hundreds of local spots recommended by Airbnb hosts
+ 
+ 
+ 
+ 
+ 
+