112 lines
No EOL
3.9 KiB
HTML
112 lines
No EOL
3.9 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>
|
|
<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>
|
|
</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 border="1" cellspacing="0" cellpadding="5">
|
|
<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>
|
|
<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> |