pagecss
Version:
Beautiful CSS for single page sites - simple all the way up!
129 lines (108 loc) • 5.76 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Page Example - PageCSS</title>
<link href="favicon.ico" rel="icon">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://pagecss.org/">
<meta name="twitter:creator" content="@andychilton">
<meta name="twitter:title" content="PageCSS">
<meta name="twitter:description" content="Beautiful CSS for single page sites - a myriad of options and components.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../dist/page.css">
</head>
<body class="pagecss">
<main class="container">
<section>
<h1>Simple Text</h1>
<p>
This page shows some simple text. It contains a <code><main></code> tag which itself contains
one <code><section></code> tag and not much more. We've added a <code><footer></code> too, just
to show you how that would work. The main content could be something generated from Markdown, Textile, or any
other
<a href="https://en.wikipedia.org/wiki/Lightweight_markup_language">lightweight markup language</a>,
or just plain hand written HTML.
</p>
<p>
We try and space out each section so you don't have to worry about vertical spacing. The same with lists,
pre, code, and other block-level elements so that they all just fit together nicely without you having to
tinker. All you need to do is put the <code>pagecss</code> class on your body and that's it. This page also
has the <code>.container</code> class on the main tag to narrow and center the content.
</p>
<h2>Body Text</h2>
<p>
Here are the
<mark>marked</mark> (<code><mark></code>),
<del>deleted</del> (<code><del></code>),
<s>strikethrough</s> (<code><s></code>),
<ins>inserted</ins> (<code><ins></code>),
<u>underlined</u> (<code><u></code>),
<strong>bold</strong> (<code><strong></code>),
<em>italics</em> (<code><em></code>),
<kbd>kbd</kbd> (<code><kbd></code>),
and
<small>small</small (<code><small></code>)>
text styles.
</p>
<h2>Tables</h2>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Building</th>
<th>City</th>
<th>Country</th>
<th>Height (ft)</th>
<th>Height (m)</th>
<th>Floors</th>
<th>Built</th>
<th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Burj Khalifa</td><td>Dubai</td><td>United Arab Emirates</td><td>2,717 ft</td><td>828 m</td><td>163</td><td>2010</td></tr>
<tr><td>2</td><td>Shanghai Tower</td><td>Shanghai</td><td>China</td><td>2,073 ft</td><td>632 m</td><td>128</td><td>2015</td></tr>
<tr><td>3</td><td>Abraj Al-Bait Clock Tower</td><td>Mecca</td><td>Saudi Arabia</td><td>1,971 ft</td><td>601 m</td><td>120</td><td>2012</td></tr>
<tr><td>4</td><td>Ping An Finance Centre</td><td>Shenzhen</td><td>China</td><td>1,965 ft</td><td>599 m</td><td>115</td><td>2016</td></tr>
<tr><td>5</td><td>Lotte World Tower</td><td>Seoul</td><td>South Korea</td><td>1,819 ft</td><td>554.5 m</td><td>123</td><td>2016</td></tr>
<tr><td>6</td><td>One World Trade Center</td><td>New York City</td><td>United States</td><td>1,776 ft</td><td>541.3 m</td><td>104</td><td>2014</td></tr>
<tr><td>7</td><td>CTF Finance Centre</td><td>Guangzhou</td><td>China</td><td>1,739 ft</td><td>530 m</td><td>111</td><td>2016</td></tr>
<tr><td>8</td><td>Taipei 101</td><td>Taipei</td><td>Taiwan</td><td>1,667 ft</td><td>508 m</td><td>101</td><td>2004</td></tr>
<tr><td>9</td><td>Shanghai World Financial Center</td><td>Shanghai</td><td>China</td><td>1,614 ft</td><td>492 m</td><td>101</td><td>2008</td></tr>
<tr><td>10</td><td>International Commerce Centre</td><td>Hong Kong</td><td>China</td><td>1,588 ft</td><td>484 m</td><td>118</td><td>2010</td></tr>
</tbody>
</table>
<h2>Lists</h2>
<p>
PageCSS can do unordered lists, ordered lists, definition lists, and ??? nicely as standard. Here is a list
of legumes on Wikipedia:
</p>
<ul>
<li>
<a href="https://en.wikipedia.org/wiki/List_of_edible_seeds" title="List of edible seeds">List of edible seeds</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/List_of_legume_dishes" title="List of legume dishes">List of legume dishes</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/List_of_tofu_dishes" title="List of tofu dishes">List of tofu dishes</a>
</li>
</ul>
<p>And this is the top-three list of Men's Long Jump atheletes of all time:</p>
<ol>
<li>Mike Powell</li>
<li>Bob Beamon</li>
<li>Carl Lewis</li>
</ol>
<p>(Ends)</p>
</section>
</main>
<footer class="container">
<p>This is a rather plain footer - just a <code><p></code> in a <code><footer></code>.</p>
</footer>
</body>
</html>