From 3c4db41828b420a4a7594a1e1b28c98861e162d7 Mon Sep 17 00:00:00 2001 From: alevittHome Date: Sun, 25 Feb 2024 20:43:09 -0300 Subject: [PATCH 1/9] inicios del forck y primeras modificaciones del menu principal --- index.html | 75 +++++++++++++++++++++++++++ main.js | 0 styles.css | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 224 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..fed9d89c3 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + YardSale: tienda online de cositas chidas + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..09b5291a7 --- /dev/null +++ b/styles.css @@ -0,0 +1,149 @@ +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 14px; + --md: 16px; + --lg: 18px; + } + body { + margin: 0; + font-family: 'Quicksand', sans-serif; + } + + + /* ESTILOS DEL MENU PRINCIPAL GRANDE */ + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + font-size: var(--sm); + margin-right: 12px; + } + .navbar-shopping-cart { + position: relative; + } + .navbar-shopping-cart div { + width: 16px; + height: 16px; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -6px; + right: -3px; + display: flex; + justify-content: center; + align-items: center; + } + +/* ESTILOS PARA EL MENU CHICO CUANDO HACEMOS CLINK EN EL MAIL DEL USUARIO O LOGO DEL USUARIO */ +.desktop-menu { + + position: absolute; + top: 60px; /* tamaño del menu principal */ + right: 0; + + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; +} +.desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; +} +.desktop-menu ul li { + text-align: end; +} +.desktop-menu ul li:nth-child(1), +.desktop-menu ul li:nth-child(2) { + font-weight: bold; +} +.desktop-menu ul li:last-child { + padding-top: 20px; + border-top: 1px solid var(--very-light-pink); +} +.desktop-menu ul li:last-child a { + color: var(--hospital-green); + font-size: var(--sm); +} +.desktop-menu ul li a { + color: var(--back); + text-decoration: none; + margin-bottom: 20px; + display: inline-block; +} + + + + + + + + + + + + + + + + + + + /* MEDIA PARA EL MENU GRANDE SEA RESPONSIVO */ + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + } \ No newline at end of file From 9ca87f4aa2444aea22bdd667d2e3ad86e82d739f Mon Sep 17 00:00:00 2001 From: alevitt Date: Tue, 27 Feb 2024 12:49:15 -0300 Subject: [PATCH 2/9] creacion de la funcion para activar o desactivar el menu desktop cuando hacemos clik en el mail del usuario en la barra de navegacion --- index.html | 8 ++++++-- main.js | 9 +++++++++ styles.css | 9 ++++++++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fed9d89c3..0b1b602ec 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@
    -
  • platzi@example.com
    • +
  • platzi@example.com
  • shopping cart
    2
    @@ -55,7 +55,7 @@
