mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Update index.html
Make hamburger nav show under xxl viewport replaced spaces with tabs.
This commit is contained in:
JWB
GitHub
parent
f25840f51a
commit
bfdf6dbf6c
1 changed files with 189 additions and 188 deletions
377
docs/index.html
377
docs/index.html
|
|
@ -27,11 +27,11 @@
|
||||||
<link rel="stylesheet" href="pico.min.css" />
|
<link rel="stylesheet" href="pico.min.css" />
|
||||||
<link rel="stylesheet" href="pico.colors.min.css" />
|
<link rel="stylesheet" href="pico.colors.min.css" />
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Yohn's Simple CSS Class helpers
|
Yohn's Simple CSS Class helpers
|
||||||
I might add these to the main PicoCSS later
|
I might add these to the main PicoCSS later
|
||||||
-->
|
-->
|
||||||
<link rel="stylesheet" href="basics.css" />
|
<link rel="stylesheet" href="basics.css" />
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--pico-logo-wordmark: #fff;
|
--pico-logo-wordmark: #fff;
|
||||||
|
|
@ -71,7 +71,7 @@
|
||||||
<aside>
|
<aside>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
||||||
<li><a href="#tab-regions">Tabs [role="region"]</a></li>
|
<li><a href="#tab-regions">Tabs [role="region"]</a></li>
|
||||||
<li><a href="#tooltip">Tooltip</a></li>
|
<li><a href="#tooltip">Tooltip</a></li>
|
||||||
<li><a href="#floating-labels">Floating Labels [role="form"]</a></li>
|
<li><a href="#floating-labels">Floating Labels [role="form"]</a></li>
|
||||||
|
|
@ -103,129 +103,130 @@
|
||||||
<!-- hamburger-menu -->
|
<!-- hamburger-menu -->
|
||||||
<article id="hamburger-menu">
|
<article id="hamburger-menu">
|
||||||
<header>
|
<header>
|
||||||
<h2>Hamburger Menu <code>nav[role="navigation"]</code></h2>
|
<h2>Hamburger Menu <code>nav[role="navigation"]</code></h2>
|
||||||
<h6 class="fw-n">Classless!</h6>
|
<h6 class="fw-n">Classless!</h6>
|
||||||
</header>
|
</header>
|
||||||
<p>Use the default <code><nav></code> component in <a href="https://picocss.com/docs/nav">Pico CSS</a> docs, but add the <code>role="navigation"</code> attribute to the <code><nav></code>.</p>
|
<p>Use the default <code><nav></code> component in <a href="https://picocss.com/docs/nav">Pico CSS</a> docs, but add the <code>role="navigation"</code> attribute to the <code><nav></code>.</p>
|
||||||
<h5>Positioning</h5>
|
<h5>Positioning</h5>
|
||||||
<p>The default position puts your nav links and burger menu at the end of the line, but <code>data-position="start"</code> will put them at the start of the line.</p>
|
<p>The default position puts your nav links and burger menu at the end of the line, but <code>data-position="start"</code> will put them at the start of the line.</p>
|
||||||
<h5>Breakpoints</h5>
|
<h5>Breakpoints</h5>
|
||||||
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the same breakpoints <a href="#rows">the .row</a> uses.</p>
|
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the same breakpoints <a href="#rows">the .row</a> uses.</p>
|
||||||
<h5>Hamburger Icon</h5>
|
<h5>Hamburger Icon</h5>
|
||||||
<p>Before the list of elements you want to be within the burger menu, add the following:</p>
|
<p>Before the list of elements you want to be within the burger menu, add the following:</p>
|
||||||
<code>
|
<code>
|
||||||
<input type="checkbox" id="YOUR-ID" /><br>
|
<input type="checkbox" id="YOUR-ID" /><br>
|
||||||
<label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
|
<label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
|
||||||
</code>
|
</code>
|
||||||
<p>Change <code>YOUR-ID</code> to whatever id you want to use, but ensure the id for the checkbox, is the same as the id for the label.</p>
|
<p>Change <code>YOUR-ID</code> to whatever id you want to use, but ensure the id for the checkbox, is the same as the id for the label.</p>
|
||||||
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <code>input[type="checkbox"]</code> within the <code><label></code> element, it will not work correctly if you do that.</blockquote>
|
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <code>input[type="checkbox"]</code> within the <code><label></code> element, it will not work correctly if you do that.</blockquote>
|
||||||
<h6>Custom Hamburger Icon?</h6>
|
<h6>Custom Hamburger Icon?</h6>
|
||||||
<p>Replace the <code>&#x2261;</code> with your own icon, svg element, or image.</p>
|
<p>Replace the <code>&#x2261;</code> with your own icon, svg element, or image.</p>
|
||||||
<h5>Collapsed List</h5>
|
<h5>Collapsed List</h5>
|
||||||
<p>Add <code>role="list"</code> attribute to the <code><ul></code> or <code><ol></code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code><li></code> element.</p>
|
<p>Add <code>role="list"</code> attribute to the <code><ul></code> or <code><ol></code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code><li></code> element.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<nav role="navigation" data-position="start" data-breakpoint="xxlg">
|
<h3>Example Hamburger Menu (resize width of screen if you don't see it)</h3>
|
||||||
<ul>
|
<nav role="navigation" data-position="start" data-breakpoint="xxl">
|
||||||
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
<ul>
|
||||||
</ul>
|
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li><strong>Like Us on GitHub!</strong></li>
|
<ul>
|
||||||
</ul>
|
<li><strong>Like Us on GitHub!</strong></li>
|
||||||
<input type="checkbox" id="menu-btn" />
|
</ul>
|
||||||
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.5);">
|
<input type="checkbox" id="menu-btn" />
|
||||||
≡
|
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.5);">
|
||||||
</label>
|
≡
|
||||||
<ol role="list">
|
</label>
|
||||||
<li role="listitem"><a href="#">Home</a></li>
|
<ol role="list">
|
||||||
<li role="listitem"><a href="#">About</a></li>
|
<li role="listitem"><a href="#">Home</a></li>
|
||||||
<li role="listitem"><a href="#">Services</a></li>
|
<li role="listitem"><a href="#">About</a></li>
|
||||||
<li role="listitem"><a href="#">Login</a></li>
|
<li role="listitem"><a href="#">Services</a></li>
|
||||||
<li role="listitem"><a href="#">Sign Up</a></li>
|
<li role="listitem"><a href="#">Login</a></li>
|
||||||
</ol>
|
<li role="listitem"><a href="#">Sign Up</a></li>
|
||||||
</nav>
|
</ol>
|
||||||
|
</nav>
|
||||||
</article>
|
</article>
|
||||||
<!-- /hamburger-menu -->
|
<!-- /hamburger-menu -->
|
||||||
<hr>
|
<hr>
|
||||||
<!-- Tabs -->
|
<!-- Tabs -->
|
||||||
<article id="tab-regions">
|
<article id="tab-regions">
|
||||||
<header>
|
<header>
|
||||||
<h2>Tabs <code>section[role="region"]</code></h2>
|
<h2>Tabs <code>section[role="region"]</code></h2>
|
||||||
<h6 class="fw-n">Classless!</h6>
|
<h6 class="fw-n">Classless!</h6>
|
||||||
</header>
|
</header>
|
||||||
<h3 class="mt-0">Information</h3>
|
<h3 class="mt-0">Information</h3>
|
||||||
<ul class="pb-0">
|
<ul class="pb-0">
|
||||||
<li>I wanted this to work without javascript</li>
|
<li>I wanted this to work without javascript</li>
|
||||||
<li>I wanted to use the <code><details></code> and <code><summary></code> tags.</li></ul>
|
<li>I wanted to use the <code><details></code> and <code><summary></code> tags.</li></ul>
|
||||||
<h3 class="mt-0">Grips</h3>
|
<h3 class="mt-0">Grips</h3>
|
||||||
<ol>
|
<ol>
|
||||||
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <code><details></code> and <code><summary></code> tags.</li>
|
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <code><details></code> and <code><summary></code> tags.</li>
|
||||||
<li><code><section></code> in theory has a default <code>role</code> attribute value of <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and no JavaScript!</li>
|
<li><code><section></code> in theory has a default <code>role</code> attribute value of <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and no JavaScript!</li>
|
||||||
|
|
||||||
</ol>
|
</ol>
|
||||||
<hr>
|
<hr>
|
||||||
<h2>Example Tabs with no JavaScript:</h2>
|
<h2>Example Tabs with no JavaScript:</h2>
|
||||||
<!-- start tab example -->
|
<!-- start tab example -->
|
||||||
<section role="region">
|
<section role="region">
|
||||||
<details name="lets-go" open>
|
<details name="lets-go" open>
|
||||||
<summary>Tab 1</summary>
|
<summary>Tab 1</summary>
|
||||||
<div>
|
<div>
|
||||||
<p>Content for Tab 1</p>
|
<p>Content for Tab 1</p>
|
||||||
<p>Content for Tab 1</p>
|
<p>Content for Tab 1</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details name="lets-go">
|
<details name="lets-go">
|
||||||
<summary>Tab 2</summary>
|
<summary>Tab 2</summary>
|
||||||
<div>
|
<div>
|
||||||
<p>Just a random table</p>
|
<p>Just a random table</p>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>row 1 col 1</td>
|
<td>row 1 col 1</td>
|
||||||
<td>row 1 col 2</td>
|
<td>row 1 col 2</td>
|
||||||
<td>row 1 col 3</td>
|
<td>row 1 col 3</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>row 2 col 1</td>
|
<td>row 2 col 1</td>
|
||||||
<td>row 2 col 2</td>
|
<td>row 2 col 2</td>
|
||||||
<td>row 2 col 3</td>
|
<td>row 2 col 3</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>row 3 col 1</td>
|
<td>row 3 col 1</td>
|
||||||
<td>row 3 col 2</td>
|
<td>row 3 col 2</td>
|
||||||
<td>row 3 col 3</td>
|
<td>row 3 col 3</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details name="lets-go">
|
<details name="lets-go">
|
||||||
<summary>Tab 3</summary>
|
<summary>Tab 3</summary>
|
||||||
<div>
|
<div>
|
||||||
<form action="javascript:void(0);">
|
<form action="javascript:void(0);">
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<input type="text" id="name" name="name" placeholder="Name:" required>
|
<input type="text" id="name" name="name" placeholder="Name:" required>
|
||||||
<label for="name">Name:</label>
|
<label for="name">Name:</label>
|
||||||
</section>
|
</section>
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<input type="email" id="email" name="email" placeholder="Email:" required>
|
<input type="email" id="email" name="email" placeholder="Email:" required>
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email:</label>
|
||||||
</section>
|
</section>
|
||||||
<input type="submit" value="Submit">
|
<input type="submit" value="Submit">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details name="lets-go">
|
<details name="lets-go">
|
||||||
<summary>Tab 4</summary>
|
<summary>Tab 4</summary>
|
||||||
<div>
|
<div>
|
||||||
<p>Content for Tab 4</p>
|
<p>Content for Tab 4</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
<details name="lets-go">
|
<details name="lets-go">
|
||||||
<summary>Tab 5</summary>
|
<summary>Tab 5</summary>
|
||||||
<div>
|
<div>
|
||||||
<p>Content for Tab 5</p>
|
<p>Content for Tab 5</p>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
</section>
|
</section>
|
||||||
<!-- / tab example -->
|
<!-- / tab example -->
|
||||||
</article>
|
</article>
|
||||||
<!-- /Tabs -->
|
<!-- /Tabs -->
|
||||||
<hr>
|
<hr>
|
||||||
|
|
@ -241,51 +242,51 @@
|
||||||
</article>
|
</article>
|
||||||
<!-- /Tooltip -->
|
<!-- /Tooltip -->
|
||||||
<hr>
|
<hr>
|
||||||
<!-- Floating Labels -->
|
<!-- Floating Labels -->
|
||||||
<article id="floating-labels">
|
<article id="floating-labels">
|
||||||
<header>
|
<header>
|
||||||
<h2>Floating Labels</h2>
|
<h2>Floating Labels</h2>
|
||||||
<h6 class="fw-n">Classless!</h6>
|
<h6 class="fw-n">Classless!</h6>
|
||||||
</header>
|
</header>
|
||||||
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <code><section></code> tag, ensure you have a <code>placeholder="example"</code> attribute on your input or textarea tags, and that placeholder value needs to be the same value that is used within the label tag, which would go after your form element.</textarea></code>.</p>
|
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <code><section></code> tag, ensure you have a <code>placeholder="example"</code> attribute on your input or textarea tags, and that placeholder value needs to be the same value that is used within the label tag, which would go after your form element.</textarea></code>.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<form action="javascript:void(0);" novalidate>
|
<form action="javascript:void(0);" novalidate>
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name">
|
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name">
|
||||||
<label for="fl-name-ele" id="fl-name">Name</label>
|
<label for="fl-name-ele" id="fl-name">Name</label>
|
||||||
</section>
|
</section>
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" aria-labelledby="fl-email">
|
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" aria-labelledby="fl-email">
|
||||||
<label for="fl-email-ele" id="fl-email">Email</label>
|
<label for="fl-email-ele" id="fl-email">Email</label>
|
||||||
</section>
|
</section>
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
|
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
|
||||||
<option selected disabled value="">Topic</option>
|
<option selected disabled value="">Topic</option>
|
||||||
<option>General</option>
|
<option>General</option>
|
||||||
<option>Support</option>
|
<option>Support</option>
|
||||||
<option>Feedback</option>
|
<option>Feedback</option>
|
||||||
</select>
|
</select>
|
||||||
<label for="fl-topic-ele" id="fl-topic">Topic</label>
|
<label for="fl-topic-ele" id="fl-topic">Topic</label>
|
||||||
</section>
|
</section>
|
||||||
<section role="form">
|
<section role="form">
|
||||||
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" aria-labelledby="fl-message"></textarea>
|
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" aria-labelledby="fl-message"></textarea>
|
||||||
<label for="fl-message-ele" id="fl-message">Message</label>
|
<label for="fl-message-ele" id="fl-message">Message</label>
|
||||||
</section>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
<!-- /Floating Labels -->
|
<!-- /Floating Labels -->
|
||||||
<hr>
|
<hr>
|
||||||
<!-- Validation -->
|
<!-- Validation -->
|
||||||
<form action="javascript:void(0);" id="validate">
|
<form action="javascript:void(0);" id="validate">
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
<h2>Validation</h2>
|
<h2>Validation</h2>
|
||||||
<h6 class="fw-n">Classless!</h6>
|
<h6 class="fw-n">Classless!</h6>
|
||||||
</header>
|
</header>
|
||||||
<p>
|
<p>
|
||||||
Using form :user-valid and :user-invalid.</p>
|
Using form :user-valid and :user-invalid.</p>
|
||||||
<p>You can disable the validation by adding the attribute <code>novalidate</code> to the form tag.
|
<p>You can disable the validation by adding the attribute <code>novalidate</code> to the form tag.
|
||||||
<p>Classless except for the file input button previews.</p>
|
<p>Classless except for the file input button previews.</p>
|
||||||
</p>
|
</p>
|
||||||
<input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}" required>
|
<input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}" required>
|
||||||
<small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small>
|
<small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small>
|
||||||
|
|
@ -336,10 +337,10 @@
|
||||||
<!-- Group -->
|
<!-- Group -->
|
||||||
<article id="group">
|
<article id="group">
|
||||||
<header>
|
<header>
|
||||||
<h2>Group</h2>
|
<h2>Group</h2>
|
||||||
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
||||||
</header>
|
</header>
|
||||||
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
||||||
<form action="javascript:void(0);" novalidate>
|
<form action="javascript:void(0);" novalidate>
|
||||||
<div role="group">
|
<div role="group">
|
||||||
<label for="email">Email:</label>
|
<label for="email">Email:</label>
|
||||||
|
|
@ -532,35 +533,35 @@
|
||||||
--pico-timeline-line-color: var(--pico-primary-background);<br>
|
--pico-timeline-line-color: var(--pico-primary-background);<br>
|
||||||
--pico-timeline-dot-background-color: var(--pico-primary-inverse);<br>
|
--pico-timeline-dot-background-color: var(--pico-primary-inverse);<br>
|
||||||
--pico-timeline-dot-border-color: var(--pico-primary-background);<br>
|
--pico-timeline-dot-border-color: var(--pico-primary-background);<br>
|
||||||
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
|
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
</header>
|
</header>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<section class="point left">
|
<section class="point left">
|
||||||
<article>
|
<article>
|
||||||
<header><h3>2017</h3></header>
|
<header><h3>2017</h3></header>
|
||||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="point right">
|
<section class="point right">
|
||||||
<article>
|
<article>
|
||||||
<header><h3>2016</h3></header>
|
<header><h3>2016</h3></header>
|
||||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="point left">
|
<section class="point left">
|
||||||
<article>
|
<article>
|
||||||
<header><h3>2015</h3></header>
|
<header><h3>2015</h3></header>
|
||||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section class="point right">
|
<section class="point right">
|
||||||
<article>
|
<article>
|
||||||
<header><h3>2012</h3></header>
|
<header><h3>2012</h3></header>
|
||||||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue