Added responsive demo
Glen Cheney
12 years ago
parent
c6d4202d0f
commit
dc88374e35
@ -0,0 +1,207 @@
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body { background: #EEE; color: #333; }
|
||||
|
||||
body::before {
|
||||
content: 'Default - 940px';
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background-color: hsla(110, 50%, 60%, .6);
|
||||
-webkit-transition: background .2s ease;
|
||||
-o-transition: background .2s ease;
|
||||
transition: background .2s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body::before {
|
||||
content: 'Large Desktop - 1200px+';
|
||||
background-color: hsla(10, 50%, 60%, .6);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
body::before {
|
||||
content: 'Portrait tablet to landscape and desktop - > 768px && < 979px';
|
||||
background-color: hsla(50, 50%, 60%, .6);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body::before {
|
||||
content: 'Phones to Tablets - < 767px';
|
||||
background-color: hsla(210, 50%, 60%, .6);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
body::before {
|
||||
content: 'Phones - < 480px';
|
||||
background-color: hsla(300, 50%, 60%, .6);
|
||||
}
|
||||
}
|
||||
|
||||
/*Hero image*/
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.product {
|
||||
margin: 20px 0 0;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product.w2 {
|
||||
/*width: ;*/
|
||||
}
|
||||
|
||||
.product.link {
|
||||
padding: 70px 20px 0;
|
||||
background-color: hsl(110, 50%, 60%);
|
||||
}
|
||||
|
||||
.product.h2 {
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.product {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.product.h2 {
|
||||
height: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
/*.product {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.product.h2 {
|
||||
height: 420px;
|
||||
}*/
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.product {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.product.h2 {
|
||||
height: 410px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show what the data-* attributes are */
|
||||
.product:before {
|
||||
content: attr(data-groups);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
|
||||
font-family: Menlo;
|
||||
}
|
||||
|
||||
/* Show what the data-* attributes are */
|
||||
.product:after {
|
||||
content: attr(data-megapixels) 'MP :: $' attr(data-price);
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
color: white;
|
||||
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
|
||||
font-family: Menlo;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-meta-name {
|
||||
text-transform: uppercase;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Helpers */
|
||||
.box {
|
||||
background: #444;
|
||||
color: #f2f2f2;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
.full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ghost-center-wrap:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ghost-center {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* filters */
|
||||
|
||||
.filter-options {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.product {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
display: table-cell;
|
||||
width: 33.33%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-content {
|
||||
display: table-cell;
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,148 @@
|
||||
|
||||
var Exports = {
|
||||
Modules : {}
|
||||
};
|
||||
|
||||
Exports.Modules.Gallery = (function($, undefined) {
|
||||
var $grid,
|
||||
$features,
|
||||
$megapixels,
|
||||
features = [],
|
||||
megapixels = [],
|
||||
columnWidths = {
|
||||
1170: 70,
|
||||
940: 60,
|
||||
724: 42
|
||||
},
|
||||
|
||||
_init = function() {
|
||||
$grid = $('.products');
|
||||
$features = $('.filter-options .features');
|
||||
$megapixels = $('.filter-options .megapixels');
|
||||
|
||||
// Features
|
||||
$features.find('input').on('change', function() {
|
||||
var $checked = $features.find('input:checked'),
|
||||
groups = [];
|
||||
|
||||
// At least one checkbox is checked, clear the array and loop through the checked checkboxes
|
||||
// to build an array of strings
|
||||
if ($checked.length !== 0) {
|
||||
$checked.each(function() {
|
||||
groups.push(this.value);
|
||||
});
|
||||
}
|
||||
features = groups;
|
||||
|
||||
_filter();
|
||||
});
|
||||
|
||||
// Megapixels
|
||||
$megapixels.children().on('click', function() {
|
||||
$(this).button('toggle');
|
||||
|
||||
var $checked = $megapixels.find('.active'),
|
||||
groups = [];
|
||||
|
||||
// Get all megapixel filters
|
||||
if ( $checked.length !== 0 ) {
|
||||
$checked.each(function() {
|
||||
groups.push(this.getAttribute('data-megapixels'));
|
||||
});
|
||||
}
|
||||
megapixels = groups;
|
||||
|
||||
_filter();
|
||||
});
|
||||
|
||||
|
||||
// instantiate the plugin
|
||||
$grid.shuffle({
|
||||
group : 'all',
|
||||
speed : 400,
|
||||
easing : 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
|
||||
columnWidth: function( containerWidth ) {
|
||||
var colW = columnWidths[ containerWidth ];
|
||||
if ( colW === undefined ) {
|
||||
colW = containerWidth;
|
||||
}
|
||||
return colW;
|
||||
},
|
||||
gutterWidth: function( containerWidth ) {
|
||||
var gutter = 0;
|
||||
switch ( containerWidth ) {
|
||||
case 1170:
|
||||
gutter = 30;
|
||||
break;
|
||||
case 940: // Falls through
|
||||
case 724:
|
||||
gutter = 20;
|
||||
break;
|
||||
default:
|
||||
gutter = 0;
|
||||
}
|
||||
return gutter;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_filter = function() {
|
||||
if ( _hasActiveFilters() ) {
|
||||
$grid.shuffle(function($el) {
|
||||
return _itemPassesFilters( $el.data() );
|
||||
});
|
||||
} else {
|
||||
$grid.shuffle('all');
|
||||
}
|
||||
},
|
||||
|
||||
_itemPassesFilters = function(data) {
|
||||
|
||||
// If a features filter is active
|
||||
if ( features.length > 0 && !_arrayContainsArray(data.groups, features) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// If a megapixels filter is active
|
||||
if ( megapixels.length > 0 && !_valueInArray(data.megapixels, megapixels) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
_hasActiveFilters = function() {
|
||||
return megapixels.length > 0 || features.length > 0;
|
||||
},
|
||||
|
||||
_valueInArray = function(value, arr) {
|
||||
return $.inArray(value, arr) !== -1;
|
||||
},
|
||||
|
||||
_arrayContainsArray = function(arrToTest, requiredArr) {
|
||||
var i = 0,
|
||||
dictionary = {},
|
||||
j;
|
||||
|
||||
// Convert groups into object which we can test the keys
|
||||
for (j = 0; j < arrToTest.length; j++) {
|
||||
dictionary[ arrToTest[j] ] = true;
|
||||
}
|
||||
|
||||
// Loop through selected features, if that feature is not in this elements groups, return false
|
||||
for (; i < requiredArr.length; i++) {
|
||||
if ( dictionary[ requiredArr[i] ] === undefined ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
return {
|
||||
init: _init
|
||||
};
|
||||
}(jQuery));
|
||||
|
||||
$(document).ready(function() {
|
||||
Exports.Modules.Gallery.init();
|
||||
});
|
||||
@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Shuffle Responsive Example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="https://plus.google.com/u/0/100210640453700033824" />
|
||||
|
||||
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="css/gallery.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body class="masonry">
|
||||
|
||||
<section class="gallery container">
|
||||
<div class="hero">
|
||||
<img src="http://placekitten.com/1170/400" alt="">
|
||||
<div class="ghost-center-wrap full">
|
||||
<div class="hero-text ghost-center">
|
||||
<div>Example</div>
|
||||
<h1>Responsive bootstrap</h1>
|
||||
<h2>With compounded filters</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Filters</h2>
|
||||
<div class="product-filter">
|
||||
<div class="filter-options row">
|
||||
|
||||
<ul class="span6 unstyled megapixels">
|
||||
<li data-megapixels="14-16" class="btn">14-16MP</li>
|
||||
<li data-megapixels="16-18" class="btn">16-18MP</li>
|
||||
<li data-megapixels="18-20" class="btn">18-20MP</li>
|
||||
<li data-megapixels="20+" class="btn">20MP+</li>
|
||||
</ul>
|
||||
|
||||
<ul class="span6 unstyled features">
|
||||
<li>
|
||||
<label><input type="checkbox" value="lcd"> LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="lightweight"> Lightweight</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="products">
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
|
||||
<div class="product-img">
|
||||
<img src="img/baseball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Explore <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
|
||||
<p>Massive Sensor Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Explore Sensor</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
|
||||
<div class="product-img">
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
|
||||
<div class="product-img">
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
|
||||
<div class="product-img">
|
||||
<img src="img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
|
||||
<div class="product-img">
|
||||
<img src="img/master-chief.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
|
||||
<div class="product-img">
|
||||
<img src="img/es-blue.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
|
||||
<div class="product-img">
|
||||
<img src="img/vestride-red.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
|
||||
<div class="product-img">
|
||||
<img src="img/newegg.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
|
||||
<p>Great Summer Travel Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Products for Summer Vacation</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
|
||||
<div class="product-img">
|
||||
<img src="img/eightfoldarc.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
|
||||
<div class="product-img">
|
||||
<img src="img/ground.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$149.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
|
||||
<div class="product-img">
|
||||
<img src="img/grassy-hills.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$789.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
|
||||
<div class="product-img">
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
|
||||
<div class="product-img">
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
|
||||
<div class="product-img">
|
||||
<img src="img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1>Another section</h1>
|
||||
<p>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 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.</p>
|
||||
<p>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 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.</p>
|
||||
<p>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 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.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
|
||||
<script src="js/jquery.shuffle.js"></script>
|
||||
<script src="js/gallery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue