141 lines
7.1 KiB
HTML
141 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>test page</title>
|
|
<link rel="stylesheet" href="static/styles/style.css">
|
|
<link rel="shortcut icon" href="https://cdn.fyrfli.link/i/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/handcup.jpeg" alt="" class="header_img loading="lazy"">
|
|
<h1 class="header_h1">all sections</h1>
|
|
</header>
|
|
|
|
<nav>
|
|
<ul class="nav_container">
|
|
<li class="nav_item"><a href="index.html" rel="noopener noreferrer">home</a></li>
|
|
<li><a href="prose.html">prose</a></li>
|
|
<li><a href="lists.html">lists</a></li>
|
|
<li><a href="tables.html">tables</a></li>
|
|
<li><a href="images.html">images</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main class="main">
|
|
<article class="prose_section">
|
|
<section class="prose_paragraphs">
|
|
<h2 class="prose_h2">prose</h2>
|
|
<p class="prose_paragraph">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis temporibus nihil voluptates sit commodi corporis quidem ut rem aperiam, eum, ipsam corrupti fuga laborum nostrum.
|
|
</p>
|
|
<p class="prose_paragraph">
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis a libero dolor ullam, consequuntur fugiat voluptate quia placeat nihil corrupti aut quaerat, veritatis esse aspernatur sint. Quos consequatur, mollitia placeat aliquid, perferendis blanditiis est voluptatibus exercitationem hic delectus illum dicta assumenda, corrupti quisquam? A placeat, saepe hic assumenda consequatur minus animi est labore veritatis odio modi sed illo nulla ipsa molestiae fugiat sunt debitis fugit voluptatum. Eveniet et quis error tenetur necessitatibus sit id molestias saepe velit ducimus est ratione quia neque facere in enim atque harum, cupiditate eum, dolor modi. Quas, quam laudantium eos dolor saepe possimus rerum veniam necessitatibus labore ex, quia molestias velit minus animi ducimus fugit? Delectus corrupti repellat voluptate adipisci error maiores voluptatum exercitationem nemo.
|
|
</p>
|
|
<blockquote>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam illo dolorem numquam porro impedit expedita recusandae labore, quod ab cumque excepturi consectetur! Dignissimos eius excepturi dolor, doloribus neque rerum explicabo repellat possimus facere enim obcaecati mollitia voluptatum? Modi laborum quibusdam dolorum cupiditate maxime voluptatibus totam facere quisquam ut voluptate. Tempore?
|
|
</blockquote>
|
|
</section>
|
|
<a href="#">back to top</a>
|
|
</article>
|
|
|
|
<article class="lists">
|
|
<h2 class="lists_h2">lists</h2>
|
|
<p class="lists_paragraph">
|
|
creating an ordered and unordered list for theming tests
|
|
</p>
|
|
<h3 class="lists_h3">ordered list</h3>
|
|
<section class="ol">
|
|
<ol class="ol_container">
|
|
<li class="ol_item">one</li>
|
|
<li class="ol_item">two</li>
|
|
<li class="ol_item">three</li>
|
|
<li class="ol_item">four</li>
|
|
<li class="ol_item">five</li>
|
|
<li class="ol_item">six</li>
|
|
<li class="ol_item">seven</li>
|
|
<li class="ol_item">eight</li>
|
|
<li class="ol_item">nine</li>
|
|
<li class="ol_item">ten</li>
|
|
</ol>
|
|
</section>
|
|
<h3 class="lists_h3">unordered list</h3>
|
|
<section class="ul">
|
|
<ul class="ul_container">
|
|
<li class="ul_item">one</li>
|
|
<li class="ul_item">two</li>
|
|
<li class="ul_item">three</li>
|
|
<li class="ul_item">four</li>
|
|
<li class="ul_item">five</li>
|
|
<li class="ul_item">six</li>
|
|
<li class="ul_item">seven</li>
|
|
<li class="ul_item">eight</li>
|
|
<li class="ul_item">nine</li>
|
|
<li class="ul_item">ten</li>
|
|
</ul>
|
|
</section>
|
|
<a href="#">back to top</a>
|
|
</article>
|
|
<article class="tables">
|
|
<h2 class="tables_h2">tables</h2>
|
|
<table class="table">
|
|
<thead class="table_head">
|
|
<tr class="table_head_line">
|
|
<td class="table_head_item">one</td>
|
|
<td class="table_head_item">two</td>
|
|
<td class="table_head_item">three</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table_body">
|
|
<tr class="table_body_line">
|
|
<td class="table_line_item">column one</td>
|
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
|
<td class="table_line_item">col. 3</td>
|
|
</tr>
|
|
<tr class="table_body_line">
|
|
<td class="table_line_item">column one</td>
|
|
<td class="table_line_item">this is column two and it's slightly larger than column one</td>
|
|
<td class="table_line_item">col. 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>row three, column one</td>
|
|
<td>row three, column two</td>
|
|
<td>row three, column three</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">row four, columns one and two</td>
|
|
<td>row four, column tree</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="table_footer">
|
|
<tr class="table_footer_line">
|
|
<td colspan="3" class="table_line_spanall">let's make this span all columns</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
<a href="#">back to top</a>
|
|
</article>
|
|
<article class="images">
|
|
<h2>images</h2>
|
|
<section class="grid">
|
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/DSC_0908.jpeg" alt="">
|
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/SylaHusky-1.jpeg" alt="">
|
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/candle.jpg" alt="">
|
|
<img loading="lazy" src="https://cdn.fyrfli.link/i/sm-fountain-pen.jpg" alt="">
|
|
</section>
|
|
<a href="#">back to top</a>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
©<span id="jsyear"> </span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz
|
|
</footer>
|
|
|
|
<script>
|
|
const todayDate = new Date();
|
|
jsyear.innerText = todayDate.getFullYear();
|
|
</script>
|
|
</body>
|
|
</html>
|