header
<div id="fb-root"></div>
<script type="text/javascript">
var fbTest;
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '387357234697326', // App ID from the app dashboard
channelUrl : '/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
fbTest = true;
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api('/me', function(response) {
var pic = response.id;
pic = "http://graph.facebook.com/"+ pic +"/picture"
$("#accountTrigger .m-supernav-account-icon").attr('style', 'background-image:url('+ pic +'); background-size: 100% auto;background-position: 0 0;top: -0.72em;')
});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
//console.log('1')
} else {
// the user isn't logged in to Facebook.
//console.log('2')
}
});
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<header class="master-header">
<nav class="m-supernav fluid bottom-border avenir clearfix">
<div class="l-wrapper">
<a href="javascript:void(0);" id="navTrigger" class="m-supernav-navtrigger display-block float-left m-supvernav-icon no-desktop">
<div class="m-supernav-navtrigger-icon icon-kahuna-burger"></div>
</a>
<div class="divider float-left no-margin display-block no-desktop"></div>
<div class="m-supernav-logo float-left logo" itemprop="brand" itemscope itemtype="http://schema.org/Organization">
<a href="/tf-html/">
<!--[if gte IE 9]><!-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="1121px" height="258px" viewBox="0 0 1121 258" overflow="visible" enable-background="new 0 0 1121 258">
<defs></defs>
<path d="M105.198,99.239H59.545V55.242H33.742v43.997H0v21.836h33.742v85.016c0,32.09,5.955,51.938,42.676,51.938c9.591,0,21.173-1.657,30.103-5.625l-0.992-23.489c-6.948,3.639-15.219,5.294-22.827,5.294c-22.827,0-23.157-15.878-23.157-35.726v-77.408h45.652V99.239z"/>
<path d="M235.795,210.726c-12.241,15.544-27.128,23.484-49.292,23.484c-28.119,0-48.628-22.825-50.613-49.619h125.047v-8.274c0-51.276-29.774-81.044-73.441-81.044c-45.651,0-79.394,33.415-79.394,81.379c0,44.99,29.773,81.378,78.401,81.378c28.78,0,50.615-8.599,68.809-32.087L235.795,210.726z M135.889,162.757c3.309-26.135,22.165-43.665,50.613-43.665c28.449,0,45.651,17.53,46.645,43.665H135.889z"/>
<path d="M283.404,254.055h25.802V3.967h-25.802V254.055z"/>
<path d="M459.375,210.726c-12.24,15.544-27.126,23.484-49.292,23.484c-28.118,0-48.628-22.825-50.614-49.619h125.048v-8.274c0-51.276-29.774-81.044-73.442-81.044c-45.649,0-79.393,33.415-79.393,81.379c0,44.99,29.773,81.378,78.401,81.378c28.78,0,50.615-8.599,68.809-32.087L459.375,210.726z M359.47,162.757c3.311-26.135,22.167-43.665,50.614-43.665c28.448,0,45.65,17.53,46.646,43.665H359.47z"/>
<path d="M521.212,254.055h25.805v-132.98h37.711V99.239h-37.711v-29.11c0-26.794,0.991-46.312,27.787-46.312c5.956,0,11.909,1.321,17.534,3.312l3.637-23.161C591.015,1.319,582.744,0,576.128,0c-41.684,0-54.917,26.792-54.917,64.505v34.733H487.47v21.836h33.742V254.055z"/>
<path d="M604.574,254.055h25.803V3.967h-25.803V254.055z"/>
<path d="M649.544,176.651c0,48.298,35.066,81.378,82.703,81.378c47.638,0,82.703-33.08,82.703-81.378c0-48.299-35.065-81.379-82.703-81.379C684.611,95.272,649.544,128.352,649.544,176.651z M677.333,176.651c0-32.421,21.501-57.56,54.914-57.56s54.914,25.138,54.914,57.56c0,32.422-21.501,57.558-54.914,57.558S677.333,209.073,677.333,176.651z"/>
<path d="M831.828,254.055h25.802v-75.421c0-35.397,13.891-57.559,45.319-57.559c4.629,0,9.594,0.655,13.894,1.983l1.656-26.136c-3.638-1.318-7.277-1.65-10.586-1.65c-25.475,0-44.657,14.221-51.608,29.439h-0.663c0-8.601-0.659-17.2-0.659-25.473h-24.479c0,10.254,1.325,22.492,1.325,36.718V254.055z"/>
<path d="M945.886,135.957c12.242-11.245,29.441-16.865,45.979-16.865c24.15,0,38.375,11.576,38.375,34.068v4.634h-9.922c-38.043,0-97.592,2.977-97.592,54.251c0,30.104,26.137,45.983,57.564,45.983c23.484,0,40.69-11.244,50.947-27.129h0.658c0,6.619,0,16.212,1.654,23.155h24.809c-1.325-7.932-2.316-17.856-2.316-26.792v-66.492c0-43.664-19.184-65.499-64.836-65.499c-22.498,0-45.652,7.607-61.532,23.82L945.886,135.957z M1030.24,179.627v9.928c-0.662,25.138-15.878,46.644-45.646,46.644c-19.522,0-34.076-7.284-34.076-26.8c0-20.844,21.172-29.772,53.922-29.772H1030.24z"/>
<path d="M1100.321,255.727c11.104,0,20.591-8.628,20.591-20.431c0-11.7-9.487-20.323-20.591-20.323 c-11.209,0-20.697,8.623-20.697,20.323C1079.624,247.099,1089.112,255.727,1100.321,255.727z M1083.722,235.296 c0-9.65,7.275-16.927,16.599-16.927c9.217,0,16.493,7.277,16.493,16.927c0,9.81-7.276,17.028-16.493,17.028 C1090.998,252.324,1083.722,245.106,1083.722,235.296z M1096.01,236.908h4.098l6.194,10.191h3.99l-6.687-10.348 c3.456-0.432,6.097-2.264,6.097-6.469c0-4.636-2.748-6.686-8.303-6.686h-8.95v23.503h3.561V236.908z M1096.01,233.891v-7.273h4.847 c2.482,0,5.125,0.538,5.125,3.451c0,3.608-2.695,3.822-5.713,3.822H1096.01z"/>
</svg>
<!--<![endif]-->
</a>
</div>
<div class="m-supernav-right-tray">
<div class="m-supernav-item m-supernav-number no-mobile clearfix">
<div class="m-supernav-content" itemprop="telephone">800-835-3356</div> </div>
<div class="m-supernav-item m-supernav-ask clearfix">
<div class="m-supernav-icon icon-ask"></div>
<div class="m-supernav-content m-supernav-ask-status no-mobile">Ask an Expert</div>
</div>
<div class="m-supernav-item m-supernav-account clearfix">
<a id="accountTrigger" href="#">
<div class="m-supernav-icon icon-user"></div>
<div class="m-supernav-content m-supernav-account-status">Log In</div>
</a>
</div>
<div class="m-supernav-item m-supernav-cart clearfix">
<a id="cartTrigger" href="#">
<div class="icon-cart"><span class="cart-number">3</span></div>
<div class="m-supernav-content">Cart</div>
</a>
</div>
</div>
<!-- m-supernav-right-tray -->
</div>
</nav>
<!-- .m-supernav -->
</header>
<nav class="m-navbar position-absolute no-top no-bottom full-height fluid no-top no-left bottom-border clearfix">
<div class="l-wrapper">
<div id="search" class="m-navbar-search-wrapper m-navbar-item bottom-border float-left no-right no-padding no-border">
<form class="m-navbar-search-form">
<input type="text" class="m-navbar-search full-border" placeholder="Search"/>
<button type="submit" class="m-navbar-search-btn position-absolute no-border"></button>
</form>
</div>
<ul class="m-navbar-toplevel fluid auto-height no-margin no-padding">
<li class="m-navbar-item bottom-border float-left m-navbar-item-first">
<a class="m-navbar-link uppercase float-left position-relative" href="/tf-html/batch4/subcategory_promos">Mother's Day</a>
</li>
<li class="m-navbar-item bottom-border float-left">
<a class="m-navbar-link uppercase float-left position-relative" href="/tf-html/batch3/deal_of_the_day">Deal of the Day</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-has-subnav">
<a class="m-navbar-link uppercase float-left position-relative m-subnav-trigger" data-subnav="occasions" href="#">Occasions</a>
<ul class="m-navbar-secondlevel fluid auto-height no-margin no-padding no-right">
<li class="m-navbar-pinkline"></li>
<li class="m-navbar-item bottom-border float-left no-desktop"><a class="m-navbar-link uppercase float-left position-relative m-navbar-escape alt-pink" href="#">Main Menu</a></li>
<li class="m-navbar-set m-navbar-set-large no-border">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Featured Occasions</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Anniversary</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Birthday</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Congratulations</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Corporate Gifts</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Funeral & Sympathy</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Get Well Soon</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Housewarming Gifts</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Love & Romance</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Newborn Baby</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Teacher Gifts</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Say "I'm Sorry"</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Say "Thank You"</a></li>
<li class="m-navbar-item bottom-border float-left no-mobile"><a class="m-navbar-link uppercase float-left position-relative" href="#">Send "Just Because"</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Occasions</a></li>
</ul>
</li>
<li class="m-navbar-set m-navbar-occassions">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Upcoming Occasions</span></li>
<li class="m-navbar-item bottom-border float-left m-navbar-upcoming">
<div class="m-navbar-cal float-left centered no-mobile">
<span class="m-navbar-month horizonal-seperator float-left">Mar</span>
<span class="m-navbar-day horizonal-seperator float-left">25</span>
</div>
<a class="m-navbar-link uppercase float-left position-relative" href="#">Passover</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-upcoming">
<div class="m-navbar-cal float-left centered no-mobile">
<span class="m-navbar-month horizonal-seperator float-left">Mar</span>
<span class="m-navbar-day horizonal-seperator float-left">25</span>
</div>
<a class="m-navbar-link uppercase float-left position-relative" href="#">Easter</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-upcoming">
<div class="m-navbar-cal float-left centered no-mobile">
<span class="m-navbar-month horizonal-seperator float-left">Mar</span>
<span class="m-navbar-day horizonal-seperator float-left">25</span>
</div>
<a class="m-navbar-link uppercase float-left position-relative" href="#">Administative Professionals Week</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-upcoming m-navbar-cal-birthday">
<div class="m-navbar-cal float-left centered no-mobile">
<span class="m-navbar-month horizonal-seperator float-left">Feb</span>
<span class="m-navbar-day horizonal-seperator float-left">1</span>
</div>
<a class="m-navbar-link uppercase float-left position-relative" href="#">Benjamin's Birthday</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-upcoming m-navbar-cal-facebook">
<div class="m-navbar-cal float-left centered no-mobile">
<span class="m-navbar-month horizonal-seperator float-left">Feb</span>
<span class="m-navbar-day horizonal-seperator float-left">1</span>
</div>
<a class="m-navbar-link uppercase float-left position-relative" href="#">Benjamin's Birthday</a>
</li>
</ul>
</li>
<li class="m-navbar-set">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Birthday Bestsellers</span></li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/thumbnail-fpo.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq2.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq3.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq4.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-has-subnav">
<a class="m-navbar-link uppercase float-left position-relative m-subnav-trigger" href="#">Shop By</a>
<ul class="m-navbar-secondlevel fluid auto-height no-margin no-padding no-right">
<li class="m-navbar-pinkline"></li>
<li class="m-navbar-item bottom-border float-left no-desktop"><a class="m-navbar-link uppercase float-left position-relative m-navbar-escape alt-pink" href="#">Main Menu</a></li>
<li class="m-navbar-set no-border">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Type of Flower</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Roses</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Tulips</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Lilies</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Gerberas</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Daisies</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Sunflowers</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Carnations</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Flower Types</a></li>
</ul>
</li>
<li class="m-navbar-set">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Price</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Under $40</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">$40 -$60</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">$60 - $80</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Over $80</a></li>
</ul>
</li>
<li class="m-navbar-set m-navbar-occassions">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Color & Style</span></li>
<li class="m-navbar-item bottom-border float-left m-navbar-color-picker clearfix">
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#e20000;" data-color="Red"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#ff7800;" data-color="Orange"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#ffd200;" data-color="Yellow"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#04ac63;" data-color="Green"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#005ec8;" data-color="Blue"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#a859cd;" data-color="Purple"></a>
<a href="#" class="m-navbar-color position-relative float-left" style="background-color:#ff8ac1;" data-color="Pink"></a>
<a href="#" class="m-navbar-color position-relative float-left white full-border" style="" data-color="White"></a>
<a href="#" class="m-navbar-color position-relative float-left rainbow" style="" data-color="Rainbow"></a>
</li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Fun</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Traditional</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Modern</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Elegant</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Exotic</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Styles</a></li>
</ul>
</li>
<li class="m-navbar-set">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Bestsellers</span></li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/thumbnail-fpo.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq2.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq3.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/mega_bouq4.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-has-subnav">
<a class="m-navbar-link uppercase float-left position-relative m-subnav-trigger" href="#">Collections</a>
<ul class="m-navbar-secondlevel fluid auto-height no-margin no-padding no-right">
<li class="m-navbar-pinkline"></li>
<li class="m-navbar-item bottom-border float-left no-desktop"><a class="m-navbar-link uppercase float-left position-relative m-navbar-escape alt-pink" href="#">Main Menu</a></li>
<li class="m-navbar-set no-border">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-collection">
<figure class="fluid">
<img data-src="/tf-html/images/monet-sample.jpg" src="/tf-html/images/pixel.gif" alt="collection title">
</figure>
<p class="m-navbar-text centered">Lorem ipsum dolor sit amet lorem ipsum dolor.</p>
<a href="#" class="m-navbar-link centered uppercase float-left position-relative alt-pink">Shop Monet’s Garden</a>
</li>
</ul>
</li>
<li class="m-navbar-set no-mobile">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-collection">
<figure class="fluid">
<img data-src="/tf-html/images/parisian-sample.jpg" src="/tf-html/images/pixel.gif" alt="collection title">
</figure>
<p class="m-navbar-text centered">Lorem ipsum dolor sit amet lorem ipsum dolor.</p>
<a href="#" class="m-navbar-link centered uppercase float-left position-relative alt-pink">Shop Parisian Elegance</a>
</li>
</ul>
</li>
<li class="m-navbar-set no-mobile">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-collection">
<figure class="fluid">
<img data-src="/tf-html/images/lovely-sample.jpg" src="/tf-html/images/pixel.gif" alt="collection title">
</figure>
<p class="m-navbar-text centered">Lorem ipsum dolor sit amet lorem ipsum dolor.</p>
<a href="#" class="m-navbar-link centered uppercase float-left position-relative alt-pink">Shop Lovely Lillies</a>
</li>
</ul>
</li>
<li class="m-navbar-set">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">More Collections</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Monet’s Garden</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Parisian Elegance</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Lovely Lillies</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Monet’s Garden</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Parisian Elegance</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Lovely Lillies</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Monet’s Garden</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Collections</a></li>
</ul>
</li>
</ul>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-has-subnav">
<a class="m-navbar-link uppercase float-left position-relative m-subnav-trigger" href="#">Plants & Gifts</a>
<ul class="m-navbar-secondlevel fluid auto-height no-margin no-padding no-right">
<li class="m-navbar-pinkline"></li>
<li class="m-navbar-item bottom-border float-left no-desktop"><a class="m-navbar-link uppercase float-left position-relative m-navbar-escape alt-pink" href="#">Main Menu</a></li>
<li class="m-navbar-set no-border">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Plants</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Bestselling Plants</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Flowering Plants</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Green Plants</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Orchids & Tropical Plants</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Sympathy Plants</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Plants</a></li>
</ul>
</li>
<li class="m-navbar-set">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Gifts</span></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Gift Baskets</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">The Lavish Collection</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative" href="#">Gift Guides</a></li>
<li class="m-navbar-item bottom-border float-left"><a class="m-navbar-link uppercase float-left position-relative alt-pink" href="#">Shop All Gifts</a></li>
</ul>
</li>
<li class="m-navbar-set m-navbar-set-large">
<ul>
<li class="m-navbar-item bottom-border float-left m-navbar-divider"><span class="m-navbar-title uppercase float-left position-relative">Bestsellers</span></li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_1.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_2.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_3.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_4.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_5.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_6.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_7.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-thumbnail">
<a class="m-navbar-link uppercase float-left position-relative" href="#">
<figure class="fluid">
<img data-src="/tf-html/images/plants_thumbs/plant_thumb_8.jpg" src="/tf-html/images/pixel.gif" alt="Bouquet Title">
</figure>
<span class="fluid centered float-left">$49.95</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="m-navbar-quickshop m-navbar-item bottom-border float-left m-navbar-has-subnav">
<span class="m-navbar-quick-text no-mobile">In a hurry?</span>
<a href="#" id="calendarTrigger" class="m-navbar-link uppercase float-left position-relative alt-pink m-subnav-trigger ">Quick Shop</a>
<ul class="m-navbar-secondlevel fluid auto-height no-margin no-padding m-navbar-short no-right">
<li class="m-navbar-pinkline"></li>
<li class="m-navbar-item bottom-border float-left no-desktop"><a class="m-navbar-link uppercase float-left position-relative m-navbar-escape alt-pink" href="#">Main Menu</a></li>
<li class="m-navbar-item bottom-border float-left">
<h2 class="no-border no-desktop font-size-17px">Quick Shop</h2>
<form id="quickForm">
<div class="form-field">
<select>
<option selected="selected">Select Occasion</option>
<option>Birthday</option>
<option>Anniversary</option>
<option>Congratulations</option>
<option>Funeral</option>
<option>Get Well Soon</option>
<option>Newborn Baby</option>
<option>"Thank You"</option>
<option>Just Because</option>
</select>
</div>
<div class="form-field">
<select>
<option selected="selected">Select Price</option>
<option>Under $40</option>
<option>$40 - $60</option>
<option>$60 - $80</option>
<option>Over $80</option>
</select>
</div>
<div class="form-field">
<select>
<option selected="selected">Select Style</option>
<option>Fun</option>
<option>Traditional</option>
<option>Modern</option>
<option>Elegant</option>
<option>Exotic</option>
</select>
</div>
<div class="form-field">
<input type="text" placeholder="Recipient Zip Code"/>
</div>
<div class="deliveryWrap form-field">
<input id="deliveryDateQuickShop" type="text" placeholder="Delivery Date" class="delivery_date"/>
</div>
<input id="quickShopBtn" type="submit" class="btn" value="Find Bouquets"/>
</form>
</li>
</ul>
</li>
<li class="m-navbar-item bottom-border float-left m-navbar-divider no-desktop"><span class="m-navbar-title uppercase float-left position-relative">Customer Service</span>
</li>
<li class="m-navbar-footer m-navbar-item bottom-border float-left no-desktop">
<a href="mailto:service@teleflora.com" class="m-navbar-link uppercase float-left position-relative">e-mail us</a>
</li>
<li class="m-navbar-footer m-navbar-item bottom-border float-left no-desktop">
<a href="tel:+18008353356" class="m-navbar-link uppercase float-left position-relative" itemprop="telephone">800-835-3356</a> </li>
</ul>
<div id="secondLevelBkg" class="m-navbar-secondlevel-bkg">
<div class="m-navbar-pinkline"></div>
</div>
<div id="secondLevelBkgQS" class="m-navbar-secondlevel-bkg is-quickshop">
<div class="m-navbar-pinkline"></div>
</div>
<!-- .m-navbar-toplevel -->
</div>
<!-- .m-navbar-wrapper -->
</nav>
<!-- .m-navbar -->
<div class="l-wrapper">
<div class="m-account">
<div class="m-account-arrow"></div>
<div class="m-account-signin">
<form id="logInForm">
<div class="form-wrapper">
<label for="email">*email</label>
<input id="email" name="email" type="email" class="full-width" required/>
<!-- <span class="error">Please enter a vaild email address</span> -->
</div>
<div class="form-wrapper">
<label for="password">*password</label>
<input id="password" name="password" type="password" class="full-width" required/>
<!-- <span class="error">Please enter a valid password</span> -->
</div>
<div class="form-wrapper">
<a href="/tf-html/batch3/homepage_logged" id="logInHeader" name="logInHeader" class="btn full-width submit">Log In To Account</a>
<a href="#" class="passive-cta centered horizonal-seperator">Forgot Password</a>
</div>
</form>
<div class="divider"></div>
<div class="form-wrapper">
<a href="#" id="fbLogin" class="btn btn-facebook">Facebook Log In</a>
</div>
<div class="form-wrapper">
<span class="centered shrunken horizonal-seperator">or</span>
<a href="/tf-html/layouts/account/signup/" class="btn full-width">Create a new account</a>
</div>
</div>
<script type="javascipt/text" id="accountNavLinks">
<div class="m-account-arrow"></div>
<nav class="m-nav clearfix">
<div class="l-wrapper">
<ul class="m-nav-list">
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/order-history">Order History</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/info">Account Info</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/password">Change Password</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/reminders">Reminders</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/address-book">Address Book</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/subscriptions">Email Preferences</a></li>
<li class="m-nav-list-item"><a class="m-nav-list-item-link" href="/tf-html/batch1/account/logout">Log Out</a></li>
</ul>
</div>
</nav>
</script>
</div>
</div>
<div class="m-navbar-offcanvas-divider no-top no-bottom full-height"></div>
<script type="text/javascript">
// modular loader
var headerLoad = function(){
if(initLoad){
Modernizr.load({
load: [
'/tf-html/javascripts/modules/search-ac.js'
]
});
// end loop
clearInterval(headerInterval);
}
}
// waitTill is set to true after jquery is done being loaded in footer
var headerInterval = setInterval(headerLoad, 10);
</script>
Classes used:
m-supernav - super nav for the 800 number, ask an expert, log in, and cart.
m-navbar - classes used for elements in the main navigation area.
m-navbar-link - link styling for navbar objects
m-navbar-secondlevel - second tier navigation.
All Javascript is included in the global javascript file
Functions in use
expandNavbar - toggles 'is-navbar-expanded' on body to reveal off canvas navigation.
touchExpandSubnav - expands second tier navigation in mobile
escapeSubnav - hides second teir navigation
expandAccount - Expands account log-in
mouseExpandSubnav - Expands subnav in non-touch screen environments.
mouseCloseSubnav - Closes subnav in non-touch screen environments.
bookmarks-bar
<script type="text/javascript">
var bookmarksJSON = "/tf-html/javascripts/json/bookmarks-bar.json";
// get current saved bouquets
var loadBookmarksBar = function(){
if(initLoad){
// check for global intial load variable
Modernizr.load([{
load: [
'/tf-html/javascripts/modules/bookmarks-bar.js',
'/tf-html/stylesheets/modules/bookmarks-bar/m-bookmarks-bar.css'
],
//load bookmarks-bar related assets
complete: function(){
//callback function after initial asset load.
}
}]);
if(!Modernizr.mq('only all and (min-width: 818px)')){
// loading flexslider for mobile thumbnails
// IMPORTANT NOTE: ONLY NEEDED FOR STANDALONE USE. FLEXSLIDER SHOULD BE PART OF THE BASE TELEFLORA JAVASCRIPT
Modernizr.load([
'/tf-html/javascripts/modules/jquery.flexslider.js',
'/tf-html/stylesheets/modules/flexslider.css',
]);
}
//end small screen
clearInterval(bookmarksInterval)
// clear interval for bookmarks async loading
}
};
var bookmarksInterval = setInterval(loadBookmarksBar, 10);
// set interval to check for total page load before loading bookmarks bar assets
</script>
CSS Partial Isolated CSS file
All CSS should be intergrated into the base level screen.css file
Classes used:
.m-bookmarks-bar- Fixes the grey bar to the bottom of the page.m-bookmarks-bar .m-product-mini- unique .m-product-mini override styles for use in the bookmarks bar..m-bookmarks-bar-nav- Navigation for the bookmarks bar.
Bookmarks Bar
.m-bookmarks-bar {
position: fixed;
right: 0;
left: 0;
bottom: -28.7em;
margin-right: 0%;
z-index: 1;
-moz-transition: bottom 0.25s;
-webkit-transition: bottom 0.25s;
-o-transition: bottom 0.25s;
transition: bottom 0.25s;
box-shadow: -2em;
}
.m-bookmarks-bar .m-product-mini {
position: relative;
overflow: hidden;
-moz-transition: bottom 0.25s;
-webkit-transition: bottom 0.25s;
-o-transition: bottom 0.25s;
transition: bottom 0.25s;
}
@media screen and (min-width: 58.46254em) {
.m-bookmarks-bar {
bottom: -27.5em;
}
}
Bookmarks Bar Nav
.m-bookmarks-bar-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 1em 0;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: whitesmoke;
}
@media screen and (min-width: 58.46254em) {
.m-bookmarks-bar-nav {
padding: 0.5em 0;
}
}
Bookmarks Content
#bookmarksContent {
padding-top: 3em;
height: 28.5em;
background-color: #fff;
}
.is-bookmarks-ready .m-bookmarks-bar {
bottom: -23.7em;
}
@media screen and (min-width: 58.46254em) {
.is-bookmarks-ready .m-bookmarks-bar {
bottom: -25.7em;
}
}
.is-bookmarks-expanded .m-bookmarks-bar {
bottom: 0;
}
.is-bookmarks-expanded .m-bookmarks-bar .icon-arrow-up-pink {
background-position: -3px -59px;
}
.is-bookmark-removed.m-product-mini {
bottom: -27.5em;
}
#bookmarksBar .m-product-mini p {
display: none !important;
}
All Javascript is included in the bookmarks bar javascript
Trigger object selector: $("#bookmarkTrigger")
Functions in use:
removeBookmarked - Removes a bookmarked bouquet from #bookmarksBar. *DOES NOT REMOVE ANYTHING FROM THE JSON ARRAY. THIS MUST BE DONE SERVER SIDE.
fillBookmarks - Adds the bookmarked bouquets to the #bookmarksBar from the JSON array.
slideBookmarks - from touch devices. used so the bookmarks bar can be touched and dragged.
showBookmarks - opens the bookmarks bar tray
Some important notes:
- Touch events are going to be bound in touch screens, each function takes these nuances into consideration. The conditional statement for this is
Modernizr.touch. - All of the markup is applied to the DOM using
bookmarks-bar.js.
product-mini
<div class="m-product-mini">
<a href="/tf-html/batch2/pdp">
<figure class="fluid">
<img src="/tf-html/images/bouqs/cat_bouq_03.png">
</figure>
</a>
<span class="m-product-mini-stars">
<span class="m-product-mini-stars-rating stars-4">4 Stars</span>
</span>
<a href="/tf-html/batch2/pdp" class="m-category-flower-link centered text-large">How Sweet It Is</a><br/>
<a href="/tf-html/batch2/pdp" class="centered price">$34.95</a><br/>
<a href="/batch2/pdp">Buy Now</a>
</div>
CSS Partial Isolated CSS file
All CSS should be intergrated into the base level screen.css file
Classes used:
.m-product-mini- Small product size..m-product-mini .text-large- Text styles for product mini..m-product-mini-recommends, .m-product-mini-stars, .m-product-mini-stars-rating- Either the rating and "Teleflora Reccomends" messaging below the product thumbnail.
Product Mini
.m-product-mini {
width: 100%;
max-width: 160px;
display: inline-block;
float: none;
vertical-align: top;
margin-left: 2%;
margin-right: 0;
margin-bottom: 1em;
position: relative;
text-align: center;
}
Product Mini Text
.m-product-mini .text-large {
font-size: 1.2em;
line-height: 1.25em;
margin-bottom: 0em;
}
.m-product-mini .text-large a {
color: black;
}
Product Sub Classification
.m-product-mini-recommends, .m-product-mini-stars, .m-product-mini-stars-rating {
height: 0.9em;
display: block;
margin: 0 auto;
}
Product Stars
Stars are assigned with the following classes:
.stars-1.stars-1-5.stars-2.stars-2-5.stars-3.stars-3-5.stars-4.stars-4-5.stars-5
.m-product-mini-stars, .m-product-mini-stars-rating {
background-image: url(data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QN0aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAxNCA3OS4xNTE0ODEsIDIwMTMvMDMvMTMtMTI6MDk6MTUgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MEE4MDExNzQwNzIwNjgxMTg4QzY5MjMyODVDNzNCREUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTc4QkYzRkVFNjUzMTFFMjkzQTNFMTc2RTYyOUREQjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTc4QkYzRkRFNjUzMTFFMjkzQTNFMTc2RTYyOUREQjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODA4MWVjNDMtYTUxNi00NjQ4LWFhYjktMDIxN2E3NThiNWIyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4OEM2OTIzMjg1QzczQkRFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAGQAOAwERAAIRAQMRAf/EAHwAAQEBAQAAAAAAAAAAAAAAAAQDBgcBAQADAQEAAAAAAAAAAAAAAAACAwUBBhAAAgECBAMGBwAAAAAAAAAAAQIDBAUAERITMUEGIZEiMxQHsTJysnPDFhEAAQQBAwIHAQAAAAAAAAAAAQARAgMSIeEFQVFhkcEiEwQUFf/aAAwDAQACEQMRAD8A6f7le494t8sFsFult9VBVRVRldw0U8ULawEK8VZ1XPuIxTZMheV5flrIEQxMJCQPgQN1qqfr+ok6WqupHslRFQwKrwozKZJkZwpdVA7EUHVqPLE89HZaceUJoNxrkIjzO3V0i/8AQtgvN3NyveuqUxLSUlNmUSPMklvCQWcluJ4YGAJ1Vv2OLqvszs92jAdt1YdGw/yB6XNZN6TLaFRku9sbuvbzy056PBnlw5Y7joyl/PH5/gyOPfqzu3okXKOo9Rto7yqo3NPHT3YktBKVpRbGm32MjKGDHkQflHwwRLi86b6h9owRTHkH8v7MEX//2Q==);
}
.m-product-mini-stars {
width: 5.3em;
background-position: left bottom;
margin-top: 0.3em;
margin-bottom: 0.4em;
}
.m-product-mini-stars .m-product-mini-stars-rating {
background-position: left top;
float: left;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-1, .m-product-mini-stars .m-product-mini-stars-rating.stars-1-0 {
width: 1em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-1-5 {
width: 1.6em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-2, .m-product-mini-stars .m-product-mini-stars-rating.stars-2-0 {
width: 2em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-2-5 {
width: 2.7em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-3, .m-product-mini-stars .m-product-mini-stars-rating.stars-3-0 {
width: 3.2em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-3-5 {
width: 3.8em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-4, .m-product-mini-stars .m-product-mini-stars-rating.stars-4-0 {
width: 4.2em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-4-5 {
width: 4.8em;
}
.m-product-mini-stars .m-product-mini-stars-rating.stars-5, .m-product-mini-stars .m-product-mini-stars-rating.stars-5-0 {
width: 5.2em;
}
Reccommends Banner
.m-product-mini-recommends {
background-image: url("../images/tele-sprite.png");
text-indent: -9999px;
width: 13em;
height: 1.4em;
margin-bottom: 0.3em;
}
Demo JSON Array for a single item VIEW PRODUCT GRID FOR FULL ARRAY
"id": 11111,
"sku": {
"standard": "TEST003",
"deluxe": "TEST002",
"premium": "TEST001"
},
"title": "Teleflora's Celebrate Mom Bouquet",
"description": "This composition of pink lilies, pink orchids and pink roses is memorably tranquil. A modern, square black dish is filled with just the right number of Zen tropical flowers, grasses and leaves.",
"category": ["occasions"],
"subcategory": ["mothers day bouquets"],
"images": {
"thumbnail": [""],
"general": ["images/bouqs/cat_bouq_01.png"],
"standard": ["images/pdp/img_standard.jpg"],
"deluxe": ["images/pdp/img_deluxe.jpg"],
"premium": ["images/pdp/img_premium.jpg"],
"environment": [""]
},
"vase": 123,
"price": {
"standard": "57.95",
"deluxe": "67.95",
"premium": "77.95"
},
"bestseller": true,
"sales": 10000,
"rating": "4.7",
"recommends": false,
"sizes": {
"standard": {"h": "14", "w": "12"},
"deluxe": {"h": "16", "w": "14 1/2"},
"premium": {"h": "18", "w": "16 1/2"}
},
"florist-tip": {
"display": true,
"text": "The lily is my favorite flower not only for its striking visual apperance, but for its sweet fragrance.",
"portrait": "",
"name": "Jennifer Bingham",
"business": "Wicker Park Florists",
"address": "Chicago, IL"
},
"zip": ["123456", "90210"],
"flowers": ["roses", "lilies", "alstroemerias", "carnations"],
"styles": ["fun", "modern"],
"colors": ["pink", "white"],
"collection": ["Monet's Garden"]
quickview
<div class="d-container_12">
<div id="productContainer" class="d-grid_9 m-product-container" data-iterator="0" style="display: block;">
<div id="quickviewDiv" class="d-grid_12 m-product-quickview no-mobile position-3" style="display: block;">
<div class="m-product-quickview-container d-grid_12">
<h2 class="m-pdp-header">Teleflora's Celebrate Mom Bouquet</h2>
<a href="#" id="closeQuickview"><div class="icon-close icon-close-quickview">x</div></a>
<div id="mainPdpImgContainer" class="d-grid_5">
<div class="d-grid_8">
<span class="avenir-heavy">25 Ratings</span>
</div>
<!-- main pic -->
<div class="pdp-main-image m-pdp-main-img-container">
<a href="/batch2/pdp">
<img id="pdpMainImage" class="m-pdp-main-img" src="/tf-html/images/pdp/img_premium.jpg" alt="Imagination Blooms with Cymbidium Orchids Image">
</a>
</div>
</div>
<!-- dashboard -->
<div class="grid_4 d-grid_7 m-pdp-form ">
<form id="pdpForm" name="pdpForm">
<!-- SELECT SIZE -->
<div class="m-pdp-form-elements m-pdp-form-radios-container clearfix">
<!-- radio btns title -->
<label class="m-pdp-form-radio-title">select size</label>
<!-- price radio btns -->
<ul id="sizeRadios" class="m-pdp-form-radios custom-ul">
<li data-image="/tf-html/images/pdp/img_standard.jpg" class="custom-li form-field m-pdp-custom-radio custom-radio grid_1 d-grid_4">
<input id="radioPdp1" name="radioPdp" type="radio">
<label for="radioPdp1" class="custom-radio-label"><span class="label-alt-text">Standard</span>
<label class="m-product-price-radio">$72.95</label></label>
</label></li>
<li data-image="/tf-html/images/pdp/img_deluxe.jpg" class="custom-li form-field m-pdp-custom-radio custom-radio grid_1 d-grid_4">
<input id="radioPdp2" name="radioPdp" type="radio">
<label for="radioPdp2" class="custom-radio-label"><span class="label-alt-text">Deluxe</span>
<label class="m-product-price-radio">$82.95</label></label>
</label></li>
<li data-image="/tf-html/images/pdp/img_premium.jpg" class="custom-li form-field m-pdp-custom-radio custom-radio grid_1 d-grid_4">
<input id="radioPdp3" name="radioPdp" type="radio" checked="checked">
<label for="radioPdp3" class="custom-radio-label"><span class="label-alt-text">Premium</span>
<label class="m-product-price-radio">$82.95</label></label>
</label></li>
</ul>
</div>
<!-- ADD SOMETHING EXTRA -->
<div class="m-pdp-form-elements m-pdp-form-extra-container clearfix">
<!-- add something extra title -->
<label class="m-pdp-form-extra-title">add something extra</label>
<!-- balloons -->
<div class="pdp-grid_2 grid_2 d-grid_5">
<p class="m-pdp-form-extra-labels">Mylar Balloons</p>
</div>
<div class="pdp-grid_2s grid_2 pdp-selects d-grid_7">
<select id="mylarBallons" name="mylarBallons">
<option value="" selected="">Select Quantity</option>
<option value="1">1 Balloon - $4.99</option>
<option value="2">2 Balloons - $9.99</option>
<option value="3">3 Balloons - $14.99</option>
</select>
</div>
<!-- stuffed animal -->
<div class="pdp-grid_2 grid_2 d-grid_5">
<p class="m-pdp-form-extra-labels m-pdp-form-extra-selects-label">Stuffed Animal</p>
</div>
<div class="m-pdp-form-extra-selects pdp-grid_2s grid_2 pdp-selects d-grid_7">
<select id="stuffedAnimal" name="stuffedAnimal">
<option value="" selected="">Select Size</option>
<option value="1">Small - $9.99</option>
<option value="2">Medium - $19.99</option>
<option value="3">Large - $29.99</option>
</select>
</div>
<!-- chocolates -->
<div class="pdp-grid_2 grid_2 d-grid_5">
<p class="m-pdp-form-extra-labels m-pdp-form-extra-selects-label">Chocolates</p>
</div>
<div class="m-pdp-form-extra-selects pdp-grid_2s grid_2 pdp-selects d-grid_7">
<select id="chocolates" name="chocolates">
<option value="" selected="">Select Size</option>
<option value="1">Small - $9.99</option>
<option value="2">Medium - $19.99</option>
<option value="3">Large - $29.99</option>
</select>
</div>
</div>
<!-- ZIP & DELIVERY DATE -->
<div class="m-pdp-form-elements m-pdp-form-zip-date-container clearfix">
<!-- zip -->
<div class="m-pdp-form-zip grid_2 d-grid_6">
<label for="zip">recipient zip code</label>
<input id="zip" name="zip" class="fluid" type="text" required="">
<span class="error">Please write a zip code</span>
</div>
<!-- mobile links -->
<div class="m-pdp-form-zip-link grid_2 no-desktop">
<a href="#">Find a Zip Code</a>
</div>
<div class="m-pdp-form-address-link grid_2 no-desktop">
<a href="#">Use Address Book</a>
</div>
<!-- date -->
<div class="m-pdp-form-date grid_2 d-grid_6">
<div class="deliveryWrap form-field">
<label for="delivery_date">delivery date</label>
<input id="delivery_date" name="delivery_date" class="fluid delivery_date" type="text" required="">
<span class="error">Please select a date</span>
</div>
</div>
<!-- desktop links -->
<div class="m-pdp-form-zip-link d-grid_2 no-mobile">
<a href="#">Find Zip</a>
</div>
<span class="m-pdp-vdivider d-grid_1 pdp-grid_1 no-mobile"></span>
<div class="m-pdp-form-address-link d-grid_6 no-mobile">
<a href="#">Use Address Book</a>
</div>
</div>
<!-- ADD TO CART & SAVE FOR LATER -->
<div class="m-pdp-form-elements m-pdp-form-add-to-cart-container clearfix">
<!-- add to cart -->
<div class="m-pdp-form-cart-btn d-grid_7">
<input id="pdpAddToCartBtn" name="pdpAddToCartBtn" type="submit" class="btn btn-submit full-btn" value="add to cart">
</div>
<!-- save for later -->
<div class="m-pdp-form-save-link d-grid_5 ">
<a href="#" class="hide-before-tablet">Save for Later</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>