diff options
Diffstat (limited to 'web/html.html')
-rw-r--r-- | web/html.html | 52 |
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"><script> const showTab = (E, T) => { - const TABS = Array.from(document.getElementsByClassName("content")); + const TABS = Array.from(document.getElementsByClassName("content")); TABS.forEach(T => { - T.style.display = "none"; + T.style.display = "none"; }); - document.getElementById(T).style.display = "block"; + document.getElementById(T).style.display = "block"; }; window.onload = () => { - document.getElementById("bTab1").onclick = (E) => { - showTab(E, "tTab1"); + document.getElementById("bTab1").onclick = (E) => { + showTab(E, "tTab1"); }; - document.getElementById("bTab2").onclick = (E) => { - showTab(E, "tTab2"); + document.getElementById("bTab2").onclick = (E) => { + showTab(E, "tTab2"); }; } </script> -<button type="button" id="bTab1">Tab1</button> -<button type="button" id="bTab2">Tab2</button> +<button type="button" id="bTab1">Tab1</button> +<button type="button" id="bTab2">Tab2</button> -<div id="tTab1" class="content" style="display: block;"> +<div id="tTab1" class="content" style="display: block;"> <p>Some content goes here ...</p> </div> -<div id="tTab2" class="content" style="display: none;"> +<div id="tTab2" class="content" style="display: none;"> <p>... and there.</p> </div> </code></pre> |