Teleflora | Global Elements

Elements that appear throughout the site

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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.

View in Browser Download header.zip

footer

        <footer class="m-footer top-border">
  <div class="l-wrapper">
    <div class="container_4 d-container_12 m-footer-top-half clearfix">
      <div class="grid_4 d-grid_4 alpha d-alpha m-footer-border-bottom">
        <h5>Win Free Flowers</h5>
        <p>Sign up and win free flowers.</p>
        <form class="m-footer-email">
          <input type="text" class="m-footer-email-input clear-margin-bottom float-left full-height" placeholder="Enter E-Mail Address"/>
          <input type="button" class="btn btn-light m-footer-email-btn clear-margin-bottom float-left full-height" value="go"/>
        </form>
      </div>
      <div class="grid_4 d-grid_4 d-alpha m-footer-border-bottom clear-margin-left">
        <h5>Connect with Teleflora</h5>
        <p>Get the latest news and offers.</p>
        <div class="m-footer-c-social-list ">
          <a href="#" class="icon-social icon-pintrest"></a>
          <a href="#" class="icon-social icon-facebook"></a>
          <a href="#" class="icon-social icon-google"></a>
          <a href="#" class="icon-social icon-twitter"></a>
          <a href="#" class="icon-social icon-youtube"></a>
        </div>
      </div>
      <div class="grid_4 d-grid_4 alpha d-omega m-footer-border-bottom">
        <h5>Get Rewarded!</h5>
        <p>Earn rewards like discounts and free bouquets.</p>
        <a href="/tf-html/batch4/rewards_sign_up" class="m-rewards-logo-link">
          <!--[if gte IE 9]><!-->
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="230px" height="25.333px" viewBox="0 0 230 25.333" enable-background="new 0 0 230 25.333" xml:space="preserve">
            <g>
              <path fill="#FA3C7A" d="M9.883,9.323H5.594V5.19H3.17v4.133H0v2.051h3.17v7.987c0,3.015,0.559,4.879,4.009,4.879
                c0.901,0,1.989-0.156,2.828-0.528l-0.093-2.207c-0.653,0.342-1.43,0.497-2.144,0.497c-2.145,0-2.176-1.492-2.176-3.356v-7.272
                h4.289V9.323z"/>
              <path fill="#FA3C7A" d="M22.152,19.797c-1.15,1.46-2.549,2.206-4.631,2.206c-2.642,0-4.568-2.144-4.755-4.662h11.748v-0.777
                c0-4.817-2.797-7.614-6.9-7.614c-4.289,0-7.459,3.139-7.459,7.645c0,4.227,2.797,7.645,7.366,7.645
                c2.704,0,4.755-0.808,6.464-3.014L22.152,19.797z M12.766,15.29c0.311-2.455,2.082-4.102,4.755-4.102
                c2.673,0,4.289,1.647,4.382,4.102H12.766z"/>
              <path fill="#FA3C7A" d="M26.625,23.868h2.424V0.373h-2.424V23.868z"/>
              <path fill="#FA3C7A" d="M43.157,19.797c-1.15,1.46-2.548,2.206-4.631,2.206c-2.642,0-4.568-2.144-4.755-4.662h11.748v-0.777
                c0-4.817-2.797-7.614-6.9-7.614c-4.289,0-7.459,3.139-7.459,7.645c0,4.227,2.797,7.645,7.366,7.645
                c2.704,0,4.755-0.808,6.464-3.014L43.157,19.797z M33.771,15.29c0.311-2.455,2.082-4.102,4.755-4.102
                c2.673,0,4.289,1.647,4.382,4.102H33.771z"/>
              <path fill="#FA3C7A" d="M48.966,23.868h2.424V11.375h3.543V9.323H51.39V6.588c0-2.517,0.093-4.351,2.611-4.351
                c0.56,0,1.119,0.124,1.647,0.311l0.342-2.176C55.524,0.124,54.747,0,54.125,0c-3.916,0-5.159,2.517-5.159,6.06v3.263h-3.17v2.051
                h3.17V23.868z"/>
              <path fill="#FA3C7A" d="M56.798,23.868h2.424V0.373h-2.424V23.868z"/>
              <path fill="#FA3C7A" d="M61.022,16.596c0,4.537,3.294,7.645,7.77,7.645c4.475,0,7.77-3.108,7.77-7.645
                c0-4.538-3.294-7.645-7.77-7.645C64.317,8.95,61.022,12.058,61.022,16.596z M63.633,16.596c0-3.046,2.02-5.408,5.159-5.408
                s5.159,2.362,5.159,5.408c0,3.046-2.02,5.407-5.159,5.407S63.633,19.642,63.633,16.596z"/>
              <path fill="#FA3C7A" d="M78.147,23.868h2.424v-7.086c0-3.325,1.305-5.407,4.258-5.407c0.435,0,0.901,0.062,1.305,0.186l0.156-2.455
                c-0.342-0.124-0.684-0.155-0.995-0.155c-2.393,0-4.195,1.336-4.848,2.766h-0.062c0-0.808-0.062-1.616-0.062-2.393h-2.3
                c0,0.963,0.125,2.113,0.125,3.45V23.868z"/>
              <path fill="#FA3C7A" d="M88.863,12.773c1.15-1.056,2.766-1.584,4.319-1.584c2.269,0,3.605,1.087,3.605,3.201v0.435h-0.932
                c-3.574,0-9.168,0.28-9.168,5.097c0,2.828,2.455,4.32,5.408,4.32c2.206,0,3.823-1.056,4.786-2.549h0.062
                c0,0.622,0,1.523,0.155,2.175h2.331c-0.125-0.745-0.218-1.677-0.218-2.517v-6.247c0-4.102-1.802-6.153-6.091-6.153
                c-2.114,0-4.289,0.715-5.781,2.238L88.863,12.773z M96.788,16.875v0.933c-0.062,2.362-1.492,4.382-4.288,4.382
                c-1.834,0-3.201-0.684-3.201-2.518c0-1.958,1.989-2.797,5.066-2.797H96.788z"/>
            </g>
            <g>
              <path fill="#FA3C7A" d="M108.253,9.417h4.495v2.337h0.06c0.959-1.768,2.218-2.697,4.196-2.697c0.51,0,1.079,0.03,1.498,0.15v4.105
                c-0.629-0.18-1.259-0.299-1.918-0.299c-3.417,0-3.836,1.978-3.836,4.884v6.084h-4.495V9.417z"/>
              <path fill="#FA3C7A" d="M133.042,21.464c-1.438,1.828-3.806,2.877-6.144,2.877c-4.495,0-8.091-2.997-8.091-7.642
                c0-4.645,3.596-7.642,8.091-7.642c4.196,0,6.833,2.997,6.833,7.642v1.408h-10.429c0.359,1.708,1.648,2.817,3.387,2.817
                c1.468,0,2.457-0.749,3.206-1.769L133.042,21.464z M129.236,15.051c0.03-1.498-1.139-2.757-2.757-2.757
                c-1.979,0-3.057,1.349-3.177,2.757H129.236z"/>
              <path fill="#FA3C7A" d="M133.185,9.417h4.795l2.967,9.141h0.061l2.487-9.141h4.914l2.697,9.141h0.061l2.727-9.141h4.556
                l-5.185,14.564h-4.436l-3.027-9.68h-0.06l-2.697,9.68h-4.524L133.185,9.417z"/>
              <path fill="#FA3C7A" d="M167.803,22.154h-0.06c-0.989,1.559-2.787,2.188-4.615,2.188c-2.728,0-5.185-1.558-5.185-4.495
                c0-5.035,6.113-5.125,9.859-5.125c0-1.588-1.318-2.607-2.877-2.607c-1.469,0-2.697,0.659-3.656,1.738l-2.397-2.458
                c1.648-1.558,4.046-2.337,6.413-2.337c5.245,0,6.653,2.667,6.653,7.522v7.402h-4.136V22.154z M166.694,17.599
                c-1.379,0-4.436,0.119-4.436,2.098c0,1.078,1.139,1.588,2.128,1.588c1.768,0,3.416-0.929,3.416-2.727v-0.959H166.694z"/>
              <path fill="#FA3C7A" d="M174.011,9.417h4.496v2.337h0.06c0.959-1.768,2.218-2.697,4.195-2.697c0.51,0,1.079,0.03,1.499,0.15v4.105
                c-0.63-0.18-1.259-0.299-1.918-0.299c-3.417,0-3.836,1.978-3.836,4.884v6.084h-4.496V9.417z"/>
              <path fill="#FA3C7A" d="M200.361,23.982h-4.136v-1.918h-0.06c-0.689,1.049-2.428,2.277-4.466,2.277
                c-4.315,0-7.162-3.116-7.162-7.521c0-4.046,2.518-7.762,6.653-7.762c1.857,0,3.596,0.51,4.615,1.918h0.06v-9.65h4.495V23.982z
                 M192.63,13.014c-2.248,0-3.597,1.499-3.597,3.686s1.349,3.686,3.597,3.686c2.247,0,3.596-1.498,3.596-3.686
                S194.877,13.014,192.63,13.014z"/>
              <path fill="#FA3C7A" d="M211.041,13.702c-0.659-0.809-1.528-1.229-2.606-1.229c-0.749,0-1.648,0.33-1.648,1.199
                c0,2.158,7.582,0.33,7.582,5.874c0,3.716-3.597,4.795-6.713,4.795c-2.038,0-4.286-0.509-5.724-1.978l2.727-3.027
                c0.839,1.02,1.828,1.589,3.177,1.589c1.019,0,2.038-0.27,2.038-1.049c0-2.338-7.582-0.359-7.582-5.904
                c0-3.417,3.057-4.915,6.113-4.915c1.918,0,4.046,0.479,5.395,1.918L211.041,13.702z"/>
            </g>
            <path fill="#FA3C7A" d="M229.242,17.176c0,0.294-0.112,0.588-0.337,0.813l-6.323,6.324c-0.449,0.449-1.177,0.449-1.626,0
              s-0.449-1.177,0-1.626l5.51-5.511l-5.51-5.511c-0.449-0.449-0.449-1.177,0-1.626s1.177-0.449,1.626,0l6.323,6.324
              C229.129,16.587,229.242,16.882,229.242,17.176z"/>
          </svg>
          <!--<![endif]-->
        </a>
      </div>
    </div>
    <!-- .container_4.d-container_12 -->
    <div class="container_4 d-container_12 clearfix">
      <div class="grid_2 d-grid_3 d-alpha">
        <h5>Get to Know Teleflora</h5>
        <ul class="link-list">
          <li><a href="#">Our Company</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Security &amp; Privacy</a></li>
          <li><a href="#">Join Our Community</a></li>
          <li><a href="#">Sitemap</a></li>
        </ul>
      </div>
      <div class="grid_2 d-grid_3">
        <h5>Learn More About</h5>
        <ul class="link-list">
          <li><a href="#">Find a Florist</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Media Room</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">&nbsp;</a></li>
        </ul>
      </div>
      <div class="clear no-desktop"></div>
      <div class="grid_2 d-grid_3">
        <h5>Shop Teleflora</h5>
        <ul class="link-list">
          <li><a href="#">Same-Day Flower Delivery</a></li>
          <li><a href="#">Cheap Flowers</a></li>
          <li><a href="#">Birthday Flowers</a></li>
          <li><a href="#">Funeral Flowers</a></li>
          <li><a href="#">Wedding Flowers</a></li>
        </ul>
      </div>
      <div class="grid_2 d-grid_3 d-omega">
        <h5>Customer Service</h5>
        <ul class="link-list">
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Ask an Expert</a></li>
          <li><a href="#">Ordering</a></li>
          <li><a href="#">Intl. Flower Delivery</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <label class="m-footer-label float-left">Change Language</label>
        <select class="m-footer-languages-select">
          <option>English</option>
          <option>Spanish</option>
          <option>Pirate</option>
        </select>
      </div>
    </div>
    <!-- .container_4.d-container_12 -->
  </div>
</footer>

      
Classes used:

m-footer - Styles for the footer module

None. Carry on!
View in Browser Download footer.zip

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;
}

JSON

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.

View in Browser Download bookmarks-bar.zip

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"]
View in Browser Download product-mini.zip

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>

      

Still being prototyped

Still being prototyped

View in Browser Download quickview.zip