aboutsummaryrefslogtreecommitdiffhomepage
path: root/web/html.html
diff options
context:
space:
mode:
Diffstat (limited to 'web/html.html')
-rw-r--r--web/html.html52
1 files changed, 26 insertions, 26 deletions
diff --git a/web/html.html b/web/html.html
index 8893bfc..0bc7cb4 100644
--- a/web/html.html
+++ b/web/html.html
@@ -206,11 +206,11 @@
padding-left: 1em;
}
</style>
-<div class="grid-2col">
- <div class="col1">
+<div class="grid-2col">
+ <div class="col1">
<p>Some text in the first column.</p>
</div>
- <div class="col2">
+ <div class="col2">
<p>Some text in the second column.</p>
</div>
</div>
@@ -222,9 +222,9 @@
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas:
- "h h"
- "s m"
- "f f";
+ "h h"
+ "s m"
+ "f f";
gap: 1em;
}
.gh {
@@ -253,21 +253,21 @@ p {
margin: 1em;
}
</style>
-<div class="page-grid">
- <div class="gh">
- <ul class="nav-items">
- <li class="nav-item"><a href="">aa</a></li>
- <li class="nav-item"><a href="">bb</a></li>
- <li class="nav-item"><a href="">cc</a></li>
+<div class="page-grid">
+ <div class="gh">
+ <ul class="nav-items">
+ <li class="nav-item"><a href="">aa</a></li>
+ <li class="nav-item"><a href="">bb</a></li>
+ <li class="nav-item"><a href="">cc</a></li>
</ul>
</div>
- <div class="gs">
+ <div class="gs">
<p>Some text in the second column.</p>
</div>
- <div class="gm">
+ <div class="gm">
<p>Some text in the second column.</p>
</div>
- <div class="gf">
+ <div class="gf">
<p>Some text in the second column.</p>
</div>
</div>
@@ -277,32 +277,32 @@ p {
<p><a href="src/tabs.html">Rendered html</a></p>
<pre><code class="language-html">&lt;script&gt;
const showTab = (E, T) =&gt; {
- const TABS = Array.from(document.getElementsByClassName(&quot;content&quot;));
+ const TABS = Array.from(document.getElementsByClassName("content"));
TABS.forEach(T =&gt; {
- T.style.display = &quot;none&quot;;
+ T.style.display = "none";
});
- document.getElementById(T).style.display = &quot;block&quot;;
+ document.getElementById(T).style.display = "block";
};
window.onload = () =&gt; {
- document.getElementById(&quot;bTab1&quot;).onclick = (E) =&gt; {
- showTab(E, &quot;tTab1&quot;);
+ document.getElementById("bTab1").onclick = (E) =&gt; {
+ showTab(E, "tTab1");
};
- document.getElementById(&quot;bTab2&quot;).onclick = (E) =&gt; {
- showTab(E, &quot;tTab2&quot;);
+ document.getElementById("bTab2").onclick = (E) =&gt; {
+ showTab(E, "tTab2");
};
}
&lt;/script&gt;
-&lt;button type=&quot;button&quot; id=&quot;bTab1&quot;&gt;Tab1&lt;/button&gt;
-&lt;button type=&quot;button&quot; id=&quot;bTab2&quot;&gt;Tab2&lt;/button&gt;
+&lt;button type="button" id="bTab1"&gt;Tab1&lt;/button&gt;
+&lt;button type="button" id="bTab2"&gt;Tab2&lt;/button&gt;
-&lt;div id=&quot;tTab1&quot; class=&quot;content&quot; style=&quot;display: block;&quot;&gt;
+&lt;div id="tTab1" class="content" style="display: block;"&gt;
&lt;p&gt;Some content goes here ...&lt;/p&gt;
&lt;/div&gt;
-&lt;div id=&quot;tTab2&quot; class=&quot;content&quot; style=&quot;display: none;&quot;&gt;
+&lt;div id="tTab2" class="content" style="display: none;"&gt;
&lt;p&gt;... and there.&lt;/p&gt;
&lt;/div&gt;
</code></pre>