-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b71caca
commit 97aa7b9
Showing
5 changed files
with
257 additions
and
172 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,6 +6,8 @@ | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<link rel="stylesheet" href="css/stylo.css"> | ||
<link rel="icon" href="img/branding/isotype.svg"> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css"> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.theme.min.css"> | ||
<title>Home | Funkoshop</title> | ||
</head> | ||
|
||
|
@@ -93,69 +95,76 @@ <h3 class="collection__title">Harry Potter</h3> | |
</section> | ||
|
||
<!--------------incio tarjetas de abajo-----------------> | ||
<section class="slider container"> | ||
<section class="slider container glide"> | ||
<h2 class="slider__title">ÚLTIMOS LANZAMIENTOS</h2> | ||
<ul class="slider__items"> | ||
<li class="slider__item"> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/star-wars/trooper-1.webp" | ||
alt="Figura colecionable Funko de un Stormtrooper de la serie The Mandalorian"> | ||
<img class="card-item__img--back" | ||
src="img/star-wars/trooper-box.webp" | ||
alt="Figura colecionable Funko de un Stormtrooper de la serie The Mandalorian en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">STAR WARS</p> | ||
<h4 class="card-item__name">STORMTROOPER LIGHTSABER</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
<li class="slider__item"> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/pokemon/pidgeotto-1.webp" | ||
alt="Figura coleccionable Funko de Pidgeotto de la serie Pokemon"> | ||
<img class="card-item__img--back" src="img/pokemon/pidgeotto-box.webp" | ||
alt="Figura coleccionable Funko de Pidgeotto de la serie Pokemon en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">POKEMON</p> | ||
<h4 class="card-item__name">PIDGEOTTO</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
<li class="slider__item"> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/harry-potter/luna-1.webp" | ||
alt="Figura coleccionable Funko de Luna Lovegood de la pelicula de Harry Potter"> | ||
<img class="card-item__img--back" | ||
src="img/harry-potter/luna-box.webp" | ||
alt="Figura coleccionable Funko de Luna Lovegood de la pelicula de Harry Potter en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">HARRY POTTER</p> | ||
<h4 class="card-item__name">LUNA LOVEGOOD LION MASK</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
</ul> | ||
<div class="glide__track" data-glide-el="track"> | ||
<ul class="slider__items glide__slides"> | ||
<li class="slider__item glide__slide"> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/star-wars/trooper-1.webp" | ||
alt="Figura colecionable Funko de un Stormtrooper de la serie The Mandalorian"> | ||
<img class="card-item__img--back" | ||
src="img/star-wars/trooper-box.webp" | ||
alt="Figura colecionable Funko de un Stormtrooper de la serie The Mandalorian en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">STAR WARS</p> | ||
<h4 class="card-item__name">STORMTROOPER LIGHTSABER</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
<li class="slider__item glide__slide"> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/pokemon/pidgeotto-1.webp" | ||
alt="Figura coleccionable Funko de Pidgeotto de la serie Pokemon"> | ||
<img class="card-item__img--back" src="img/pokemon/pidgeotto-box.webp" | ||
alt="Figura coleccionable Funko de Pidgeotto de la serie Pokemon en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">POKEMON</p> | ||
<h4 class="card-item__name">PIDGEOTTO</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
<li class="slider__item glide__slide> | ||
<article class="card-item"> | ||
<a class="card-item__link" href=""> <!-- Referencia al item? --> | ||
<picture class="card-item__cover"> | ||
<span class="card-item__tag">Nuevo</span> | ||
<img class="card-item__img--front" src="./img/harry-potter/luna-1.webp" | ||
alt="Figura coleccionable Funko de Luna Lovegood de la pelicula de Harry Potter"> | ||
<img class="card-item__img--back" | ||
src="img/harry-potter/luna-box.webp" | ||
alt="Figura coleccionable Funko de Luna Lovegood de la pelicula de Harry Potter en caja"> | ||
</picture> | ||
<div class="card-item__content"> | ||
<p class="card-item__licence">HARRY POTTER</p> | ||
<h4 class="card-item__name">LUNA LOVEGOOD LION MASK</h4> | ||
<p class="card-item__price">$ 1799,99</p> | ||
<p class="card-item__promo">3 CUOTAS SIN INTERÉS</p> | ||
</div> | ||
</a> | ||
</article> | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="glide__arrows" data-glide-el="controls"> | ||
<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><iconify-icon icon="mdi:chevron-left"></iconify-icon></button> | ||
<button class="glide__arrow glide__arrow--right" data-glide-dir=">"><iconify-icon icon="octicon:chevron-right-16"></iconify-icon></button> | ||
</div> | ||
|
||
</section> | ||
</main> | ||
<footer class="footer"><!--Inicio Footer--> | ||
|
@@ -179,6 +188,24 @@ <h4 class="card-item__name">LUNA LOVEGOOD LION MASK</h4> | |
</footer> | ||
<!--Fin Footer--> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconify-icon.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script> | ||
<script> | ||
new Glide('.glide', { | ||
type: 'carousel', | ||
startAt: 0, | ||
perView: 3, | ||
gap: 30, | ||
breakpoint: { | ||
991: { | ||
perView: 2 | ||
}, | ||
768: { | ||
perView: 1 | ||
} | ||
} | ||
}).mount(); | ||
</script> | ||
|
||
</body> | ||
|
||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
const add = document.querySelector('#add'); | ||
const subtract = document.querySelector('#subtract'); | ||
const quantity = document.querySelector('#quantity'); | ||
|
||
add.addEventListener('click', () => quantity.value= Number(quantity.value) + 1) | ||
subtract.addEventListener('click', () => quantity.value= Number(quantity.value) - 1); | ||
|
||
|
||
console.log(add, subtract, quantity); |
Oops, something went wrong.