<div class="blue-bg padding-48"></div>

<div class="red-bg padding-48"></div>

<div class="green-bg padding-48"></div>

<div class="black-bg padding-48"></div>

<div class="dark-grey-bg padding-48"></div>

<div class="mid-grey-bg padding-48"></div>

<div class="light-grey-bg padding-48"></div>

<h1 class="blue-type">Heading 1</h1>

<h1 class="red-type">Heading 1</h1>

<h1 class="green-type">Heading 1</h1>

<h1 class="dark-grey-type">Heading 1</h1>

<h1 class="mid-grey-type">Heading 1</h1>

<form>
    <fieldset>
        <legend>Legend Example</legend>
    </fieldset>
</form>

<div class="styled-select">
    <select name="countries">
        <option value="sudan">Sudan</option>
        <option value="angola" selected>Angola</option>
        <option value="zimbabwe">Zimbabwe</option>
        <option value="cameroon">Cameroon</option>
    </select>
</div>

<textarea name="message" rows="10" cols="30">An nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.</textarea>

<button type="button" onclick="alert('Hello World!')">Click Me!</div><!--styled-select-->

<ul class="input-list">
    <li><label for="checkbox-1"><input type="checkbox" id="checkbox-1" name="checkbox" checked />Checkbox 1</label></li>
    <li><label for="checkbox-2"><input type="checkbox" id="checkbox-2" name="checkbox" />Checkbox 2</label></li>
    <li><label for="checkbox-3"><input type="checkbox" id="checkbox-3" name="checkbox" />Checkbox 3</label></li>
</ul><!--input-list-->

<ul class="input-list">
    <li><label for="radio-1"><input type="radio" id="radio-1" name="radio" checked />radio 1</label></li>
    <li><label for="radio-2"><input type="radio" id="radio-2" name="radio" />radio 2</label></li>
    <li><label for="radio-3"><input type="radio" id="radio-3" name="radio" />radio 3</label></li>
</ul><!--input-list-->

<label for="single-checkbox"><input type="checkbox" id="single-checkbox" name="single checkbox" />I've read and understand the <a href="#" title="Terms and Conditions" alt="terms and conditions">terms and conditions</a></label>

<label for="email">Email Address <abbr title="Required">*</abbr></label>
<input id="email" class="input" type="email" placeholder="you@example.com" required/>
<small class="note">Note about this field</small>

<label for="password">Password <abbr title="Required">*</abbr></label>
<input id="password" class="input" type="password" placeholder="•••••••" required/>
<small class="note">Note about this field</small>

<label for="text">Text input <abbr title="Required">*</abbr></label>
<input id="text" class="input" type="text" placeholder="" required/>
<small class="note">Note about this field</small>

<label for="url">Web address <abbr title="Required">*</abbr></label>
<input id="url" class="input" type="URL" placeholder="http://www.example.com" required/>
<small class="note">Note about this field</small>

<span class="input-combined">
    <input id="search" class="input" type="text" placeholder="Text input"/>
    <input id="searh-submit" class="button" type="submit" value="Submit"/>
</span>

<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<div class="negative">
    <h4>Oh no!</h4>
</div><!--negative-->

<div class="caution">
    <h4>Be careful.</h4>
</div><!--caution-->

<div class="positive">
    <h4>Excellent!</h4>
</div><!--positive-->

<article class="loop">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
</article>

<article class="loop-featured">
    <div class="featured-image" style="background-image: url('<?php echo $image_src[0]; ?>')">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
    <?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' ); ?>
    </div>
</article>

<article class="loop-featured light-grey-background">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
    <?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' ); ?>
    <h2 class="dashicons dashicons-admin-links"></h2>
    </div>
</article>