From 338ee4eb233717df575a1d2bfd6d59989a1d0a2d Mon Sep 17 00:00:00 2001 From: Cody Loyd Date: Mon, 23 Aug 2021 10:43:39 -0500 Subject: [PATCH] add header exercise --- flex/flex-header/README.md | 17 ++++++++++++ flex/flex-header/desired-outcome-narrow.png | Bin 0 -> 12301 bytes flex/flex-header/desired-outcome-wide.png | Bin 0 -> 13525 bytes flex/flex-header/index.html | 29 ++++++++++++++++++++ flex/flex-header/style.css | 25 +++++++++++++++++ 5 files changed, 71 insertions(+) create mode 100644 flex/flex-header/README.md create mode 100644 flex/flex-header/desired-outcome-narrow.png create mode 100644 flex/flex-header/desired-outcome-wide.png create mode 100644 flex/flex-header/index.html create mode 100644 flex/flex-header/style.css diff --git a/flex/flex-header/README.md b/flex/flex-header/README.md new file mode 100644 index 0000000..35a073a --- /dev/null +++ b/flex/flex-header/README.md @@ -0,0 +1,17 @@ +# A Basic Header + +Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea for how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (hint: `ul`s have some default margin/padding that you will need to deal with) + +## Desired Outcome + +narrow: +![narrow](./desired-outcome-narrow.png) +wide: +![wide](./desired-outcome-wide.png) + +### Self Check +- There is space between all items and the edge of the header (specific px amount doesn't matter here) +- Logo is centered vertically and horizontally. +- list-items are horizontal, and are centered vertically inside the header +- left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized. +- This exercise does not use floats, inline-block, or absolute positioning. \ No newline at end of file diff --git a/flex/flex-header/desired-outcome-narrow.png b/flex/flex-header/desired-outcome-narrow.png new file mode 100644 index 0000000000000000000000000000000000000000..966149e395f55e4a287c20c8718729dc8a97056a GIT binary patch literal 12301 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 Wa9P9w*;N0c_+=y%fn{Pw@BbfEAmhsb literal 0 HcmV?d00001 diff --git a/flex/flex-header/desired-outcome-wide.png b/flex/flex-header/desired-outcome-wide.png new file mode 100644 index 0000000000000000000000000000000000000000..79972975218f578ee1480a03926f2cd890093439 GIT binary patch literal 13525 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 Q|GY&(R#m20%H-w$2a&06LI3~& literal 0 HcmV?d00001 diff --git a/flex/flex-header/index.html b/flex/flex-header/index.html new file mode 100644 index 0000000..6104401 --- /dev/null +++ b/flex/flex-header/index.html @@ -0,0 +1,29 @@ + + + + + + + Flex Header + + + +
+ + + +
+ + \ No newline at end of file diff --git a/flex/flex-header/style.css b/flex/flex-header/style.css new file mode 100644 index 0000000..cb598c9 --- /dev/null +++ b/flex/flex-header/style.css @@ -0,0 +1,25 @@ +.header { + font-family: monospace; + background: papayawhip; +} + +.logo { + font-size: 48px; + font-weight: 900; + color: tomato; + background: white; + padding: 4px 32px; +} + +ul { + /* this removes the dots on the list items*/ + list-style-type: none; +} + +a { + font-size: 22px; + background: white; + padding: 8px; + /* this removes the line under the links */ + text-decoration: none; +} \ No newline at end of file