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