vanilligram/example.html
2023-11-30 16:57:37 +01:00

60 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<title>Vanilligram Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
/>
<link href="../dist/vanilligram.min.css" rel="stylesheet">
</head>
<body>
<section class="container">
<h2>Headings:</h2>
<p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
<a>Anchor</a>
<em>Emphasis</em>
<small>Small</small>
<strong>Strong</strong>
<u>Underline</u>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
</section>
<hr/>
<section class="container">
<h2>Buttons:</h2>
<div class="row">
<div class="column">
<!-- Default Button -->
<a class="button" href="#">Default Button</a>
</div>
<div class="column">
<!-- Outlined Button -->
<button class="button button-outline">Outlined Button</button>
</div>
<div class="column">
<!-- Clear Button -->
<input class="button button-clear" type="submit" value="Clear Button">
</div>
</div>
</section>
<hr />
<section class="container">
<h2>Blockquotes</h2>
<blockquote>
<p><em>Yeah!! Vanilligram is amazing.</em></p>
</blockquote>
</section>
</body>
</html>