Created DIVs sections, Modified css for for new elements

iBeZeKe · iBeZeKe · commit dcddf544eda0 · 2022-07-27T22:48:42.000-07:00
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -9,18 +9,24 @@
   </head>
   <body>
     <div class="title">Information!</div>
-
+<div class="plant-container">
+  <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>
+  <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>
+  <div class="plant">
     <img src="./images/pepper.png" alt="pepper">
     <div class="text">We have so many plants. Yay plants.</div>
-
+  </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>
 
     <!-- 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 {
@@ -10,8 +11,27 @@ img {
 .title {
   font-size: 36px;
   font-weight: 900;
+  margin-bottom: 32px;
+  color:  hsl(300, 25%, 50%);
 }
 
+.plant-container{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 52px;
+  
+}
+
+/*could try giving it a border and make the borders equal sizes
+so the boxes all have the same dimensions*/
+.plant{
+  max-width: 200px;
+  border: dashed hsl(300, 25%, 50%);
+}
+
+
+
 /* do not edit this footer */
 .footer {
   position: fixed;