-
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29bb..8165b20b4 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,9 @@ +const navbar_email_element = document.querySelector('.navbar-email'); +const desktopMenuElement = document.querySelector('.desktop-menu'); + +const toogleDesktopMenu = ()=>{ + // desktopMenuElement.toggleAttribute('') + + desktopMenuElement.classList.toggle('inactive') +} +navbar_email_element.addEventListener('click', toogleDesktopMenu); diff --git a/styles.css b/styles.css index 09b5291a7..4a398303a 100644 --- a/styles.css +++ b/styles.css @@ -13,6 +13,13 @@ font-family: 'Quicksand', sans-serif; } + + /* estilo para activar o desacticar un menu */ + + .inactive{ + display: none; + } + /* ESTILOS DEL MENU PRINCIPAL GRANDE */ nav { @@ -83,7 +90,7 @@ position: absolute; top: 60px; /* tamaño del menu principal */ - right: 0; + right: 30px; width: 100px; height: auto; From 93a95e82a2722348e131f21bfc1730801033c384 Mon Sep 17 00:00:00 2001 From: alevitt Date: Mon, 4 Mar 2024 13:03:43 -0300 Subject: [PATCH 3/9] menu hamburguesa --- index.html | 47 ++++++++++++++++++++++++++++++++++++++++++++++- main.js | 27 ++++++++++++++++++++++----- styles.css | 35 +++++++++++++++++++++++++++++++++-- 3 files changed, 101 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 0b1b602ec..9ce289002 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,8 @@ diff --git a/main.js b/main.js index 8165b20b4..71b730a1b 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,26 @@ -const navbar_email_element = document.querySelector('.navbar-email'); -const desktopMenuElement = document.querySelector('.desktop-menu'); -const toogleDesktopMenu = ()=>{ - // desktopMenuElement.toggleAttribute('') +const navbar_email_element = document.querySelector('.navbar-email');// selecionamos el elemento que contiene el mail de l usuario +const desktopMenuElement = document.querySelector('.desktop-menu');// Seleccionamos el elemento que contiene el menu en la version escritorio + +const hamburguerIconElement = document.querySelector('#hamIcon'); //Seleccionamos el icono hamburuqesa +const mobileMenuElement = document.querySelector('.mobile-menu'); // Seleccionamos el menu en su version mobile + + +// Esconde o muestra el menu cuando hacemos click en el mail del uduario en la vercion de escritorio +const togleDesktopMenu = ()=>{ desktopMenuElement.classList.toggle('inactive') } -navbar_email_element.addEventListener('click', toogleDesktopMenu); +// creamos la misma funcion para poner la clase incative pero ahora para cuando hagomos clik en el menu hamburguesas +const toggleMobileMenu = ()=>{ + mobileMenuElement.classList.toggle('inactive') + // console.log('cliek hamburguesa') +} +//creamos una funcion mas generica para agregar la clase inactive y poder usarla con otros elementos +// const tooggleInactiveClass = (element)=>{ +// element.classList.tooggle('inactive'); +// } + + +navbar_email_element.addEventListener('click', togleDesktopMenu); // escuchamos si el usuario hace click en el mail de l usaurio en la barra de navegacion +hamburguerIconElement.addEventListener('click', toggleMobileMenu) diff --git a/styles.css b/styles.css index 4a398303a..94479fbeb 100644 --- a/styles.css +++ b/styles.css @@ -90,7 +90,7 @@ position: absolute; top: 60px; /* tamaño del menu principal */ - right: 30px; + right: 50px; width: 100px; height: auto; @@ -125,8 +125,39 @@ display: inline-block; } +/* ESTILOS PARA EL MENU DESPLEGABLE EN LA VERSION MOBILE + */ - + .mobile-menu { + position: absolute; + top: 60px; + padding: 24px; +} +.mobile-menu a { + text-decoration: none; + color: var(--black); + font-weight: bold; + /* margin-bottom: 24px; */ +} +.mobile-menu ul { + padding: 0; + margin: 24px 0 0; + list-style: none; +} +.mobile-menu ul:nth-child(1) { + border-bottom: 1px solid var(--very-light-pink); +} +.mobile-menu ul li { + margin-bottom: 24px; +} +.email { + font-size: var(--sm); + font-weight: 300 !important; +} +.sign-out { + font-size: var(--sm); + color: var(--hospital-green) !important; +} From a3d63586b322d01d319292c64c81b42eb68e2168 Mon Sep 17 00:00:00 2001 From: alevitt Date: Wed, 6 Mar 2024 12:43:59 -0300 Subject: [PATCH 4/9] terminamos de hacer que todos lso menus se abran y cierren segun correspondan --- index.html | 48 +++++++++++++++++++++ main.js | 36 +++++++++++++++- styles.css | 120 +++++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 185 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 9ce289002..a546df442 100644 --- a/index.html +++ b/index.html @@ -117,6 +117,54 @@
+ + diff --git a/main.js b/main.js index 71b730a1b..1793e2fbc 100644 --- a/main.js +++ b/main.js @@ -6,16 +6,49 @@ const desktopMenuElement = document.querySelector('.desktop-menu');// Selecciona const hamburguerIconElement = document.querySelector('#hamIcon'); //Seleccionamos el icono hamburuqesa const mobileMenuElement = document.querySelector('.mobile-menu'); // Seleccionamos el menu en su version mobile +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart')//icono del carrito de compras + +const asideComprasDetail = document.querySelector('.product-detail') // aside que aparece con al descripcion del carrito de compras cuando hacemos click en el carrito // Esconde o muestra el menu cuando hacemos click en el mail del uduario en la vercion de escritorio const togleDesktopMenu = ()=>{ + const isCarritoMenuClouse = asideComprasDetail.classList.contains('inactive'); + + if(!isCarritoMenuClouse){ + asideComprasDetail.classList.add('inactive'); + } desktopMenuElement.classList.toggle('inactive') } // creamos la misma funcion para poner la clase incative pero ahora para cuando hagomos clik en el menu hamburguesas const toggleMobileMenu = ()=>{ + const isCarritoMenuClouse = asideComprasDetail.classList.contains('inactive'); + + if(!isCarritoMenuClouse){ + asideComprasDetail.classList.add('inactive'); + } + mobileMenuElement.classList.toggle('inactive') // console.log('cliek hamburguesa') } + +// funcion para poner la clase inactive al icono del carrito +const toggleCarritoIcon = ()=>{ + + const isMobileMenuElementCLouse = mobileMenuElement.classList.contains('inactive'); + const isDesktopMenuClose = desktopMenuElement.classList.contains('inactive'); + if(!isMobileMenuElementCLouse ){ + mobileMenuElement.classList.add('inactive'); + } + if(!isDesktopMenuClose){ + desktopMenuElement.classList.add('inactive') + } + + asideComprasDetail.classList.toggle('inactive'); + +} + + + //creamos una funcion mas generica para agregar la clase inactive y poder usarla con otros elementos // const tooggleInactiveClass = (element)=>{ // element.classList.tooggle('inactive'); @@ -23,4 +56,5 @@ const toggleMobileMenu = ()=>{ navbar_email_element.addEventListener('click', togleDesktopMenu); // escuchamos si el usuario hace click en el mail de l usaurio en la barra de navegacion -hamburguerIconElement.addEventListener('click', toggleMobileMenu) +hamburguerIconElement.addEventListener('click', toggleMobileMenu); +menuCarritoIcon.addEventListener('click',toggleCarritoIcon); \ No newline at end of file diff --git a/styles.css b/styles.css index 94479fbeb..1becd6856 100644 --- a/styles.css +++ b/styles.css @@ -161,27 +161,111 @@ +/* ESTILOS DEL CARRITO DE COMPRAS */ +.product-detail { + width: 360px; + padding: 0 24px; + box-sizing: border-box; + position: absolute; + right: 0; + } + .title-container { + display: flex; + } + .title-container img { + transform: rotate(180deg); + margin-right: 14px; + } + .title { + font-size: var(--lg); + font-weight: bold; + } + .order { + display: grid; + grid-template-columns: auto 1fr; + gap: 16px; + align-items: center; + background-color: var(--text-input-field); + margin-bottom: 24px; + border-radius: 8px; + padding: 0 24px; + } + .order p:nth-child(1) { + display: flex; + flex-direction: column; + } + .order p span:nth-child(1) { + font-size: var(--md); + font-weight: bold; + } + .order p:nth-child(2) { + text-align: end; + font-weight: bold; + } + .shopping-cart { + display: grid; + grid-template-columns: auto 1fr auto auto; + gap: 16px; + margin-bottom: 24px; + align-items: center; + } + .shopping-cart figure { + margin: 0; + } + .shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; + } + .shopping-cart p:nth-child(2) { + color: var(--very-light-pink); + } + .shopping-cart p:nth-child(3) { + font-size: var(--md); + font-weight: bold; + } + .primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; + } + + + /* MEDIA PARA EL MENU GRANDE SEA RESPONSIVO */ + @media (max-width: 640px) { /* de 0 hasta 640px */ + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + + /*para que el menu grande desaparesca en la parte mobile*/ + .desktop-menu{ + display: none; + } + /* para que la lista del carrito de compras, tome todo el espacio en mobile */ + .product-detail { + width: 100%; + } - - - - - - - - - - - /* MEDIA PARA EL MENU GRANDE SEA RESPONSIVO */ - @media (max-width: 640px) { - .menu { - display: block; - } - .navbar-left ul { - display: none; } - .navbar-email { + + @media (max-width: 640px) { + } + @media (min-width: 641px){ + .mobile-menu{ display: none; } } \ No newline at end of file From 494e760bb5fbe277bf1a18d1e68a4dcbe5c0692a Mon Sep 17 00:00:00 2001 From: alevitt Date: Thu, 7 Mar 2024 12:47:56 -0300 Subject: [PATCH 5/9] clase 22/29 lista de productos: HTML a partir de arrays , inicio de estructura para cargar una lista de producto que solicitamos al servidor --- index.html | 22 ++++++++++++++++++ main.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++-------- styles.css | 55 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a546df442..2a23df1f1 100644 --- a/index.html +++ b/index.html @@ -166,6 +166,28 @@ + +
+
+ + + + + + +
+
diff --git a/main.js b/main.js index 1793e2fbc..ffb7f7154 100644 --- a/main.js +++ b/main.js @@ -11,19 +11,19 @@ const menuCarritoIcon = document.querySelector('.navbar-shopping-cart')//icono d const asideComprasDetail = document.querySelector('.product-detail') // aside que aparece con al descripcion del carrito de compras cuando hacemos click en el carrito // Esconde o muestra el menu cuando hacemos click en el mail del uduario en la vercion de escritorio -const togleDesktopMenu = ()=>{ +const togleDesktopMenu = () => { const isCarritoMenuClouse = asideComprasDetail.classList.contains('inactive'); - if(!isCarritoMenuClouse){ + if (!isCarritoMenuClouse) { asideComprasDetail.classList.add('inactive'); } desktopMenuElement.classList.toggle('inactive') } // creamos la misma funcion para poner la clase incative pero ahora para cuando hagomos clik en el menu hamburguesas -const toggleMobileMenu = ()=>{ +const toggleMobileMenu = () => { const isCarritoMenuClouse = asideComprasDetail.classList.contains('inactive'); - if(!isCarritoMenuClouse){ + if (!isCarritoMenuClouse) { asideComprasDetail.classList.add('inactive'); } @@ -32,14 +32,14 @@ const toggleMobileMenu = ()=>{ } // funcion para poner la clase inactive al icono del carrito -const toggleCarritoIcon = ()=>{ - +const toggleCarritoIcon = () => { + const isMobileMenuElementCLouse = mobileMenuElement.classList.contains('inactive'); const isDesktopMenuClose = desktopMenuElement.classList.contains('inactive'); - if(!isMobileMenuElementCLouse ){ + if (!isMobileMenuElementCLouse) { mobileMenuElement.classList.add('inactive'); } - if(!isDesktopMenuClose){ + if (!isDesktopMenuClose) { desktopMenuElement.classList.add('inactive') } @@ -57,4 +57,54 @@ const toggleCarritoIcon = ()=>{ navbar_email_element.addEventListener('click', togleDesktopMenu); // escuchamos si el usuario hace click en el mail de l usaurio en la barra de navegacion hamburguerIconElement.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click',toggleCarritoIcon); \ No newline at end of file +menuCarritoIcon.addEventListener('click', toggleCarritoIcon); + +//array de la lista de producto cuando se hiciera una consulta al servidor pidiendo la lista de productos, que luego cargaremos en el html +const productList = []; + +productList.push({ + name: 'Bike', + price: 120, + image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", +}) +productList.push({ + name: 'Escritorio', + price: 180, + image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", +}) +productList.push({ + name: 'Computador', + price: 200, + image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", +}) + +const cardProducContainerElement = document.querySelector('.cards-container'); + + +// for of para los elementos +for (product of productList) { + const card = document.createRange().createContextualFragment(` +
+ +
+
+

${product.price}

+

${product.name}

+
+
+ +
+
+
+ `) + + cardProducContainerElement.append(card) +} + +console.log(productList) + +// for in para los indices del arreglo +for (indice in productList) { + console.log(indice) +} + diff --git a/styles.css b/styles.css index 1becd6856..af06b3595 100644 --- a/styles.css +++ b/styles.css @@ -237,6 +237,50 @@ height: 50px; } + /* ESTILOS PARA LA LISTA DE PRODUCTOS */ + .cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + + margin-top: 20px; + } + .product-card { + width: 240px; + } + .product-card img { + width: 240px; + height: 240px; + border-radius: 20px; + object-fit: cover; + } + .product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; + } + .product-info figure { + margin: 0; + } + .product-info figure img { + width: 35px; + height: 35px; + } + .product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; + } + .product-info div p:nth-child(2) { + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); + } + /* MEDIA PARA EL MENU GRANDE SEA RESPONSIVO */ @media (max-width: 640px) { /* de 0 hasta 640px */ @@ -260,6 +304,17 @@ width: 100%; } + /* medias para la lista de productos */ + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } } @media (max-width: 640px) { From 5adaf04cecdc7133e38598f72cfdc048057f5a04 Mon Sep 17 00:00:00 2001 From: alevitt Date: Mon, 11 Mar 2024 09:01:33 -0300 Subject: [PATCH 6/9] clase 23 introduccion a detalles del producto --- index.html | 38 ++++++++++++++++------------ main.js | 43 ++++++++++++++++++-------------- styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 117 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 2a23df1f1..a34cdc9ec 100644 --- a/index.html +++ b/index.html @@ -166,28 +166,34 @@ + + + +
+ +
+
+ - - - - - diff --git a/main.js b/main.js index ffb7f7154..5e1d343c3 100644 --- a/main.js +++ b/main.js @@ -81,25 +81,6 @@ productList.push({ const cardProducContainerElement = document.querySelector('.cards-container'); -// for of para los elementos -for (product of productList) { - const card = document.createRange().createContextualFragment(` -
- -
-
-

${product.price}

-

${product.name}

-
-
- -
-
-
- `) - - cardProducContainerElement.append(card) -} console.log(productList) @@ -108,3 +89,27 @@ for (indice in productList) { console.log(indice) } +function renderProductList(arr){ + // for of para los elementos + for (product of arr) { + + const card = document.createRange().createContextualFragment(` +
+ +
+
+

${product.price}

+

${product.name}

+
+
+ +
+
+
+ `) + + cardProducContainerElement.append(card) + } + +} +renderProductList(productList) \ No newline at end of file diff --git a/styles.css b/styles.css index af06b3595..118965c5a 100644 --- a/styles.css +++ b/styles.css @@ -281,6 +281,71 @@ color: var(--very-light-pink); } + /* ESTILOS PARA EL ASAID CON LA DESCRIPCION DE CADA PRODUCTO */ + .product-description { + width: 360px; + padding-bottom: 24px; + position: absolute; + right: 0; + } + .product-detail-close { + background: var(--white); + width: 14px; + height: 14px; + position: absolute; + top: 24px; + left: 24px; + z-index: 2; + padding: 12px; + border-radius: 50%; + } + .product-detail-close:hover { + cursor: pointer; + } + .product-detail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; + } + .product-info { + margin: 24px 24px 0 24px; + } + .product-info p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; + } + .product-info p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; + } + .product-info p:nth-child(3) { + color: var(--very-light-pink); + font-size: var(--sm); + margin-top: 0; + margin-bottom: 36px; + } + .primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; + } + .add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; + } + /* MEDIA PARA EL MENU GRANDE SEA RESPONSIVO */ @media (max-width: 640px) { /* de 0 hasta 640px */ @@ -315,10 +380,14 @@ width: 140px; height: 140px; } + + /* para que el aside description ocupe toda la pantalla en responsive o en version mobile */ + .product-description { + width: 100%; + } } - @media (max-width: 640px) { - } + @media (min-width: 641px){ .mobile-menu{ display: none; From 503c20a4f898995de990f9543e4d75e23f40bd22 Mon Sep 17 00:00:00 2001 From: alevitt Date: Mon, 11 Mar 2024 12:48:57 -0300 Subject: [PATCH 7/9] Se arreglo los etilos y los nombres de clase de los aside para que no haya conflictos con los nombres de la clases. Se comenzo con la clase 24 , en donde vamos a darle la funcion de que cuando clik en la img del producto se abra el aside con la descripcion del producto --- index.html | 6 +-- main.js | 3 +- styles.css | 141 ++++++++++++++++++++++++++++++----------------------- 3 files changed, 85 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index a34cdc9ec..5b5c0e342 100644 --- a/index.html +++ b/index.html @@ -118,7 +118,7 @@ -