<!-- MVP.css quickstart template: https://github.com/andybrewer/mvp/ -->

<!DOCTYPE html>
<html lang="en">

<head>
	<link rel="icon" href="https://via.placeholder.com/70x70">
	<link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css">

	<meta charset="utf-8">
	<meta name="description" content="My description">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>My title</title>
</head>

<body>
	<header>
		<nav>
			<a href="/"><img src="https://via.placeholder.com/200x70?text=Logo" height="70"></a>
			<ul>
				<li>Menu Item 1</li>
				<li><a href="#">Menu Item 2</a></li>
			</ul>
		</nav>
		<h1>Page Heading with <i>Italics</i> and <u>Underline</u></h1>
		<p>Page Subheading with <mark>highlighting</mark></p>
		<br>
		<p><a href="#"><i>Italic Link Button</i></a><a href="#"><b>Bold Link Button &rarr;</b></a></p>
	</header>
	<main>
		<hr>
		<section>
			<header>
				<h2>Section Heading</h2>
				<p>Section Subheading</p>
			</header>
			<aside>
				<h3>Card heading</h3>
				<p>Card content*</p>
				<p><small>*with small content</small></p>
			</aside>
			<aside>
				<h3>Card heading</h3>
				<p>Card content <sup>with notification</sup></p>
			</aside>
			<aside>
				<h3>Card heading</h3>
				<p>Card content</p>
			</aside>
		</section>
		<hr>
		<section>
			<blockquote>
				"Quote"
				<footer><i>- Attribution</i></footer>
			</blockquote>
		</section>
		<hr>
		<div>
			<table>
				<thead>
					<tr>
						<th></th>
						<th>Col A</th>
						<th>Col B</th>
						<th>Col C</th>
					</tr>
				</thead>
				<tr>
					<td>Row 1</td>
					<td>Cell A1</td>
					<td>Cell B1</td>
					<td>Cell C1</td>
				</tr>
				<tr>
					<td>Row 2</td>
					<td>Cell A2</td>
					<td>Cell B2</td>
					<td>Cell C2</td>
				</tr>
			</table>
		</div>
		<hr>
		<article>
			<h2>Left-aligned header</h2>
			<p>Left-aligned paragraph</p>
			<aside>
				<p>Article callout</p>
			</aside>
			<ul>
				<li>List item 1</li>
				<li>List item 2</li>
			</ul>
			<figure>
				<img src="https://via.placeholder.com/1080x500?text=Amazing+stock+photo" alt="Stock photo" width="100%">
				<figcaption><i>Image caption</i></figcaption>
			</figure>
		</article>
		<hr>
		<section>
			<form>
				<header>
					<h2>Form title</h2>
				</header>
				<label for="input1">Input label:</label>
				<input type="text" id="input1" name="input1" size="40" placeholder="Input1">
				<label for="select1">Select label:</label>
				<select id="select1">
					<option value="option1">option1</option>
					<option value="option2">option2</option>
				</select>
				<label for="textarea1">Textarea label:</label>
				<textarea cols="40" rows="5" id="textarea1"></textarea>
				<button type="submit">Submit</button>
			</form>
		</section>
	</main>
	<footer>
		<hr>
		<p>
			Contact info
		</p>
	</footer>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.