Finished exercise

drwsss · drwsss · commit 809a5d74b506 · 2022-01-22T20:22:56.000-03:00
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -10,17 +10,27 @@
 <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>
+  <div class="plants">
+    <div class="barberry">
+      <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/chilli.png" alt="chili">
-  <div class="text">This is another type of plant. Isn't it nice</div>
+    <div class="chilli">
+      <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/pepper.png" alt="pepper">
-  <div class="text">We have so many plants. Yay plants.</div>
+    <div class="pepper">
+      <img src="./images/pepper.png" alt="pepper">
+      <div class="text">We have so many plants. Yay plants.</div>
+    </div>
 
-  <img src="./images/saffron.png" alt="saffron">
-  <div class="text">I'm running out of things to say about plants.</div>
+    <div class="saffron">
+      <img src="./images/saffron.png" alt="saffron">
+      <div class="text">I'm running out of things to say about plants.</div>
+    </div>
+  </div>
 
   <!-- disregard this section, it's here to give attribution to the creator of these icons -->
   <div class="footer">
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;
+  text-align: center;
 }
 
 img {
@@ -23,4 +24,22 @@ img {
   align-items: center;
   justify-content: center;
   background: #eee;
+}
+
+/* solution */
+
+.title {
+  margin-bottom: 32px;
+}
+
+.plants {
+  display: flex;
+  gap: 52px;
+}
+
+.barberry,
+.chilli,
+.pepper,
+.saffron {
+  max-width: 200px;
 }
