From 49e13940ab3e381e7a675f95e20c8cd9f28aeb13 Mon Sep 17 00:00:00 2001 From: lind1125 Date: Fri, 21 Aug 2020 18:27:12 -0500 Subject: [PATCH 1/2] created flex-vs-grid.md --- flex-vs-grid.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 flex-vs-grid.md diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..0355eef --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1,5 @@ +# Flexbox vs Grid + +Both the flexbox and grid are tools used to position HTML elements on a page. Both appear to be attempts to optimize placement of elements in relation to each other without the need to account for the relationships between individual elements as meticulously as may be needed when using CSS positioning properties. + +While both do a lot of the work for you in optimizing the placement of elements within a space, flexbox and grid seem optimized for different approaches. Flexbox seems to be more useful for manipulating a group of elements in a uniform way within a space, whereas grid allows for more specification in how space is divided, giving you more versatility in the exact placement of individual elements relative to each other. \ No newline at end of file From b738f2edb2d4b8f46316736b7c83729846b195e6 Mon Sep 17 00:00:00 2001 From: lind1125 Date: Fri, 21 Aug 2020 23:47:33 -0500 Subject: [PATCH 2/2] updated index.html and style.css to match solution.jpg --- css/style.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 26 ++++++++++++++++-- 2 files changed, 97 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 26f119b..522e2b0 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,74 @@ -h1 { - color: salmon; +body { + text-align: center; + margin-right: 25%; + margin-left: 25%; + background-color: #efefef; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + /* background color and font values sourced from http://web.archive.org/web/20140301054800/https://www.airbnb.com/?cdn_locale_redirect=1 +*/ } +h3, h6, button { + color: rgb(83, 83, 83); + /* border: 2px solid; */ +} + +h3 { + margin-bottom: 0; +} +h6{ + margin-top: 2px; + font-weight: normal; +} + +.locations { + display: flex; + justify-content: space-evenly; +} + +button { + background-color: white; + margin-top: 25px; + border-radius: 0; + border: 1px solid lightgray; + font-size: .75em; + width: 200px; + padding: .5em ; +} + +.locations div { + display: flex; + flex-direction: column; + justify-content: center; + height: 200px; + width: 200px; + background-size: cover; +} + +p { + color: #efefef; + font-size: 1.5em; +} + +#san-francisco-guidebook { + background-image: url("../img/san-francisco.jpg") +} + +#new-york-guidebook { + background-image: url("../img/new-york.jpg") +} + +#london-guidebook { + background-image: url("../img/london.jpg") +} + +#napa-destination { + background-image: url("../img/napa.jpg") +} + +#sonoma-destination { + background-image: url("../img/sonoma.jpg") +} + +#san-francisco-destination { + background-image: url("../img/san-francisco-2.jpg") +} \ No newline at end of file diff --git a/index.html b/index.html index 8cd37ff..8eb1e12 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,31 @@ - Hello Front-End + CSS Positioning Practice -

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

+
+ +
+ +