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>
|