add header-2

aaronb317 · Aug 23, 2021 · 7ea21b8 · 7ea21b8
1 parent aedeab7
commit 7ea21b8
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 0 deletions.
diff --git a/flex/flex-header-2/README.md b/flex/flex-header-2/README.md
@@ -0,0 +1,21 @@
+# Another common header style
+
+We're starting to sneak in a little more CSS that you haven't seen yet. Don't worry about this for now, we just want things to look a little bit prettier, and these things do not interfere with your task.
+
+For this one you will probably need to edit the HTML a little bit. Often with flexbox you need to add containers around things to make them go where you need them to go. In this case, you probably want to separate the items that go on the left and right of the header.
+
+This is also the first example where you'll be nesting flex containers inside each other.
+
+## Desired outcome
+As with the last example, this one needs to flex in the middle.
+
+![png](./desired-outcome.png)
+
+![gif](./desired-outcome.gif)
+
+### Self Check
+- everything is centered vertically inside the header
+- there is 8px space between everything and the edge of the header
+- Items are arranged horizontally as seen in the outcome image
+- There is 16px between each item on both sides of the header
+- Used flex to arrange everything
diff --git a/flex/flex-header-2/desired-outcome.gif b/flex/flex-header-2/desired-outcome.gif
diff --git a/flex/flex-header-2/desired-outcome.png b/flex/flex-header-2/desired-outcome.png
diff --git a/flex/flex-header-2/index.html b/flex/flex-header-2/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flex Header 2</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="logo">
+    LOGO
+  </div>
+  <ul class="links">
+    <li><a href="google.com">link-one</a></li>
+    <li><a href="google.com">link-two</a></li>
+    <li><a href="google.com">link-three</a></li>
+  </ul>
+  <div class="right">
+    <button class="notifications">
+      1 new notification
+    </button>
+    <div class="profile-image"></div>
+  </div>
+</body>
+</html>
diff --git a/flex/flex-header-2/style.css b/flex/flex-header-2/style.css
@@ -0,0 +1,48 @@
+/* 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);
+}
+
+.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;
+}
diff --git a/flex/flex-information/README.md b/flex/flex-information/README.md
@@ -0,0 +1,18 @@
+# A very common website feature
+
+This exercise is to recreate a section that is found on many informational websites.
+
+For this one you will need to edit the HTML a little bit too. We can't be making things _too_ easy for you. You'll want to add containers around the various elements so that you can flex them. Good luck!
+
+## Desired outcome
+
+![desired outcome](./desired-outcome.png)
+
+### Self Check
+
+- All items are centered on the page
+- Title is centered on the page
+- 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
diff --git a/flex/flex-information/desired-outcome.png b/flex/flex-information/desired-outcome.png
diff --git a/flex/flex-information/images/barberry.png b/flex/flex-information/images/barberry.png
diff --git a/flex/flex-information/images/chilli.png b/flex/flex-information/images/chilli.png
diff --git a/flex/flex-information/images/pepper.png b/flex/flex-information/images/pepper.png
diff --git a/flex/flex-information/images/saffron.png b/flex/flex-information/images/saffron.png
diff --git a/flex/flex-information/index.html b/flex/flex-information/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Information</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="title">Information!</div>
+
+  <img src="./images/barberry.png" alt="barberry">
+  <div class="text">This is a type of plant. We love this one.</div>
+
+  <img src="./images/chilli.png" alt="chili">
+  <div class="text">This is another type of plant. Isn't it nice</div>
+
+  <img src="./images/pepper.png" alt="pepper">
+  <div class="text">We have so many plants. Yay plants.</div>
+
+  <img src="./images/saffron.png" alt="saffron">
+  <div class="text">I'm running out of things to say about plants.</div>
+
+  <!-- disregard this section, it's here to give attribution to the creator of these icons -->
+  <div class="footer">
+    <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+  </div>
+</body>
+</html>
diff --git a/flex/flex-information/style.css b/flex/flex-information/style.css
@@ -0,0 +1,27 @@
+body {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+img {
+  width: 100px;
+  height: 100px;
+}
+
+.title {
+  font-size: 36px;
+  font-weight: 900;
+}
+
+
+/* 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;
+}