From a7067c9b9c3748944bece67e51343050f26d036e Mon Sep 17 00:00:00 2001 From: Cody Loyd Date: Tue, 24 Aug 2021 08:08:34 -0500 Subject: [PATCH] add info solution --- flex/flex-information/README.md | 3 ++- flex/flex-information/solution.css | 40 +++++++++++++++++++++++++++++ flex/flex-information/solution.html | 37 ++++++++++++++++++++++++++ flex/flex-layout/index.html | 2 +- 4 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 flex/flex-information/solution.css create mode 100644 flex/flex-information/solution.html diff --git a/flex/flex-information/README.md b/flex/flex-information/README.md index b9d2e86..22dd91a 100644 --- a/flex/flex-information/README.md +++ b/flex/flex-information/README.md @@ -15,4 +15,5 @@ For this one you will need to edit the HTML a little bit too. We can't be making - 32px between the title and the 'items' - 52px between each item - Items are arranged horizontally on the page -- Items are only 200px wide and the text wraps \ No newline at end of file +- Items are only 200px wide and the text wraps +- Item text is centered \ No newline at end of file diff --git a/flex/flex-information/solution.css b/flex/flex-information/solution.css new file mode 100644 index 0000000..b44d453 --- /dev/null +++ b/flex/flex-information/solution.css @@ -0,0 +1,40 @@ +body { + font-family: 'Courier New', Courier, monospace; + text-align: center; +} + +img { + width: 100px; + height: 100px; +} + +.title { + font-size: 36px; + font-weight: 900; + margin-bottom: 32px; +} + +.container { + display: flex; + align-items: center; + justify-content: center; + gap: 52px; +} + +.info { + max-width: 200px; +} + + +/* do not edit this footer */ +.footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 52px; + display: flex; + align-items: center;; + justify-content: center; + background: #eee; +} \ No newline at end of file diff --git a/flex/flex-information/solution.html b/flex/flex-information/solution.html new file mode 100644 index 0000000..effb986 --- /dev/null +++ b/flex/flex-information/solution.html @@ -0,0 +1,37 @@ + + + + + + + Information + + + +
Information!
+ +
+
+ barberry +
This is a type of plant. We love this one.
+
+
+ chili +
This is another type of plant. Isn't it nice
+
+
+ pepper +
We have so many plants. Yay plants.
+
+
+ saffron +
I'm running out of things to say about plants.
+
+
+ + +
+
Icons made by Icongeek26 from www.flaticon.com
+
+ + \ No newline at end of file diff --git a/flex/flex-layout/index.html b/flex/flex-layout/index.html index 3ee5e02..f199d8b 100644 --- a/flex/flex-layout/index.html +++ b/flex/flex-layout/index.html @@ -5,7 +5,7 @@ LAYOUT - +