diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 0f85753..e3c7d5b 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,8 +2,11 @@ Please describe your comfort and completeness levels before submitting. -Comfort Level (1-5): +Comfort Level (1-5): 2.5 -Completeness Level (1-5): +Completeness Level (1-5): 3 Do you have any remaining questions about this deliverable?: +I couldn't figure out how to edit the button itself after adding it in. Wanted to center it and make it bigger, but it didn't seem to work in CSS unless I was doing something wrong. +I also couldn't for the life of me figure out how to make the images stay aligned in the right spots without making the images too big and too small. +I couldn't remember how to put the font directly over the images in the center. 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..83442dd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,46 @@ +body { + background-color: lightgray; + +} + + h1 { - color: salmon; + margin: 60px 0 0 0; + text-align: center; + color: gray; + font-family: Arial, Helvetica, sans-serif; + font-size: 45px; +} + +h2 { + text-align: center; + color: gray; + font-family: Arial, Helvetica, sans-serif; + font-size: 25px; +} + + * { + box-sizing: border-box; + } + +.column { + float: left; + width: 33.33%; + padding: 5px; + font-family: Arial, Helvetica, sans-serif; + font-size: 25px; + color: white; + align-content: center; +} + + +.row::after { + content: ""; + clear: both; + display: table; + font-family: Arial, Helvetica, sans-serif; + font-size: 25px; + color: white; + align-content: center; } + diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..bb0622b --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1 @@ +Seemed to be a pretty creative way to learn how learn commands for positioning. The main difference between the two as far as I could tell is that the grid garden is just that, a grid. The lines were visible and you could see exactly where you were positioning the water/carrots. In the flexbox, the idea was still the same in a grid type formation but without the lines. Everything between the two seemed to be defined in rows and columns. The main difference between the two that I noticed was that the commands to enter in the CSS was that in the grid garden the commands mostly seemed to start with "grid", or "rows" and "columns. In the flexbox, the commands all seemed to start with "justify", "align", or "flex". \ No newline at end of file diff --git a/index.html b/index.html index 8cd37ff..58f80ba 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,62 @@ - Hello Front-End + AirBnb -

Hello Front-End

+​ +

Meet Guidebooks

+​ +

Discover hundreds of local spots recommended by Airbnb hosts

+ +
+
+

San Francisco

+ +
+ +
+

New York

+ +
+ +
+

London

+ +
+ +
+ + + + +

Just for the weekend

+ +

Discover new, inspiring places close to home.

+ +
+
+

Napa

+ +
+ +
+

Sonoma

+ +
+ +
+

San Francisco

+ +
+ +
+ + + + + + +