Create 3D Space product-card

More examples:
- https://codepen.io/virgilpana/pen/RNYQwB/
- https://codepen.io/marlenesco/full/NqOozj
- https://codepen.io/kristenzirkler/details/eDzIE/

_includes/body/product-cards/3d-space.html

@@ -0,0 +1,49 @@
+<div id="make-3D-space-{{ include.id }}" class="make-3D-space">
+    <div id="product-card-{{ include.id }}" class="product-card" data-id="{{ include.id }}">
+        <div id="product-front-{{ include.id }}" class="product-front">
+        	<div class="shadow"></div>
+            <img src="{{ include.img }}" alt="{{ include.model }}" />
+            <a {{ include.href }}><div class="image_overlay"></div></a>
+            <div id="view_details-{{ include.id }}" class="view_details hide" data-id="{{ include.id }}">View details</div>
+            <div class="stats">
+              <a {{ include.href }}>
+                <div class="stats-container">
+                  <span class="product_price">{{ include.price }} {{ include.currency }}</span>
+                  <span class="product_name">{{ include.commercial }}</span>
+                  <p>{{ include.desc }}</p>
+                  <div class="product-options">
+                    <strong>MODEL</strong>
+                    <span>{{ include.model }}</span>
+                    <strong>BRAND</strong>
+                    <span>{{ include.brand }}</span>
+                  </div>
+                </div>
+              </a>
+            </div>
+        </div>
+        <div id="product-back-{{ include.id }}" class="product-back">
+	        <div class="shadow"></div>
+            <div id="carousel-{{ include.id }}" class="carousel">
+                <ul>
+                    <li><img src="{{ include.img | replace: '.png', '_02.png' }}" alt="{{ include.model }}" /></li>
+                    <li><img src="{{ include.img | replace: '.png', '_03.png' }}" alt="{{ include.model }}" /></li>
+                    <li><img src="{{ include.img | replace: '.png', '_04.png' }}" alt="{{ include.model }}" /></li>
+                </ul>
+                <div class="arrows-perspective">
+                    <div class="carouselPrev" data-id="{{ include.id }}">
+                        <div class="y"></div>
+	                    <div class="x"></div>
+                    </div>
+                    <div class="carouselNext" data-id="{{ include.id }}">
+                        <div class="y"></div>
+	                    <div class="x"></div>
+                    </div>
+                </div>
+            </div>
+            <div id="flip-back-{{ include.id }}" class="flip-back" data-id="{{ include.id }}">
+            	<div id="cy-{{ include.id }}" class="cy"></div>
+                <div id="cx-{{ include.id }}" class="cx"></div>
+            </div>
+        </div>
+    </div>
+</div>

_includes/head/fonts.html

@@ -0,0 +1,3 @@
+<!-- Google fonts -->
+<link rel="stylesheet" type='text/css' href="https://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic">
+<link rel='stylesheet' type='text/css' href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">