File: /home/vmasmheia229/www/_html2/shortcodes.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="de"> <!--<![endif]--><head>
<meta charset="utf-8">
<!-- scaling not possible (for smartphones, ipad, etc.) -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Iris - A minimal & responsive HTML5/CSS3 Theme - Home</title>
<link href="files/css/fonts.css" rel="stylesheet" type="text/css" />
<link href="files/css/style.css" rel="stylesheet" type="text/css" />
<link href="files/css/isotope.css" rel="stylesheet" type="text/css" />
<link href="files/css/flexslider.css" rel="stylesheet" type="text/css" />
<link href="files/css/fancybox.css" rel="stylesheet" type="text/css" />
<link href="files/jplayer/jplayer.css" rel="stylesheet" type="text/css" />
<link href="files/css/mqueries.css" rel="stylesheet" type="text/css" media="screen" />
<script src="files/js/jquery-1.7.1.min.js"></script>
<script src="files/js/jquery.modernizr.min.js"></script>
</head>
<body id="content">
<div id="page">
<section id="top">
<div class="top_inner wrapperoverlay">
<div class="widget"><h6>Latest Tweets</h6>
<div id="twitter-widget">
<ul class="tweet-list"> <li><span class="tweet_time"><a href="">about 2 hours ago</a></span> <span class="tweet_text">Include your twitter feed or just a normal text widget. <a href="">By this theme here</a></span></li></ul>
</div>
</div>
<a href="" class="showhidetop" title="Show/Hide">open</a>
</div>
</section> <!-- END top -->
<header id="header">
<div class="header_inner wrapper">
<div class="header_top clearfix">
<div id="logo" class="left_float">
<a class="logotype" href="index.html"><img src="files/images/logo.png" alt="Logotype"></a>
</div>
<nav id="nav" class="right_float">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shortcodes.html" class="active">Features</a>
<ul>
<li><a href="shortcodes.html" class="active">Shortcodes</a></li>
<li><a href="pricingtable.html">Pricing Table</a></li>
<li><a href="">3r Level</a>
<ul>
<li><a href="">Menu Entry one</a></li>
<li><a href="">Menu Entry two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="portfolio-4-columns.html">Portfolio</a>
<ul>
<li><a href="portfolio-4-columns.html">4 Columns</a></li>
<li><a href="portfolio-3-columns.html">3 Columns</a></li>
<li><a href="portfolio-2-columns.html">2 Columns</a></li>
<li><a href="portfolio-ajax.html">Portfolio (Ajax)</a></li>
<li><a href="portfolio-single.html">Portfolio Single</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="pagetitle">
<div class="pagetitle_inner wrapperoverlay">
<h2><strong>Shortcodes</strong><span class="tagline">Take a look to different Elements</span></h2>
</div>
</section>
<section id="main">
<div class="main_inner wrapper clearfix">
<article>
<div class="column one_half">
<h4><strong>Buttons</strong></h4>
<p><a href="#" class="button white">Button Text</a> <a href="#" class="button blue">Button Text</a> <a href="#" class="button yellow">Button Text</a> <a href="#" class="button green">Button Text</a> <a href="#" class="button grey">Button Text</a> <a href="#" class="button pink">Button Text</a> <a href="#" class="button purple">Button Text</a> <a href="#" class="button orange">Button Text</a></p>
</div>
<div class="column one_half last">
<h4><strong>Toggles</strong></h4>
<div class="toggle">
<div class="toggle_title"><a href="" class="color" alt="toggle"><span class="toggle_icon">+</span><b>Toggle</b></a></div>
<div class="toggle_inner">Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.</div>
</div>
</div><div class="clear"></div>
<div class="column one_half">
<h4><strong>Alerts</strong></h4>
<p><p class="alert blue">Blue Alert</p><p class="alert red">Red Alert</p><p class="alert green">Green Alert</p>
</div>
<div class="column one_half last">
<h4><strong>Skills</strong></h4>
<div class="skill">
<span class="skill_name">Skill</span>
<div class="skill_bar"><div class="skill_active" style="width: 50%;"></div><span><i>50%</i></span></div>
</div>
<div class="skill">
<span class="skill_name">Skill</span>
<div class="skill_bar"><div class="skill_active" style="width: 60%;"></div><span><i>60%</i></span></div>
</div>
<div class="skill">
<span class="skill_name">Skill</span>
<div class="skill_bar"><div class="skill_active" style="width: 70%;"></div><span><i>70%</i></span></div>
</div>
</div><div class="clear"></div>
<div class="column one_half">
<h4><strong>1/2 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="column one_half last">
<h4><strong>1/2 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="clear"></div>
<div class="column one_third">
<h4><strong>1/3 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="column one_third">
<h4><strong>1/3 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="column one_third last">
<h4><strong>1/3 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="clear"></div>
<div class="column two_third">
<h4><strong>2/3 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
<div class="column one_third last">
<h4><strong>1/3 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
<div class="clear"></div>
<div class="column one_fourth">
<h4><strong>1/4 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
<div class="column one_fourth">
<h4><strong>1/4 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
<div class="column one_fourth">
<h4><strong>1/4 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
<div class="column one_fourth last">
<h4><strong>1/4 Column</strong></h4>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
</div>
<div class="clear"></div>
</article>
</div> <!-- END #main_inner -->
</section> <!-- END #main -->
<section id="bottom">
<div class="bottom_inner wrapperoverlay">
<div class="widget"><h6>Social Media</h6>
<div class="socialmedia">
<a class="facebook" href="index.html" target="_blank"><span>Facebook</span></a>
<a class="twitter" href="index.html" target="_blank"><span>Twitter</span></a>
<a class="dribbble" href="index.html" target="_blank"><span>Dribbble</span></a>
<a class="vimeo" href="index.html" target="_blank"><span>Vimeo</span></a>
<a class="flickr" href="index.html" target="_blank"><span>Flickr</span></a>
<a class="googleplus" href="index.html" target="_blank"><span>Google+</span></a>
</div>
</div>
</div>
</section> <!-- END #bottom -->
<footer id="footer">
<div class="footer_inner wrapper clearfix">
<div class="column one_third seperator">
<div class="widget">
<h6 class="sectiontitle">About Iris</h6>
<div id="text-widget">
<p>
Sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non
</p>
<p>
Sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non
</p>
<p>
<a href="about.html" class="color readmore"><span class="readmoreicon">+</span>read more</a>
</p>
</div>
</div>
</div>
<div class="column one_third seperator">
<div class="widget">
<h6 class="sectiontitle">Flickr Feed</h6>
<div id="flickr-widget">
<ul class="flickr-list">
<li><a href=""><img src="files/images/portfolio/thumb-work_01.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_02.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_03.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_04.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_05.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_06.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_07.jpg"></a></li>
<li><a href=""><img src="files/images/portfolio/thumb-work_08.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="column one_third last seperator">
<div class="widget">
<h6 class="sectiontitle">Latest Tweets</h6>
<div id="twitter-widget">
<ul class="tweet-list">
<li><span class="tweet_time"><a href="">about 5 hours ago</a></span> <span class="tweet_text">Nullam id dolor id nibh ultricies vehicula ut id elit.</span></li>
<li><span class="tweet_time"><a href="">about 8 hours ago</a></span> <span class="tweet_text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span></li>
<li><span class="tweet_time"><a href="">about 2 days ago</a></span> <span class="tweet_text">Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</span></li>
</ul>
</div>
</div>
</div>
</div> <!-- END .footer_inner -->
<div class="footer_bottom clearfix lightfooter">
<div class="left_float">Copyright © 2012 by Iris. All rights reserved</div>
<div class="right_float">Created by <a href="">Spab Rice</a> for <a href="">Themeforest</a></div>
</div>
</footer> <!-- END #footer -->
<a href="" class="totop" title="Back to top">ToTop</a>
</div> <!-- END #page -->
<!-- jquery -->
<script src="files/js/jquery.isotope.min.js"></script>
<script src="files/js/jquery.flexslider-min.js"></script>
<script src='files/js/jquery.easing.1.3.js'></script>
<script src='files/js/jquery.easing.compatibility.js'></script>
<script src="files/js/jquery.fancybox.pack.js"></script>
<script src="files/jplayer/jquery.jplayer.min.js"></script>
<script src="files/js/script.js"></script>
</body>
</html>