<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/attilahajzer/pen/QwMNjw?depth=everything&order=popularity&page=9&q=e-commerce&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'>
<style class="cp-pen-styles">h1{
text-align: center;
}
hr{
background-color: #1b96d5;
width: 150px; height: 1px;
border: 0;
margin: 0 auto;
}
section{background-color: #fff;}
section ul:after{
content: "";
width: 100%; height:0;
}
section ul li{
list-style-type: none;
}
section ul li:hover{cursor:pointer;}
section ul li img{margin: 0 auto; padding: 14px; text-align: center; transition: all 0.3s ease;}
section ul li:hover img, section ul li.active img {background-color: #f2f2f2; box-shadow: inset 0 0 15px #999;}
.app h3{ color: #1b96d5; font-weight: 100; text-align: center; }
.app p{text-align: center;}
</style></head><body>
<h1>Amazing Web Apps</h1>
<hr>
<br>
<div class="row"><br><br>
<div class="small-10 small-centered columns">
<section>
<ul class="small-block-grid-4 medium-block-grid-8 large-block-grid-8">
<li class="active smart-codes">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/FloaterCodes.png" alt="Smart Codes">
</li>
<li class="web-pages">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/WebPages.png" alt="Web Pages">
</li>
<li class="file-manager">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/FileManager.png" alt="File Manager">
</li>
<li class="blog">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Blog.png" alt="Blog App">
</li>
<li class="seo">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/SEO.png" alt="SEO App">
</li>
<li class="simple-cart">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/SimpleCart.png" alt="Simple Cart">
</li>
<li class="news-room">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/NewsRoom.png" alt="News Room">
</li>
<li class="multi-mailer">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/MultiMailer.png" alt="Multi Mailer">
</li>
<li class="showcase">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Showcase.png" alt="Showcase">
</li>
<li class="slideshow">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Slideshow.png" alt="Slideshow App">
</li>
<li class="media-albums">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/MediaAlbums.png" alt="Media Albums App">
</li>
<li class="calendar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Calendar.png" alt="Calendar App">
</li>
<li class="testimonials">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Testimonials.png" alt="Testimonials App">
</li>
<li class="ad-agent">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/AdAgent.png" alt="Ad Agent">
</li>
<li class="users">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/Users.png" alt="Users App">
</li>
<li class="integrated-help">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/55320/IntegratedHelp.png" alt="Integrated Help">
</li>
<ul>
</section>
<div id="smart-codes-info" class="smart-codes-info app small-10 small-centered columns">
<h3>Smart Codes</h3>
<p>Insert social media feeds, videos, news modules and more in a split second. Simply copy and paste one of our unique smart codes, add your link, hit save and watch the magic happen.</p>
</div>
<div id="pages-app-info" class="pages-app-info app small-10 small-centered columns">
<h3>Pages App</h3>
<p>Managing your content has never been easier. Add a new page with content, a graphic, a contact form and a video link or news feed... all in under 5 minutes.</p>
</div>
<div id="files-app-info" class="files-app-info app small-10 small-centered columns">
<h3>Files App</h3>
<p>Upload your documents, images and more. Plus, our integrated image resizer optimizes file size for lightning fast download speeds without compromising the quality of the image a bit.</p>
</div>
<div id="blog-info" class="blog-info app small-10 small-centered columns">
<h3>Blog App</h3>
<p>Help drive traffic to your website with your own personalized blog. This full-featured module is amazingly easy-to-use and includes built-in user- commenting, SEO and social media tools.</p>
</div>
<div id="seo-info" class="seo-info app small-10 small-centered columns">
<h3>SEO App</h3>
<p>Why spend thousands of dollars on Search Engine Optimization? SEO management has never been this easy. Our unique SEO tools give you an edge over your competitors and it's all broken down into terms that make sense to you.</p>
</div>
<div id="simple-cart-info" class="simple-cart-info app small-10 small-centered columns">
<h3>Simple Cart 2.0</h3>
<p>You've got products you want to sell online? Well, never before has e-commerce been so simple. It's so incredibly intuitive and it integrates seamlessly with PayPal and Stripe. SimpleCart is a powerful revenue generator.</p>
</div>
<div id="news-room-info" class="news-room-info app small-10 small-centered columns">
<h3>News Room</h3>
<p>Our easy-to-use News Room is the fastest and easiest way to get your press releases or company news on your website. Your visitors will enjoy browsing for articles through the one click summary page.</p>
</div>
<div id="multi-mailer-info" class="multi-mailer-info app small-10 small-centered columns">
<h3>Multi Mailer App</h3>
<p>Connect with your customers inbox. Add a newsletter subscription to your website for customers to opt-in and out of newsletters. Supports multiple groups and campaigns.</p>
</div>
<div id="showcase-info" class="showcase-info app small-10 small-centered columns">
<h3>Showcase App</h3>
<p>Definitely one of our star performances – the Showcase Modules helps you to present products, services or ideas with incredible front-end usability. Plus, multiple images are organized in an elegant masonary style.</p>
</div>
<div id="slideshow-info" class="slideshow-info app small-10 small-centered columns">
<h3>Slideshow</h3>
<p>Captivate your visitors with stunning slideshows. This tool is incredibly versatile, allowing you to customize your visitors experience. Just add images and select the styles from your preferences.</p>
</div>
<div id="media-albums-info" class="media-albums-info app small-10 small-centered columns">
<h3>Media Albums</h3>
<p>This is the simplest, most user-friendly photo gallery system on the internet. Create mutliple albums with multiple photos. It's easier than Facebook and images load faster with higher-quality.</p>
</div>
<div id="calendar-info" class="calendar-info app small-10 small-centered columns">
<h3>Calendar App</h3>
<p>Remarkably easy to post special dates and events to your site. Choose from several unique calendar floater codes to quickly add a calendar to any page to show relevant upcoming events. Ideal for churches, clubs or groups.</p>
</div>
<div id="testimonials-info" class="testimonials-info app small-10 small-centered columns">
<h3>Testimonials App</h3>
<p>Your customers have good things to say about you and your organization. Now you can share those testimonials easily and quickly on your website. Plus, our unique testimonial floater code has a positive effect on Google's Web bot.</p>
</div>
<div id="ad-agent-info" class="ad-agent-info app small-10 small-centered columns">
<h3>Ad Agent</h3>
<p>Generate extra revenues by placing Image Ads, Text Ads or even Google Ads on your website in a tactful way that doesn't scare off visitors. The Ad Agent is ideal for bloggers who want to generate extra revenues.</p>
</div>
<div id="users-info" class="users-info app small-10 small-centered columns">
<h3>Users App</h3>
<p>You don't have to do it all yourself. With this module you can delegate responsibilities to your staff. It's easy to create new user accounts. Just click 'Add New User', grant them access to specific modules and click 'Save'. Now your team is pulling together.</p>
</div>
<div id="help-info" class="help-info app small-10 small-centered columns">
<h3>Help App</h3>
<p>Our unique Help system follows you around. Simply click the help button wherever you are and get the information you need for the module you are working in, when you need it, without any unnecessary searching.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$(document).ready(function(){
$(".app").hide();
$("#smart-codes-info").show();
$("img").click(function(){
$("li").removeAttr("class");
$(this).parent("li").addClass("active");
});
$("li.smart-codes").click(function(){
$(".app").hide();
$(".smart-codes-info").fadeIn();
});
$("li.web-pages").click(function(){
$(".app").hide();
$(".pages-app-info").fadeIn();
});
$("li.file-manager").click(function(){
$(".app").hide();
$(".files-app-info").fadeIn();
});
$("li.blog").click(function(){
$(".app").hide();
$(".blog-info").fadeIn();
});
$("li.seo").click(function(){
$(".app").hide();
$(".seo-info").fadeIn();
});
$("li.simple-cart").click(function(){
$(".app").hide();
$(".simple-cart-info").fadeIn();
});
$("li.news-room").click(function(){
$(".app").hide();
$(".news-room-info").fadeIn();
});
$("li.multi-mailer").click(function(){
$(".app").hide();
$(".multi-mailer-info").fadeIn();
});
$("li.showcase").click(function(){
$(".app").hide();
$(".showcase-info").fadeIn();
});
$("li.slideshow").click(function(){
$(".app").hide();
$(".slideshow-info").fadeIn();
});
$("li.media-albums").click(function(){
$(".app").hide();
$(".media-albums-info").fadeIn();
});
$("li.calendar").click(function(){
$(".app").hide();
$(".calendar-info").fadeIn();
});
$("li.testimonials").click(function(){
$(".app").hide();
$(".testimonials-info").fadeIn();
});
$("li.ad-agent").click(function(){
$(".app").hide();
$(".ad-agent-info").fadeIn();
});
$("li.users").click(function(){
$(".app").hide();
$(".users-info").fadeIn();
});
$("li.integrated-help").click(function(){
$(".app").hide();
$(".help-info").fadeIn();
});
});
//# sourceURL=pen.js
</script>
</body></html>
