<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/ahsanrathore/pen/EavQeQ?depth=everything&order=popularity&page=2&q=shop&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<script>
function changeImage(elm) {
var obj = elm;
if (obj.getAttribute("class") == "thumb") {
obj.removeAttribute("class","full");
obj.setAttribute("class","full");
setTimeout(function(){
obj.nextElementSibling.style.display = "block";
}, 300)
} else {
obj.removeAttribute("class","thumb");
obj.setAttribute("class","thumb");
obj.nextElementSibling.style.display = "none";
}
}
function closeImage(elm) {
var obj = elm;
if (obj.previousElementSibling.getAttribute("class") == "full") {
obj.previousElementSibling.removeAttribute("class","thumb");
obj.previousElementSibling.setAttribute("class","thumb");
obj.style.display = "none";
}
}
</script>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<style class="cp-pen-styles">body { font-size: 18px; font-family: 'Roboto', sans-serif; font-weight: 400; }
.wrapper { width: 100%; }
.centered-wrapper { max-width: 1260px; width: 100%; margin: 0 auto; }
.item-wrap,
.general-desc-wrap { width: 100%; text-align:center; margin : 25px 0; }
.general-desc-wrap { padding : 0 85px; }
.item-wrap .item { position: relative; border: 1px solid #ccc; width: 342px; min-height: 397px; border-radius: 5px; padding: 25px; display:inline-block; margin-right: 10px; margin-bottom : 10px; vertical-align: top; }
.item-wrap .item h2 { margin: 0px 0 15px 0; padding: 0px; font-size: 28px; font-weight: 700; }
.item-wrap .item h3 { font-size: 24px; font-weight: 700; color: #C30; }
.item-wrap .item p { font-weight: 300; margin-top: 150px; }
.item-wrap .item img.thumb { height: 140px; cursor: pointer; background: #fff; left : 50%; margin-left: -55px; top: 60px; }
.item-wrap .item img.full { height: 397px; background: #f9f9f9; border-radius: 5px; cursor: pointer; z-index: 2; left: 0; margin-left : 0; top: 0; }
.item-wrap .item img.thumb,
.item-wrap .item img.full { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s; position: absolute; }
.close-icon { position: absolute; right: 15px; top: 15px; display:none; width: 24px; height: 24px; background: url(https://cdn4.iconfinder.com/data/icons/e-commerce-icon-set/48/Remove-32.png) left top no-repeat; background-size: 100%; z-index: 4; cursor: pointer; }
.button { background-color: #C63 ; color: #fff; border: 0px; padding: 7px 15px; font-weight : 400; font-size : 16px; outline: none; }
.sold-out { cursor: default; background-color:#eee; color: #aaa; }
.nav.nav-pills { text-align:center; margin-top : 20px; }
.nav.nav-pills li { float: none; display: inline-block; }
.item .panel { position:absolute; left: 0; top: 0; width: 100%; height: 372px; border-radius : 5px 5px 0px 0px; padding: 25px; box-sizing: border-box; overflow: auto; z-index : 3; }
.item .panel h2 { text-transform : uppercase; font-size : 22px; }
.item .panel p { margin-top: 15px; }
.item .panel .close-icon { right: 24px; top: 24px; }</style></head><body>
<html ng-app="store">
<body ng-controller="StoreController as store">
<div class="wrapper">
<div class="centered-wrapper">
<div class="general-desc-wrap">
<h1>Shopping Cart - Angular JS</h1>
<p>AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. <br> Read on to find out how.</p>
</div>
<!--Item Wrap: begins-->
<div class="item-wrap">
<!--Item: begins-->
<div class="item" ng-repeat="product in store.products | orderBy: 'name'">
<h2>{{product.name | uppercase}}</h2>
<img class="thumb" ng-src="{{product.image}}" onclick="changeImage(this);" />
<span class="close-icon" onclick="closeImage(this);"></span>
<p>{{product.description | limitTo : 95}}</p>
<h3>{{product.price | currency}}</h3>
<button class="button sold-out" disabled ng-show="product.soldOut">Sold Out</button>
<button class="button" ng-show="product.canPurchase">Add to Cart</button>
<div class="panel" ng-show="tab === 1">
<h2>Description</h2>
<p>{{product.description}}</p>
<span class="close-icon" ng-click="tab = 0" style="display:block;"></span>
</div>
<div class="panel" ng-show="tab === 2">
<h2>Reviews</h2>
<blockquote>None Yet</blockquote>
<span class="close-icon" ng-click="tab = 0" style="display:block;"></span>
</div>
<ul class="nav nav-pills">
<li ng-class="{active:tab === 1}"><a href ng-click="tab = 1">Description</a></li>
<li ng-class="{active:tab === 2}"><a href ng-click="tab = 2">Reviews</a></li>
</ul>
</div>
<!--Item: ends-->
</div>
<!--Item Wrap: ends-->
</div>
</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script >// Angular JS Test App
(function(){
var app = angular.module('store', []);
app.controller("StoreController", function(){
this.products = gems;
});
var imgPath = "http://pre05.deviantart.net/e7cc/th/pre/f/2012/199/0/8/";
var gems = [
{
name : "Product 1",
price: "2.50",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : false,
soldOut : true,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
},
{
name : "Product 2",
price: "1.50",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : true,
soldOut : false,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
},
{
name : "Product 3",
price: "1.25",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : true,
soldOut : false,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
},
{
name : "Product 4",
price: "1.75",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : true,
soldOut : false,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
},
{
name : "Product 5",
price: "3.50",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : false,
soldOut : true,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
},
{
name : "Product 6",
price: "2.75",
description : "AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development. AngularJS is a toolset for building the framework most suited to your application development.",
canPurchase : true,
soldOut : false,
image : imgPath + "gem_png_by_doloresdevelde-d57oyqr.png"
}
]
})();
//# sourceURL=pen.js
</script>
</body></html>
