INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Web Design Components</title>
</head>
<body>
<div id="jump-list">
<ul>
<li><a href="#tables">Tables</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
</div>
<div class="full-width-image">
<img src="images/introduction.jpg" alt="Introduction header image">
</div>
<div id="introduction-text">
<h1>Webpage components</h1>
<p><span class="first-word">This</span> website contains all of the basic elements used to create a webpage</p>
</div>
<div id="tables" class="new-section">
<div class="section-header">
<h1>Tables</h1>
</div>
<div class="section-body">
<table>
<tr>
<th>id</th>
<th>First Name</th>
<th>email</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john@email.com</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>jane@email.com</td>
</tr>
</table>
</div>
</div>
<div id="lists" class="new-section">
<div class="section-header">
<h1>Lists</h1>
</div>
<div class="section-body">
<h2>Unordered List Example</h2>
<ul>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ul>
<h2>Ordered List Example</h2>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
<li>Ordered List Item 3</li>
</ol>
<h2>Definition List Example</h2>
<dl>
<dt>Definition List Term 1</dt>
<dd>Definition List Definition 1</dd>
<dt>Definition List Term 2</dt>
<dd>Definition List Definition 2</dd>
<dt>Definition List Term 3</dt>
<dd>Definition List Definition 3</dd>
</dl>
</div>
</div>
<div id="forms" class="new-section">
<div class="section-header">
<h1>Forms</h1>
</div>
<div class="section-body">
<form action="mailto:contact@website.com?subject=New%20User%20Request" method="post">
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname">
<br/>
<label for="firstname">Surname: </label><input type="text" name="surname">
<br/>
<label for="firstname">Email: </label><input type="email" name="email">
<br/>
<input type="submit">
</form>
</div>
</div>
</body>
</html>