style changes in category nav

client/css/products.css

@@ -1,21 +1,89 @@
-ul.categories {
+nav.category-nav a {
+	position: relative;
+	display: inline-block;
+	margin: 15px 25px;
+	outline: none;
+	color: #4a4a4a;
+	text-decoration: none;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	padding: 0 0 10px;
+    font-size: 16px;
+    opacity: 0.8;
+    transition: opacity ease-in 0.2s;
+}
+
+nav.category-nav a:hover,
+nav.category-nav a:focus {
+	outline: none;
+    opacity: 1;
+}
+
+nav.category-nav a.router-link-active {
+    opacity: 1;
+    font-family: ralewayBold;
+}
+
+nav.category-nav a::after {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	height: 1px;
+	background: #4a4a4a;
+	content: '';
+	opacity: 0;
+	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
+	transition: height 0.3s, opacity 0.3s, transform 0.3s;
+	-webkit-transform: translateY(-10px);
+	-moz-transform: translateY(-10px);
+	transform: translateY(-10px);
+}
+
+nav.category-nav a:hover::after,
+nav.category-nav a:focus::after,
+nav.category-nav a.router-link-active::after {
+	height: 2px;
+	opacity: 1;
+	-webkit-transform: translateY(0px);
+	-moz-transform: translateY(0px);
+	transform: translateY(0px);
+}
+
+ul.product-list {
     list-style: none;
     text-align: center;
 }
 
-li.category {
-    display: inline-block;
-    padding: 0px 20px;
+li.product-details {
+    width: 30%;
+    float: left;
 }
 
-li.category > a {
+a.product-link {
+    opacity: 0.75;
     text-decoration: none;
+    color: #000;
+    transition: ease-in 0.2s;
+}
+
+a.product-link:hover {
+    opacity: 1;
+}
+
+.product-name {
     text-transform: uppercase;
-    color: #4a4a4a;
-    opacity: 0.8;
-    transition: ease-in 0.5s;
+    letter-spacing: 1px;
+    font-size: 12px;
+    margin-bottom: 5px;
 }
 
-li.category > a:hover {
-    opacity: 1
-}
+.product-container {
+    width: 80%;
+    margin: 0 auto;
+}
+.product-description {
+    font-size: 12px;
+    opacity: 0.5
+}

client/css/styles.css

@@ -18,6 +18,11 @@
     src: url('../fonts/Raleway-Medium.otf');
 }
 
+@font-face {
+    font-family: angelface;
+    src: url('../fonts/Angelface.otf');
+}
+
 /* CELLPHONE */
 @media screen and (max-width: 47.2em) {
     .mision h5 {

client/images/icons/higiene-icon.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" class="category-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="865px" height="865px" viewBox="132.75 -95.652 865 865" enable-background="new 132.75 -95.652 865 865"
+	 xml:space="preserve">
+<path d="M722.173,656.963c-27.472-164.297-37.123-330.926-28.638-495.117c2.546-45.821-26.517-88.246-74.352-100.869v-80.61
+	c-0.001-41.153-33.518-74.67-74.671-74.67l-58.549,0c-41.153,0-74.67,33.517-74.669,74.67v80.61
+	c-47.73,11.879-77.534,56.533-74.353,100.869c8.379,164.296-1.273,330.925-28.638,495.116
+	c-9.333,64.064,38.078,115.081,97.156,115.399h219.557C677.095,773.528,732.249,725.375,722.173,656.963z M453.614-19.951
+	c0-17.819,14.531-32.351,32.35-32.35l58.549,0c17.818,0,32.35,14.532,32.35,32.351v77.641l-123.248-0.001V-19.951z M435.265,100.01
+	H595c37.123,1.061,57.806,31.713,56.108,59.503c-2.121,41.577-3.181,83.368-3.076,125.264c-86.231-15.804-174.689-16.865-265.8,0
+	c0.106-41.895-0.848-83.58-3.076-125.263C377.247,129.602,400.899,100.222,435.265,100.01z M381.595,328.051
+	c19.878-4.165,40.775-7.31,62.379-9.598c65.2-7.698,129.949-5.158,194.444,7.358c3.623,0.685,7.226,1.389,10.781,2.134
+	c1.06,52.397,4.03,104.793,8.697,157.189c-95.778,20.471-190.602,20.259-285,0.106C377.565,432.845,380.429,380.342,381.595,328.051
+	z M625.017,729.936H405.46c-37.334-0.424-61.2-34.048-55.366-66.186c7.53-45.29,13.683-90.687,18.561-136.082
+	c98.005,20.151,195.691,20.046,293.166,0c4.985,45.502,10.925,90.898,18.562,136.082
+	C685.898,704.904,654.291,730.359,625.017,729.936z"/>
+<g>
+	<path stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M920.908,179.059c-29.648,0-53.77-29.688-53.77-66.179
+		c0-4.694-3.806-8.5-8.5-8.5s-8.5,3.806-8.5,8.5c0,36.491-24.121,66.179-53.77,66.179c-4.694,0-8.5,3.806-8.5,8.5s3.806,8.5,8.5,8.5
+		c29.648,0,53.77,29.688,53.77,66.178c0,4.694,3.806,8.5,8.5,8.5s8.5-3.806,8.5-8.5c0-36.491,24.121-66.178,53.77-66.178
+		c4.694,0,8.5-3.806,8.5-8.5S925.603,179.059,920.908,179.059z M858.639,222.746c-7.003-15.194-17.918-27.542-31.143-35.187
+		c13.225-7.646,24.14-19.994,31.143-35.188c7.003,15.194,17.918,27.542,31.143,35.188
+		C876.557,195.204,865.642,207.552,858.639,222.746z"/>
+	<path stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M827.504,68.466c4.694,0,8.5-3.806,8.5-8.5s-3.806-8.5-8.5-8.5
+		c-29.648,0-53.77-29.688-53.77-66.179c0-4.694-3.806-8.5-8.5-8.5s-8.5,3.806-8.5,8.5c0,36.491-24.121,66.179-53.77,66.179
+		c-4.694,0-8.5,3.806-8.5,8.5s3.806,8.5,8.5,8.5c29.648,0,53.77,29.688,53.77,66.178c0,4.694,3.806,8.5,8.5,8.5s8.5-3.806,8.5-8.5
+		C773.734,98.153,797.855,68.466,827.504,68.466z M765.234,95.153c-7.003-15.194-17.918-27.542-31.143-35.187
+		c13.225-7.646,24.14-19.994,31.143-35.188c7.003,15.194,17.918,27.542,31.143,35.188C783.152,67.611,772.237,79.959,765.234,95.153
+		z"/>
+</g>
+</svg>

client/index.html

@@ -118,26 +118,32 @@
                     </div>
                 </div>
 
-                <ul class="categories">
-                    <li v-for="category in categories" class="category">
-                        <router-link :to="'/productos/' + category.path">{{category.name}}</router-link>
-                    </li>
-                </ul>
-                <router-view></router-view>
+                <nav class="category-nav">
+                    <router-link :to="'/productos/' + category.path" v-on:click="activeCategory = category.name" v-for="category in categories">{{category.name}}</router-link>
+                </nav> 
+                <transition name="fade" mode="out-in">
+                    <router-view></router-view>
+                </transition>
             </div>
         </div>
     </template>
 
     <template id="category">
         <div class="row">
-            <h5>{{ category }}</h5>
-            <ul>
-                <li v-for="product in products">
-                    <img v-bind:src="product.img" v-bind:alt="product.name">
-                    <span>{{ product.name }}</span>
-                    <p>{{ product.shortDescription }}</p>
-                </li>
-            </ul>
+            <h5 class="category-name">{{ category }}</h5>
+            <div>
+                <ul class="product-list">
+                    <li v-for="product in products" class="product-details">
+                        <div class="product-container">
+                            <router-link :to="'/producto/' + product.id" class="product-link">
+                                <img v-bind:src="product.img" v-bind:alt="product.name">
+                                <h6 class="product-name">{{ product.name }}</h6>
+                                <p class="product-description">{{ product.shortDescription }}</p>
+                            </router-link>
+                        </div>
+                    </li>
+                </ul>
+            </div>
         </div>
     </template>
 

client/js/main.js

@@ -49,7 +49,8 @@ var productos = {
                     path: p,
                     name: p
                 }
-            })
+            }),
+            activeCategory: 'higiene'
         }
     }
 }