diff --git a/flex/flex-layout-2/README.md b/flex/flex-layout-2/README.md new file mode 100644 index 0000000..6808105 --- /dev/null +++ b/flex/flex-layout-2/README.md @@ -0,0 +1,32 @@ +# The Holy Grail of Layout + +In this last flexbox exercise you're going to recreate an incredibly common website layout. It is so common that it is often called the [holy-grail](https://www.google.com/search?q=holy+grail+layout&tbm=isch&sclient=img) layout.... and with flexbox it is actually pretty easy to pull off. + +As with the previous exercise, we've left a little more for you to do. + +### Hints +- You will need to change the flex-direction to push the footer down. +- You will need to add some divs as containers to get things to line up correctly. +- `flex-wrap` will help get the cards aligned correctly. + +## Desired outcome + +![desired outcome](./desired-outcome.png) + +The number of cards lined up in that section will change based on the width of your screen, so don't stress about getting _exactly_ a 3x3 grid. + +on a smaller screen it will look like this: + +![smaller](./desired-outcome-smaller.png) + +### Self Check +- Header text is size 32px, weight 900 +- Header text is vertically centered and 16px from the edge of the screen. +- Footer is pushed to bottom of screen (footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter) +- Footer text is centered horizontally and vertically. +- Sidebar and cards take up all available space above the footer. +- Sidebar is 300px wide (i.e. it doesn't shrink) +- Sidebar links are size 24px, white and do not have the underline text decoration. +- Sidebar has 16px padding. +- There is 32px padding around the 'cards' section +- Cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page diff --git a/flex/flex-layout-2/desired-outcome-smaller.png b/flex/flex-layout-2/desired-outcome-smaller.png new file mode 100644 index 0000000..1b2ba06 Binary files /dev/null and b/flex/flex-layout-2/desired-outcome-smaller.png differ diff --git a/flex/flex-layout-2/desired-outcome.png b/flex/flex-layout-2/desired-outcome.png new file mode 100644 index 0000000..5d7da43 Binary files /dev/null and b/flex/flex-layout-2/desired-outcome.png differ diff --git a/flex/flex-layout-2/index.html b/flex/flex-layout-2/index.html new file mode 100644 index 0000000..fcb7f0c --- /dev/null +++ b/flex/flex-layout-2/index.html @@ -0,0 +1,35 @@ + + + + + + + The Holy Grail + + + +
+ MY AWESOME WEBSITE +
+ +
+ +
+ +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+ +
+ The Odin Project ❤️ +
+ + \ No newline at end of file diff --git a/flex/flex-layout-2/solution/solution.css b/flex/flex-layout-2/solution/solution.css new file mode 100644 index 0000000..f1aa36a --- /dev/null +++ b/flex/flex-layout-2/solution/solution.css @@ -0,0 +1,87 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + min-height: 100vh; +} + +.header { + height: 72px; + background: darkmagenta; + color: white; +} + +.footer { + height: 72px; + background: #eee; + color: darkmagenta; +} + +.sidebar { + width: 300px; + background: royalblue; +} + +.card { + border: 1px solid #eee; + box-shadow: 2px 4px 16px rgba(0,0,0,.06); + border-radius: 4px; + width: 300px; +} + +/* SOLUTION */ + +body { + display: flex; + flex-direction: column; +} + +.header { + display: flex; + align-items: center; + padding: 0 16px; + font-size: 32px; + font-weight: 900; +} + +.body { + flex: 1; + display: flex; +} + +.sidebar { + flex-shrink: 0; + padding: 16px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +li { + margin-bottom: 16px; +} + +a { + color: white; + text-decoration: none; + font-size: 24px; +} + +.container { + padding: 32px; + display: flex; + flex-wrap: wrap; +} + +.card { + padding: 16px; + margin: 16px; +} + +.footer { + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/flex/flex-layout-2/solution/solution.html b/flex/flex-layout-2/solution/solution.html new file mode 100644 index 0000000..356a0ea --- /dev/null +++ b/flex/flex-layout-2/solution/solution.html @@ -0,0 +1,36 @@ + + + + + + + The Holy Grail + + + +
+ MY AWESOME WEBSITE +
+
+
+ +
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
+
+
+ The Odin Project ❤️ +
+ + \ No newline at end of file diff --git a/flex/flex-layout-2/style.css b/flex/flex-layout-2/style.css new file mode 100644 index 0000000..7516f6b --- /dev/null +++ b/flex/flex-layout-2/style.css @@ -0,0 +1,28 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + margin: 0; + min-height: 100vh; +} + +.header { + height: 72px; + background: darkmagenta; + color: white; +} + +.footer { + height: 72px; + background: #eee; + color: darkmagenta; +} + +.sidebar { + width: 300px; + background: royalblue; +} + +.card { + border: 1px solid #eee; + box-shadow: 2px 4px 16px rgba(0,0,0,.06); + border-radius: 4px; +} \ No newline at end of file