completed 04-flex-information

bflatt72 · Feb 7, 2025 · 66df025 · 66df025
1 parent ef921f1
commit 66df025
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 27 deletions.
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -1,30 +1,48 @@
 <!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>
+  <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>
+    <div class="informational">
+      <div class="plant">
+        <img src="./images/barberry.png" alt="barberry" />
+        <div class="text">This is a type of plant. We love this one.</div>
+      </div>
 
-  <img src="./images/barberry.png" alt="barberry">
-  <div class="text">This is a type of plant. We love this one.</div>
+      <div class="plant">
+        <img src="./images/chilli.png" alt="chili" />
+        <div class="text">This is another type of plant. Isn't it nice</div>
+      </div>
 
-  <img src="./images/chilli.png" alt="chili">
-  <div class="text">This is another type of plant. Isn't it nice</div>
+      <div class="plant">
+        <img src="./images/pepper.png" alt="pepper" />
+        <div class="text">We have so many plants. Yay plants.</div>
+      </div>
 
-  <img src="./images/pepper.png" alt="pepper">
-  <div class="text">We have so many plants. Yay plants.</div>
+      <div class="plant">
+        <img src="./images/saffron.png" alt="saffron" />
+        <div class="text">I'm running out of things to say about plants.</div>
+      </div>
+    </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>
+    <!-- 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/04-flex-information/style.css b/flex/04-flex-information/style.css
@@ -1,5 +1,6 @@
 body {
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
+  text-align: center;
 }
 
 img {
@@ -20,7 +21,23 @@ img {
   right: 0;
   height: 52px;
   display: flex;
-  align-items: center;;
+  align-items: center;
   justify-content: center;
   background: #eee;
-}
+}
+
+.informational {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  gap: 52px;
+}
+
+.title {
+  margin-bottom: 32px;
+}
+
+.plant {
+  max-width: 200px;
+}