what2watch/scss/plugins/card/test.html
2023-09-21 17:43:18 -07:00

69 lines
1.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<h2 id="card">Card</h2>
<p>
<div class="flex three">
<div>
<article class="card">
<img src="img/forest.jpg">
<section>This is a nice forest. What do you want to do with it?</section>
<footer>
<button>Enjoy</button>
<button class="dangerous">Go away</button>
</footer>
</article>
</div>
<div>
<article class="card">
<header>
<h3>A more elaborated card</h3>
</header>
<section>It has some text</section>
<footer>
And even a footer!
</footer>
</article>
<div>
<input type="checkbox" id="cardtoggle">
<article class="card">
<p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
<label for="cardtoggle" class="close">×</a>
</article>
</div>
</div>
<div>
<input id="cardtoggle2" type="checkbox" name="name">
<article class="card">
<header>
<h1>Header 1</h1>
<label for="cardtoggle2" class="close">×</a>
</header>
</article>
<input id="cardtoggle3" type="checkbox" name="name2">
<article class="card">
<header>
<h2>Header 2</h2>
<label for="cardtoggle3" class="close">×</label>
</header>
</article>
<article class="card">
<header>
<h3>Header 3</h3>
<a class="close">×</a>
</header>
</article>
<article class="card">
<header>
<h4>Header 4</h4>
<a class="close">×</a>
</header>
</article>
</div>
</div>
<div class="row">
<div class="card">
<p>This is a one line card</p>
<a class="close">×</a>
</div>
</div>
</p>