From c4835d2adf24f63843e3f72559e885f011515ed4 Mon Sep 17 00:00:00 2001 From: dbsalazarr Date: Sat, 4 Nov 2023 18:21:06 -0500 Subject: [PATCH 01/11] Menu responsive - terminado --- css/style.css | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 107 ++++------------------------ main.js | 130 +++++++--------------------------- 3 files changed, 229 insertions(+), 201 deletions(-) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..9385f3454 --- /dev/null +++ b/css/style.css @@ -0,0 +1,193 @@ +:root { +--white: #FFFFFF; +--black: #000000; +--very-light-pink: #C7C7C7; +--text-input-field: #F7F7F7; +--hospital-green: #ACD9B2; +--sm: 14px; +--md: 16px; +--lg: 18px; +} +*, +*::before, +*::after{ + box-sizing: border-box; +} +html{ + box-sizing: border-box; + font-size: 62.5%; /*Now 10px is equal to 1rem*/ +} +body { + margin: 0; + font: normal normal 1.6rem 'Quicksand', sans-serif; +} + +.desktop-menu { + width: 140px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; + position: absolute; + top: 100%; + right: 6rem; + display: none; +} +.desktop-menu.active{ + display: block; +} +.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; +} + +/* + NAV +*/ +nav { + position: relative; + 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; + cursor: pointer; + transition: color .25s ease-in-out; +} +.navbar-email:hover{ + color: var(--hospital-green); +} +.navbar-shopping-cart { + position: relative; + cursor: pointer; +} +.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; +} +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } +} +/* + MOBILE MENU +*/ +.mobile-menu { + display: none; + width: 100%; + padding: 24px; + position: absolute; + top: 100%; + left: 0; +} +.mobile-menu.active{ + display: block; +} +.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; +} +@media only screen and (min-width: 640px) { + .mobile-menu, + .mobile-menu.active{ + display: none !important; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 8e91d429a..95dea5c88 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,14 @@ - + - - - - - YardSale: tienda online de cositas chidas + + Shopify - Yard Sale - - - - - -
-
- - - -
-
- - + + + - + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..aa8bb1223 100644 --- a/main.js +++ b/main.js @@ -1,119 +1,37 @@ -const menuEmail = document.querySelector('.navbar-email'); -const menuHamIcon = document.querySelector('.menu'); -const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); -const productDetailCloseIcon = document.querySelector('.product-detail-close') -const desktopMenu = document.querySelector('.desktop-menu'); -const mobileMenu = document.querySelector('.mobile-menu'); -const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); -const productDetailContainer = document.querySelector('#productDetail'); -const cardsContainer = document.querySelector('.cards-container'); +const navbarEmail = document.querySelector(".navbar-email") +const desktopMenu = document.querySelector(".desktop-menu") +const barMenu = document.querySelector(".menu") +const menuMobile = document.querySelector(".mobile-menu") -menuEmail.addEventListener('click', toggleDesktopMenu); -menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); +console.log(desktopMenu.classList.contains("active") ) -function toggleDesktopMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - desktopMenu.classList.toggle('inactive'); -} - -function toggleMobileMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - closeProductDetailAside(); - - mobileMenu.classList.toggle('inactive'); +// * FUNCIONES +function toggleElement(selectorElement, className){ + let tagHTML; + tagHTML = document.querySelector(selectorElement) + tagHTML.classList.toggle(className); } -function toggleCarritoAside() { - const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); - - if (!isMobileMenuClosed) { - mobileMenu.classList.add('inactive'); - } - const isProductDetailClosed = productDetailContainer.classList.contains('inactive'); - - if (!isProductDetailClosed) { - productDetailContainer.classList.add('inactive'); - } +// * AGREGANDO EVENTOS +navbarEmail.addEventListener("click", (e) =>{ + e.preventDefault() - shoppingCartContainer.classList.toggle('inactive'); -} + toggleElement(".desktop-menu","active") -function openProductDetailAside() { - shoppingCartContainer.classList.add('inactive'); - productDetailContainer.classList.remove('inactive'); -} + // if (!desktopMenu.classList.contains("active")){ + // desktopMenu.classList.add('active') + // }else{ + // desktopMenu.classList.remove('active') + // } +}) -function closeProductDetailAside() { - productDetailContainer.classList.add('inactive'); -} -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: 'Pantalla', - price: 220, - image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', -}); -productList.push({ - name: 'Compu', - price: 620, - image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', -}); - -function renderProducts(arr) { - for (product of arr) { - const productCard = document.createElement('div'); - productCard.classList.add('product-card'); - - // product= {name, price, image} -> product.image - const productImg = document.createElement('img'); - productImg.setAttribute('src', product.image); - productImg.addEventListener('click', openProductDetailAside); - - const productInfo = document.createElement('div'); - productInfo.classList.add('product-info'); - - const productInfoDiv = document.createElement('div'); - - const productPrice = document.createElement('p'); - productPrice.innerText = '$' + product.price; - const productName = document.createElement('p'); - productName.innerText = product.name; - - productInfoDiv.appendChild(productPrice); - productInfoDiv.appendChild(productName); - - const productInfoFigure = document.createElement('figure'); - const productImgCart = document.createElement('img'); - productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg'); - - productInfoFigure.appendChild(productImgCart); - - productInfo.appendChild(productInfoDiv); - productInfo.appendChild(productInfoFigure); - - productCard.appendChild(productImg); - productCard.appendChild(productInfo); - - cardsContainer.appendChild(productCard); - } -} +barMenu.addEventListener("click", (e) => { + e.preventDefault() + toggleElement(".mobile-menu", "active") +}) -renderProducts(productList); From 2a33e62407f830e6d75baa93bc504bc664b94f54 Mon Sep 17 00:00:00 2001 From: dbsalazarr Date: Mon, 6 Nov 2023 17:17:28 -0500 Subject: [PATCH 02/11] Carrito de compras alternado - Terminado --- css/style.css | 121 +++++++++++++++++++++++++++++++++++++++++++++----- index.html | 53 +++++++++++++++++++++- main.js | 52 +++++++++++++++++++--- 3 files changed, 207 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 9385f3454..5f34fa572 100644 --- a/css/style.css +++ b/css/style.css @@ -1,17 +1,17 @@ :root { ---white: #FFFFFF; ---black: #000000; ---very-light-pink: #C7C7C7; ---text-input-field: #F7F7F7; ---hospital-green: #ACD9B2; ---sm: 14px; ---md: 16px; ---lg: 18px; + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 14px; + --md: 16px; + --lg: 18px; } *, *::before, *::after{ - box-sizing: border-box; + box-sizing: inherit; } html{ box-sizing: border-box; @@ -22,6 +22,15 @@ body { font: normal normal 1.6rem 'Quicksand', sans-serif; } +/* + * GENERALES +*/ + + +/* + * UTILITARIOS +*/ + .desktop-menu { width: 140px; height: auto; @@ -64,7 +73,7 @@ border-top: 1px solid var(--very-light-pink); } /* - NAV + * NAV */ nav { position: relative; @@ -147,7 +156,7 @@ nav { } } /* - MOBILE MENU + * MOBILE MENU */ .mobile-menu { display: none; @@ -188,6 +197,94 @@ nav { @media only screen and (min-width: 640px) { .mobile-menu, .mobile-menu.active{ - display: none !important; + display: none; + } +} + +/* + *LISTA DE PRODUCTOS +*/ +.product-detail { + width: 360px; + padding: 24px; + padding-top: 1rem; + box-sizing: border-box; + position: absolute; + right: 0; + display: none; + } +.product-detail.active{ + display: block; +} +.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 (max-width: 640px) { + .product-detail { + width: 100%; } } \ No newline at end of file diff --git a/index.html b/index.html index 95dea5c88..beea7e9b3 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ Shopify - Yard Sale + + + + + \ No newline at end of file diff --git a/main.js b/main.js index aa8bb1223..1552522e1 100644 --- a/main.js +++ b/main.js @@ -2,6 +2,8 @@ const navbarEmail = document.querySelector(".navbar-email") const desktopMenu = document.querySelector(".desktop-menu") const barMenu = document.querySelector(".menu") const menuMobile = document.querySelector(".mobile-menu") +const carButton = document.querySelector(".navbar-shopping-cart") +const shoppingCart = document.querySelector(".product-detail") console.log(desktopMenu.classList.contains("active") ) @@ -14,13 +16,42 @@ function toggleElement(selectorElement, className){ tagHTML = document.querySelector(selectorElement) tagHTML.classList.toggle(className); } +/** + * Permite cerrar un menú cuando el otro esta activo de forma que permite evitar la superposición de elementos, optimizando la visualizacion de los menus. + * Verifica si el menu2 (menu invasor) cuenta con la clase active (abierto) y en tal caso cierra tal menu y agrega la clase active al menu (menú que se desea mostrar) + * @param {string} classMenu1 + * @param {string} classMenu2 + * @param {string} classElement + */ +function optimizarVisualizacionMenus(classMenu1, classMenu2, classElement){ + const menu1 = document.querySelector(classMenu1) + const menu2 = document.querySelector(classMenu2) + let isOpenMenu2 = menu2.classList.contains(classElement) + if (isOpenMenu2){ + menu2.classList.remove(classElement) + menu1.classList.add(classElement) + }else{ + toggleElement(classMenu1, classElement) + } +} -// * AGREGANDO EVENTOS +// * EVENTOS +document.addEventListener("DOMContentLoaded", () =>{ + console.log("El documento esta listo para ser manipulado") +}) +window.addEventListener("resize", ()=>{ + const anchoVentana = window.innerWidth + if( anchoVentana >= 640){ + menuMobile.classList.remove("active") + } +}) + navbarEmail.addEventListener("click", (e) =>{ e.preventDefault() - - toggleElement(".desktop-menu","active") + + // toggleElement(".desktop-menu","active") + optimizarVisualizacionMenus(".desktop-menu", ".product-detail", "active") // if (!desktopMenu.classList.contains("active")){ // desktopMenu.classList.add('active') @@ -29,9 +60,20 @@ navbarEmail.addEventListener("click", (e) =>{ // } }) - barMenu.addEventListener("click", (e) => { e.preventDefault() - toggleElement(".mobile-menu", "active") + // toggleElement(".mobile-menu"," active") + optimizarVisualizacionMenus(".mobile-menu", ".product-detail", "active") }) +carButton.addEventListener("click", (e) => { + e.preventDefault() + // toggleElement(".product-detail", "active") + if (window.innerWidth >= 640){ + optimizarVisualizacionMenus(".product-detail", ".desktop-menu", "active") + }else{ + optimizarVisualizacionMenus(".product-detail", ".mobile-menu", "active") + } +}) + + From 953dd779195a6583018c1712d5a8d31aedeaa568 Mon Sep 17 00:00:00 2001 From: dbsalazarr Date: Mon, 6 Nov 2023 19:22:58 -0500 Subject: [PATCH 03/11] Generacion de items desde JS - Terminado --- css/style.css | 63 ++++++++++++++++++++++++- index.html | 128 +++++++++++++++++++++++++++++++++++++++++++++++++- main.js | 65 +++++++++++++++++++++++-- 3 files changed, 250 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 5f34fa572..3fff21bb0 100644 --- a/css/style.css +++ b/css/style.css @@ -35,6 +35,7 @@ body { width: 140px; height: auto; border: 1px solid var(--very-light-pink); + background: var(--white); border-radius: 6px; padding: 20px 20px 0 20px; position: absolute; @@ -165,6 +166,7 @@ nav { position: absolute; top: 100%; left: 0; + background: var(--white); } .mobile-menu.active{ display: block; @@ -202,7 +204,7 @@ nav { } /* - *LISTA DE PRODUCTOS + *LISTA DE PRODUCTOS (CARRITO DE COMPRAS) */ .product-detail { width: 360px; @@ -212,6 +214,7 @@ nav { position: absolute; right: 0; display: none; + background: var(--white); } .product-detail.active{ display: block; @@ -287,4 +290,62 @@ nav { .product-detail { width: 100%; } +} + +/* + * SECCION PRINCIPAL +*/ + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + margin-top: 2rem; +} +.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 (max-width: 640px) { + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } } \ No newline at end of file diff --git a/index.html b/index.html index beea7e9b3..477b3c082 100644 --- a/index.html +++ b/index.html @@ -112,8 +112,9 @@ - + + + + +
+
+ + +
+
+ + \ No newline at end of file diff --git a/main.js b/main.js index 1552522e1..9dec180bc 100644 --- a/main.js +++ b/main.js @@ -4,13 +4,69 @@ const barMenu = document.querySelector(".menu") const menuMobile = document.querySelector(".mobile-menu") const carButton = document.querySelector(".navbar-shopping-cart") const shoppingCart = document.querySelector(".product-detail") +const cardContainer = document.querySelector(".cards-container") -console.log(desktopMenu.classList.contains("active") ) +const nameProductList = ["Laptop", "Celular", "Bike", "Pescera", "El Psicoanalista - Libro"] +const priceProductList = [2100, 900, 120, 50, 10] +const imageProductList = [ + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" +] + +function products(name, price, image){ + this.name = name + this.price = price + this.image = image +} + +function generateProducts( name, price, image){ + const items = [] + for(let i=0; i < name.length; i++){ + let newProduct + newProduct = new products(name[i], price[i], image[i]) + items.push(newProduct) + } + return items +} + +const productList = generateProducts(nameProductList, priceProductList, imageProductList) + +/** + * Permite agregar los productos al HTML +*/ // * FUNCIONES + +function documentCreateHTMLProducts(){ + let htmlTags = "" + for( product of productList){ + htmlTags += ` +
+ ${product.name} +
+
+

$ ${product.price}

+

${product.name}

+
+
+ Recurso no encontrado +
+
+
+ ` + } + cardContainer.innerHTML = htmlTags +} + + function toggleElement(selectorElement, className){ let tagHTML; tagHTML = document.querySelector(selectorElement) @@ -37,8 +93,11 @@ function optimizarVisualizacionMenus(classMenu1, classMenu2, classElement){ // * EVENTOS + document.addEventListener("DOMContentLoaded", () =>{ console.log("El documento esta listo para ser manipulado") + // GENERAR LA LISTA DE PRODUCTOS + documentCreateHTMLProducts() }) window.addEventListener("resize", ()=>{ const anchoVentana = window.innerWidth @@ -74,6 +133,4 @@ carButton.addEventListener("click", (e) => { }else{ optimizarVisualizacionMenus(".product-detail", ".mobile-menu", "active") } -}) - - +}) \ No newline at end of file From 6e73eaea65d13c74d046d48a82701fdc24e20bac Mon Sep 17 00:00:00 2001 From: dbsalazarr Date: Tue, 7 Nov 2023 12:14:27 -0500 Subject: [PATCH 04/11] =?UTF-8?q?Generando=20la=20lista=20de=20productos?= =?UTF-8?q?=20mediante=20el=20m=C3=A9todo=20createElement=20y=20append?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 51 ++++++++++++++++++++++++++++++++++----------------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/main.js b/main.js index 9dec180bc..4091d0d72 100644 --- a/main.js +++ b/main.js @@ -46,24 +46,41 @@ const productList = generateProducts(nameProductList, priceProductList, imagePro // * FUNCIONES function documentCreateHTMLProducts(){ - let htmlTags = "" - for( product of productList){ - htmlTags += ` -
- ${product.name} -
-
-

$ ${product.price}

-

${product.name}

-
-
- Recurso no encontrado -
-
-
- ` + + for(product of productList){ + let divProductCard = document.createElement("div") + divProductCard.setAttribute("class", "product-card") + + let imgProduct = document.createElement("img") + imgProduct.setAttribute("src", product.image) + imgProduct.setAttribute("alt", "Imagen del producto no encontrado") + + let divProductInfo = document.createElement("div") + divProductInfo.setAttribute("class", "product-info") + + let divPriceName = document.createElement("div") + + let pPrice, pName + pPrice = document.createElement("p") + pName = document.createElement("p") + pPrice.innerText = product.price + pName.innerText = product.name + + let figureProduct = document.createElement("figure") + + let iconProduct = document.createElement("img") + iconProduct.setAttribute("src", "./icons/bt_add_to_cart.svg") + iconProduct.setAttribute("alt", "Icono de comprar no encontrado") + + divPriceName.append(pPrice, pName) + figureProduct.appendChild(iconProduct) + + divProductInfo.append(divPriceName, figureProduct) + + divProductCard.append(imgProduct, divProductInfo) + + cardContainer.appendChild(divProductCard) } - cardContainer.innerHTML = htmlTags } From 2e554fa38120ee07775ac3e173e9a35558eb9697 Mon Sep 17 00:00:00 2001 From: dbsalazarr Date: Wed, 8 Nov 2023 22:13:21 -0500 Subject: [PATCH 05/11] Agregando los detalles de los productos --- css/style.css | 74 ++++++++++++++++++++++++++++++ index.html | 122 ++++++++------------------------------------------ main.js | 2 +- 3 files changed, 93 insertions(+), 105 deletions(-) diff --git a/css/style.css b/css/style.css index 3fff21bb0..db184843d 100644 --- a/css/style.css +++ b/css/style.css @@ -348,4 +348,78 @@ nav { width: 140px; height: 140px; } +} + + +/* + * NUEVO DETALLE DE PRODUCTO +*/ + +.product-detail-store { + 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-store > 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 (max-width: 640px) { + .product-detail-store { + width: 100%; + } } \ No newline at end of file diff --git a/index.html b/index.html index 477b3c082..3b22f00cf 100644 --- a/index.html +++ b/index.html @@ -115,7 +115,7 @@ -