<link href="http://labs.shop.com/projects/shop-groceries/normalize.css" rel="stylesheet">
<link href="http://labs.shop.com/projects/shop-groceries/fonts/stylesheet2.css" rel="stylesheet">

<div id='sg'>
	<div class='sg-wrapper'>
		<section class='sg-header'>
			<img class='sg-logo' src="http://edge.shop.com/ccimg.shop.com/images/landingPages/2014/0522_ShopGroceries/images/logo3.png">
   <ul class="sg-tag">
   	<li><strong>NO</strong> MEMBERSHIP <strong>FEES</strong></li>
    <li><strong>$5.99</strong> FLAT RATE <strong>SHIPPING</strong></li>
    <li>BUY <strong>BULK</strong> &amp; <strong>SAVE</strong></li>
    <li><strong>EARN</strong> CASHBACK ON PURCHASES</li>
   </ul>
		</section>

		<!-- CATEGORY --><a name="Organic"></a>

		<section class='sg-products'>
			<h2 class='sg-title'>Organic</h2><a href="http://www.shop.com/Food+and+Drink/organic-SHOP+COM+Groceries-2+5?s=105204&k=30&sort_popular=&t=0" class="sg-title-button" target="blank">View More</a>

   <ul class='sg-carousel'>  
    <li>
     <div class="sg-product">
      <figure class="sg-product-image"> 
       <img itemprop="image" src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022560856__175x175__.jpg"/>
      </figure>
      <figcaption>
		     <h3 class="sg-name">AMYS - Soup, Organic, Chunky Vegetable (Pack of 12)</h3>
		     <h4 class="sg-price">$44.49</h4>
		     <h5 class="sg-cashback">$0.89 <em>Cashback</em></h5>
	     </figcaption>
	     <a class="sg-button" href='http://www.shop.com/AMYS+Soup+Organic+Chunky+Vegetable+Pack+of+12+-1022560856-p+.xhtml' target='blank'>Add To Cart</a>
     </div>
   	</li>
    <li>
     <div class="sg-product" opContainerID="799409653">
      <figure class="sg-product-image"> 
       <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022559171__175x175__.jpg"/>
      </figure>
	     <figcaption>
		     <h3 class="sg-name">AMYS - Chili, Organic, Medium (Pack of 12)</h3>
		     <h4 class="sg-price">$44.99</h4>
		     <h5 class="sg-cashback">$0.90 <em>Cashback</em></h5>
	     </figcaption>
	     <a class="sg-button" href='http://www.shop.com/AMYS+Chili+Organic+Medium+Pack+of+12+-1022559171-p+.xhtml' target='blank'>Add To Cart</a>
     </div>
    </li>
    <li>
     <div class="sg-product" opContainerID="799409317">
      <figure class="sg-product-image"> 
       <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022557326__175x175__.jpg"/>
      </figure>
	     <figcaption>
		     <h3 class="sg-name">ANNIES HOMEGROWN - Macaroni &amp; Cheese, Shells &amp; White Cheddar, Family Size (Pack of 6)</h3>
		     <h4 class="sg-price">$22.49</h4>
		     <h5 class="sg-cashback">$0.45 <em>Cashback</em></h5>
	     </figcaption>
	     <a class="sg-button" href='http://www.shop.com/ANNIES+HOMEGROWN+Macaroni+Cheese+Shells+White+Cheddar+Family+Size+Pack+of+6+-1022558816-p+.xhtml' target='blank'>Add To Cart</a>
     </div>
    </li> 
    <li>
     <div class="sg-product" opContainerID="799407721">
      <figure class="sg-product-image"> 
       <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022557198__175x175__.jpg"/>
      </figure>
	     <figcaption>
		     <h3 class="sg-name">ROLAND - Quinoa, Mediterranean (Pack of 6)</h3>
		     <h4 class="sg-price">$21.99</h4>
		     <h5 class="sg-cashback">$0.44 <em>Cashback</em></h5>
	     </figcaption>
	     <a class="sg-button" href='http://www.shop.com/ROLAND+Quinoa+Mediterranean+Pack+of+6+-1022557198-p+.xhtml' target='blank'>Add To Cart</a>
     </div>
    </li>
   </ul>
		</section>

		<section class='sg-message'>
			<span class="sg-mt">Grocery</span>
   <h1 class="sg-tc">Perks</h1>
   <p class="sg-mc">There are many reasons why SHOP.COM Groceries is the premier choice for grocery shopping from home. Unlike the other guys, SHOP.COM Groceries will never charge you a membership fee. With just a flat $5.99 shipping fee, your items are delivered to your door quickly and hassle-free. With Cashback on every purchase, it's never been easier to save and earn money on purchases you're already making.</p>
		</section>



		<!-- CATEGORY --><a name="GlutenFree"></a>

  <section class='sg-products'>   
   <h2 class="sg-title">Gluten Free</h2><a href="http://www.shop.com/Food+and+Drink/gluten+free-Specialty+Food+Type-Gluten+Free-SHOP+COM+Groceries-2+45?s=105204&k=30" class="sg-title-button" target='blank'>View More</a>
   
   <ul class="sg-carousel"> 
    <li>
     <div class="sg-product">
      <figure class="sg-product-image"> 
        <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022557134__175x175__.jpg"/>
      </figure>
      <figcaption>
		     <h3 class="sg-name">GLUTEN FREE PANTRY - Cookie &amp; Cake Mix, Chocolate Chip (Pack of 6)</h3>
		     <h4 class="sg-price">$30.99</h4>
		     <h5 class="sg-cashback">$0.62 <em>Cashback</em></h5>
	     </figcaption>
	     <a class="sg-button" href='http://www.shop.com/The+Gluten+Free+Pantry+Chocolate+Chip+Cookie+Cake+Mix+19+Ounce+Boxes+Pack+of+6+-1022557134-p+.xhtml' target='blank'>Add To Cart</a>
	    </div>
    </li>
    <li>
      <div class="sg-product">
       <figure class="sg-product-image"> 
         <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022560580__175x175__.jpg"/>
       </figure>
      	<figcaption>
		      <h3 class="sg-name">UDIS - Granola, Vanilla (Pack of 6)</h3>
		      <h4 class="sg-price">$37.49</h4>
		      <h5 class="sg-cashback">$0.75 <em>Cashback</em></h5>
	      </figcaption>
	      <a class="sg-button" href='http://www.shop.com/UDIS+Granola+Vanilla+Pack+of+6+-1022560580-p+.xhtml' target='blank'>Add To Cart</a>
	     </div>
    </li>
    <li>
      <div class="sg-product">
       <figure class="sg-product-image"> 
         <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022557383__175x175__.jpg"/>
       </figure>
      	<figcaption>
		      <h3 class="sg-name">SAN J - Orange Sauce, Gluten Free (Pack of 6)</h3>
		      <h4 class="sg-price">$21.49</h4>
		      <h5 class="sg-cashback">$0.43 <em>Cashback</em></h5>
	      </figcaption>
	      <a class="sg-button" href='http://www.shop.com/SAN+J+Orange+Sauce+Gluten+Free+Pack+of+6+-1022557383-p+.xhtml' target='blank'>Add To Cart</a>
	     </div>
    </li> 
    <li>
      <div class="sg-product">
       <figure class="sg-product-image"> 
         <img src="http://edge.shop.com/ccimg.shop.com/250000/253400/253435/products/1022557488__175x175__.jpg"/>
       </figure>
      	<figcaption>
		      <h3 class="sg-name">URBANE GRAIN - Quinoa, Three Cheese &amp; Mushroom (Pack of 6)</h3>
		      <h4 class="sg-price">$25.99</h4>
		      <h5 class="sg-cashback">$0.52 <em>Cashback</em></h5>
      </figcaption>
      <a class="sg-button" href='http://www.shop.com/URBANE+GRAIN+Quinoa+Three+Cheese+Mushroom+Pack+of+6+-1022557488-p+.xhtml' target='blank'>Add To Cart</a>
     </div>
    </li>
   </ul>  
  </section>

  <section class='sg-footer'>
   <a href="http://www.shop.com/Food+and+Drink/SHOP+COM+Groceries-25?s=105204&v=253435&k=30" class="sg-footer-button" target='blank'>View More Products</a>
  </section>
	</div>
