Terrafolia hero snippet

hero_products_home

<!-- 
Tweak styles here
-->
<style>
	#home-hero {
		background: url('{{media url="wysiwyg/infortis/ultimo/slideshow/backer5.jpg"}}') no-repeat;
		background-size:cover;
		height:460px;
	}
	#home-hero-products {
		margin-top: 170px;
	}

	/* NOTE: multiple the number of products by 200px, and add 40px */
	/* ex: 5 * 200 + 40 = 1040px */
	#home-hero-products {
		width: 1040px;
	}
</style>

<div id="home-hero">

	<div id="home-hero-products">
		<div class="home-hero-product">

			<div class="product-image-wrapper">

				<a style="max-width:295px;" class="product-image" title="Sparkle of Christmas"
				   href="//www.terrafolia.ca/en/sparkle-of-christmas.html">
					<img alt="Sparkle of Christmas"
						 src="//d11dr2nk4lgx3.cloudfront.net/media/catalog/product/cache/1/small_image/295x295/9df78eab33525d08d6e5fb8d27136e95/s/p/sparkle-of-christmas-dx-l-transparent.png">

				</a>

			</div>
			<!-- end: product-image-wrapper -->

			<div class="product-shop">
				<div class="product-shop-inner">
					<h2 class="product-name"><a title="Sparkle of Christmas"
												href="//www.terrafolia.ca/en/sparkle-of-christmas.html">Sparkle of
						Christmas</a></h2>


					<div class="price-box">
						<p class="minimal-price">
							<span class="price-label">From:</span>
							<span class="price">$74.95</span></p>
					</div>
				</div>
			</div>

		</div>
		<div class="home-hero-product">

			<div class="product-image-wrapper">

				<a style="max-width:295px;" class="product-image" title="Snowy Night"
				   href="//www.terrafolia.ca/en/snowy-night.html">
					<img alt="Snowy Night"
						 src="//d11dr2nk4lgx3.cloudfront.net/media/catalog/product/cache/1/small_image/295x295/9df78eab33525d08d6e5fb8d27136e95/s/n/snowy-night-dx-l-transparent.png">

				</a>

			</div>
			<!-- end: product-image-wrapper -->

			<div class="product-shop">
				<div class="product-shop-inner">
					<h2 class="product-name"><a title="Snowy Night" href="//www.terrafolia.ca/en/snowy-night.html">Snowy
						Night</a></h2>


					<div class="price-box">
						<p class="minimal-price">
							<span class="price-label">From:</span>
							<span class="price">$69.95</span></p>
					</div>
				</div>
			</div>

		</div>
		<div class="home-hero-product">

			<div class="product-image-wrapper">

				<a style="max-width:295px;" class="product-image" title="Merry Memories Centerpiece"
				   href="//www.terrafolia.ca/en/merry-memories-centerpiece.html">
					<img alt="Merry Memories Centerpiece"
						 src="//d11dr2nk4lgx3.cloudfront.net/media/catalog/product/cache/1/small_image/295x295/9df78eab33525d08d6e5fb8d27136e95/m/e/merry-memories-centerpiece-dx-transparent.png">

				</a>

			</div>
			<!-- end: product-image-wrapper -->

			<div class="product-shop">
				<div class="product-shop-inner">
					<h2 class="product-name"><a title="Merry Memories Centerpiece"
												href="//www.terrafolia.ca/en/merry-memories-centerpiece.html">Merry
						Memories Centerpiece</a></h2>


					<div class="price-box">
						<p class="minimal-price">
							<span class="price-label">From:</span>
							<span class="price">$95.95</span></p>
					</div>
				</div>
			</div>

		</div>
		<div class="home-hero-product">

			<div class="product-image-wrapper">

				<a style="max-width:295px;" class="product-image" title="Glittering Greetings "
				   href="//www.terrafolia.ca/en/glittering-greetings.html">
					<img alt="Glittering Greetings "
						 src="//d11dr2nk4lgx3.cloudfront.net/media/catalog/product/cache/1/small_image/295x295/9df78eab33525d08d6e5fb8d27136e95/g/l/glittering-greetings-dx-transparent.png">

				</a>

			</div>
			<!-- end: product-image-wrapper -->

			<div class="product-shop">
				<div class="product-shop-inner">
					<h2 class="product-name"><a title="Glittering Greetings "
												href="//www.terrafolia.ca/en/glittering-greetings.html">Glittering
						Greetings </a></h2>


					<div class="price-box">
						<p class="minimal-price">
							<span class="price-label">From:</span>
							<span class="price">$79.95</span></p>
					</div>
				</div>
			</div>

		</div>
		<div class="home-hero-product">

			<div class="product-image-wrapper">

				<a style="max-width:295px;" class="product-image" title="Thomas Kinkade's Country Christmas Homecoming"
				   href="//www.terrafolia.ca/en/thomas-kinkades-country-christmas-homecoming.html">
					<img alt="Thomas Kinkade's Country Christmas Homecoming"
						 src="//d11dr2nk4lgx3.cloudfront.net/media/catalog/product/cache/1/small_image/295x295/9df78eab33525d08d6e5fb8d27136e95/t/h/thomas-kinkades-country-christmas-homecoming-dx-transparent.png">

				</a>

			</div>
			<!-- end: product-image-wrapper -->

			<div class="product-shop">
				<div class="product-shop-inner">
					<h2 class="product-name"><a title="Thomas Kinkade's Country Christmas Homecoming"
												href="//www.terrafolia.ca/en/thomas-kinkades-country-christmas-homecoming.html">Thomas
						Kinkade's Country Christmas Homecoming</a></h2>


					<div class="price-box">
						<p class="minimal-price">
							<span class="price-label">From:</span>
							<span class="price">$98.50</span></p>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>