3 files changed, 201 insertions, 0 deletions

diff --git a/web/html.html b/web/html.html
index c3ed14a..c58c523 100644
--- a/web/html.html
+++ b/web/html.html
@@ -369,6 +369,108 @@ window.onload = () => {
 <div class = "content arm x86">arm x86</div>
 <div class = "content x86">x86</div>
 </code></pre>
+<h1 id="floating-figures-with-caption"><a class="header" href="#floating-figures-with-caption">Floating figures with caption</a></h1>
+<p><a href="src/figure.html">Rendered html</a></p>
+<pre><code class="language-html">&lt;style&gt;
+img {
+    width: 100%;
+    height: auto;
+}
+figure {
+    width: 20%;
+}
+&lt;/style&gt;
+
+&lt;!-- EXAMPLE 1 ----------------------------------------------------------------&gt;
+
+&lt;figure style="float: left;"&gt;
+    &lt;img src="grad.png"&gt;
+    &lt;figcaption&gt;Fig 1: wow such colors&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
+pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
+fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
+pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
+nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
+malesuada bibendum arcu vitae elementum curabitur.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;figure style="float: right;"&gt;
+    &lt;img src="grad.png"&gt;
+    &lt;figcaption&gt;Fig 2: wow such colors again&lt;/figcaption&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;!-- EXAMPLE 2 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;figure style="float: left;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+Floats can be next to each other on the same height.
+
+&lt;figure style="float: right;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+&lt;!-- EXAMPLE 3 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;figure style="float: left;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+The css property &lt;code&gt;clear: {left, right, both};&lt;/code&gt; controls how elements
+should be handled relative to the previous floating element.
+
+&lt;figure style="float: right; clear: left;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+
+&lt;p&gt;&lt;i&gt;
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere.
+&lt;/i&gt;&lt;/p&gt;
+
+&lt;!-- EXAMPLE 4 ----------------------------------------------------------------&gt;
+
+&lt;hr style="clear: both"&gt;
+
+&lt;div style="overflow: auto; border: 2px solid red;"&gt;
+&lt;figure style="float: left;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+&lt;code&gt;overflow: auto&lt;/code&gt; gives an alternative to &lt;code&gt;clear&lt;/code&gt; to
+control placement of the floats. The red boarder visualizes the size of the
+&lt;code&gt;&amp;ltdiv&amp;gt&lt;/code&gt; block, you can remove the &lt;code&gt;overflow&lt;/code&gt; property
+and observe how the border changes.
+&lt;/div&gt;
+
+&lt;figure style="float: right;"&gt;
+    &lt;img src="grad.png"&gt;
+&lt;/figure&gt;
+</code></pre>
 
                     </main>
 
diff --git a/web/src/figure.html b/web/src/figure.html
new file mode 100644
index 0000000..ebcdf58
--- /dev/null
+++ b/web/src/figure.html
@@ -0,0 +1,99 @@
+<style>
+img {
+    width: 100%;
+    height: auto;
+}
+figure {
+    width: 20%;
+}
+</style>
+
+<!-- EXAMPLE 1 ---------------------------------------------------------------->
+
+<figure style="float: left;">
+    <img src="grad.png">
+    <figcaption>Fig 1: wow such colors</figcaption>
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
+pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
+fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
+pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
+nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
+malesuada bibendum arcu vitae elementum curabitur.
+</i></p>
+
+<figure style="float: right;">
+    <img src="grad.png">
+    <figcaption>Fig 2: wow such colors again</figcaption>
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis.
+</i></p>
+
+<!-- EXAMPLE 2 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+
+Floats can be next to each other on the same height.
+
+<figure style="float: right;">
+    <img src="grad.png">
+</figure>
+
+<!-- EXAMPLE 3 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+
+The css property <code>clear: {left, right, both};</code> controls how elements
+should be handled relative to the previous floating element.
+
+<figure style="float: right; clear: left;">
+    <img src="grad.png">
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere.
+</i></p>
+
+<!-- EXAMPLE 4 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<div style="overflow: auto; border: 2px solid red;">
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+<code>overflow: auto</code> gives an alternative to <code>clear</code> to
+control placement of the floats. The red boarder visualizes the size of the
+<code>&ltdiv&gt</code> block, you can remove the <code>overflow</code> property
+and observe how the border changes.
+</div>
+
+<figure style="float: right;">
+    <img src="grad.png">
+</figure>
diff --git a/web/src/grad.png b/web/src/grad.png
new file mode 100644
index 0000000..0ae458a
--- /dev/null
+++ b/web/src/grad.png