</div>
#sg{
	background: url(http://labs.shop.com/projects/shop-groceries/images/Header.jpg) no-repeat top center, url(http://labs.shop.com/projects/shop-groceries/images/BG.jpg) repeat;
 box-shadow: 0 0 50px rgba(#222, .25), 0 0 10px rgba(#222, .5);
 color: #fff;
 font: 400 16px/1.4em quicksand, Arial, Helvetica, sans-serif;
 margin: 0 auto;
 max-width: 960px;
 min-width: 320px;
 width: 100%;

	*{
		box-sizing: border-box;
		margin: 0;
	 padding: 0;
	}

	a{
		cursor: pointer;
  text-decoration: none;
	}

	.sg-wrapper{
		background: rgba(#fff,0.1);
  margin: 0 auto;
  max-width: 760px;
  min-width:	320px;
  position: relative;
  width: 100%; 
  z-index: 99;
	}


	/*------------Header------------ */

	.sg-header{
	  margin: 0 auto 125px;
	  max-width: 760px;
	  min-width: 320px;
	  padding: 60px 0 0;
	  width: 100%;
	}

	// .sg-nav, .sg-nav ul{
	//   color: #fff;
	//   float: left;
	//   font-family: quicksand, Arial, Helvetica, sans-serif;
	//   font-size: 1em;
	//   line-height: 1.5em;
	//   list-style: none outside none;
	//   margin: 15px -30px;
	//   position: absolute;
	//   text-transform: uppercase;
	//   width: 200px;
	//   z-index: 99;
	// }

	// .sg-nav li:last-child{
	//   line-height: 4em;
	// }

	// .sg-nav a{
	//   color: #fff;
	// }

	// .sg-nav a:hover{
	//   font-weight: 600;
	// }

	.sg-logo{
  display: block;
  margin: 0 auto;
  width: 320px;

  @media screen and (min-width: 520px){
  	width: 465px;
  }
	}

	.sg-tag {
  color: #fff;
  font-size: 1.1em;
  line-height: 2em;
  list-style: disc inside none;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  width: 320px;

  @media screen and (min-width: 520px){
  	line-height: 1.5em;
  }
	}


	/*------------Container------------ */

	.sg-products{
		margin: 25px 0 0;
	}

	.sg-title  {
  color: #fff;  
  float: left;
  font: 400 1.1em/1.4em copperplate, 'Times New Roman', Georgia, Serif;
  margin: 0 0 25px 10px;
  max-width: 600px;
  min-width: 180px;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  width: calc(100% - 160px);


  &:after{
  	border-top: rgba(#fff, .35) solid 1px;
	  content: "";
	  height: 1px;
	  margin-left: 15px;
	  position: absolute;
	  top: 10px;
	  width: 600px;
  }
	}

	.sg-carousel{
		display: inline-block;
		margin: 0 auto;
		max-width: 760px;
  min-width:	320px;   
  padding: 0 10px;
  position: relative;
  width: 100%;

  li{
  	background: rgba(#000, .05);
  	border: 1px solid rgba(#fff, .1);
  	box-shadow: 0 0 5px rgba(#222, .25);
  	float: left;
  	list-style: none;
  	margin: 5px 1%;
  	max-width: 225px;
  	min-width: 130px;
	  padding: 5px 0;
	  width: 48%;

	  @media screen and (min-width: 460px){
	  	max-width: 185px;
	  	min-width: 100px;
	  	width: 23%;
	  }
  }
	}

	/*------------Products------------ */

.sg-product{
	margin: 0 auto;
	padding: 0 5px;
	max-width: 175px;
	min-width: 125px;
	width: 100%;

	@media screen and (min-width: 460px){
		max-width: 150px;
		min-width: 100px;
		width: 100%;
	}
}

.sg-product-image{
	background: #fff;
	height: auto;
	max-width: 175x;
	min-width: 115px;
	width: 100%;

	@media screen and (min-width: 460px){
		max-width: 150px;
		min-width: 90px;
		width: 100%;
	}

	img{
		height: auto;
		max-width: 175x;
		min-width: 115px;
		width: 100%;

		@media screen and (min-width: 460px){
			max-width: 150px;
			min-width: 90px;
			width: 100%;
		}
	}
}

.sg-name, .sg-price, .sg-cashback {
 color: #fff;
 font-weight: 600;
 font-size: .7em;
 margin: 5px 0;
}

.sg-name {
 line-height: 1.4em;
 height: 80px;
 overflow: hidden;
}

.sg-price {
 font-size: 1.1em;
}

.icon-cashback:after, .sg-cashback em:after {
 content: "\e026"
}
.icon-cashback-highlight:after {
 content: "\e025"
}

.icon-cashback, .sg-cashback em {
 color: #fff;
 display: inline-block;
 padding-left: 1.71429em;
 position: relative;
}

.icon-cashback:before, .sg-cashback em:before, .icon-cashback:after, .sg-cashback em:after {
 display: block;
 left: 0.71429em;
 margin-top: -.5em;
 top: 50%;
 position: absolute;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

.icon-cashback:before, .sg-cashback em:before, .icon-cashback:after, .sg-cashback em:after {
	color: #6dd2a0;
 content: "\e025";
 display: block;
 font-family: 'icon-font_shop';
 font-size: inherit;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 height: 1em;
 left: .15em;
 line-height: 1.15em;
 speak: none;
 text-indent: 0;
 text-transform: none;
 width: 1.43em;
}

.icon-cashback:before, .sg-cashback em:before {
 background: #fff;
 -webkit-box-shadow:inset 0 0.143em 0 #00b159, inset -0.42em 0 0 #00b159, inset 0 -0.143em 0 #00b159, inset 0.42em 0 0 #00b159;
 -moz-box-shadow:inset 0 0.143em 0 #00b159, inset -0.42em 0 0 #00b159, inset 0 -0.143em 0 #00b159, inset 0.42em 0 0 #00b159;
 box-shadow:inset 0 0.143em 0 #00b159, inset -0.42em 0 0 #00b159, inset 0 -0.143em 0 #00b159, inset 0.42em 0 0 #00b159;
 color: #018753;
 content:"\e026";
}

.sg-cashback{
 font-size: .65em;
}


	/*------------Messaging------------ */

	.sg-message {
		background: rgba(#000, .05);
  border-right: 1px solid rgba(#fff, .1);
  border-left: 1px solid rgba(#fff, .1);
  border-bottom: 1px solid rgba(#fff, .1);
  box-shadow: 0 0 5px rgba(#222, .25);
  display: table;
  margin: 25px auto;
  max-width: 660px;
  min-width: 300px;
  width: 95%;
	}

	.sg-tc {
  color: #fff;
  float: left;
  font-size: 2.6em;
  font-weight: 400; 
  text-align: left;
  text-transform:uppercase;
  max-width: 160px;
  min-width: 76px;
  padding-left: 10px;
  width: 24%;
	}

	.sg-mc{
  color: #fff;
  float: right;
  font-family: quicksand, Arial, Helvetica, sans-serif;
  font-size: .75em;
  line-height: 1.4em;
  padding: 10px;
  min-width: 300px;
  width: 100%;

  @media screen and (min-width: 550px){
  	margin-top: -4px;
  	max-width: 480px;
	  min-width: 300px;
	  padding: 0 25px 10px;
	  width: 76%;
  }
	}

	.sg-mt {
	 color: #fff;
  font-family:copperplate, 'Times New Roman', Georgia, Serif;
  font-size: .85em;
  display: inline-block;
  margin-top: -18px;
  max-width: 658px;
  min-width: 298px;
  overflow: hidden;
  padding: 10px 35px;
  position: relative;
  text-align: left;
  text-transform: uppercase;
  width: 100%;

  &:before, &:after{
	  border-top: rgba(#fff, .15) solid 1px;
	  content: "";
	  height: 1px;
	  position: absolute;
	  top: 18px;
		}

  &:before {
	  left: 0px;
	  width: 15px;
		}

		&:after {
	  left: 130px;
	  max-width: 535px;
	  min-width: 165px;
	  width: 100%;
  }
	}

	/*------------Buttons------------ */

	.sg-title-button, .sg-button, .sg-footer-button {
	 background-color: #313035;
	 color: #fff;
	 cursor: pointer;
	 display: inline-block;
	 font-weight: 600;
	 font-size: .6em;
	 max-width: 125px;
	 min-width: 100px;
	 padding: 7px 5px;
	 text-align: center;
	 text-transform: uppercase;
	 -webkit-transition: -webkit-box-shadow .5s ease, background-color .3s ease; 
	 -moz-transition: -moz-box-shadow .5s ease, background-color .3s ease;
	 -o-transition: box-shadow .5s ease, background-color .3s ease;
	 width: 100%;

	 &:link{
	 	color: #fff;
	 }

	 &:hover{
	 	background-color: #3F3E43;
	 	box-shadow: 0 0 6px rgba(#000,.46);
	 	color: #fff;
	 }
	}

	.sg-title-button {
	 float: right;
	 margin:0 10px 25px 0;
	 max-width: 125px;
		min-width: 100px;
		width: 25%;
	}

	.sg-button {
	 background-color: #1e5606;
	 margin: 0 0 20px;
	 max-width: 175px;
		min-width: 115px;
		width: 100%;

	 @media screen and (min-width: 460px){
			max-width: 150px;
			min-width: 90px;
			width: 100%;
		}

	 &:hover{
	 	background-color: #25680B;
	 }
	}

	.sg-footer-button {
		display: block;
	 margin: 15px auto 0;
	 max-width: 200px;
	 padding: 7px 20px;
	}

	.sg-footer{
		padding: 25px;
		width: 100%;
	}


}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.