From aeb2e6134d6c9d046322cdd8870b7c05356c0d6e Mon Sep 17 00:00:00 2001 From: taylorschmidt Date: Fri, 21 Aug 2020 12:36:11 -0600 Subject: [PATCH] poll request for deliverable 2 --- css/style.css | 106 ++++++++++++++++++++++++++++++- flex-vs-grid.md | 7 ++ solution.jpg => img/solution.jpg | Bin index.html | 46 +++++++++++++- 4 files changed, 155 insertions(+), 4 deletions(-) create mode 100644 flex-vs-grid.md rename solution.jpg => img/solution.jpg (100%) diff --git a/css/style.css b/css/style.css index 26f119b..a329a28 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,105 @@ -h1 { - color: salmon; +body { + font-family: 'Nunito', sans-serif; + background-color: #f7f7f7; } +.header { + text-align: center; + color: #636363; + font-size: 20px; + font-weight: bold; +} + +.subheader { + text-align: center; + color: #636363; + font-size: 10px; + margin-top: -20px; +} + +.information { + display: grid; + grid-template-columns: 24.5% 16% 1.5% 16% 1.5% 16% 23%; + grid-template-rows: 90% 10% 10% +} + +.sanfran { + grid-area: 1 / 2 / 1 / 2 +} + +.newyork { + grid-area: 1 / 4 / 1 / 4 +} + +.london { + grid-area: 1 / 6 / 1 / 6 +} + +.sanfrantext { + grid-area: 1 / 2 / 1 / 2; + margin-left: 50px; + margin-top: 110px; + color: white; + font-weight: bold; + font-size: 20px +} + +.newyorktext { + grid-area: 1 / 4 / 1 / 4; + margin-top: 110px; + margin-left: 75px; + color: white; + font-weight: bold; + font-size: 20px +} + +.londontext { + grid-area: 1 / 6 / 1 / 6; + margin-left: 80px; + margin-top: 100px; + color: white; + font-weight: bold; + font-size: 20px +} + +button { + background-color: white; + border: 1px solid #636363; + color: #636363; + grid-area: 3 / 4 / 3 / 4; + font-weight: bold; + font-size: 11px; +} + +.napa { + grid-area: 1 / 2 / 1 / 2 +} +.napatext { + grid-area: 1 / 2 / 1 / 2; + margin-left: 90px; + margin-top: 100px; + color: white; + font-weight: bold; + font-size: 20px +} +.sonoma { + grid-area: 1 / 4 / 1 / 4 +} +.sonomatext { + grid-area: 1 / 4 / 1 / 4; + margin-left: 75px; + margin-top: 100px; + color: white; + font-weight: bold; + font-size: 20px +} +.sanfranb { + grid-area: 1 / 6 / 1 / 6 +} +.sanfranbtext { + grid-area: 1 / 6 / 1 / 6; + margin-left: 50px; + margin-top: 100px; + color: white; + font-weight: bold; + font-size: 20px +} \ No newline at end of file diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..3bdb170 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1,7 @@ +## Part 3: + +Use the [command line](https://tmdarneille.gitbook.io/seirfx/01-workflow/01readme) to create a new file in this repository called `flex-vs-grid.md`. Write a paragraph or two comparing/contrasting flexbox and grid in this file. What did you learn about the two? How are they the same? How are they different? + +Flexbox is a CSS tool that allows for the manipulation of the position of items on your webpage. Using display:flex and its various commands allows the user to align items to specific parts of the page or change the spacing between or around them. +CSS Grid allows the user to divide their webpage into grids, making the placement of items on their webpage more streamlined. Using Grid, the user can divide their page into an unlimited amount/size of rows and columns to help place their items in the desired position. +Both are similar in that they result in style and postiion manipulation, but flexbox requires the user to specify if they are placing objects in a row or column orientation while Grid allows the user to manipulate the grid/item using both the row and column orientation. \ No newline at end of file diff --git a/solution.jpg b/img/solution.jpg similarity index 100% rename from solution.jpg rename to img/solution.jpg diff --git a/index.html b/index.html index 8cd37ff..a4d36c6 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,51 @@ - Hello Front-End + + Taylor Schmidt's AirBnb Copy + -

Hello Front-End

+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+ +
+
+ +
+
+ +
+
+ +
+
San Fransisco
+
New York
+
London
+ +
+ +

+ +

Just for the weekend

+

Discover new, inspiring places close to home.

+ + +
+
+ +
+
+ +
+
+ +
+
Napa
+
Sonoma
+
San Fransisco
+ +
+