393 lines
16 KiB
HTML
393 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE 7]> <html class="ie7 no-js" lang="en"> <![endif]-->
|
|
<!--[if lte IE 8]> <html class="ie8 no-js" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 9)|!(IE)]><!--> <html class="not-ie no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<title>Freely | Columns</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<link rel="shortcut" href="images/favicon.ico" />
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
|
|
|
|
<!-- initialize jQuery Library -->
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="js/modernizr.custom.js"></script>
|
|
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
|
|
<script type="text/javascript" src="js/ie.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
<body class="color-1 pattern-1 h-style-1 text-1">
|
|
|
|
<!-- ***************** - BEGIN Top Holder - ***************** -->
|
|
<div class="top-holder"></div><!--/ top-holder-->
|
|
<!-- ***************** - END Top Holder - ******************* -->
|
|
|
|
|
|
<!-- ***************** - BEGIN Wrapper - ******************* -->
|
|
<div id="wrapper">
|
|
|
|
|
|
<!-- ***************** - BEGIN Header - ******************* -->
|
|
<header class="clearfix">
|
|
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="" /></a></div><!--/ logo-->
|
|
<div class="info-call">
|
|
<p>
|
|
For additional information call: <span>+00 123456789</span>
|
|
</p>
|
|
</div><!--/ info-call-->
|
|
</header>
|
|
<!-- ***************** - END Header - ******************* -->
|
|
|
|
|
|
<div id="content-wrapper">
|
|
<section id="content">
|
|
|
|
|
|
<!-- ************ - BEGIN Navigation - ************** -->
|
|
<nav class="navigation" id="navigation">
|
|
<ul>
|
|
<li><a href="index.html"><span>Home</span></a>
|
|
<ul class="sub-menu">
|
|
<li><a href="index.html">Nivo Slider</a></li>
|
|
<li><a href="index-4.html">Circle Effect Slider</a></li>
|
|
<li><a href="index-2.html">Elegant Accordion</a></li>
|
|
<li><a href="index-5.html">Rama Slider</a></li>
|
|
<li><a href="index-3.html">Mosaic</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="about-us.html"><span>Pages</span></a>
|
|
<ul class="sub-menu">
|
|
<li><a href="about-us.html">About</a></li>
|
|
<li><a href="services.html">Services</a></li>
|
|
<li><a href="#">Dropdown</a>
|
|
<ul>
|
|
<li><a href="#">Drowdown 1</a></li>
|
|
<li><a href="#">Drowdown 2</a></li>
|
|
<li><a href="#">Drowdown 3</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="404error.html">404 Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="current-menu-item"><a href="headings.html"><span>Features</span></a>
|
|
<ul class="sub-menu">
|
|
<li><a href="headings.html">Headings</a></li>
|
|
<li><a href="images-and-floats.html">Images and floats</a></li>
|
|
<li><a href="pricing-tables.html">Pricing Tables</a></li>
|
|
<li><a href="typography.html">Typography</a></li>
|
|
<li><a href="toggle.html">FAQ Toggle</a></li>
|
|
<li><a href="tables.html">Tables</a></li>
|
|
<li><a href="buttons.html">Buttons</a></li>
|
|
<li class="active"><a href="columns.html">Column Layout</a></li>
|
|
<li><a href="tabs.html">Tabs</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="gallery.html"><span>Gallery</span></a></li>
|
|
<li><a href="portfolio-1col.html"><span>Portfolio</span></a>
|
|
<ul class="sub-menu">
|
|
<li><a href="portfolio-1col.html">Portfolio 1 Column</a></li>
|
|
<li><a href="portfolio-2col.html">Portfolio 2 Columns</a></li>
|
|
<li><a href="portfolio-3col.html">Portfolio 3 Columns</a></li>
|
|
<li><a href="portfolio-single.html">Portfolio Single Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="blog-style1.html"><span>Blog</span></a>
|
|
<ul class="sub-menu">
|
|
<li><a href="blog-style1.html">Blog Page</a></li>
|
|
<li><a href="blog-style2.html">Alternative Blog Page</a></li>
|
|
<li><a href="blog-details.html">Blog Single Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="contacts.html"><span>Contacts</span></a></li>
|
|
</ul>
|
|
<div class="search-top">
|
|
<form action="/" class="inline-search">
|
|
<fieldset>
|
|
<input type="text" name="search" />
|
|
<input type="submit" name="s" />
|
|
</fieldset>
|
|
</form><!--/ inline-search-->
|
|
</div><!--/ search-top-->
|
|
<div class="clear"></div>
|
|
</nav><!--/ navigation-->
|
|
<!-- ************ - END Navigation - ************** -->
|
|
|
|
|
|
<!-- ************ - BEGIN Breadcrumbs - ************** -->
|
|
<div id="breadcrumbs">
|
|
<a title="Home" href="#">Home »</a> Columns
|
|
</div><!--/ breadcrumbs-->
|
|
<!-- ************ - END Breadcrumbs - ************** -->
|
|
|
|
|
|
<!-- ************ - BEGIN Content Wrapper - ************** -->
|
|
<div class="content-wrapper">
|
|
|
|
|
|
<!-- ************ - BEGIN Columns - ************** -->
|
|
<h3>Full width</h3>
|
|
<span class="dropcap">1</span>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
laborum Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
|
|
</p>
|
|
|
|
<div class="content-divider"></div>
|
|
|
|
<div class="two_thirds">
|
|
<h3>Two-thirds of the column</h3>
|
|
<span class="dropcap">1</span>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum Lorem ipsum dolor
|
|
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
|
|
</p>
|
|
</div><!--/ two_thirds-->
|
|
<div class="one_third_last">
|
|
<h3>One third column</h3>
|
|
<span class="dropcap">2</span>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
consectetur adipisicing elit, sed do eiusmod tempor incididunt.
|
|
</p>
|
|
</div><!--/ one_third_last-->
|
|
|
|
<div class="content-divider"></div>
|
|
|
|
<div class="one_third">
|
|
<h3>One third column</h3>
|
|
<span class="dropcap">1</span>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
consectetur adipisicing elit, sed do eiusmod tempor incididunt.
|
|
</p>
|
|
</div><!--/ one_third-->
|
|
<div class="two_thirds_last">
|
|
<h3>Two-thirds of the column</h3>
|
|
<span class="dropcap">2</span>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum Lorem ipsum dolor
|
|
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
|
|
</p>
|
|
</div><!--/ two_thirds_last-->
|
|
|
|
<div class="content-divider"></div>
|
|
|
|
<div class="one_third">
|
|
<h3>One third column</h3>
|
|
<div class="dropcap">1</div>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
consectetur adipisicing elit, sed do eiusmod tempor incididunt.
|
|
</p>
|
|
</div><!--/ one_third-->
|
|
<div class="one_third">
|
|
<h3>One third column</h3>
|
|
<div class="dropcap">2</div>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
consectetur adipisicing elit, sed do eiusmod tempor incididunt.
|
|
</p>
|
|
</div><!--/ one_third-->
|
|
<div class="one_third_last">
|
|
<h3>One third column</h3>
|
|
<div class="dropcap">3</div>
|
|
<p>
|
|
met consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
|
consectetur adipisicing elit, sed do eiusmod tempor incididunt.
|
|
</p>
|
|
</div><!--/ one_third_last-->
|
|
<div class="clear"></div>
|
|
<!-- ************ - END Columns - ************** -->
|
|
|
|
|
|
</div><!--/ content-wrapper-->
|
|
<!-- ************ - END Content Wrapper - ************** -->
|
|
|
|
|
|
</section><!--/ content-->
|
|
|
|
|
|
<!-- ***************** - Begin Footer - ***************** -->
|
|
<footer>
|
|
|
|
<div class="entry-footer">
|
|
|
|
<div class="one_third">
|
|
<h3>Twitter Feed</h3>
|
|
<div id="jstwitter"></div>
|
|
</div><!--/ one_third-->
|
|
|
|
<div class="one_third">
|
|
<h3>From The Blog</h3>
|
|
<div class="latest_posts">
|
|
<ul>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-1.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Lorem ipsum dolor sit amet consectetur</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-2.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Ipsum dolor sit amet consectetur adipisicing</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-3.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Dolor sit amet consectetur adipisicing elit</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
</ul>
|
|
<a class="see-all" href="blog-style1.html">See all</a>
|
|
</div><!--/ latest_posts-->
|
|
</div><!--/ one_third-->
|
|
|
|
<div class="one_third_last">
|
|
<h3>Contact Info</h3>
|
|
<div class="widget_text widget">
|
|
<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt </p>
|
|
<strong>Phone: +00 123456789</strong> <br />
|
|
<strong>E-mail:</strong> <a href="mailto:yoursite@yoursite.com">yoursite@yoursite.com</a>
|
|
</div><!--/ widget_text-->
|
|
|
|
<div class="social_widget widget">
|
|
<h3>Socialize With Us</h3>
|
|
<ul>
|
|
<li data-tooltip="Tooltip - Optional description can go here!"><a class="social_icon1" href="#">Facebook</a></li>
|
|
<li data-tooltip="Tooltip - Optional description can go here!"><a class="social_icon2" href="#">Twitter</a></li>
|
|
<li data-tooltip="Tooltip - Optional description can go here!"><a class="social_icon3" href="#">Rss</a></li>
|
|
</ul>
|
|
</div><!--/ social_widget-->
|
|
|
|
</div><!--/ one_third_last-->
|
|
|
|
<div class="clear"></div>
|
|
|
|
</div><!--/ entry-footer-->
|
|
|
|
</footer><!--/ footer-->
|
|
<!-- ***************** - END Footer - ***************** -->
|
|
|
|
|
|
<!-- ***************** - BEGIN Copyright - ***************** -->
|
|
<div class="copyright">Copyright © 2012. ThemeMakers. All rights reserved</div>
|
|
<div class="developed">developed by <a target="_blank" href="http://webtemplatemasters.com">ThemeMakers</a></div>
|
|
<!-- ***************** - END Copyright - ***************** -->
|
|
|
|
|
|
</div><!--/ #content-wrapper-->
|
|
|
|
|
|
<!-- ***************** - BEGIN Sidebar - ******************* -->
|
|
<aside id="sidebar">
|
|
|
|
|
|
<!-- ************* - BEGIN Categories Widget - *************** -->
|
|
<div class="categories_widget widget">
|
|
<h3 class="widget-title">Categories</h3>
|
|
<ul class="categories">
|
|
<li><a href="blog-style1.html">Lorem ipsum dolor sit amet</a></li>
|
|
<li><a href="blog-style2.html">Consectetur adipisicing </a></li>
|
|
<li><a href="blog-style2.html">Elit sed do eiusmod </a></li>
|
|
<li><a href="blog-style1.html">Tempor incididunt ut labore </a></li>
|
|
<li><a href="blog-style2.html">Et dolore magna aliqua</a></li>
|
|
<li><a href="blog-style1.html">Ut enim ad minim </a></li>
|
|
<li><a href="blog-style2.html">Veniam quis nostrud</a></li>
|
|
<li><a href="blog-style1.html">Esse cillum dolore eu </a></li>
|
|
<li><a href="blog-style2.html">Fugiat nulla pariat</a></li>
|
|
<li><a href="blog-style1.html">Excepteur sint occaeca</a></li>
|
|
<li><a href="blog-style2.html">Cupidatat non</a></li>
|
|
</ul>
|
|
</div><!--/ categories_widget-->
|
|
<!-- ************* - END Categories Widget - *************** -->
|
|
|
|
|
|
<!-- ************* - BEGIN Testimonials Widget - *************** -->
|
|
<div class="testimonials widget">
|
|
<div class="quote-text">
|
|
<p>"Etiam consequat, tortor nec feugiat faucibus, libero eget ullamcorper"
|
|
<span class="quote-author">-Brandon Green-</span>
|
|
</p>
|
|
</div><!--/ quote-text-->
|
|
<div class="quote-text">
|
|
<p>"Cras euismod, est et semper viverra, augue magna luctus neque, ac tincidunt felis nisl euismod nisi."
|
|
<span class="quote-author">-John Resig-</span>
|
|
</p>
|
|
</div><!--/ quote-text-->
|
|
<div class="quote-text">
|
|
<p>"Quisque sit amet odio eu ipsum sollicitudin porttitor ut a nisl. Vestibulum lobortis ultrices justo, id feugiat enim fermentum non. "
|
|
<span class="quote-author">-Amanda Smith-</span>
|
|
</p>
|
|
</div><!--/ quote-text-->
|
|
</div><!--/ testimonials -->
|
|
<!-- ************* - END Testimonials Widget - *************** -->
|
|
|
|
|
|
<!-- ************* - BEGIN Latest Widget - *************** -->
|
|
<div class="latest_posts widget">
|
|
<h3 class="widget-title">Latest News</h3>
|
|
<ul>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-1.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Lorem ipsum dolor sit amet consectetur</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-2.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Ipsum dolor sit amet consectetur adipisicing</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
<li>
|
|
<span class="small-custom-frame">
|
|
<a href="blog-details.html"><img class="alignleft" src="images/temp/sample-post-2.jpg" alt="" /></a>
|
|
</span>
|
|
<a href="blog-details.html" class="teaser-title">Ipsum dolor sit amet consectetur adipisicing</a>
|
|
<div class="teaser-date">Posted on Now 25, 2011</div>
|
|
<div class="clear"></div>
|
|
</li>
|
|
</ul>
|
|
<a class="see-all" href="blog-details.html">See all news</a>
|
|
</div><!--/ latest_posts-->
|
|
<!-- ************* - END Latest Widget - *************** -->
|
|
|
|
|
|
</aside><!--/ sidebar-->
|
|
<div class="clear"></div>
|
|
<!-- ***************** - END Sidebar - ******************* -->
|
|
|
|
|
|
</div><!--/ wrapper-->
|
|
<!-- ***************** - END Wrapper - ***************** -->
|
|
|
|
<div id="back-top">
|
|
<a href="#top"></a>
|
|
</div><!--/ back-top-->
|
|
|
|
<script type="text/javascript" src="js/general.js"></script>
|
|
</body>
|
|
</html>
|
|
|