From c78b9d77abaa7bca9a68473fb10429259c099924 Mon Sep 17 00:00:00 2001 From: CodexDei Date: Fri, 15 Dec 2023 16:41:04 -0500 Subject: [PATCH 01/12] se crean archivos index.html, styles.css y main.js --- index.html | 139 ++------------------------- main.js | 121 +---------------------- styles.css | 277 ++++------------------------------------------------- 3 files changed, 35 insertions(+), 502 deletions(-) diff --git a/index.html b/index.html index 8e91d429a..923be2adc 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -11,8 +12,10 @@ - YardSale: tienda online de cositas chidas + MAYECREMS cremas naturales hechas con amor + + - - - - -
-
- - - -
-
- + - + + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..35acd6bd2 100644 --- a/main.js +++ b/main.js @@ -1,119 +1,8 @@ -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 menuEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); -menuEmail.addEventListener('click', toggleDesktopMenu); -menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); +menuEmail.addEventListener("click", toogleDesktopMenu); -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'); -} - -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'); - } - - shoppingCartContainer.classList.toggle('inactive'); +function toogleDesktopMenu() { + desktopMenu.classList.toggle("inactive"); } - -function openProductDetailAside() { - shoppingCartContainer.classList.add('inactive'); - productDetailContainer.classList.remove('inactive'); -} - -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); - } -} - -renderProducts(productList); diff --git a/styles.css b/styles.css index 7228eedc8..a6dbb37b9 100644 --- a/styles.css +++ b/styles.css @@ -1,36 +1,38 @@ -/* General */ :root { - --white: #FFFFFF; + --white: #ffffff; --black: #000000; - --very-light-pink: #C7C7C7; - --text-input-field: #F7F7F7; - --hospital-green: #ACD9B2; + --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; + font-family: "Quicksand", sans-serif; } + .inactive { display: none; } - -/* Navbar (general) */ 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; @@ -40,12 +42,15 @@ nav { 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; @@ -54,20 +59,24 @@ nav { 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); cursor: pointer; font-size: var(--sm); margin-right: 12px; } + .navbar-shopping-cart { position: relative; } + .navbar-shopping-cart div { width: 16px; height: 16px; @@ -83,12 +92,11 @@ nav { align-items: center; } -/* Menu en desktop */ .desktop-menu { position: absolute; top: 60px; right: 60px; - background: var(--white); + background: var(--black); width: 100px; height: auto; border: 1px solid var(--very-light-pink); @@ -116,265 +124,22 @@ nav { font-size: var(--sm); } .desktop-menu ul li a { - color: var(--back); + color: var(--white); text-decoration: none; margin-bottom: 20px; display: inline-block; } -/* Menu en mobile */ -.mobile-menu { - background-color: var(--white); - position: absolute; - top: 60px; - left: 0; - width: 100%; - 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; -} - - -/* Aside (product detail y carrito) */ -aside { - background-color: var(--white); - width: 360px; - box-sizing: border-box; - position: absolute; - right: 0; -} - -/* ShoppingCart */ -#shoppingCartContainer { - padding: 0 24px; -} -.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; -} - -/* ProductDetail */ -.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; -} -#productDetail > img:nth-child(2) { - width: 100%; - height: 360px; - object-fit: cover; - border-radius: 0 0 20px 20px; -} -#productDetail .product-info { - margin: 24px 24px 0 24px; -} -#productDetail .product-info p:nth-child(1) { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; -} -#productDetail .product-info p:nth-child(2) { - color: var(--very-light-pink); - font-size: var(--md); - margin-top: 0; - margin-bottom: 36px; -} -#productDetail .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; -} - - -/* Product List */ -.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-card .product-info { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 12px; -} -.product-card .product-info figure { - margin: 0; -} -.product-card .product-info figure img { - width: 35px; - height: 35px; -} -.product-card .product-info div p:nth-child(1) { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; -} -.product-card .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) { .menu { display: block; } + .navbar-left ul { display: none; } - .navbar-email { - display: none; - } - .desktop-menu { - display: none; - } - aside { - width: 100%; - } - - .cards-container { - grid-template-columns: repeat(auto-fill, 140px); - } - .product-card { - width: 140px; - } - .product-card img { - width: 140px; - height: 140px; - } -} - -@media (min-width: 641px) { - .mobile-menu { + .navbar-email { display: none; } } From 241066213d834550ff9466918d63787cc59beb36 Mon Sep 17 00:00:00 2001 From: CodexDei Date: Sat, 6 Jan 2024 17:58:43 -0500 Subject: [PATCH 02/12] configuracion de aerturas y cierres de menu de escritorio y mobil --- index.html | 98 ++++++++++++++++++++++++ main.js | 36 +++++++++ opcion_codigo/class DOMelementos | 21 ++++++ styles.css | 125 ++++++++++++++++++++++++++++++- 4 files changed, 279 insertions(+), 1 deletion(-) create mode 100644 opcion_codigo/class DOMelementos diff --git a/index.html b/index.html index 923be2adc..ac86c1263 100644 --- a/index.html +++ b/index.html @@ -71,8 +71,106 @@ +
+ + + + + +
+ + + diff --git a/main.js b/main.js index 35acd6bd2..7c55719c7 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,44 @@ const menuEmail = document.querySelector(".navbar-email"); const desktopMenu = document.querySelector(".desktop-menu"); +const carritoIcon = document.querySelector(".navbar-shopping-cart"); +const menuHamIcon = document.querySelector(".menu"); +const mobileMenu = document.querySelector(".mobile-menu"); +const aside = document.querySelector(".product-detail"); menuEmail.addEventListener("click", toogleDesktopMenu); +menuHamIcon.addEventListener("click", toogleMobileMenu); +carritoIcon.addEventListener("click", toogleasideCarrito); function toogleDesktopMenu() { + const isAsideClosed = aside.classList.contains("inactive"); + + if (!isAsideClosed) { + aside.classList.add("inactive"); + } + desktopMenu.classList.toggle("inactive"); } + +function toogleMobileMenu() { + const isAsideClosed = aside.classList.contains("inactive"); + + if (!isAsideClosed) { + aside.classList.add("inactive"); + } + + mobileMenu.classList.toggle("inactive"); +} + +function toogleasideCarrito() { + const isMobileMenuClosed = mobileMenu.classList.contains("inactive"); + const isDesktopMenuClosed = desktopMenu.classList.contains("inactive"); + + if (!isMobileMenuClosed) { + mobileMenu.classList.toggle("inactive"); + } + if (!isDesktopMenuClosed) { + desktopMenu.classList.toggle("inactive"); + } + + aside.classList.toggle("inactive"); +} diff --git a/opcion_codigo/class DOMelementos b/opcion_codigo/class DOMelementos new file mode 100644 index 000000000..6701aa4cb --- /dev/null +++ b/opcion_codigo/class DOMelementos @@ -0,0 +1,21 @@ +class DOMelementos { + constructor() { + this.menuEmail = document.querySelector(".navbar-email"); + this.desktopMenu = document.querySelector(".desktop-menu"); + this.menuHamIcon = document.querySelector(".menu"); + this.mobileMenu = document.querySelector(".mobile-menu"); + } +} + +const elementos = new DOMelementos(); + +elementos.menuEmail.addEventListener("click", toogleDesktopMenu); +elementos.menuHamIcon.addEventListener("click", toogleMobileMenu); + +function toogleDesktopMenu() { + desktopMenu.classList.toggle("inactive"); +} + +function toogleMobileMenu() { + mobileMenu.classList.toggle("inactive"); +} diff --git a/styles.css b/styles.css index a6dbb37b9..4fd6cd43b 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/*Generales*/ :root { --white: #ffffff; --black: #000000; @@ -17,7 +18,7 @@ body { .inactive { display: none; } - +/* Nacvar General */ nav { display: flex; justify-content: space-between; @@ -92,6 +93,7 @@ nav { align-items: center; } +/* Menu desktop */ .desktop-menu { position: absolute; top: 60px; @@ -130,6 +132,115 @@ nav { display: inline-block; } +/* Menu 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; +} + +/* Aside produtc detail y carrito */ + +.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 (max-width: 640px) { .menu { display: block; @@ -142,4 +253,16 @@ nav { .navbar-email { display: none; } + .desktop-menu { + display: none; + } + .product-detail { + width: 100%; + } +} + +@media (min-width: 641px) { + .mobile-menu { + display: none; + } } From 6db46ac5b8b05344d012c25eb0e0627817311757 Mon Sep 17 00:00:00 2001 From: CodexDei Date: Fri, 19 Jan 2024 00:03:03 -0500 Subject: [PATCH 03/12] agregamos funtion renderproducts --- index.html | 21 ++++++++ main.js | 143 +++++++++++++++++++++++++++++++++++++++++++++-------- styles.css | 55 +++++++++++++++++++++ 3 files changed, 199 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index ac86c1263..60069a523 100644 --- a/index.html +++ b/index.html @@ -171,6 +171,27 @@ +
+
+ + + +
+ diff --git a/main.js b/main.js index 7c55719c7..756504f36 100644 --- a/main.js +++ b/main.js @@ -1,44 +1,147 @@ -const menuEmail = document.querySelector(".navbar-email"); -const desktopMenu = document.querySelector(".desktop-menu"); -const carritoIcon = document.querySelector(".navbar-shopping-cart"); -const menuHamIcon = document.querySelector(".menu"); -const mobileMenu = document.querySelector(".mobile-menu"); -const aside = document.querySelector(".product-detail"); +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); +const carritoIcon = document.querySelector('.navbar-shopping-cart'); +const menuHamIcon = document.querySelector('.menu'); +const mobileMenu = document.querySelector('.mobile-menu'); +const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); -menuEmail.addEventListener("click", toogleDesktopMenu); -menuHamIcon.addEventListener("click", toogleMobileMenu); -carritoIcon.addEventListener("click", toogleasideCarrito); +menuEmail.addEventListener('click', toogleDesktopMenu); +menuHamIcon.addEventListener('click', toogleMobileMenu); +carritoIcon.addEventListener('click', toogleasideCarrito); function toogleDesktopMenu() { - const isAsideClosed = aside.classList.contains("inactive"); + const isAsideClosed = aside.classList.contains('inactive'); if (!isAsideClosed) { - aside.classList.add("inactive"); + aside.classList.add('inactive'); } - desktopMenu.classList.toggle("inactive"); + desktopMenu.classList.toggle('inactive'); } function toogleMobileMenu() { - const isAsideClosed = aside.classList.contains("inactive"); + const isAsideClosed = aside.classList.contains('inactive'); if (!isAsideClosed) { - aside.classList.add("inactive"); + aside.classList.add('inactive'); } - mobileMenu.classList.toggle("inactive"); + mobileMenu.classList.toggle('inactive'); } function toogleasideCarrito() { - const isMobileMenuClosed = mobileMenu.classList.contains("inactive"); - const isDesktopMenuClosed = desktopMenu.classList.contains("inactive"); + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); if (!isMobileMenuClosed) { - mobileMenu.classList.toggle("inactive"); + mobileMenu.classList.toggle('inactive'); } if (!isDesktopMenuClosed) { - desktopMenu.classList.toggle("inactive"); + desktopMenu.classList.toggle('inactive'); } - aside.classList.toggle("inactive"); + aside.classList.toggle('inactive'); } + +const productList = []; + +productList.push({ + name: 'bike', + price: '100', + image: + 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', +}); + +productList.push({ + name: 'computer', + price: '400', + image: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Computadora-PC.png/800px-Computadora-PC.png', +}); + +productList.push({ + name: 'car', + price: '1000', + image: + 'https://images.unsplash.com/photo-1614200179396-2bdb77ebf81b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D', +}); + +productList.push({ + name: 'bike', + price: '100', + image: + 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', +}); + +productList.push({ + name: 'computer', + price: '400', + image: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Computadora-PC.png/800px-Computadora-PC.png', +}); + +productList.push({ + name: 'car', + price: '1000', + image: + 'https://images.unsplash.com/photo-1614200179396-2bdb77ebf81b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D', +}); + +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ */ + +function renderProducts(arr) { + + for (product of arr) { + const productCard = document.createElement('div'); + productCard.classList.add('product-card'); + + const productImg = document.createElement('img'); + productImg.setAttribute('src', product.image); + + 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); + +} +} + +renderProducts(productList); + diff --git a/styles.css b/styles.css index 4fd6cd43b..4bad79ed6 100644 --- a/styles.css +++ b/styles.css @@ -241,6 +241,61 @@ nav { height: 50px; } +/* Product List */ + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; +} +.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; + } +} + @media (max-width: 640px) { .menu { display: block; From e2e7fd60396f829cf3098b08a465f5a0c675a3ef Mon Sep 17 00:00:00 2001 From: CodexDei Date: Fri, 19 Jan 2024 07:04:39 -0500 Subject: [PATCH 04/12] agregamos 'shoppingCartContainer' a nuestro index.html y styles.css --- index.html | 20 ++++++- main.js | 12 ++--- styles.css | 153 ++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 130 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index 60069a523..ee7d2a771 100644 --- a/index.html +++ b/index.html @@ -117,7 +117,7 @@ -