From a2385a2da181692ed6aaa3e2d56d6bd8fa86671a Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Mon, 7 Aug 2023 17:02:41 -0400 Subject: [PATCH 01/12] agregado de archivo css y javaScript, y fusion de los archivos 1 --- code.js | 9 + fusion.html | 74 ++++++++ styles.css | 533 +++++++++++++++------------------------------------- 3 files changed, 236 insertions(+), 380 deletions(-) create mode 100644 code.js create mode 100644 fusion.html diff --git a/code.js b/code.js new file mode 100644 index 000000000..eaca0a06e --- /dev/null +++ b/code.js @@ -0,0 +1,9 @@ +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); + +menuEmail.addEventListener('click', toggleDesktopMenu) + +function toggleDesktopMenu() +{ + desktopMenu.classList.toggle('inactive'); +} \ No newline at end of file diff --git a/fusion.html b/fusion.html new file mode 100644 index 000000000..d564561ba --- /dev/null +++ b/fusion.html @@ -0,0 +1,74 @@ + + + + + + + + + + + YardSale: tienda generica + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index 7228eedc8..5520aa1e1 100644 --- a/styles.css +++ b/styles.css @@ -1,380 +1,153 @@ -/* General */ -: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; -} -.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; - 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); - cursor: pointer; - 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; -} - -/* Menu en desktop */ -.desktop-menu { - position: absolute; - top: 60px; - right: 60px; - background: var(--white); - 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; -} - -/* 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 { - display: none; - } -} +: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; +} +.inactive +{ + display: none; +} +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); + cursor: pointer; + 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; +} + +.desktop-menu { + position: absolute; + top: 60px; + right: 0; + background: var(--white); + 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 (max-width: 640px) +{ + .menu + { + display: block; + } + .navbar-left ul + { + display: none; + } + .navbar-email + { + display: none; + } +} \ No newline at end of file From cfaeca53a729e5e63ea2d26e10c58ca27de2958a Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Wed, 9 Aug 2023 12:17:56 -0400 Subject: [PATCH 02/12] mobile menu and product list menu added --- code.js | 42 ++++++++++++++- fusion.html | 97 +++++++++++++++++++++++++++++++++- main.js | 119 ------------------------------------------ styles.css | 147 +++++++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 276 insertions(+), 129 deletions(-) delete mode 100644 main.js diff --git a/code.js b/code.js index eaca0a06e..1d6422fd9 100644 --- a/code.js +++ b/code.js @@ -1,9 +1,49 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu = document.querySelector('.desktop-menu'); +const menuButton = document.querySelector('.menu'); +const menuProductDetail = document.querySelector('.product-detail'); +const shoppingCartButton = document.querySelector('.navbar-shopping-cart'); +const mobileMenu = document.querySelector('.mobile-menu'); -menuEmail.addEventListener('click', toggleDesktopMenu) +menuEmail.addEventListener('click', toggleDesktopMenu); +menuButton.addEventListener('click', toggleMobileMenu); +shoppingCartButton.addEventListener('click', toggleMenuProductDetail); function toggleDesktopMenu() { + const isMenuProductDetail = menuProductDetail.classList.contains('inactive'); + + if(!isMenuProductDetail) + { + menuProductDetail.classList.add('inactive'); + } desktopMenu.classList.toggle('inactive'); +} + +function toggleMobileMenu() +{ + const isMenuProductDetail = menuProductDetail.classList.contains('inactive'); + + if(!isMenuProductDetail) + { + menuProductDetail.classList.add('inactive'); + } + mobileMenu.classList.toggle('inactive'); +} + +function toggleMenuProductDetail() +{ + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); + + if(!isMobileMenuClosed) + { + mobileMenu.classList.add('inactive'); + } + else if (!isDesktopMenuClosed) + { + desktopMenu.classList.add('inactive'); + } + + menuProductDetail.classList.toggle('inactive'); } \ No newline at end of file diff --git a/fusion.html b/fusion.html index d564561ba..c630313f4 100644 --- a/fusion.html +++ b/fusion.html @@ -47,11 +47,10 @@
  • platzi@example.com
  • shopping cart -
    2
    • - +
    • @@ -68,7 +67,101 @@
    + +
    + + + + + +
    + + + + \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index 7ebb1bb3e..000000000 --- a/main.js +++ /dev/null @@ -1,119 +0,0 @@ -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'); - -menuEmail.addEventListener('click', toggleDesktopMenu); -menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); - -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 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 5520aa1e1..f865dc440 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/*General*/ :root { --white: #FFFFFF; @@ -18,6 +19,8 @@ body { display: none; } + +/*NavBar*/ nav { display: flex; @@ -93,7 +96,9 @@ nav align-items: center; } -.desktop-menu { +/*Desktop menu*/ +.desktop-menu +{ position: absolute; top: 60px; right: 0; @@ -104,7 +109,8 @@ nav border-radius: 6px; padding: 20px 20px 0 20px; } -.desktop-menu ul { +.desktop-menu ul +{ list-style: none; padding: 0; margin: 0; @@ -136,18 +142,145 @@ nav display: inline-block; } -@media (max-width: 640px) +/*Mobile menu*/ +.mobile-menu +{ + background: var(--white); + position: absolute; + top: 61px; + padding: 0px 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; +} + +/*Product detail and shopping cart*/ +.product-detail { + background: var(--white); + width: 360px; + padding: 0px 24px 24px 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*/ +@media (max-width: 759px) { .menu { display: block; } - .navbar-left ul + .navbar-left ul, + .navbar-email, + .desktop-menu { - display: none; + display: none; } - .navbar-email + .product-detail { - display: none; + width: 100%; + } +} + +@media (min-width: 760px) +{ + .mobile-menu + { + display: none; } } \ No newline at end of file From 4eaf366290cede8145a710752dc6c88e8fa12dfa Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Mon, 18 Dec 2023 09:51:47 -0400 Subject: [PATCH 03/12] proyect added in git --- code.js | 63 +++++++-------- index.html | 39 +-------- styles.css | 227 ++++++++++++++++++++++++----------------------------- 3 files changed, 130 insertions(+), 199 deletions(-) diff --git a/code.js b/code.js index 1d6422fd9..c25be6c4d 100644 --- a/code.js +++ b/code.js @@ -1,49 +1,40 @@ const menuEmail = document.querySelector('.navbar-email'); +const menuHamIcon = document.querySelector('.menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const desktopMenu = document.querySelector('.desktop-menu'); -const menuButton = document.querySelector('.menu'); -const menuProductDetail = document.querySelector('.product-detail'); -const shoppingCartButton = document.querySelector('.navbar-shopping-cart'); const mobileMenu = document.querySelector('.mobile-menu'); +const aside = document.querySelector('.product-detail'); menuEmail.addEventListener('click', toggleDesktopMenu); -menuButton.addEventListener('click', toggleMobileMenu); -shoppingCartButton.addEventListener('click', toggleMenuProductDetail); +menuHamIcon.addEventListener('click', toggleMobileMenu); +menuCarritoIcon.addEventListener('click', toggleCarritoAside); -function toggleDesktopMenu() -{ - const isMenuProductDetail = menuProductDetail.classList.contains('inactive'); +function toggleDesktopMenu() { + const isAsideClosed = aside.classList.contains('inactive'); - if(!isMenuProductDetail) - { - menuProductDetail.classList.add('inactive'); - } - desktopMenu.classList.toggle('inactive'); + if (!isAsideClosed) { + aside.classList.add('inactive'); + } + + desktopMenu.classList.toggle('inactive'); } -function toggleMobileMenu() -{ - const isMenuProductDetail = menuProductDetail.classList.contains('inactive'); +function toggleMobileMenu() { + const isAsideClosed = aside.classList.contains('inactive'); - if(!isMenuProductDetail) - { - menuProductDetail.classList.add('inactive'); - } - mobileMenu.classList.toggle('inactive'); + if (!isAsideClosed) { + aside.classList.add('inactive'); + } + + mobileMenu.classList.toggle('inactive'); } -function toggleMenuProductDetail() -{ - const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); - const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); - - if(!isMobileMenuClosed) - { - mobileMenu.classList.add('inactive'); - } - else if (!isDesktopMenuClosed) - { - desktopMenu.classList.add('inactive'); - } - - menuProductDetail.classList.toggle('inactive'); +function toggleCarritoAside() { + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + + if (!isMobileMenuClosed) { + mobileMenu.classList.add('inactive'); + } + + aside.classList.toggle('inactive'); } \ No newline at end of file diff --git a/index.html b/index.html index 8e91d429a..ef0b802ae 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@ - - + \ No newline at end of file diff --git a/styles.css b/styles.css index 595c20887..e04fbf9dc 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ /* General */ -:root { +:root +{ --white: #FFFFFF; --black: #000000; --very-light-pink: #C7C7C7; @@ -9,30 +10,36 @@ --md: 16px; --lg: 18px; } - body { + body + { margin: 0; font-family: 'Quicksand', sans-serif; } - .inactive { + .inactive + { display: none; } /* Navbar (general) */ - nav { + nav + { display: flex; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); } - .menu { + .menu + { display: none; } - .logo { + .logo + { width: 100px; } .navbar-left ul, - .navbar-right ul { + .navbar-right ul + { list-style: none; padding: 0; margin: 0; @@ -40,14 +47,17 @@ align-items: center; height: 60px; } - .navbar-left { + .navbar-left + { display: flex; } - .navbar-left ul { + .navbar-left ul + { margin-left: 12px; } .navbar-left ul li a, - .navbar-right ul li a { + .navbar-right ul li a + { text-decoration: none; color: var(--very-light-pink); border: 1px solid var(--white); @@ -55,20 +65,24 @@ border-radius: 8px; } .navbar-left ul li a:hover, - .navbar-right ul li a:hover { + .navbar-right ul li a:hover + { border: 1px solid var(--hospital-green); color: var(--hospital-green); } - .navbar-email { + .navbar-email + { color: var(--very-light-pink); cursor: pointer; font-size: var(--sm); margin-right: 12px; } - .navbar-shopping-cart { + .navbar-shopping-cart + { position: relative; } - .navbar-shopping-cart div { + .navbar-shopping-cart div + { width: 16px; height: 16px; background-color: var(--hospital-green); @@ -84,7 +98,8 @@ } /* Menu en desktop */ - .desktop-menu { + .desktop-menu + { position: absolute; top: 60px; right: 60px; @@ -95,27 +110,33 @@ border-radius: 6px; padding: 20px 20px 0 20px; } - .desktop-menu ul { + .desktop-menu ul + { list-style: none; padding: 0; margin: 0; } - .desktop-menu ul li { + .desktop-menu ul li + { text-align: end; } .desktop-menu ul li:nth-child(1), - .desktop-menu ul li:nth-child(2) { + .desktop-menu ul li:nth-child(2) + { font-weight: bold; } - .desktop-menu ul li:last-child { + .desktop-menu ul li:last-child + { padding-top: 20px; border-top: 1px solid var(--very-light-pink); } - .desktop-menu ul li:last-child a { + .desktop-menu ul li:last-child a + { color: var(--hospital-green); font-size: var(--sm); } - .desktop-menu ul li a { + .desktop-menu ul li a + { color: var(--back); text-decoration: none; margin-bottom: 20px; @@ -123,41 +144,49 @@ } /* Menu en mobile */ - .mobile-menu { + .mobile-menu + { background-color: var(--white); position: absolute; top: 60px; padding: 24px; } - .mobile-menu a { + .mobile-menu a + { text-decoration: none; color: var(--black); font-weight: bold; /* margin-bottom: 24px; */ } - .mobile-menu ul { + .mobile-menu ul + { padding: 0; margin: 24px 0 0; list-style: none; } - .mobile-menu ul:nth-child(1) { + .mobile-menu ul:nth-child(1) + { border-bottom: 1px solid var(--very-light-pink); } - .mobile-menu ul li { + .mobile-menu ul li + { margin-bottom: 24px; } - .email { + .email + { font-size: var(--sm); font-weight: 300 !important; } - .sign-out { + .sign-out + { font-size: var(--sm); color: var(--hospital-green) !important; } /* Aside (product detail y carrito) */ - .product-detail { + .product-detail + { background-color: var(--white); width: 360px; padding: 0 24px; @@ -165,18 +194,22 @@ position: absolute; right: 0; } - .title-container { + .title-container + { display: flex; } - .title-container img { + .title-container img + { transform: rotate(180deg); margin-right: 14px; } - .title { + .title + { font-size: var(--lg); font-weight: bold; } - .order { + .order + { display: grid; grid-template-columns: auto 1fr; gap: 16px; @@ -186,42 +219,51 @@ border-radius: 8px; padding: 0 24px; } - .order p:nth-child(1) { + .order p:nth-child(1) + { display: flex; flex-direction: column; } - .order p span:nth-child(1) { + .order p span:nth-child(1) + { font-size: var(--md); font-weight: bold; } - .order p:nth-child(2) { + .order p:nth-child(2) + { text-align: end; font-weight: bold; } - .shopping-cart { + .shopping-cart + { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; margin-bottom: 24px; align-items: center; } - .shopping-cart figure { + .shopping-cart figure + { margin: 0; } - .shopping-cart figure img { + .shopping-cart figure img + { width: 70px; height: 70px; border-radius: 20px; object-fit: cover; } - .shopping-cart p:nth-child(2) { + .shopping-cart p:nth-child(2) + { color: var(--very-light-pink); } - .shopping-cart p:nth-child(3) { + .shopping-cart p:nth-child(3) + { font-size: var(--md); font-weight: bold; } - .primary-button { + .primary-button + { background-color: var(--hospital-green); border-radius: 8px; border: none; @@ -235,27 +277,35 @@ - @media (max-width: 640px) { - .menu { + @media (max-width: 640px) + { + .menu + { display: block; } - .navbar-left ul { + .navbar-left ul + { display: none; } - .navbar-email { + .navbar-email + { display: none; } - .desktop-menu { + .desktop-menu + { display: none; } - .product-detail { + .product-detail + { width: 100%; } } - @media (min-width: 641px) { - .mobile-menu { + @media (min-width: 641px) + { + .mobile-menu + { display: none; } } \ No newline at end of file From d67de7c3d4b67fbbead943a237f5bc69107dbd4f Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Mon, 18 Dec 2023 15:50:31 -0400 Subject: [PATCH 05/12] organizing the js code --- code.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code.js b/code.js index 3962f5050..798b9bab9 100644 --- a/code.js +++ b/code.js @@ -9,27 +9,32 @@ menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); menuCarritoIcon.addEventListener('click', toggleCarritoAside); -function toggleDesktopMenu() { +function toggleDesktopMenu() +{ const isAsideClosed = aside.classList.contains('inactive'); - if (!isAsideClosed) { + if (!isAsideClosed) + { aside.classList.add('inactive'); } desktopMenu.classList.toggle('inactive'); } -function toggleMobileMenu() { +function toggleMobileMenu() +{ const isAsideClosed = aside.classList.contains('inactive'); - if (!isAsideClosed) { + if (!isAsideClosed) + { aside.classList.add('inactive'); } mobileMenu.classList.toggle('inactive'); } -function toggleCarritoAside() { +function toggleCarritoAside() +{ const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); const isDesktopMenyClosed = desktopMenu.classList.contains('inactive'); From 4ae3127a71d31f59dab7f1d4dbef56a60f62a85d Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Mon, 18 Dec 2023 18:06:34 -0400 Subject: [PATCH 06/12] products on grid --- code.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 20 +++++++++++++- styles.css | 62 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 155 insertions(+), 5 deletions(-) diff --git a/code.js b/code.js index 798b9bab9..c10f5ed4a 100644 --- a/code.js +++ b/code.js @@ -4,6 +4,7 @@ const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const desktopMenu = document.querySelector('.desktop-menu'); const mobileMenu = document.querySelector('.mobile-menu'); const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); @@ -48,4 +49,79 @@ function toggleCarritoAside() } aside.classList.toggle('inactive'); -} \ No newline at end of file +} + +/* +
    + +
    +
    +

    $120,00

    +

    Bike

    +
    +
    + +
    +
    +
    + */ +const productInfo = []; +productInfo.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' +}); +productInfo.push( +{ + name: 'Motocycle', + price: 720, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' +}); +productInfo.push( +{ + name: 'Marihuana', + price: 420, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' +}); + +function productsRender(x) +{ + for (product of x) + { + const productCard = document.createElement('div'); + productCard.classList.add('product-card'); + + const productImg = document.createElement('img'); + productImg.setAttribute('src', product.image); + + const productDetails = document.createElement('div'); + productDetails.classList.add('product-details'); + + const productDetailsDiv = document.createElement('div'); + + const productPrice = document.createElement('p'); + productPrice.innerText = '$' + product.price; + const productName = document.createElement('p'); + productName.innerText = product.name; + + productDetailsDiv.appendChild(productPrice); + productDetailsDiv.appendChild(productName); + + const productDetailsFigure = document.createElement('figure'); + const productImgCart = document.createElement('img'); + productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg'); + + productDetailsFigure.appendChild(productImgCart); + + productDetails.appendChild(productDetailsDiv); + productDetails.appendChild(productDetailsFigure); + + productCard.appendChild(productImg); + productCard.appendChild(productDetails); + + cardsContainer.appendChild(productCard); + } +} + +productsRender(productInfo); \ No newline at end of file diff --git a/index.html b/index.html index 3ecb773a2..fe92b7cc3 100644 --- a/index.html +++ b/index.html @@ -158,9 +158,27 @@ Checkout - +
    +
    + + +
    +
    + \ No newline at end of file diff --git a/styles.css b/styles.css index e04fbf9dc..9ed995545 100644 --- a/styles.css +++ b/styles.css @@ -274,9 +274,51 @@ font-weight: bold; height: 50px; } - - - + + /*Show products*/ + .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-details { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; + } + .product-details figure { + margin: 0; + } + .product-details figure img { + width: 35px; + height: 35px; + } + .product-details div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; + } + .product-details 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 @@ -300,6 +342,20 @@ { 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) From 5e764fc8e469396ece159feb895c1b2090bdb626 Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Tue, 19 Dec 2023 15:04:02 -0400 Subject: [PATCH 07/12] adjusting the css code and fusion.html deleted --- fusion.html | 167 ---------------------------------------------------- styles.css | 24 +++++--- 2 files changed, 16 insertions(+), 175 deletions(-) delete mode 100644 fusion.html diff --git a/fusion.html b/fusion.html deleted file mode 100644 index c630313f4..000000000 --- a/fusion.html +++ /dev/null @@ -1,167 +0,0 @@ - - - - - - - - - - - YardSale: tienda generica - - - - - - - - - - \ No newline at end of file diff --git a/styles.css b/styles.css index 9ed995545..65ed9c528 100644 --- a/styles.css +++ b/styles.css @@ -276,42 +276,50 @@ } /*Show products*/ - .cards-container { + .cards-container + { display: grid; grid-template-columns: repeat(auto-fill, 240px); gap: 26px; place-content: center; margin-top: 20px; } - .product-card { + .product-card + { width: 240px; } - .product-card img { + .product-card img + { width: 240px; height: 240px; border-radius: 20px; object-fit: cover; } - .product-details { + .product-details + { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } - .product-details figure { + .product-details figure + { margin: 0; } - .product-details figure img { + .product-details figure img + { width: 35px; height: 35px; } - .product-details div p:nth-child(1) { + .product-details div p:nth-child(1) + { font-weight: bold; font-size: var(--md); margin-top: 0; margin-bottom: 4px; } - .product-details div p:nth-child(2) { + .product-details div p:nth-child(2) + { font-size: var(--sm); margin-top: 0; margin-bottom: 0; From 86d0b0db4ef668a398d26d061cd441c9a335f3cd Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Fri, 29 Dec 2023 12:12:34 -0400 Subject: [PATCH 08/12] changes on css --- styles.css | 686 ++++++++++++++++++++++++++--------------------------- 1 file changed, 343 insertions(+), 343 deletions(-) diff --git a/styles.css b/styles.css index 65ed9c528..672e7485d 100644 --- a/styles.css +++ b/styles.css @@ -1,375 +1,375 @@ /* General */ :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; - } - .inactive - { - display: none; - } - - - /* Navbar (general) */ - nav - { - display: flex; - justify-content: space-between; - padding: 0 24px; - border-bottom: 1px solid var(--very-light-pink); - } + --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; +} +.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; + 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); + cursor: pointer; + 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; +} + +/* Menu en desktop */ +.desktop-menu +{ + position: absolute; + top: 60px; + right: 60px; + background: var(--white); + 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; +} + +/* Menu en mobile */ +.mobile-menu +{ + background-color: var(--white); + 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 (product detail y carrito) */ +.product-detail +{ + background-color: var(--white); + 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; +} + +/*Show products*/ +.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-details +{ + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} +.product-details figure +{ + margin: 0; +} +.product-details figure img +{ + width: 35px; + height: 35px; +} +.product-details div p:nth-child(1) +{ + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-details 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: 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; + display: block; } .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); + display: none; } .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; - 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; + display: none; } - - /* Menu en desktop */ .desktop-menu { - position: absolute; - top: 60px; - right: 60px; - background: var(--white); - 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; - } - - /* Menu en mobile */ - .mobile-menu - { - background-color: var(--white); - 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; + display: none; } - - - /* Aside (product detail y carrito) */ + .product-detail { - background-color: var(--white); - 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; } - /*Show products*/ .cards-container { - display: grid; - grid-template-columns: repeat(auto-fill, 240px); - gap: 26px; - place-content: center; - margin-top: 20px; + grid-template-columns: repeat(auto-fill, 140px); } .product-card { - width: 240px; + width: 140px; } .product-card img { - width: 240px; - height: 240px; - border-radius: 20px; - object-fit: cover; - } - .product-details - { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 12px; - } - .product-details figure - { - margin: 0; - } - .product-details figure img - { - width: 35px; - height: 35px; - } - .product-details div p:nth-child(1) - { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; - } - .product-details div p:nth-child(2) - { - font-size: var(--sm); - margin-top: 0; - margin-bottom: 0; - color: var(--very-light-pink); + width: 140px; + height: 140px; } +} - - @media (max-width: 640px) +@media (min-width: 641px) +{ + .mobile-menu { - .menu - { - display: block; - } - .navbar-left ul - { - display: none; - } - .navbar-email - { - display: none; - } - .desktop-menu - { - display: none; - } - - .product-detail - { - width: 100%; - } - - .cards-container - { - grid-template-columns: repeat(auto-fill, 140px); - } - .product-card - { - width: 140px; - } - .product-card img - { - width: 140px; - height: 140px; - } + display: none; } - - @media (min-width: 641px) - { - .mobile-menu - { - display: none; - } - } \ No newline at end of file +} \ No newline at end of file From 290bb51d4e3a99ddad68b235efe523149fca3af3 Mon Sep 17 00:00:00 2001 From: Kiyoshi Marzo Date: Fri, 29 Dec 2023 12:57:35 -0400 Subject: [PATCH 09/12] product detail window --- code.js | 12 ++++----- index.html | 18 +++++++++++++- styles.css | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 92 insertions(+), 11 deletions(-) diff --git a/code.js b/code.js index c10f5ed4a..879301ed4 100644 --- a/code.js +++ b/code.js @@ -3,7 +3,7 @@ const menuHamIcon = document.querySelector('.menu'); const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const desktopMenu = document.querySelector('.desktop-menu'); const mobileMenu = document.querySelector('.mobile-menu'); -const aside = document.querySelector('.product-detail'); +const shoppingCartContainer = document.querySelector('#shopping-cart-container'); const cardsContainer = document.querySelector('.cards-container'); menuEmail.addEventListener('click', toggleDesktopMenu); @@ -12,11 +12,11 @@ menuCarritoIcon.addEventListener('click', toggleCarritoAside); function toggleDesktopMenu() { - const isAsideClosed = aside.classList.contains('inactive'); + const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); if (!isAsideClosed) { - aside.classList.add('inactive'); + shoppingCartContainer.classList.add('inactive'); } desktopMenu.classList.toggle('inactive'); @@ -24,11 +24,11 @@ function toggleDesktopMenu() function toggleMobileMenu() { - const isAsideClosed = aside.classList.contains('inactive'); + const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); if (!isAsideClosed) { - aside.classList.add('inactive'); + shoppingCartContainer.classList.add('inactive'); } mobileMenu.classList.toggle('inactive'); @@ -48,7 +48,7 @@ function toggleCarritoAside() desktopMenu.classList.add('inactive'); } - aside.classList.toggle('inactive'); + shoppingCartContainer.classList.toggle('inactive'); } /* diff --git a/index.html b/index.html index fe92b7cc3..28b887feb 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@ - -