diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..7a9dfa0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "pwa-chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 26f119b..77f38fe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,18 @@
-h1 {
- color: salmon;
+body {
+ background-color:gray;
}
+h2 {
+ color: black;
+}
+h3 {
+ color:black;
+}
+#title-top {
+ text-align:center;
+}
+.centered-images {
+ text-align: center;
+}
+button {
+ text-align:center;
+}
\ No newline at end of file
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
new file mode 100644
index 0000000..e5fe946
--- /dev/null
+++ b/flex-vs-grid.md
@@ -0,0 +1,3 @@
+## flexbox uses the justify-content property to align items horizontally, and the align-items property to align items vertically
+### however, when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.
+## they both involve layout or moving elements around the document; they both are optimized to maintain layout across browsers
diff --git a/index.html b/index.html
index 8cd37ff..e165d62 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,27 @@
Hello Front-End
-
Hello Front-End
+
+
+
Meet Guidebooks
+
Discover hundreds of local spots recommended by Airbnb hosts
+ 
+ 
+ 
+ 
+ 
+