74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!-- Standard Meta -->
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
|
||
|
|
<!-- Site Properties -->
|
||
|
|
<title>Theming - Semantic</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/site.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../dist/components/grid.css">
|
||
|
|
|
||
|
|
<script src="../assets/library/iframe-content.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
.color.grid {
|
||
|
|
margin: -1.5em;
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
.ui.table {
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
.color.grid .column {
|
||
|
|
margin: 0.5em;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="ui three column stackable grid">
|
||
|
|
<div class="column">
|
||
|
|
<h1>Heading 1</h1>
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
<h4>Heading 4</h4>
|
||
|
|
<h5>Heading 5</h5>
|
||
|
|
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h2>Example body text</h2>
|
||
|
|
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
||
|
|
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||
|
|
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
|
||
|
|
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
|
||
|
|
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<div class="ui three column stackable padded middle aligned centered color grid">
|
||
|
|
<div class="red column">Red</div>
|
||
|
|
<div class="orange column">Orange</div>
|
||
|
|
<div class="yellow column">Yellow</div>
|
||
|
|
<div class="olive column">Olive</div>
|
||
|
|
<div class="green column">Green</div>
|
||
|
|
<div class="teal column">Teal</div>
|
||
|
|
<div class="blue column">Blue</div>
|
||
|
|
<div class="violet column">Violet</div>
|
||
|
|
<div class="purple column">Purple</div>
|
||
|
|
<div class="pink column">Pink</div>
|
||
|
|
<div class="brown column">Brown</div>
|
||
|
|
<div class="grey column">Grey</div>
|
||
|
|
<div class="black column">Black</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|