|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/opebony/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" id="camera-css" href="css/camera.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" />
<link rel="stylesheet" href="css/flexslider.css">
<title>Charity | help them!</title>
</head>
<body>
<!-- wrapper -->
<div class="wrapper">
<!--header-->
<div id="header">
<div class="container">
<div class="top_block">
<div class="fleft">Mauris ultricies turpis tortor, eleifend rutrum!</div>
<div class="fright">You've helped raise $ 20 585. <a href="#">Donate!</a></div>
<div class="clear"></div>
</div>
<div class="head_white">
<div id="logo"><a href="index.html"><img src="images/oelogo.png" alt="" width="483" height="92" /></a></div>
<div id="socials">
<ul>
<li><a href="#" class="fb"></a></li>
<li><a href="#" class="t_dot"></a></li>
<li><a href="#" class="twitter"></a></li>
<li><a href="#" class="vimeo"></a></li>
</ul>
</div>
<div class="phone">Contact opera ebonY<b>212.877.2110</b></div>
<div class="clear"></div>
<div class="head_shadow"></div>
</div>
</div>
</div>
<!--//header-->
<!--main-->
<div class="main_wrap container drop-shadow">
<!--navigation-->
<div class="navigation">
<!--menu-->
<div id="menu">
<ul class="sf-menu">
<li><a href="index.html">Home</a></li>
<li><a href="who_we_are.html">Who we are</a></li>
<li><a href="our_work.html">Our Work</a></li>
<li><a href="donate.html">Donate</a></li>
<li class="current"><a href="javascript:{}">Features</a>
<ul>
<li><a href="typography.html">Typography</a></li>
<li class="current"><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="media.html">Media</a></li>
<li><a href="javascript:{}">Events</a>
<ul>
<li><a href="full_width.html">Full width</a></li>
<li><a href="simple_post_full.html">Simple post</a></li>
<li><a href="javascript:{}">With sidebar</a>
<ul>
<li><a href="left_sidebar.html">Left sidebar</a></li>
<li><a href="right_sidebar.html">Right sidebar</a></li>
<li><a href="simple_post.html">Simple post</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:{}">Contacts</a>
<ul>
<li><a href="contacts_full.html">Full width</a></li>
<li><a href="contacts_sidebar.html">With sidebar</a></li>
</ul>
</li>
</ul>
</div>
<!--//menu-->
<!--search-->
<div class="search">
<form action="#" method="post">
<input class="inp_search" name="name" type="text" value="Search" onfocus="if (this.value == 'Search') this.value = '';" onblur="if (this.value == '') this.value = 'Search';" />
<input type="submit" class="search_btn" value=" " />
</form>
</div>
<!--//search-->
<div class="clear"></div>
</div>
<!--//navigation-->
<!-- Shortcodes-->
<div class="page">
<div class="columns">
<div class="block bot31">
<h1>Shortcodes</h1>
<p>Aenean vitae condimentum velit. Praesent dapibus euismod accumsan. Sed ut ante leo. Maecenas conidime etum pretium odio at porta. Pellentesque et tellus odio. Quisqu es lorem ipsum dolor sit amet vivamus egestas vestibulum id arcu sapien praesent dapibus euismod accumsan. Sed ut ante leo maecenas conidime.</p>
</div>
</div>
<div class="columns">
<div class="block">
<h4>slider</h4>
<!--slider-->
<div class="camera_wrap" id="camera_shortcode_slider">
<div data-src="images/slider/h_366/1.jpg">
<div class="camera_caption fadeIn">
<span class="slide_title">Sed quis vestibulum dolor</span>
Sed in nisi urna, vel volutpat ante. Cras aliquet mattis sapien, non placerat magna egest felisid. <a href="#">Read more...</a>
</div>
</div>
<div data-src="images/slider/h_366/2.jpg">
<div class="camera_caption fadeIn">
<span class="slide_title">Fermentum vel egelsapien</span>
Pellentesque vehicula tempor nullart eu acibus. Lorem ipsum dolor sit. amet, consectetur.
</div>
</div>
<div data-src="images/slider/h_366/3.jpg">
<div class="camera_caption fadeIn">
<span class="slide_title">Suspendisse at sem dolor</span>
Ut eleifend ante. Sed in eros vel velit suscipit facilisis. Aliquam erat volutpat. <a href="#">Read more...</a>
</div>
</div>
<div data-src="images/slider/h_366/4.jpg">
<div class="camera_caption fadeIn">
<span class="slide_title">Aenean id est eu ligula</span>
Et quo eros torquatos. Nec ne movet iuvaret denique, saepe alienum eu sit, eam suas nulla. <a href="#">Read more...</a>
</div>
</div>
</div>
<div class="clear"></div>
<!--//slider-->
</div>
</div>
<!--icon tabs-->
<div class="columns">
<div class="block">
<h4>icon tabs</h4>
<div class="tabs_block">
<ul class="tabs">
<li class="first"><a href="#tab1">Tab1</a></li>
<li class="second"><a href="#tab2">Tab2</a></li>
<li class="third"><a href="#tab3">Tab3</a></li>
<li class="fourth"><a href="#tab4">Tab4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h4>Cras tempus erat quam Suspendisse mollis euismod eget vivam</h4>
<iframe width="300" height="180" src="http://www.youtube.com/embed/_YINZq218yM" frameborder="0" allowfullscreen></iframe>
<p>Pellentesque <a href="#">vehicula tempor</a> nullart eu acibus. Lorem ipsum dolor sit. amet, consectetur. adipiscing elit. Mauris elit dui, suscipit tempus volutpat ut, fermentum vel egelsapien pendise.</p>
<p>Ut eleifend ante. Sed in eros vel velit suscipit facilisis. Aliquam erat volutpat. Suspendisse at sem dolor. Aenean ut convallis risus. Aenean ultrices odio sed nulla interdum iaculis. Egestas Nullam sit amet nunc ac magna pellentesque pharetra non quis sem. Curabitur egestas eget egestas dignissim. Phasellus lacinia gravida eros, nec porta orci feugiat nec. </p>
<p>Suspendisse potenti. Aenean id est eu ligula pellentesque commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris orci arcu, ullamcorper in placerat id, egestas feugiat mauris. Cras ullamcorper auctor sem, ac venenatis nisl lamcoreip eget. Vestibulum rhoncus metus a nibh auctor vitae condimentum. <a href="#">Donate!</a></p>
<div class="clear"></div>
</div>
<div id="tab2" class="tab_content">
<h4>Lorem ipsum dolor sit. amet, consectetur</h4>
<iframe width="300" height="180" src="http://www.youtube.com/embed/_YINZq218yM" frameborder="0" allowfullscreen></iframe>
<p>Ut eleifend ante. Sed in eros vel velit suscipit facilisis. Aliquam erat volutpat. Suspendisse at sem dolor. Aenean ut convallis risus. Aenean ultrices odio sed nulla interdum iaculis. Egestas Nullam sit amet nunc ac magna pellentesque pharetra non quis sem. Curabitur egestas eget egestas dignissim. Phasellus lacinia gravida eros, nec porta orci feugiat nec. </p>
<p>Suspendisse potenti. Aenean id est eu ligula pellentesque commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris orci arcu, ullamcorper in placerat id, egestas feugiat mauris. Cras ullamcorper auctor sem, ac venenatis nisl lamcoreip eget. Vestibulum rhoncus metus a nibh auctor vitae condimentum. <a href="#">Donate!</a></p>
<p>Pellentesque <a href="#">vehicula tempor</a> nullart eu acibus. Lorem ipsum dolor sit. amet, consectetur. adipiscing elit. Mauris elit dui, suscipit tempus volutpat ut, fermentum vel egelsapien pendise.</p>
<div class="clear"></div>
</div>
<div id="tab3" class="tab_content">
<h4>Vestibulum ante ipsum primis in faucibus orci luctus</h4>
<iframe width="300" height="180" src="http://www.youtube.com/embed/_YINZq218yM" frameborder="0" allowfullscreen></iframe>
<p>Pellentesque <a href="#">vehicula tempor</a> nullart eu acibus. Lorem ipsum dolor sit. amet, consectetur. adipiscing elit. Mauris elit dui, suscipit tempus volutpat ut, fermentum vel egelsapien pendise.</p>
<p>Ut eleifend ante. Sed in eros vel velit suscipit facilisis. Aliquam erat volutpat. Suspendisse at sem dolor. Aenean ut convallis risus. Aenean ultrices odio sed nulla interdum iaculis. Egestas Nullam sit amet nunc ac magna pellentesque pharetra non quis sem. Curabitur egestas eget egestas dignissim. Phasellus lacinia gravida eros, nec porta orci feugiat nec. </p>
<p>Suspendisse potenti. Aenean id est eu ligula pellentesque commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris orci arcu, ullamcorper in placerat id, egestas feugiat mauris. Cras ullamcorper auctor sem, ac venenatis nisl lamcoreip eget. Vestibulum rhoncus metus a nibh auctor vitae condimentum. <a href="#">Donate!</a></p>
<div class="clear"></div>
</div>
<div id="tab4" class="tab_content">
<h4>Aenean id est eu ligula pellentesque commodo.</h4>
<iframe width="300" height="180" src="http://www.youtube.com/embed/_YINZq218yM" frameborder="0" allowfullscreen></iframe>
<p>Ut eleifend ante. Sed in eros vel velit suscipit facilisis. Aliquam erat volutpat. Suspendisse at sem dolor. Aenean ut convallis risus. Aenean ultrices odio sed nulla interdum iaculis. Egestas Nullam sit amet nunc ac magna pellentesque pharetra non quis sem. Curabitur egestas eget egestas dignissim. Phasellus lacinia gravida eros, nec porta orci feugiat nec. </p>
<p>Suspendisse potenti. Aenean id est eu ligula pellentesque commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. Mauris orci arcu, ullamcorper in placerat id, egestas feugiat mauris. Cras ullamcorper auctor sem, ac venenatis nisl lamcoreip eget. Vestibulum rhoncus metus a nibh auctor vitae condimentum. <a href="#">Donate!</a></p>
<p>Pellentesque <a href="#">vehicula tempor</a> nullart eu acibus. Lorem ipsum dolor sit. amet, consectetur. adipiscing elit. Mauris elit dui, suscipit tempus volutpat ut, fermentum vel egelsapien pendise.</p>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<!--//icon tabs-->
<!--Blog-->
<div class="columns">
<div class="block">
<h4>blog</h4>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<div class="hover_img">
<a href="images/media/13.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/post_img/1.jpg" width="220" height="155" alt="" /></a>
<span class="zoom"><a href="images/media/13.jpg" data-rel="prettyPhoto[gallery11]"></a></span>
</div>
<div class="post_title"><a href="#">Lorem ipsum dolor amet</a></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam lorem quis. <a href="#">Read more...</a>
<div class="post_info">
25 apr 2019 <span class="pipe">|</span> In <a href="#">Sponsors</a>
</div>
</li>
<li>
<div class="hover_img">
<a href="images/media/12.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/post_img/2.jpg" width="220" height="155" alt="" /></a>
<span class="zoom"><a href="images/media/12.jpg" data-rel="prettyPhoto[gallery11]"></a></span>
</div>
<div class="post_title"><a href="#">Vestibulum eget mauris!</a></div>
Dolorem eu ipsum dapibus quam dolor tortor lacus. Nam nisl elit, vestibulum vitae suscipit at, mollis eget diam lorem quis acquisque egestas. <a href="#">Read more...</a>
<div class="post_info">
25 apr 2019 <span class="pipe">|</span> In <a href="#">People</a>
</div>
</li>
<li>
<div class="hover_img">
<a href="images/media/6.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/post_img/3.jpg" width="220" height="155" alt="" /></a>
<span class="zoom"><a href="images/media/6.jpg" data-rel="prettyPhoto[gallery11]"></a></span>
</div>
<div class="post_title"><a href="#">Maecenas suspendisse</a></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam lorem quis. <a href="#">Read more...</a>
<div class="post_info">
25 apr 2019 <span class="pipe">|</span> In <a href="#">Charity</a>
</div>
</li>
<li>
<div class="hover_img">
<a href="images/media/1.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/post_img/4.jpg" width="220" height="155" alt="" /></a>
<span class="zoom"><a href="images/media/1.jpg" data-rel="prettyPhoto[gallery11]"></a></span>
</div>
<div class="post_title"><a href="#">Homos mollis mauris commod</a></div>
Dolorem eu ipsum dapibus quam dolor tortor lacus. Nam nisl elit, vestibulum vitae suscipit at, mollis eget diam lorem quis acquisque egestas. <a href="#">Read more...</a>
<div class="post_info">
25 apr 2019 <span class="pipe">|</span> In <a href="#">Sponsors</a>
</div>
</li>
<li>
<div class="hover_img">
<a href="images/media/13.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/post_img/1.jpg" width="220" height="155" alt="" /></a>
<span class="zoom"><a href="images/media/13.jpg" data-rel="prettyPhoto[gallery11]"></a></span>
</div>
<div class="post_title"><a href="#">Lorem ipsum dolor amet</a></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam lorem quis. <a href="#">Read more...</a>
<div class="post_info">
25 apr 2019 <span class="pipe">|</span> In <a href="#">Sponsors</a>
</div>
</li>
</ul>
</div>
</div>
<!--//Blog-->
<!--Portfolio-->
<div class="columns">
<div class="block">
<h4>Portfolio</h4>
<ul id="portfoliocarousel" class="jcarousel-skin-tango">
<li>
<div class="hover_img">
<img src="images/post_img/3.jpg" width="220" height="155" alt="" />
<span class="zoom"><a href="images/media/6.jpg" data-rel="prettyPhoto[portfolio1]"></a></span>
<span class="link"><a href="#">View item</a></span>
<span class="item_title">Lorem ipsum dolor amet eget mauris semper</span>
</div>
</li>
<li>
<div class="hover_img">
<img src="images/post_img/4.jpg" width="220" height="155" alt="" />
<span class="zoom"><a href="images/media/1.jpg" data-rel="prettyPhoto[portfolio1]"></a></span>
<span class="link"><a href="#">View item</a></span>
<span class="item_title">Dolor amet eget mauris semper lorem ipsum</span>
</div>
</li>
<li>
<div class="hover_img">
<img src="images/post_img/1.jpg" width="220" height="155" alt="" />
<span class="zoom"><a href="images/media/13.jpg" data-rel="prettyPhoto[portfolio1]"></a></span>
<span class="link"><a href="#">View item</a></span>
<span class="item_title">Lorem ipsum dolor amet eget mauris semper</span>
</div>
</li>
<li>
<div class="hover_img">
<img src="images/post_img/2.jpg" width="220" height="155" alt="" />
<span class="zoom"><a href="images/media/12.jpg" data-rel="prettyPhoto[portfolio1]"></a></span>
<span class="link"><a href="#">View item</a></span>
<span class="item_title">Dolor amet eget mauris semper lorem ipsum</span>
</div>
</li>
<li>
<div class="hover_img">
<img src="images/post_img/3.jpg" width="220" height="155" alt="" />
<span class="zoom"><a href="images/media/6.jpg" data-rel="prettyPhoto[portfolio1]"></a></span>
<span class="link"><a href="#">View item</a></span>
<span class="item_title">Lorem ipsum dolor amet eget mauris semper</span>
</div>
</li>
</ul>
</div>
</div>
<!--//Portfolio-->
<!--testimonials & highlights-->
<div class="columns alpha omega">
<div class="block">
<div class="one_second">
<h4>testimonials</h4>
<div class="flexslider">
<ul class="slides">
<li>
<div>
<img src="images/img1.jpg" width="65" height="65" alt="" />
<div class="right_testimonial">
Quisque eu ipsum dapibus quam et egets dignissim pharetra eget id nunc. Ut nec tortor lacus. Nam nislat elit, ullamcorper vitae suscipit, ullamcorper vestibulum, urna miest. bibendum augue, eu fringilla eget purus metus eget urna. Nulla ac enim metus.
<div class="author"><span>Ammy Watson,</span> Company inc.</div>
</div>
<div class="clear"></div>
</div>
<div>
<img src="images/img2.jpg" width="65" height="65" alt="" />
<div class="right_testimonial">
Nam nislat elit, ullamcorper vitae suscipit at, mollis eget diam lorem maecenas quis. Donec molestie, diam ut ullamcorper vestibulum una metus lorem ipsum dolor sit amet mauris eget urna.
<div class="author"><span>Tom Sawyer,</span> Company inc.</div>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div>
<img src="images/img2.jpg" width="65" height="65" alt="" />
<div class="right_testimonial">
Nam nislat elit, ullamcorper vitae suscipit at, mollis eget diam lorem maecenas quis. Donec molestie, diam ut ullamcorper vestibulum una metus lorem ipsum dolor sit amet mauris eget urna.
<div class="author"><span>Tom Sawyer,</span> Company inc.</div>
</div>
<div class="clear"></div>
</div>
<div>
<img src="images/img1.jpg" width="65" height="65" alt="" />
<div class="right_testimonial">
Quisque eu ipsum dapibus quam et egets dignissim pharetra eget id nunc. Ut nec tortor lacus. Nam nislat elit, ullamcorper vitae suscipit, ullamcorper vestibulum, urna miest. bibendum augue, eu fringilla eget purus metus eget urna. Nulla ac enim metus.
<div class="author"><span>Ammy Watson,</span> Company inc.</div>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="one_second">
<h4>highlights</h4>
<ul class="highlights">
<li><a href="#">In quis dolor id nunc posuere sed elementum id dolor</a></li>
<li><a href="#">Egestas Mauris suspendisse laoreet imperdiet egestas rhoncus?</a></li>
<li><a href="#">Maecenas eros odio, ornare commodo</a></li>
<li><a href="#">Tempus quis porttitor a, semper eu mauris diam!</a></li>
<li><a href="#">Homos mollis auris</a></li>
<li><a href="#">Vivamus pharetra adipiscing mattis sem, tincidunt felis volutpat </a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!--//testimonials & highlights-->
<!--icon boxes-->
<div class="columns alpha omega">
<div class="block">
<h4 class="marg10">icon boxes</h4>
<div class="one_third">
<div class="icon_box">
<h2>lorem ipsum</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img1"></span>
</div>
<div class="icon_box">
<h2>maecenas</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img2"></span>
</div>
</div>
<div class="one_third">
<div class="icon_box">
<h2>vestibulum eget</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img3"></span>
</div>
<div class="icon_box">
<h2>eget pharetra</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img4"></span>
</div>
</div>
<div class="one_third">
<div class="icon_box">
<h2>dolor amet</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img5"></span>
</div>
<div class="icon_box">
<h2>mauris diam</h2>
Cum sociis natoque penatbus magis dis parturient montes nascetur.
<span class="img6"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--//icon boxes-->
<!--Accordion & Toggles-->
<div class="columns alpha omega">
<div class="block">
<div class="one_second">
<h4>Accordion</h4>
<div class="accordion">
<h3><span>Vivamus sed nisl eget risus lacinia suscipit vel et diam</span></h3>
<div class="accord_cont">
<p>Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam. Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna.</p>
</div>
<h3><span>Donec erat enim, gravida ac auctor eget</span></h3>
<div class="accord_cont">
<p>Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna. Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam.</p>
</div>
<h3><span>Non velit justo, iaculis eleifend</span></h3>
<div class="accord_cont">
<p>Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam. Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna.</p>
</div>
<h3><span>Pharetra adipiscing mattis sem tincidunt</span></h3>
<div class="accord_cont">
<p>Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna. Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam.</p>
</div>
</div>
</div>
<div class="one_second">
<h4>Toggles</h4>
<div class="toggle">
<h3><span>Maecenas eros odio, ornare commodo</span></h3>
<div class="toggle_cont">
<p>Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam. Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna.</p>
</div>
<h3><span>Tempus quis porttitor a, semper eu mauris diam!</span></h3>
<div class="toggle_cont">
<p>Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna. Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam.</p>
</div>
<h3><span>Homos mollis auris</span></h3>
<div class="toggle_cont">
<p>Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam. Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna.</p>
</div>
<h3><span>Vivamus pharetra adipiscing mattis sem, tincidunt fel volutpat</span></h3>
<div class="toggle_cont">
<p>Duis justo urna, volutpat pulvinar adipiscing at, tempor ut nis egetas suspendisse at nisi id nisl pharetra sagittis sed non urna. Etiam ligula odio, iaculis id vehicula bibendum, luctus eget velit. Praesent at augue ligula, vel feugiat elit. Nunc at turpis sit amet turpis ultrices posuere eus eu quam.</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--//Accordion & Toggles-->
<!--Tabs & separators-->
<div class="columns alpha omega">
<div class="block">
<div class="one_second">
<h4>Tabs</h4>
<ul class="block_tabs">
<li><a href="#tab01">Tab 01</a></li>
<li><a href="#tab02">Tab 02</a></li>
<li><a href="#tab03">Tab 03</a></li>
</ul>
<div class="tab_container_block">
<div id="tab01" class="tab_content_block">
<p>Some text...</p>
</div>
<div id="tab02" class="tab_content_block">
<p>Praesent pretium euismod...</p>
</div>
<div id="tab03" class="tab_content_block">
<p>Vivamus orci ligula...</p>
</div>
</div>
</div>
<div class="one_second">
<h4>separators</h4>
<div class="separators_block">
<ul>
<li><div class="separator"></div></li>
<li><div class="separator grey"></div></li>
<li><div class="separator light"></div></li>
<li><div class="separator orange"></div></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--//Tabs & separators-->
<!--message boxes-->
<div class="columns alpha omega">
<div class="block">
<h4 class="marg10">message boxes</h4>
<div class="one_second">
<div class="mes_box orange">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
<div class="mes_box">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
<div class="mes_box blue">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
</div>
<div class="one_second">
<div class="mes_box green">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
<div class="mes_box yellow">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
<div class="mes_box red">
<h6>Donec sed sapien ligula, non adipiscing egestas metus!</h6>
Vestib turpis nisi, euismod nec gravida id, semper in lorem.
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!--//message boxes-->
<!--title-->
<div class="columns">
<div class="block title">
<h4>call to action</h4>
</div>
</div>
<!--//title-->
<!--donate-->
<div class="donate">
<a href="#" class="donate_btn green">donate right now!</a>
<span>porta pellentesques eget blandit!</span>
portor egeteligula eu rhoncus gravida, ligula magna
<div class="clear"></div>
</div>
<!--//donate-->
<!--our sponsors-->
<div class="columns">
<div class="block sponsors">
<h4>our sponsors</h4>
<div id="sponsors_carousel">
<ul id="oursponsors" class="jcarousel-skin-tango">
<li><a href="#"><img src="images/sponsors/1.png" width="130" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/2.png" width="82" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/3.png" width="121" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/4.png" width="102" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/5.png" width="87" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/1.png" width="130" height="78" alt="" /></a></li>
<li><a href="#"><img src="images/sponsors/2.png" width="82" height="78" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<!--//our sponsors-->
<!--buttons-->
<div class="columns">
<div class="block">
<h4>buttons</h4>
<div class="buttons_block">
<a href="#" class="btn black">small button</a>
<a href="#" class="btn grey_light">button</a>
<a href="#" class="btn grey">button</a>
<a href="#" class="btn pink">button</a>
<a href="#" class="btn red">button</a>
<a href="#" class="btn orange">button</a>
<a href="#" class="btn yellow">button</a>
<a href="#" class="btn green">button</a>
<a href="#" class="btn blue">button</a>
<a href="#" class="btn dark_blue">button</a>
<a href="#" class="btn large_btn">large button</a>
<a href="#" class="btn medium_btn">medium button</a>
<div class="clear"></div>
</div>
</div>
</div>
<!--//buttons-->
<!--team-->
<div class="columns">
<div class="block">
<h4>team</h4>
<ul id="team" class="jcarousel-skin-tango">
<li>
<img src="images/team1.jpg" width="220" height="155" alt="" />
<div class="team_author">John Doe<span>Manager</span></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam.
<div class="team_links">
<a href="#">Facebook</a><span class="pipe">|</span><a href="#">Twitter</a><span class="pipe">|</span><a href="#">Pinterest</a>
</div>
</li>
<li>
<img src="images/team2.jpg" width="220" height="155" alt="" />
<div class="team_author">Anna smith<span>Manager</span></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam.
<div class="team_links">
<a href="#">Facebook</a><span class="pipe">|</span><a href="#">Twitter</a><span class="pipe">|</span><a href="#">Pinterest</a>
</div>
</li>
<li>
<img src="images/team3.jpg" width="220" height="155" alt="" />
<div class="team_author">Adam smith<span>Manager</span></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam.
<div class="team_links">
<a href="#">Facebook</a><span class="pipe">|</span><a href="#">Twitter</a><span class="pipe">|</span><a href="#">Pinterest</a>
</div>
</li>
<li>
<img src="images/team4.jpg" width="220" height="155" alt="" />
<div class="team_author">Tom Sawyer<span>Manager</span></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam.
<div class="team_links">
<a href="#">Facebook</a><span class="pipe">|</span><a href="#">Twitter</a><span class="pipe">|</span><a href="#">Pinterest</a>
</div>
</li>
<li>
<img src="images/team1.jpg" width="220" height="155" alt="" />
<div class="team_author">John Doe<span>Manager</span></div>
Quisque eu ipsum dapibus quam egets tortor lacus. Nam nisl elit, ullamcorper vitae suscipit at, mollis eget diam.
<div class="team_links">
<a href="#">Facebook</a><span class="pipe">|</span><a href="#">Twitter</a><span class="pipe">|</span><a href="#">Pinterest</a>
</div>
</li>
</ul>
</div>
</div>
<!--//team-->
<!--price tables-->
<div class="columns alpha omega">
<div class="block price_table">
<h4 class="marg10">price tables</h4>
<div class="one_fourth">
<table>
<tr>
<th>basic</th>
</tr>
<tr>
<td class="price">$10<span>/mo</span></td>
</tr>
<tr>
<td><span>Tempus pretium auctor</span></td>
</tr>
<tr>
<td>Cum lorem <span>sociis</span></td>
</tr>
<tr>
<td>500Mb <span>eget natoque</span></td>
</tr>
<tr>
<td class="last">3% enatibus <span>et magnis</span></td>
</tr>
<tr>
<td class="pad_null"><a href="#" class="btn medium_btn">Get it now!</a></td>
</tr>
</table>
</div>
<div class="one_fourth">
<table class="professional">
<tr>
<th>professional</th>
</tr>
<tr>
<td class="price">$30<span>/mo</span></td>
</tr>
<tr>
<td><span>Tempus pretium auctor</span></td>
</tr>
<tr>
<td>Eget mas lorem <span>sociis</span></td>
</tr>
<tr>
<td>3Gb <span>eget natoque</span></td>
</tr>
<tr>
<td class="last">1% enatibus <span>et magnis</span></td>
</tr>
<tr>
<td class="pad_null"><a href="#" class="btn large_btn">Get it now!</a></td>
</tr>
</table>
</div>
<div class="one_fourth">
<table>
<tr>
<th>business</th>
</tr>
<tr>
<td class="price">$50<span>/mo</span></td>
</tr>
<tr>
<td><span>Tempus pretium auctor</span></td>
</tr>
<tr>
<td>Eget mas lorem <span>sociis</span></td>
</tr>
<tr>
<td>3Gb <span>eget natoque</span></td>
</tr>
<tr>
<td class="last">1% enatibus <span>et magnis</span></td>
</tr>
<tr>
<td class="pad_null"><a href="#" class="btn medium_btn">Get it now!</a></td>
</tr>
</table>
</div>
<div class="one_fourth">
<table>
<tr>
<th>unlimited</th>
</tr>
<tr>
<td class="price">$80<span>/mo</span></td>
</tr>
<tr>
<td><span>Tempus pretium auctor</span></td>
</tr>
<tr>
<td>Dolor vivamus <span>sociis</span></td>
</tr>
<tr>
<td>6Gb <span>eget natoque</span></td>
</tr>
<tr>
<td class="last">0% enatibus <span>et magnis</span></td>
</tr>
<tr>
<td class="pad_null"><a href="#" class="btn medium_btn">Get it now!</a></td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
</div>
<!--//price tables-->
<!--video frame-->
<div class="columns">
<div class="block">
<h4>video frame</h4>
<iframe class="fleft" width="340" height="191" src="http://www.youtube.com/embed/_YINZq218yM" frameborder="0" allowfullscreen></iframe>
<p>Quisque libero magna, pharetra vel accumsan non, porta sit amet nisl. Cras magna ipsum, molestie vitae mollis consequat, eleifend et libero. Nulla at pretium nisi. Vestibulum aliquet ipsum sit amet eget lorem sollicitudin tincidunt. Aliquam accumsan, ipsum at feugiat vulputate, enim quam egestas risus, ac iterdum consectetur nunc eros et est. Ut euismod luctus nunc, non placerat mi elementum ac. Aenean sodales est sit amet magna gravida vestibulum. Fusce cursus lacinia mattis. Proin at risus ante, in volutpat lectus.</p>
<p>Sed ultricies dignissim turpis, ultricies sagittis massa imperdiet ut. Nullam imperdiet viverra venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent erat tortor, dignissim non pulvinar et, laoreet et massa. Curabitur at lorem purus, aliquam aliquet ipsum. Nullam at orci magna. Aenean dignissim orci ut diam pretium tempor. Praesent bibendum tincidunt purus nec commodo. Cras suscipit dui ut quam suscipit consectetur. Mauris in lacus vitae neque iaculis porttitor laoreet faucibus ante. Aliquam erat volutpat. Sed in gravida tortor. Donec tincidunt pellentesque sollicitudin quisque libero magna, pharetra vel accumsan non, porta sit amet nisl. Cras magna ipsum, molestie vitae mollis consequat, eleifend et libero. Nulla at pretium nisi. Vestibulum aliquet ipsum sit amet lorem sollicitudin tincidunt. Aliquam accumsan, ipsum at feugiat vulputate, enim quam egestas risus, interdum consectetur nunc eros.</p> <div class="clear"></div>
<iframe class="fright" width="340" height="191" src="http://player.vimeo.com/video/4548157?title=0&byline=0&portrait=0" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>Quisque libero magna, pharetra vel accumsan non, porta sit amet nisl. Cras magna ipsum, molestie vitae mollis consequat, eleifend et libero. Nulla at pretium nisi. Vestibulum aliquet ipsum sit amet eget lorem sollicitudin tincidunt. Aliquam accumsan, ipsum at feugiat vulputate, enim quam egestas risus, ac iterdum consectetur nunc eros et est. Ut euismod luctus nunc, non placerat mi elementum ac. Aenean sodales est sit amet magna gravida vestibulum. Fusce cursus lacinia mattis. Proin at risus ante, in volutpat lectus.</p>
<p>Sed ultricies dignissim turpis, ultricies sagittis massa imperdiet ut. Nullam imperdiet viverra venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent erat tortor, dignissim non pulvinar et, laoreet et massa. Curabitur at lorem purus, aliquam aliquet ipsum. Nullam at orci magna. Aenean dignissim orci ut diam pretium tempor. Praesent bibendum tincidunt purus nec commodo. Cras suscipit dui ut quam suscipit consectetur. Mauris in lacus vitae neque iaculis porttitor laoreet faucibus ante. Aliquam erat volutpat. Sed in gravida tortor. Donec tincidunt pellentesque sollicitudin quisque libero magna, pharetra vel accumsan non, porta sit amet nisl. Cras magna ipsum, molestie vitae mollis consequat, eleifend et libero. Nulla at pretium nisi. Vestibulum aliquet ipsum sit amet lorem sollicitudin tincidunt. Aliquam accumsan, ipsum at feugiat vulputate, enim quam egestas risus, interdum consectetur nunc eros.</p> <div class="clear"></div>
</div>
</div>
<!--//video frame-->
<!--feedback form-->
<div class="columns alpha omega">
<div class="block">
<h4 class="marg10">feedback form</h4>
<div class="col320">
<form action="#" method="post">
<input class="textfield" type="text" name="name" value="Name" onFocus="if (this.value == 'Name') this.value = '';" onBlur="if (this.value == '') this.value = 'Name';" />
<input class="textfield" type="text" name="mail" value="Email" onFocus="if (this.value == 'Email') this.value = '';" onBlur="if (this.value == '') this.value = 'Email';" />
<textarea name="message" class="textarea" onFocus="if (this.value == 'Message...') this.value = '';" onBlur="if (this.value == '') this.value = 'Message...';" >Message...</textarea>
<input type="reset" class="btn black btn_clear" value="clear form" />
<input type="submit" class="btn orange btn_send" value="button" />
<div class="clear"></div>
</form>
</div>
<div class="col600">
<form action="#" method="post">
<div class="fleft"><input class="textfield" type="text" name="name" value="Name" onFocus="if (this.value == 'Name') this.value = '';" onBlur="if (this.value == '') this.value = 'Name';" /></div>
<div class="fright"><input class="textfield" type="text" name="mail" value="Email" onFocus="if (this.value == 'Email') this.value = '';" onBlur="if (this.value == '') this.value = 'Email';" /></div>
<div class="clear"></div>
<textarea name="message" class="textarea" onFocus="if (this.value == 'Message...') this.value = '';" onBlur="if (this.value == '') this.value = 'Message...';" >Message...</textarea>
<input type="reset" class="btn dark_grey btn_clear" value="clear form" />
<input type="submit" class="btn green btn_send" value="button" />
<div class="clear"></div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<!--//feedback form-->
<!--Socialize icons-->
<div class="columns">
<div class="block">
<h4>Socialize icons</h4>
<div class="social_icons_block">
<div class="social_icons">
<a href="#" class="facebook" title="Facebook">facebook</a>
<a href="#" class="fb_like" title="Facebook Like">Facebook Like</a>
<a href="#" class="twitter_small" title="Twitter">Twitter</a>
<a href="#" class="twitter" title="Twitter">Twitter</a>
<a href="#" class="twitter2" title="Twitter">Twitter</a>
<a href="#" class="digg" title="Digg">Digg</a>
<a href="#" class="digg2" title="Digg">Digg</a>
<a href="#" class="google_buzz" title="Google Buzz">Google Buzz</a>
<a href="#" class="google_plus" title="Google +">Google +</a>
<a href="#" class="tumbler" title="Tumbler">Tumbler</a>
<a href="#" class="delicious" title="Delicious">Delicious</a>
<a href="#" class="plixi" title="Plixi">Plixi</a>
<a href="#" class="dribbble" title="Dribbble">Dribbble</a>
<a href="#" class="dribbble2" title="Dribbble">Dribbble</a>
<a href="#" class="stubleUpon" title="StubleUpon">StubleUpon</a>
<a href="#" class="lastFM" title="LastFM">LastFM</a>
<a href="#" class="mobypicture" title="MobyPicture">MobyPicture</a>
<a href="#" class="vimeo" title="Vimeo">Vimeo</a>
<a href="#" class="youtube" title="YouTube">YouTube</a>
<a href="#" class="youtube2" title="YouTube">YouTube</a>
<a href="#" class="myspace" title="MySpace">MySpace</a>
<a href="#" class="LinkedIn" title="LinkedIn">LinkedIn</a>
<a href="#" class="pinterest" title="Pinterest">Pinterest</a>
<a href="#" class="flickr" title="Flickr">Flickr</a>
<a href="#" class="vkontakte" title="Vkontakte">Vkontakte</a>
<a href="#" class="vkontakte2" title="Vkontakte">Vkontakte</a>
<a href="#" class="odnoklassniki" title="Odnoklassniki">Odnoklassniki</a>
<a href="#" class="gowalla" title="Gowalla">Gowalla</a>
<a href="#" class="dropbox" title="Dropbox">Dropbox</a>
<a href="#" class="skype" title="Skype">Skype</a>
<a href="#" class="ichat" title="iChat">iChat</a>
<a href="#" class="instagram" title="Instagram">Instagram</a>
<a href="#" class="evernote" title="Evernote">Evernote</a>
<a href="#" class="deviantart" title="Deviantart">Deviantart</a>
<a href="#" class="blogspot" title="Blogspot">Blogspot</a>
<a href="#" class="reddit" title="Reddit">Reddit</a>
<a href="#" class="technorati" title="Technorati">Technorati</a>
<a href="#" class="yahoo" title="Yahoo!">Yahoo!</a>
<a href="#" class="diigo" title="Diigo">Diigo</a>
<a href="#" class="blinklist" title="Blinklist">Blinklist</a>
<a href="#" class="bing" title="Bing">Bing</a>
<a href="#" class="behnce" title="Behnce">Behnce</a>
<a href="#" class="picasa" title="Picasa">Picasa</a>
<a href="#" class="forrst" title="Forrst">Forrst</a>
<a href="#" class="ffffound" title="Ffffound">Ffffound</a>
<a href="#" class="viddler" title="Viddler">Viddler</a>
<a href="#" class="friendfeed" title="Friendfeed">Friendfeed</a>
<a href="#" class="mobileme" title="MobileMe">MobileMe</a>
<a href="#" class="wordpress" title="Wordpress">Wordpress</a>
<a href="#" class="drupal" title="Drupal">Drupal</a>
<a href="#" class="paypal" title="PayPal">PayPal</a>
<a href="#" class="share" title="Share">Share</a>
<a href="#" class="mail" title="Mail">Mail</a>
<a href="#" class="rss" title="Rss">Rss</a>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!--//Socialize icons-->
</div>
<!--//Shortcodes-->
<!--footer_block-->
<div class="footer_block">
<div class="orange_line"><img src="images/orange_arrow.png" width="9" height="10" alt="" /></div>
<div class="footer_block_in">
<div class="one_fourth">
<h4>about us</h4>
Praesent pretium euismod malesuadas Vivamus orci ligula, ultrices non iacul es non dapibus ac lacus.
<div class="separator_line"></div>
<h4>contacts</h4>
<ul class="contacts">
<li class="home">2109 Broadway Suite 1418 <br>
New York, NY 10023
</li>
<li class="foot_phone">(O) 212 877 2110</li>
<!--<li class="skype">companyname</li>-->
<li class="email"><a href="mailto:#">[email protected]</a></li>
</ul>
</div>
<div class="one_fourth">
<h4>latest tweets</h4>
<div class="tweet_block"></div>
</div>
<div class="one_fourth">
<h4>flickr photostream</h4>
<div class="flickrs">
<div class="FlickrImages">
<ul></ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="one_fourth">
<h4>testimonials</h4>
<ul class="foot_testimonials">
<li>
Quisque bibendum aliquam arcu, at gravida velit ullamcorper ut. Mauris id vestibulum libero. Phasellus blandit elit id libero vestibulum lacinia. Fusce sem ligula, facilisis non semper non.
<div class="testimonial_author"><a href="#">Anna Smith, Company inc.</a></div>
</li>
<li>
Bibendum aliquam arcu, at gravida vestibulum libero. Phasellus blandit libero vestibulum lacinia. Fusce semlas facilisis non semper egestas.
<div class="testimonial_author"><a href="#">John Doe, Company inc.</a></div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!--//footer_block-->
</div>
<!--//main-->
<!--footer-->
<div class="footer_wrapper">
<div class="footer">
<div class="container relative">
<div class="foot_logo"><img src="images/oelogo_footer.png" alt="" width="66" height="64" /></div>
<div class="copyright">© 2013 Opera Ebony.<br/>all rights reserved</div>
<div class="foot_right">
<ul class="foot_menu">
<li><a href="index.html">Home</a></li>
<li><a href="who_we_are.html">Who we are</a></li>
<li><a href="our_work.html">Our Work</a></li>
<li><a href="donate.html">Donate</a></li>
<li class="current"><a href="typography.html">Features</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="full_width.html">Events</a></li>
<li class="last"><a href="contacts_full.html">Contacts</a></li>
</ul>
<div class="purchase">Developer by <a href="http://performingdesigns.com">Performing Designs</a></div>
</div>
<div class="clear"></div>
<a href="#" id="top">Back to top</a>
</div>
</div>
</div>
<!--footer-->
</div>
<!-- // wrapper -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/greyScale.js"></script>
<script type="text/javascript" src="js/jquery.tweet.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<script type="text/javascript">
$(function(){
$('#camera_shortcode_slider').camera({
height : '366px'
});
});
</script>
</body>
</html>