diff --git a/base.htm b/base.htm
index a5e3224..6d588b0 100644
--- a/base.htm
+++ b/base.htm
@@ -184,6 +184,19 @@ main blockquote {
 main ul, main ol {
     padding-left: 42px;
 }
+main div.box {
+    margin: 0px;
+    padding: 0px;
+    line-height: 15px;
+}
+main div.box :first-child {
+    display: block;
+    margin: 0px;
+    padding: 4px;
+}
+main div.box p {
+    margin: 4px 11px;
+}
 main footer {
     padding-top: 8px;
     text-align: center;
@@ -287,6 +300,37 @@ main footer {
         background-image: linear-gradient(#fff 0%,#fff 1%,#f2f2f2 1%,#ebebeb 50%,#ddd 50%,#cfcfcf 99%,#fff 99%,#fff 100%);
         font-size: 90%;
     }
+    main div.box :first-child::before {
+        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApUlEQVQ4y82TwQnDMAxFpVJyLPiSbbJETr13Fo+RZZxLRghkgnSEEni9ONS0sg1tDv3wwfjbX7Iki/wVAAd4IPBCiHuudrkHVvJYgb50eaOO7cMkpv0eeQGukYuRiUsNvBFpSvTJ0P2un0Sk+6Le3WEG58yBFrjt61r7Qqbij0gLIX3CaPgOqtqoaiMig6GPtTbOwCVyLraxMEj3yPIgHTLKv3ymJySzt16bW/sWAAAAAElFTkSuQmCC);
+    }
+    main div.box :first-child {
+        font-weight: 700;
+        color: #eee;
+    }
+    main div.box.hint {
+        background: #91ffad;
+    }
+    main div.box.hint :first-child {
+        background: #24ae2d;
+    }
+    main div.box.info {
+        background: #71e1fb;
+    }
+    main div.box.info :first-child {
+        background: #217ed0;
+    }
+    main div.box.warn {
+        background: #fdbf91;
+    }
+    main div.box.warn :first-child {
+        background: #df5b5b;
+    }
+    main div.box.note {
+        background: #c4bfb0;
+    }
+    main div.box.note :first-child {
+        background: #5c5353;
+    }
     main footer {
         margin-top: 16px;
         border-top: 2px solid #2d70aa;
@@ -348,6 +392,7 @@ main footer {
                         <li><a href="#buttons">Buttons</a></li>
                         <li><a href="#mouse_buttons">Mouse buttons</a></li>
                     </ul>
+                    <li><a href="#boxes">Boxes</a></li>
                 </ul>
             </nav>
         </header>
@@ -488,6 +533,23 @@ int main(int argc, char **argv)
                     <span class="mbl"></span> or similar.</p>
                 </section>
             </section>
+            <section id="boxes">
+                <h1>Boxes</h1>
+                <p>A few boxes that can be useful from time to time :<br>First,
+                we have hints :
+                <div class="box hint"><span>Hint</span>
+                    <p>Here goes a hint.</p></div>
+                Then basic informations :
+                <div class="box info"><span>Information</span>
+                    <p>Here goes a warning.</p></div>
+                The usual warnings :
+                <div class="box warn"><span>Warning</span>
+                    <p>Here goes a warning.</p></div>
+                And finally simple notes :
+                <div class="box note"><span>Note</span>
+                    <p>This is a note.</p></div>
+                </p>
+            </section>
             <footer>
                 Copyright &copy; 2022 Author Name - All Rights Reserved
                 <br>