From 9eacdd9d9726bdb8900a35f51ec0fd84d494b6a1 Mon Sep 17 00:00:00 2001 From: Cody Loyd Date: Wed, 18 Aug 2021 15:46:54 -0500 Subject: [PATCH] add first flex exercise --- flex/flex-center/README.md | 12 ++++++++++++ flex/flex-center/desired-outcome.png | Bin 0 -> 7299 bytes flex/flex-center/index.html | 15 +++++++++++++++ flex/flex-center/style.css | 15 +++++++++++++++ 4 files changed, 42 insertions(+) create mode 100644 flex/flex-center/README.md create mode 100644 flex/flex-center/desired-outcome.png create mode 100644 flex/flex-center/index.html create mode 100644 flex/flex-center/style.css diff --git a/flex/flex-center/README.md b/flex/flex-center/README.md new file mode 100644 index 0000000..56cbbb6 --- /dev/null +++ b/flex/flex-center/README.md @@ -0,0 +1,12 @@ +# CENTER THIS DIV +This one is simple, but it's something that you'll want to do ALL THE TIME. Might as well get it out of the way now. + +All you need to do is center the red div inside the blue container. + +## Desired Outcome +![outcome](./desired-outcome.png) + +### Self Check +- Is the red div centered? +- Did you _only_ use flexbox to center it? + diff --git a/flex/flex-center/desired-outcome.png b/flex/flex-center/desired-outcome.png new file mode 100644 index 0000000000000000000000000000000000000000..711b6972d6009c62a2ed3d240781ba58a883510c GIT binary patch literal 7299 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 literal 0 HcmV?d00001 diff --git a/flex/flex-center/index.html b/flex/flex-center/index.html new file mode 100644 index 0000000..d904030 --- /dev/null +++ b/flex/flex-center/index.html @@ -0,0 +1,15 @@ + + + + + + + CENTER THIS DIV + + + +
+
center this div
+
+ + \ No newline at end of file diff --git a/flex/flex-center/style.css b/flex/flex-center/style.css new file mode 100644 index 0000000..e35feac --- /dev/null +++ b/flex/flex-center/style.css @@ -0,0 +1,15 @@ +.container { + background: dodgerblue; + border: 4px solid midnightblue; + width: 400px; + height: 300px; +} + +.box { + background: palevioletred; + font-weight: bold; + text-align: center; + border: 6px solid maroon; + width: 80px; + height: 80px; +} \ No newline at end of file