Wijnheerschap.nl - concept

by PhilQ

HTML

<div id="top">
	<div class="wrapper">
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="wijnheerschap-fc" alt="Wijnheerschap" />
		<ul class="menu">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</div>
</div>

<div id="showcase">
	<div class="wrapper">

		<div class="box">
			<div class="bottle">
				<svg class="svg-bottle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
					<g transform="scale(0.8) translate(10, 20)">
						<g transform="rotate(10, 100, 100)">
							<image xlink:href="https://image.ibb.co/cJ3yvk/0026883_heritage_chardonnay_cropped.png" preserveAspectRatio="xMinYMid meet" width="100%" height="100%" transform="rotate(-90, 50, 50)" />
						</g>
					</g>
				</svg>
				<svg class="svg-bottle-shadow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
					<defs>
						<filter id="shadow" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur in="SourceAlpha" stdDeviation="2" out="blurOut" /></filter>
					</defs>
					<g transform="scale(0.8) translate(10, 20)">
						<g transform="rotate(0, 100, 100)">
							<image filter="url(#shadow)" xlink:href="https://image.ibb.co/cJ3yvk/0026883_heritage_chardonnay_cropped.png" preserveAspectRatio="xMinYMid meet" width="100%" height="100%" transform="rotate(-90, 50, 50)" />
						</g>
					</g>
				</svg>

				<h3>Heritage Chardonnay</h3>
			</div>
			<div class="info">
				<span class="price">&#128; 12,<span>50</span></span>
				<span class="origin">Argentinië - 2017</span>
				<span class="tags">Fruitig &bull; Licht &bull; Fris</span>
				<span class="description">Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia...

SCSS

/* This stylesheet generated by Transfonter (https://transfonter.org) on April 1, 2017 12:34 PM */

@font-face {
	font-family: 'Museo Slab';
	src: url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.eot');
	src: local('Museo Slab 100'), local('MuseoSlab-100'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.eot?#iefix') format('embedded-opentype'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.woff2') format('woff2'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.woff') format('woff'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.ttf') format('truetype'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100.svg#MuseoSlab-100') format('svg');
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Museo Slab';
	src: url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.eot');
	src: local('Museo Slab 100 Italic'), local('MuseoSlab-100Italic'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.eot?#iefix') format('embedded-opentype'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.woff2') format('woff2'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.woff') format('woff'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.ttf') format('truetype'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-100Italic.svg#MuseoSlab-100Italic') format('svg');
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: 'Museo Slab 300';
	src: url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-300.eot');
	src: local('Museo Slab 300'), local('MuseoSlab-300'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-300.eot?#iefix') format('embedded-opentype'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-300.woff2') format('woff2'),
		url('http://www.vanheemstra.com/fonts/hinted-MuseoSlab-300.woff')...