Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="component.css" />
<script src="modernizr.custom.js"></script>
<script src="C:\Users\fgtal\OneDrive\trabajo\damas\damas.js"></script>
<script src="C:\Users\fgtal\OneDrive\trabajo\damas\jquery-3.2.1.js"></script>
</head>
<body>
<div class="container demo-3">
<header>
<h1>Escoga un producto</h1>
<div class="codrops-demos">
<a href="#" class="category-item" category="all">Todo</a>
<a href="#" class="category-item" category="blusas">Blusas</a>
<a href="#" class="category-item" category="buzos">Buzos</a>
<a href="#" class="category-item" category="camperas">Camperas</a>
<a href="#" class="category-item" category="camisones">Camisones</a>
<a href="#" class="category-item" category="pantalones">Pantalones</a>
<a href="#" class="category-item" category="pijamas">Pijamas</a>
<a href="#" class="category-item" category="calzas">Calzas</a>
<a href="#" class="category-item" category="sacos">Sacos</a>
<a href="#" class="category-item" category="musculosas">Musculosas</a>
</div>
</header>
<ul class="grid cs-style-3">
<li>
<figure class="product-item" category="blusas">
<img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\25607.jpeg" alt="25607">
<figcaption>
<h3>25607</h3>
<span>Blusas dama con estampado</span>
<a href="#">Ver más</a>
</figcaption>
</figure>
</li>
<li>
<figure class="product-item" category="blusas">
<img src="C:\Users\fgtal\OneDrive\trabajo\damas\imagenes\26142.jpeg" alt="26142">
<figcaption>
<h3>26142</h3>
<span>Blusas dama con sublimado</span>
<a href="#">Ver más</a>
</figcaption>
</figure>
</li>
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}
body {box-sizing: border-box;
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #b3b9bf;
background: #f9f9f9;
}a {color: #888;
text-decoration: none;
}a:hover,
a:active {
color: #333;
}/* Header Style */.container > header {
width: 98%;
margin: 0 auto; padding: 2em;text-align: center;
background: rgba(0,0,0,0.01);
}.container > header h1 {
font-size: 2.625em;
line-height: 1.3;
margin: 0;font-weight: 300;
}/* Demo Buttons Style */.codrops-demos {
padding-top: 1em;
font-size: 0.9em;
width: 15%;
}.codrops-demos .category-item,
.codrops-demos .category-item:hover {
margin: 0.5em;
padding: 0.7em 1.1em;
font-weight: 700;
display: flex;flex-direction: column;
text-align: center;
margin: 15px 0px;flex-wrap: wrap;
background: #f9f9f9;
}.codrops-demos .category-item {
border: 3px solid #b3b9bf;
color: #b3b9bf;
}.codrops-demos .category-item:hover {
border: 3px solid #2c3f52;
color: #2c3f52;
}.codrops-demos .ct_item-active{
background: #b3b9bf;
color: black;}$(document).ready(function(){
// AGREGANDO CLASE ACTIVE AL PRIMER ENLACE ====================
$('.codrops-demos .category_item[category="all"]').addClass('ct_item-active');
// FILTRANDO PRODUCTOS ============================================
$('.category_item').click(function(){
var catProduct = $(this).attr('category');
console.log(catProduct);
// AGREGANDO CLASE ACTIVE AL ENLACE SELECCIONADO
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
// OCULTANDO PRODUCTOS =========================
$('.product-item').css('transform', 'scale(0)');
function hideProduct(){
$('product-item').hide();
} setTimeout(hideProduct,400);
// MOSTRANDO PRODUCTOS =========================
function showProduct(){
$('.product-item[category="'+catProduct+'"]').show();
$('.product-item[category="'+catProduct+'"]').css('transform', 'scale(1)');
} setTimeout(showProduct,400);
});
// MOSTRANDO TODOS LOS PRODUCTOS =======================
$('.category_item[category="all"]').click(function(){
function showAll(){
$('.product-item').show();
$('.product-item').css('transform', 'scale(1)');
} setTimeout(showAll,400);
});
});
