File: /home/vmasmheia229/domains/nslpguide.com/html/typography.html
<!DOCTYPE html>
<!--[if lt IE 7]><html dir="ltr" lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html dir="ltr" lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html dir="ltr" lang="en-US" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html dir="ltr" lang="en-US"><!--<![endif]-->
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<meta name="description" content="cmsmasters responsive html5 website template" />
<meta name="keywords" content="html5, css3, template, responsive, adaptive" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/fonts.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles/jquery.prettyPhoto.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/styles/ie.css" type="text/css" />
<link rel="stylesheet" href="css/styles/ieCss3.css" type="text/css" media="screen" />
<![endif]-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/modernizr.custom.all.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<title>Halsey</title>
</head>
<body>
<!-- __________________________________________________ Start Page -->
<section id="page">
<a href="#" id="slide_top"></a>
<div class="container">
<!-- __________________________________________________ Start Header -->
<header id="header">
<div class="header_inner">
<a class="logo" href="index.html"><img src="images/logo.png" alt="" /></a>
<a class="resp_navigation" href="javascript:void(0);"></a>
<nav>
<ul id="navigation">
<li class="drop">
<a href="javascript:void(0);"><span>Home</span></a>
<ul>
<li><a href="index.html"><span>Responsive Slider</span></a></li>
<li><a href="index-2.html"><span>Revolution Slider</span></a></li>
</ul>
</li>
<li class="current_page_item drop"><a href="javascript:void(0);"><span>Features</span></a>
<ul>
<li class="drop"><a href="javascript:void(0);"><span>Shortcodes</span></a>
<ul>
<li><a href="buttons.html"><span>Buttons</span></a></li>
<li><a href="boxes.html"><span>InfoBoxes</span></a></li>
<li><a href="columns.html"><span>Columns</span></a></li>
<li><a href="tabs.html"><span>Tabs & Toggle</span></a></li>
<li><a href="shortcodes.html"><span>Post type shortcode</span></a></li>
<li><a href="media.html"><span>Media</span></a></li>
<li><a href="player.html"><span>Audio & Video Players</span></a></li>
<li><a href="pricing.html"><span>Pricing Tables</span></a></li>
<li><a href="lightboxes.html"><span>Lightboxes</span></a></li>
<li><a href="tour.html"><span>Site Tour</span></a></li>
<li><a href="googlemaps.html"><span>Google Maps</span></a></li>
</ul>
</li>
<li><a href="widgets.html"><span>Widgets</span></a></li>
<li class="current_page_item"><a href="typography.html"><span>Typography</span></a></li>
<li class="drop"><a href="javascript:void(0);"><span>Layouts</span></a>
<ul>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="services.html"><span>Services</span></a></li>
<li><a href="error.html"><span>404 Error Page</span></a></li>
<li><a href="sitemap.html"><span>Sitemap</span></a></li>
<li><a href="lsidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="rsidebar.html"><span>Right Sidebar</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Heading Templates</span></a>
<ul>
<li><a href="heading.html"><span>Standard Heading</span></a></li>
<li><a href="heading_icon.html"><span>With Icon</span></a></li>
<li><a href="heading_text.html"><span>With Text</span></a></li>
<li><a href="heading_icon_text.html"><span>Heading With Icon & Text</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li class="drop"><a href="javascript:void(0);"><span>Sortable Portfolio</span></a>
<ul>
<li><a href="portfolio_sort_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_sort_three.html"><span>Three Columns</span></a></li>
<li><a href="portfolio_sort_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_sort_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Portfolio</span></a>
<ul>
<li><a href="portfolio_four.html"><span>Four Columns</span></a></li>
<li><a href="portfolio_three.html"><span>Three Columns</span></a></li>
<li><a href="portfolio_two.html"><span>Two Columns</span></a></li>
<li><a href="portfolio_one.html"><span>One Column</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Project layouts</span></a>
<ul>
<li><a href="project_slider.html"><span>Image Slider</span></a></li>
<li><a href="project_video.html"><span>Video</span></a></li>
<li><a href="album_four.html"><span>Album Four Columns</span></a></li>
<li><a href="album_three.html"><span>Album Three Columns</span></a></li>
<li><a href="album_two.html"><span>Album Two Columns</span></a></li>
<li><a href="album_one.html"><span>Album One Column</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="drop">
<a href="javascript:void(0);"><span>Blogs</span></a>
<ul>
<li><a href="blog_sidebar.html"><span>Blog with Sidebar</span></a></li>
<li><a href="blog_fwidth.html"><span>Full width Blog</span></a></li>
<li><a href="openpost.html"><span>Blog Post</span></a></li>
</ul>
</li>
<li>
<a href="contacts.html"><span>Contacts</span></a>
</li>
</ul>
</nav>
<div class="cl"></div>
</div>
</header>
<!-- __________________________________________________ Finish Header -->
<!-- __________________________________________________ Start Middle -->
<section id="middle">
<div class="headline">
<h2>Typography</h2>
</div>
<div class="cont_nav"><a href="index.html">Home</a> / <a href="shortcodes.html">Features</a> / <span>Typography</span></div>
<div class="content_wrap">
<!-- __________________________________________________ Start Content -->
<section id="content">
<div class="entry">
<h1>H1 Header</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h2>H2 Header</h2>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h3>H3 Header</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h4>H4 Header</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h5>H5 Header</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h6>H6 Header</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<br />
<h4>Divider</h4>
<div class="divider"></div>
<h4>Highlight</h4>
<p>Cum sociis natoque <mark style="background-color:#00a4ef; color:#fff;">penatibus</mark> et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque <mark style="background-color:#f9de75; color:#fff;">tristique</mark> volutpat nunc, id rhoncus augue tristique sed. In at nisln ulla, et vestibulum risus.</p>
<div class="divider"></div>
<h4>Ordered list</h4>
<ol>
<li>Vegetables - includes roots, tubers, leafy greens, squash, and sea vegetables.</li>
<li>Fruits - includes berries, citrus fruit, melons, tropical fruit, and tomatoes.</li>
<li>Dairy - includes milk, cream, cheese, eggs, and cultured milk products</li>
<li>Flavorings - includes sweeteners, herbs, spices, chocolate, and extracts.</li>
<li>Liquids - includes alcoholic beverages, stocks, juices, and vinegar.</li>
<li>Grain Products - includes flour, noodles, and dough.</li>
<li>Baked Goods - includes breads, cookies, crackers, and crumbs.</li>
</ol>
<br />
<div class="divider"></div>
<h4>Unordered list</h4>
<ul>
<li>Vegetables - includes roots, tubers, leafy greens, squash, and sea vegetables.</li>
<li>Fruits - includes berries, citrus fruit, melons, tropical fruit, and tomatoes.</li>
<li>Dairy - includes milk, cream, cheese, eggs, and cultured milk products</li>
<li>Flavorings - includes sweeteners, herbs, spices, chocolate, and extracts.</li>
<li>Liquids - includes alcoholic beverages, stocks, juices, and vinegar.</li>
<li>Grain Products - includes flour, noodles, and dough.</li>
<li>Baked Goods - includes breads, cookies, crackers, and crumbs.</li>
</ul>
<br />
<div class="divider"></div>
<h4>Picture Frame Left</h4>
<div class="wp-caption alignleft" style="width:210px;">
<a href="#"><img src="images/img/typography_1.jpg" width="210" alt="" title="This is caption" /></a>
<p class="wp-caption-text">Caption</p>
</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc</p>
<p>Fermentum in eros. Nulla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed.</p>
<div class="cl"></div>
<br />
<div class="divider"></div>
<h4>Picture Frame Right</h4>
<div class="wp-caption alignright" style="width:210px;">
<a href="#"><img src="images/img/typography_2.jpg" width="210" alt="" title="This is caption" /></a>
<p class="wp-caption-text">Caption</p>
</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc</p>
<p>Fermentum in eros. Nulla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed.</p>
<div class="cl"></div>
<br />
<div class="divider"></div>
<h4>Picture Frame Center</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui.</p>
<div class="wp-caption aligncenter" style="width:210px;">
<a href="#"><img src="images/img/typography_3.jpg" width="210" alt="" title="This is caption" /></a>
<p class="wp-caption-text">Caption</p>
</div>
<br />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui.</p>
<div class="cl"></div>
<div class="divider"></div>
<h4>Table</h4>
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>table Item</td>
<td>table Item</td>
<td>table Item:</td>
<td>table Item</td>
</tr>
<tr>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
</tr>
<tr>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
</tr>
<tr>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
<td>table Item</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Table footer here ...</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<br />
<div class="divider"></div>
<h4>Lettercaps</h4>
<p><span class="dropcap">M</span>um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque </p>
<br />
<p><span class="dropcap2">M</span>um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus </p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque </p>
<div class="divider"></div>
<h4>Pullquote & Blockquote</h4>
<div class="one_half">
<blockquote>
<p>Good design keeps the user happy, the manufacturer in the black and the aesthete unoffended</p>
</blockquote>
</div>
<div class="one_half last">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div class="cl"></div>
<br />
<div class="one_half">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunculla sed magna duiet vestibulum risus. Fermentum in eros. Nulla sed magna dui. Maecenas sollicitudin pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div class="one_half last">
<blockquote>
<p>Good design keeps the user happy, the manufacturer in the black and the aesthete unoffended</p>
</blockquote>
</div>
<div class="cl"></div>
<div class="divider"></div>
<h4>Code</h4>
<code><?php echo('Hello world!'); ?></code>
<div class="cl"></div>
</div>
</section>
<!-- __________________________________________________ Finish Content -->
<!-- __________________________________________________ Start Sidebar -->
<section id="sidebar">
<div class="one_first">
<aside class="widget widget_custom_contact_form_entries">
<h3 class="widgettitle">Quick Form</h3>
<div class="cmsms-form-builder">
<div class="widgetinfo">Thank you! <br />Your message has been sent successfully.</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#form_contact_form_widget_001').validationEngine('init');
jQuery('#form_contact_form_widget_001 a#contact_form_widget_001_wformsend').click(function () {
var form_builder_url = jQuery('#contact_form_widget_001_wurl').val();
jQuery('#form_contact_form_widget_001 .loading').animate( {
opacity : 1
} , 250);
if (jQuery('#form_contact_form_widget_001').validationEngine('validate')) {
jQuery.post(form_builder_url, {
field_003 : jQuery('#field_003').val(),
field_004 : jQuery('#field_004').val(),
formname : 'contact_form_widget_001',
formtype : 'widget'
}, function () {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
document.getElementById('form_contact_form_widget_001').reset();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').hide();
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').fadeIn('fast');
jQuery('html, body').animate( { scrollTop : (jQuery('#form_contact_form_widget_001').offset().top - 100) }, 'slow');
jQuery('#form_contact_form_widget_001').parent().find('.widgetinfo').delay(5000).fadeOut(1000);
} );
return false;
} else {
jQuery('#form_contact_form_widget_001 .loading').animate( { opacity : 0 }, 250);
return false;
}
} );
} );
</script>
<form action="#" method="post" id="form_contact_form_widget_001">
<div class="form_info cmsms_input">
<label for="field_003">Email<span class="color_3"> *</span></label>
<input type="text" name="wemail" id="field_003" size="22" tabindex="12" class="validate[required,custom[email]]" />
</div>
<div class="form_info cmsms_textarea">
<label for="field_004">Message<span class="color_3"> *</span></label>
<textarea name="wmessage" id="field_004" cols="28" rows="6" tabindex="13" class="validate[required,minSize[3]]"></textarea>
</div>
<div class="loading"></div>
<div><input type="hidden" name="contact_form_widget_001_wurl" id="contact_form_widget_001_wurl" value="http://yoursite.com/php/sendmail.php" /></div><!-- Here you need to set the path to the sendmail file -->
<div><a href="#" id="contact_form_widget_001_wformsend" class="button_small" tabindex="14">Submit</a></div>
</form>
</div>
</aside>
</div>
<div class="one_first">
<aside class="widget widget_custom_flickr_entries">
<h3 class="widgettitle">Flickr</h3>
<ul id="flickr_images_sidebar"></ul>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#flickr_images_sidebar').jflickrfeed({
limit: 6,
qstrings: {
id: '49053047@N04'
},
itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
});
});
</script>
</aside>
</div>
<div class="one_first">
<aside class="widget widget_custom_tweets_entries">
<h3 class="widgettitle">Tweets</h3>
<div id="tweetFeed"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#tweetFeed').jTweetsAnywhere({
username: 'cmsmasters',
count: 2,
showTweetFeed : {
showTwitterBird: false
}
});
});
</script>
</aside>
</div>
</section>
<div class="cl"></div>
<!-- __________________________________________________ Finish Sidebar -->
</div>
</section>
<!-- __________________________________________________ Finish Middle -->
<!-- __________________________________________________ Start Bottom -->
<section id="bottom">
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Social</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Vimeo</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Popular resources</h3>
<ul>
<li><a href="#">How to Write a Blog</a></li>
<li><a href="#">Create a Blog in 4 Steps</a></li>
<li><a href="#">15 Tips to Increase Traffic</a></li>
<li><a href="#">20 Blog Post Ideas</a></li>
<li><a href="#">Top 10 for Beginner Bloggers</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">Blogroll</h3>
<ul>
<li><a href="#">Blogs Blog</a></li>
<li><a href="#">Roll Up Roll Up</a></li>
<li><a href="#">Blog Free</a></li>
<li><a href="#">Wordpress Blog</a></li>
<li><a href="#">Start Blogging</a></li>
</ul>
</aside>
</div>
<div class="one_fourth">
<aside class="widget widget_links">
<h3 class="widgettitle">About</h3>
<ul>
<li><a href="#">Halsey</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Company news</a></li>
<li><a href="#">Investor relations</a></li>
<li><a href="#">Site map</a></li>
</ul>
</aside>
</div>
</section>
<!-- __________________________________________________ Finish Bottom -->
</div>
<!-- __________________________________________________ Start Footer -->
<footer id="footer">
<ul class="social_list">
<li><a href="#" title="Facebook"><img src="images/socicons/facebook.png" alt="" /></a></li>
<li><a href="#" title="Flickr"><img src="images/socicons/flickr.png" alt="" /></a></li>
<li><a href="#" title="Twitter"><img src="images/socicons/twitter.png" alt="" /></a></li>
<li><a href="#" title="Vimeo"><img src="images/socicons/vimeo.png" alt="" /></a></li>
<li><a href="#" title="Google Plus"><img src="images/socicons/googleplus.png" alt="" /></a></li>
</ul>
<span class="cmsms_copy">© 2012 Halsey</span>
<ul class="footer_nav">
<li><a href="contacts.html">Contact us</a></li>
<li><a href="#">Privacy statement</a></li>
</ul>
</footer>
<!-- __________________________________________________ Finish Footer -->
</section>
<!-- __________________________________________________ Finish Page -->
<script src="js/jquery.script.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.jtweetsanywhere.js" type="text/javascript"></script>
<script src="js/jquery.flickrfeed.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-lang.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
</body>
</html>