Update index.html

OpenCodeChicago · Aug 28, 2024 · 0c97604 · 0c97604
1 parent 668e3c3
commit 0c97604
Showing 1 changed file with 51 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -8,17 +8,63 @@
   </head>
   <body>
     <div class="wrapper">
-
+      <!-- Simple box with border, margin, and background color -->
       <div class="box">box1</div>
 
+      <!-- Box model example with labeled elements for margin, border, padding, and content -->
       <div class="box2">
         box2
-        <span>Margin</span>
-        <span>Border</span>
-        <span>Padding</span>
-        <span>Content</span>
+        <span class="text">Margin</span>
+        <span class="text2">Border</span>
+        <span class="text3">Padding</span>
+        <span class="text4">Content</span>
       </div>
     </div>
 
+    <!-- Container demonstrating box-sizing differences (content-box vs. border-box) -->
+    <div class="container">
+      <div class="item1">item 1</div>
+      <div class="item2">item 2</div>
+      <div class="item3">item 3</div>
+      <div class="item4">item 4</div>
+    </div>
+
+    <!-- Flexbox container centered on the page -->
+    <div class="container2">
+      <div class="item5">item 5</div>
+      <div class="item6">item 6</div>
+      <div class="item7">item 7</div>
+      <div class="item8">item 8</div>
+    </div>
+
+    <!-- Flexbox container demonstrating justify-content (center and space-between) -->
+    <div class="container3">
+      <div class="item9">item 9</div>
+      <div class="item10">item 10</div>
+      <div class="item11">item 11</div>
+      <div class="item12">item 12</div>
+    </div>
+
+    <!-- Flexbox container demonstrating flex-direction column -->
+    <div class="container4">
+      <div class="item13">item 13</div>
+      <div class="item14">item 14</div>
+      <div class="item15">item 15</div>
+      <div class="item16">item 16</div>
+    </div>
+
+    <!-- Flexbox container with wrapping enabled -->
+    <div class="container5">
+      <div class="item17">item 17</div>
+      <div class="item18">item 18</div>
+      <div class="item19">item 19</div>
+      <div class="item20">item 20</div>
+      <div class="item21">item 21</div>
+      <div class="item22">item 22</div>
+      <div class="item23">item 23</div>
+      <div class="item24">item 24</div>
+      <div class="item25">item 25</div>
+      <div class="item26">item 26</div>
+    </div>
   </body>
 </html>