From 97aa7b9af76d90e99905cdb7b4d1ad61a3273e22 Mon Sep 17 00:00:00 2001 From: tatiana-gary Date: Fri, 27 Oct 2023 23:42:34 -0300 Subject: [PATCH] mision 3 --- css/item.css | 91 ++++++++++++++---------- css/stylo.css | 15 +++- index.html | 151 +++++++++++++++++++++++---------------- pages/js/item.js | 9 +++ pages/shop/item.html | 163 ++++++++++++++++++++++++------------------- 5 files changed, 257 insertions(+), 172 deletions(-) create mode 100644 pages/js/item.js diff --git a/css/item.css b/css/item.css index f2fccef..a534dac 100644 --- a/css/item.css +++ b/css/item.css @@ -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{ @@ -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{ diff --git a/css/stylo.css b/css/stylo.css index f54366b..3d35b13 100644 --- a/css/stylo.css +++ b/css/stylo.css @@ -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{ diff --git a/index.html b/index.html index e639391..136ab3e 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ + + Home | Funkoshop @@ -93,69 +95,76 @@

Harry Potter

-
+

ÚLTIMOS LANZAMIENTOS

- +
+ +
+
+ + +
+
@@ -179,6 +188,24 @@

LUNA LOVEGOOD LION MASK

+ + + \ No newline at end of file diff --git a/pages/js/item.js b/pages/js/item.js new file mode 100644 index 0000000..a28ebe9 --- /dev/null +++ b/pages/js/item.js @@ -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); \ No newline at end of file diff --git a/pages/shop/item.html b/pages/shop/item.html index 4f4df7e..96ad2b9 100644 --- a/pages/shop/item.html +++ b/pages/shop/item.html @@ -6,6 +6,8 @@ Item | Funkoshop + +
@@ -58,81 +60,84 @@

Baby Yoda Blueball

Figura coleccionable de Baby Yoda (Grogu) - The
Mandalorian Saga, edición limitada.

$1799.99

-
- -
- - -
- + + + + +

Ver metodos de pago - 3 CUOTAS SIN INTERÉS

-
+

PRODUCTOS RELACIONADOS

- +
+ +
+
+ + +
@@ -156,5 +161,23 @@

LUNA LOVEGOOD LION MASK

+ + + \ No newline at end of file