234 lines
No EOL
10 KiB
HTML
234 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Hello, world!</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<meta name="description" content="" />
|
|
<link rel="stylesheet" type="text/css" href="dist/mouette.min.css" />
|
|
<link
|
|
rel="icon"
|
|
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐦</text></svg>"
|
|
/>
|
|
</head>
|
|
<body class="wrapper">
|
|
<nav class="toolbar">
|
|
<ul class="menu horizontal">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Mouette</a></li>
|
|
<li><span class="active">Exemple</span></li>
|
|
</ul>
|
|
<ul class="menu">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#" class="button">Mouette</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<header>
|
|
<h1>Hello, world!</h1>
|
|
</header>
|
|
<nav>
|
|
<ul class="breadcrumb">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Mouette</a></li>
|
|
<li><span class="active">Exemple</span></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="alert"><p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p></div>
|
|
<p>Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit</mark>, sed do. </p>
|
|
<hr />
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem <a href="#">ipsum dolor</a> sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
|
|
|
|
|
|
<div class="card">
|
|
<h2 class="header">Test</h2>
|
|
<div class="section">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
|
|
</div>
|
|
<div class="section">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
|
|
</div>
|
|
<div class="section">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tu vero, inquam, ducas licet, si sequetur; Expectoque quid ad id, quod quaerebam, respondeas. Quare attende, quaeso. Cui Tubuli nomen odio non est? Sedulo, inquam, faciam. </p>
|
|
</div>
|
|
<ul class="menu">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Mouette</a></li>
|
|
<li><span class="active">Exemple</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>
|
|
<button>Bouton</button>
|
|
<a href="#" class="button">Bouton lien</a>
|
|
<a class="button">Bouton non cliquable mais lien</a>
|
|
<span class="button">Bouton span</span>
|
|
<br />
|
|
<button disabled>Bouton disabled</button>
|
|
<a href="#" class="button disabled">Bouton lien disabled</a>
|
|
<br />
|
|
<a href="#" class="badge">Badge lien</a>
|
|
<span class="badge">Badge span</span>
|
|
<br />
|
|
<a href="#" class="button link">Bouton lien .link</a>
|
|
<br />
|
|
<div class="button-group">
|
|
<button>Bouton (groupé)</button>
|
|
<a href="#" class="button">Bouton lien</a>
|
|
<a href="#" class="button">Bouton lien</a>
|
|
<button>Bouton</button>
|
|
</div>
|
|
<br />
|
|
<a href="#" class="button secondary">Secondary</a>
|
|
<a href="#" class="button danger">Danger</a>
|
|
<a href="#" class="button warning">Warning</a>
|
|
<a href="#" class="button success">Success</a>
|
|
<a href="#" class="button info">Info</a>
|
|
<a href="#" class="button grey">Grey</a>
|
|
</p>
|
|
|
|
<main>
|
|
<section>
|
|
<ul>
|
|
<li>Test 1</li>
|
|
<li>Test 1</li>
|
|
<li>Test 1</li>
|
|
<li>Test 1</li>
|
|
</ul>
|
|
</section>
|
|
<section>
|
|
<ol>
|
|
<li>Test 2</li>
|
|
<li>Test 2</li>
|
|
<li>Test 2</li>
|
|
<li>Test 2</li>
|
|
</ol>
|
|
</section>
|
|
<section></section>
|
|
</main>
|
|
<form action="#">
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
<table class="centered">
|
|
<tr>
|
|
<td>Row 1, Column 1</td>
|
|
<td>Row 1, Column 2</td>
|
|
<td>Row 1, Column 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 2, Column 1</td>
|
|
<td>Row 2, Column 2</td>
|
|
<td>Row 2, Column 3</td>
|
|
</tr>
|
|
</table>
|
|
<table border="1" cellspacing="0" cellpadding="5">
|
|
<tr>
|
|
<th>Row 1, Column 1</th>
|
|
<th>Row 1, Column 2</th>
|
|
<th>Row 1, Column 3</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 1, Column 1</td>
|
|
<td>Row 1, Column 2</td>
|
|
<td>Row 1, Column 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 2, Column 1</td>
|
|
<td>Row 2, Column 2</td>
|
|
<td>Row 2, Column 3</td>
|
|
</tr>
|
|
</table>
|
|
<table class="colored">
|
|
<thead>
|
|
<tr>
|
|
<th>Row 1, Column 1</th>
|
|
<th>Row 1, Column 2</th>
|
|
<th>Row 1, Column 3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Row 1, Column 1</td>
|
|
<td>Row 1, Column 2</td>
|
|
<td>Row 1, Column 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Row 2, Column 1</td>
|
|
<td>Row 2, Column 2</td>
|
|
<td>Row 2, Column 3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="accordion">
|
|
<details name="reqs">
|
|
<summary>Test 1</summary>
|
|
<p>
|
|
Blablablabla bla bla bla bla
|
|
</p>
|
|
</details>
|
|
<details name="reqs">
|
|
<summary>Test 2</summary>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing</a> elit, sed do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.
|
|
</p>
|
|
</details>
|
|
<details name="reqs">
|
|
<summary>Test 3</summary>
|
|
<p>
|
|
Insérer ici script de bee-movie
|
|
</p>
|
|
</details>
|
|
</div>
|
|
<div class="card">
|
|
<div class="tabs section">
|
|
<details open name="tabs">
|
|
<summary>Tab 1</summary>
|
|
<div class="content">
|
|
<p>Ceci est un test d'onglet voir s'ils marchent.</p>
|
|
<details>
|
|
<summary>Details dans le tab</summary>
|
|
<p>Test test test test test test test test test test test test test test test test test test test test</p>
|
|
</details>
|
|
<p>Code basé sur ce codepen : <a href="https://codepen.io/RYJASM/pen/eYoYeRg">Cliquez ici</a></p>
|
|
</div>
|
|
</details>
|
|
<details name="tabs">
|
|
<summary>Tab 2</summary>
|
|
<div class="content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc omni virtuti vitium contrario nomine opponitur. Falli igitur possumus. Res enim concurrent contrariae. Primum quid tu dicis breve? Bork Quis est tam dissimile homini. </p>
|
|
<p>Duo Reges: constructio interrete. At eum nihili facit; Quorum sine causa fieri nihil putandum est. Cur iustitia laudatur? Ergo, si semel tristior effectus est, hilara vita amissa est? Immo alio genere; </p>
|
|
<blockquote cite='http://loripsum.net'>
|
|
Ex quo intellegi debet homini id esse in bonis ultimum, secundum naturam vivere, quod ita interpretemur: vivere ex hominis natura undique perfecta et nihil requirente.
|
|
</blockquote>
|
|
<p>Sed fac ista esse non inportuna; Quae ista amicitia est? Invidiosum nomen est, infame, suspectum. Quid ergo? Graece donan, Latine voluptatem vocant. Sed ne, dum huic obsequor, vobis molestus sim. </p>
|
|
<p>Nescio quo modo praetervolavit oratio. Beatus sibi videtur esse moriens. Vide, quantum, inquam, fallare, Torquate. </p>
|
|
</div>
|
|
</details>
|
|
<details name="tabs">
|
|
<summary>Tab 3</summary>
|
|
<div class="content">
|
|
<p>Conferam tecum, quam cuique verso rem subicias; Ego vero volo in virtute vim esse quam maximam; Sed ego in hoc resisto; Tamen a proposito, inquam, aberramus. </p>
|
|
<p>Occultum facinus esse potuerit, gaudebit; Verum hoc idem saepe faciamus. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Itaque ad tempus ad Pisonem omnes. Apparet statim, quae sint officia, quae actiones. Quodsi ipsam honestatem undique pertectam atque absolutam. </p>
|
|
<p>Duo Reges: constructio interrete. Animum autem reliquis rebus ita perfecit, ut corpus; Aliter enim explicari, quod quaeritur, non potest. Quid autem habent admirationis, cum prope accesseris? Negare non possum. Quid censes in Latino fore? </p>
|
|
<p>Non laboro, inquit, de nomine. Memini vero, inquam; Hunc vos beatum; Optime, inquam. </p>
|
|
<p>Restinguet citius, si ardentem acceperit. Cyrenaici quidem non recusant; Tecum optime, deinde etiam cum mediocri amico. Cave putes quicquam esse verius. Igitur neque stultorum quisquam beatus neque sapientium non beatus. Non semper, inquam; Gerendus est mos, modo recte sentiat. </p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
<img src="https://via.placeholder.com/800x600/" alt="">
|
|
<nav>
|
|
<ul class="menu">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">Mouette</a></li>
|
|
<li><span class="active">Exemple</span></li>
|
|
</ul>
|
|
</nav>
|
|
<footer>
|
|
<small>©
|
|
<script>document.write(new Date().getFullYear())</script> Your company name. All Rights Reserved.
|
|
</small>
|
|
</footer>
|
|
</body>
|
|
</html> |