Skip to content

Commit

Permalink
mision 3
Browse files Browse the repository at this point in the history
  • Loading branch information
tatiana-garay committed Oct 28, 2023
1 parent b71caca commit 97aa7b9
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 172 deletions.
91 changes: 54 additions & 37 deletions css/item.css
Original file line number Diff line number Diff line change
Expand Up @@ -216,52 +216,59 @@ header{
font-size: var(--font-jumbo);
}

.item-buttom{

.item__cart {
display: flex;
gap: var(--spacing-12);
gap: var(--spacing-16);
}

.item-agregar{
width: 105.47px;
height: 35.24px;
top: 565.95px;
left: 726.75px;
border: 0.5px;
border: 0.5px solid rgba(201, 201, 201, 1)

.item__cart .item__quantity {
background-color: var(--dark-bg-solid);
color: var(--ligth-font-solid);
font-size: var(--font-medium);
padding: var(--spacing-8) var(--spacing-16);
border: none;
cursor: pointer;
}

.boton{
display: flex;
flex-direction: column;
gap: 2px;

.item__cart .item__input {
font-size: var(--font-large);
padding: 6px var(--spacing-16);
text-align: center;
max-width: 70px;
}

.item__button{
width: 18px;
height: 16px;
top: 585.14px;
left: 841px;
text-align: center;
padding: 4px, 0px, 4px, 0px;
background: rgba(79, 79, 79, 1);
color: rgba(255, 255, 255, 1);
.item__cart .item__submit {
font-size: var(--font-medium);
}

.item__agregar{
width: 181px;
height: 37.91px;
top: 565.57px;
left: 888.33px;
background: var(--primary-solid);
font-family: var(--base-font);
font-style: var(--font-medium);
color: rgba(255, 255, 255, 1);
/* BUTTONS STYLES */

.btn {
border: none;
cursor: pointer;
border-style: none;
}

/* COLORS */

.btn--primary {
background-color: var(--primary-solid);
color: var(--light-font-solid);
transition: background 0.2s ease-in-out;
}

.btn--primary:hover {
background-color: var(--secondary-solid);
}

/* SIZES */

.btn--medium {
padding: var(--spacing-8) var(--spacing-16);
}

.btn--large {
padding: var(--spacing-12) var(--spacing-28);
}

.item-promos{
Expand All @@ -285,9 +292,19 @@ header{
text-transform: uppercase; /*MAYUSCULAS*/
}

.slider__items{
display: flex;
gap: var(--spacing-24);

iconify-icon{
color: var(--dark-bg-solid);
font-size: var(--font-small);
font-weight: 700;
}

.glide__arrow--left{
left: 0;
}

.glide__arrow--right{
right: 0;
}

.card-item__cover{
Expand Down
15 changes: 12 additions & 3 deletions css/stylo.css
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,18 @@ header{
text-transform: uppercase; /*MAYUSCULAS*/
}

.slider__items{
display: flex;
gap: var(--spacing-24);
iconify-icon{
color: var(--dark-bg-solid);
font-size: var(--font-small);
font-weight: 700;
}

.glide__arrow--left{
left: 0;
}

.glide__arrow--right{
right: 0;
}

.card-item__cover{
Expand Down
151 changes: 89 additions & 62 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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-->
Expand All @@ -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>
9 changes: 9 additions & 0 deletions pages/js/item.js
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);
Loading

0 comments on commit 97aa7b9

Please sign in to comment.