diff --git a/flex/flex-center/solution/solution.css b/flex/flex-center/solution/solution.css new file mode 100644 index 0000000..a9ab40e --- /dev/null +++ b/flex/flex-center/solution/solution.css @@ -0,0 +1,20 @@ +.container { + background: dodgerblue; + border: 4px solid midnightblue; + width: 400px; + height: 300px; + + /* look at this! */ + display: flex; + align-items: center; + justify-content: center; +} + +.box { + background: palevioletred; + font-weight: bold; + text-align: center; + border: 6px solid maroon; + width: 80px; + height: 80px; +} \ No newline at end of file diff --git a/flex/flex-center/solution/solution.html b/flex/flex-center/solution/solution.html new file mode 100644 index 0000000..d2121af --- /dev/null +++ b/flex/flex-center/solution/solution.html @@ -0,0 +1,15 @@ + + + + + + + CENTER THIS DIV + + + +
+
center this div
+
+ + \ No newline at end of file diff --git a/flex/flex-header-2/index.html b/flex/flex-header-2/index.html index 1e024aa..85816e2 100644 --- a/flex/flex-header-2/index.html +++ b/flex/flex-header-2/index.html @@ -8,15 +8,15 @@ - - -
+
+ + diff --git a/flex/flex-header-2/solution/solution.css b/flex/flex-header-2/solution/solution.css new file mode 100644 index 0000000..02ea781 --- /dev/null +++ b/flex/flex-header-2/solution/solution.css @@ -0,0 +1,63 @@ +/* this is some magical font-importing. +you'll learn about it later. */ +@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap'); + +body { + margin: 0; + background: #eee; + font-family: Besley, serif; +} + +.header { + background: white; + border-bottom: 1px solid #ddd; + box-shadow: 0 0 8px rgba(0,0,0,.1); + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px; +} + +.profile-image { + background: rebeccapurple; + box-shadow: inset 2px 2px 4px rgba(0,0,0,.5); + border-radius: 50%; + width: 48px; + height: 48px; +} + +.logo { + color: rebeccapurple; + font-size: 32px; + font-weight: 900; + font-style: italic; +} + +button { + border: none; + border-radius: 8px; + background: rebeccapurple; + color: white; + padding: 8px 24px; +} + +a { + /* this removes the line under our links */ + text-decoration: none; + color: rebeccapurple; +} + +ul { + list-style-type: none; + display: flex; + margin: 0; + padding: 0; + gap: 16px; +} + +.left, .right { + display: flex; + align-items: center; + gap: 16px; +} + diff --git a/flex/flex-header-2/solution/solution.html b/flex/flex-header-2/solution/solution.html new file mode 100644 index 0000000..e363967 --- /dev/null +++ b/flex/flex-header-2/solution/solution.html @@ -0,0 +1,30 @@ + + + + + + + Flex Header 2 + + + +
+
+ + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/flex/flex-header/solution/solution.css b/flex/flex-header/solution/solution.css new file mode 100644 index 0000000..3d7c662 --- /dev/null +++ b/flex/flex-header/solution/solution.css @@ -0,0 +1,34 @@ +.header { + font-family: monospace; + background: papayawhip; + padding: 8px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.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; + + display: flex; + margin: 0; + padding: 0; + gap: 8px; +} + +a { + font-size: 22px; + background: white; + padding: 8px; + /* this removes the line under the links */ + text-decoration: none; +} \ No newline at end of file diff --git a/flex/flex-header/solution/solution.html b/flex/flex-header/solution/solution.html new file mode 100644 index 0000000..2f447ba --- /dev/null +++ b/flex/flex-header/solution/solution.html @@ -0,0 +1,29 @@ + + + + + + + Flex Header + + + +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/flex/flex-information/solution/images/barberry.png b/flex/flex-information/solution/images/barberry.png new file mode 100644 index 0000000..464c2de Binary files /dev/null and b/flex/flex-information/solution/images/barberry.png differ diff --git a/flex/flex-information/solution/images/chilli.png b/flex/flex-information/solution/images/chilli.png new file mode 100644 index 0000000..5ffe0a2 Binary files /dev/null and b/flex/flex-information/solution/images/chilli.png differ diff --git a/flex/flex-information/solution/images/pepper.png b/flex/flex-information/solution/images/pepper.png new file mode 100644 index 0000000..ebf7a22 Binary files /dev/null and b/flex/flex-information/solution/images/pepper.png differ diff --git a/flex/flex-information/solution/images/saffron.png b/flex/flex-information/solution/images/saffron.png new file mode 100644 index 0000000..f036b34 Binary files /dev/null and b/flex/flex-information/solution/images/saffron.png differ diff --git a/flex/flex-information/solution.css b/flex/flex-information/solution/solution.css similarity index 100% rename from flex/flex-information/solution.css rename to flex/flex-information/solution/solution.css diff --git a/flex/flex-information/solution.html b/flex/flex-information/solution/solution.html similarity index 100% rename from flex/flex-information/solution.html rename to flex/flex-information/solution/solution.html diff --git a/flex/flex-layout/README.md b/flex/flex-layout/README.md index bc35ba2..38d1111 100644 --- a/flex/flex-layout/README.md +++ b/flex/flex-layout/README.md @@ -15,7 +15,7 @@ Flexbox is useful for laying out entire pages as well as the smaller components - Header and footer have padding. - Links in header and footer are pushed to either side. - There is space between the links in the header and footer. -- Footer has a light gray background (#eeeeee). +- Footer has a light gray background (`#eeeeee`). - Logo, input and buttons are centered in the screen. - Buttons have an appropriate amount of padding. - There is space between the logo, input and buttons. diff --git a/flex/flex-layout/solution/logo.png b/flex/flex-layout/solution/logo.png new file mode 100644 index 0000000..d14f8a5 Binary files /dev/null and b/flex/flex-layout/solution/logo.png differ diff --git a/flex/flex-layout/solution.css b/flex/flex-layout/solution/solution.css similarity index 100% rename from flex/flex-layout/solution.css rename to flex/flex-layout/solution/solution.css diff --git a/flex/flex-layout/solution/solution.html b/flex/flex-layout/solution/solution.html new file mode 100644 index 0000000..8f19aaf --- /dev/null +++ b/flex/flex-layout/solution/solution.html @@ -0,0 +1,42 @@ + + + + + + + LAYOUT + + + +
+ + +
+
+ +
+ +
+
+ + +
+
+
+ + +
+ + \ No newline at end of file diff --git a/flex/flex-modal/solution/solution.css b/flex/flex-modal/solution/solution.css new file mode 100644 index 0000000..83a6021 --- /dev/null +++ b/flex/flex-modal/solution/solution.css @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +html, body { + height: 100%; +} + +body { + font-family: Roboto, sans-serif; + margin: 0; + background: #aaa; + color: #333; + /* I'll give you this one for free lol */ + display: flex; + align-items: center; + justify-content: center; +} + +.modal { + background: white; + width: 480px; + border-radius: 10px; + box-shadow: 2px 4px 16px rgba(0,0,0,.2); + display: flex; + gap: 16px; + padding: 16px; +} + +.icon { + color: royalblue; + font-size: 26px; + font-weight: 700; + background: lavender; + width: 42px; + height: 42px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.close-button { + background: #eee; + border-radius: 50%; + color: #888; + font-weight: 400; + font-size: 16px; + height: 24px; + width: 24px; + display: flex; + align-items: center; + justify-content: center; +} + +button { + padding: 8px 16px; + border-radius: 8px; +} + +button.continue { + background: royalblue; + border: 1px solid royalblue; + color: white; +} + +button.cancel { + background: white; + border: 1px solid #ddd; + color: royalblue; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 18px; + font-weight: 700; + margin-bottom: 8px; +} + +.text { + margin-bottom: 16px; +} \ No newline at end of file diff --git a/flex/flex-modal/solution/solution.html b/flex/flex-modal/solution/solution.html new file mode 100644 index 0000000..dffd947 --- /dev/null +++ b/flex/flex-modal/solution/solution.html @@ -0,0 +1,23 @@ + + + + + + + + Modal + + +
+
!
+
+
Are you sure you want to do that? +
✖
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
+ + +
+
+ + \ No newline at end of file