70 lines
1.8 KiB
HTML
70 lines
1.8 KiB
HTML
<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>
|