h1, h2, h3, h4
<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
p
<p id="description">Lorem ipsum dolor sit amet.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna velit, egestas eu vestibulum a, rutrum quis neque. Nullam at sem posuere, egestas nisi ut, pellentesque mi. Sed lobortis nibh ut leo tristique accumsan. Nam imperdiet lacus nec lacus malesuada, non dignissim libero viverra.
li
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Cras urna velit</li>
</ul>
table, td
<table>
<tr>
<td>TITLE</td>
<td>Description text here </td>
</tr>
<tr>
<td>TITLE</td>
<td>Description text here </td>
</tr>
<tr>
<td>TITLE</td>
<td>Description text here </td>
</tr>
</table>
<ul>
| TITLE | Description text here |
| TITLE | Description text here |
| TITLE | Description text here |
.nav-flex, .nav-item, a, a:hover, a:focus
<ul class="nav-flex">
<li class="nav-item"><a href="#">NAV01</a></li>
</ul>
.text-link, .text-link:hover, .text-link:focus
<a class="text-link" href="#">an in-text link</a>
.button-default, .button-default:hover, .button-default:focus, .button-default:active
<button class="button-default">Submit</button>
form .row, input[type="text"], input[type="text"]:focus
<form>
<div class="row">
<input id="name" class="input" name="name" type="text" value="" size="40" />
</div>
</form>
select, .options-flex, .opt, .opt-title, .opt-box
<div class="opt">
<label for="papertype">
<select class="opt-box" name="papertype" id="papertype">
<option value="dotted">dotted</option>
<option value="grid">grid</option>
<option value="blank">blank</option>
</select>
</label>
</div>
.opt, .opt-title, .opt-box
<div class="opt">
<h4 class="opt-title">paper type</h4>
<label for="papertype">
<select class="opt-box" name="papertype" id="papertype">
<option value="dotted">dotted</option>
<option value="grid">grid</option>
<option value="blank">blank</option>
</select>
</label>
</div>
.main-nav-flex, .nav-item, .nav-item a, .nav-item a:hover, a:focus, .nav-item.logo, .nav-item.logo img, .nav-item.logo a:hover, a:focus
<nav>
<ul class="main-nav-flex">
<li class="nav-item"><a href="products.html">Notebooks</a></li>
<li class="nav-item"><a href="about.html">About</a></li>
<li class="nav-item logo"><a href="index.html"><img src="images/notedLogo.png" alt="logo"></a></li>
<li class="nav-item"><a href="#footer">Contact</a></li>
<li class="nav-item"><a href="faq.html">FAQ</a></li>
</ul>
</nav>
.product-flex, .item, .item-image, .detail-text, .details:hover .item-image, .details:hover .detail-text, .detail-heading, product-name, .product-price, .product-price:hover, .product-price:focus
<div class="product-flex">
<div class="item">
<div class="details">
<a href="itemDetail.html">
<img src="images/product1.jpg" class="item-image" alt="Product"/>
<div class="detail-text">
<h4 class="detail-heading">Details</h4>
</div>
</a>
</div>
<h4 class="product-name">Bees n' Cats</h4>
<p class="product-price">$14.99 CAD</p>
</div>
</div>
.events, .events-flex, .event-item, .events-img, .events-img img, .events-content, .event-title, .event-title img, .event-date
<section class="events">
<div class="events-flex">
<div class="event-item">
<div class="events-img">
<img src="images/eventspic1.jpg" alt="contest"/>
</div>
<div class="events-content">
<div class="event-title">
<img src="images/book.png" alt="book icon"/>
<h3> New Contest out!</h3>
<div class="event-date">02 / 22 / 17</div>
</div>
<p class="event-description">
Our latest contest is out--and this time, with cool new prizes such as our newest notebooks from our partnership with 'The perfect sketchbook'! One lucky winner will get their very own copy, sent to them for free just by submitting a picture of simple
doodle/ notes taken in any of our notebooks! <a href="#" class="text-link">Read more </a></p>
</div>
</div>
</div>
</section>
Our latest contest is out--and this time, with cool new prizes such as our newest notebooks from our partnership with 'The perfect sketchbook'! One lucky winner will get their very own copy, sent to them for free just by submitting a picture of simple doodle/ notes taken in any of our notebooks! Read more
.contact-form, label, .email
#footer, #footer h2
form, form .row
input[type="text"], input[type="text"]:focus
.button-default, .button-default:focus, .button-default:hover, .button-default:active
<form>
<section id="footer">
<form class="contact-form" action="#" method="POST">
<h2>Send us an email!</h2>
<label for="name">Your name:</label>
<div class="row">
<input id="name" class="input" name="name" type="text" value="" size="40" />
</div>
<label for="email">Your email:</label>
<div class="row">
<input id="email" class="input" name="email" type="text" value="" size="40" />
</div>
<label for="message">Your message:</label>
<div class="row">
<textarea id="message" class="input" name="message" rows="7" cols="33"><
/textarea>
</div>
<input class="button-default email" type="submit" value="Send email" />
</form>
</section>