From b7ab789dc1daf37ce5d12b616a0f6309c7a47df0 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 12:57:30 +0200 Subject: [PATCH 1/7] renamed for better managment --- clase1.html => class1-create-new-password.html | 0 clase10.html => class10-my-order-history.html | 0 clase11.html => class11-navbar.html | 0 clase12.html => class12-product-info.html | 0 clase13.html => class13-checkout-cart.html | 0 clase2.html => class2-email-sent.html | 0 clase3.html => class3-login.html | 0 clase4.html => class4-My-account.html | 0 clase5.html => class5-Account-edit.html | 0 clase6.html => class6-home.html | 0 clase7.html => class7-menu.html | 0 clase8.html => class8-menu-mobile.html | 0 clase9.html => class9-my-order.html | 0 13 files changed, 0 insertions(+), 0 deletions(-) rename clase1.html => class1-create-new-password.html (100%) rename clase10.html => class10-my-order-history.html (100%) rename clase11.html => class11-navbar.html (100%) rename clase12.html => class12-product-info.html (100%) rename clase13.html => class13-checkout-cart.html (100%) rename clase2.html => class2-email-sent.html (100%) rename clase3.html => class3-login.html (100%) rename clase4.html => class4-My-account.html (100%) rename clase5.html => class5-Account-edit.html (100%) rename clase6.html => class6-home.html (100%) rename clase7.html => class7-menu.html (100%) rename clase8.html => class8-menu-mobile.html (100%) rename clase9.html => class9-my-order.html (100%) diff --git a/clase1.html b/class1-create-new-password.html similarity index 100% rename from clase1.html rename to class1-create-new-password.html diff --git a/clase10.html b/class10-my-order-history.html similarity index 100% rename from clase10.html rename to class10-my-order-history.html diff --git a/clase11.html b/class11-navbar.html similarity index 100% rename from clase11.html rename to class11-navbar.html diff --git a/clase12.html b/class12-product-info.html similarity index 100% rename from clase12.html rename to class12-product-info.html diff --git a/clase13.html b/class13-checkout-cart.html similarity index 100% rename from clase13.html rename to class13-checkout-cart.html diff --git a/clase2.html b/class2-email-sent.html similarity index 100% rename from clase2.html rename to class2-email-sent.html diff --git a/clase3.html b/class3-login.html similarity index 100% rename from clase3.html rename to class3-login.html diff --git a/clase4.html b/class4-My-account.html similarity index 100% rename from clase4.html rename to class4-My-account.html diff --git a/clase5.html b/class5-Account-edit.html similarity index 100% rename from clase5.html rename to class5-Account-edit.html diff --git a/clase6.html b/class6-home.html similarity index 100% rename from clase6.html rename to class6-home.html diff --git a/clase7.html b/class7-menu.html similarity index 100% rename from clase7.html rename to class7-menu.html diff --git a/clase8.html b/class8-menu-mobile.html similarity index 100% rename from clase8.html rename to class8-menu-mobile.html diff --git a/clase9.html b/class9-my-order.html similarity index 100% rename from clase9.html rename to class9-my-order.html From 7968c6cf1ff80c8410f3f6d9abdcdfba501d61b3 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 13:56:41 +0200 Subject: [PATCH 2/7] navbar and menu desktop fusion --- index.html | 73 +++++++++++++++++++++++++++++ main.js | 9 ++++ styles.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 215 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..f3eed1c25 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + YardSale: Garage Online Sale + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..e190327f1 --- /dev/null +++ b/main.js @@ -0,0 +1,9 @@ +const menuEmail = document.querySelector(".navbar-email") +const desktopMenu = document.querySelector(".desktop-menu") + +menuEmail.addEventListener('click', toggleDesktopMenu) + +function toggleDesktopMenu() { +console.log('Click'); +desktopMenu.classList.toggle('inactive') +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..ddebc59c2 --- /dev/null +++ b/styles.css @@ -0,0 +1,133 @@ +: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; + } + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + font-size: var(--sm); + margin-right: 12px; + cursor: pointer; + caret-color: transparent; + } + + .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 { + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; + position:absolute; + background: var(--white); + top: 60px; + right: 60px; + } + .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; + } + + .inactive { + display: none; + } + + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + } \ No newline at end of file From e0644e72bd0d987084204e6b09547506859b3345 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 14:22:59 +0200 Subject: [PATCH 3/7] menu mobile fusion --- index.html | 44 ++++++++++++++++++++++++++++++++++++++++++ main.js | 15 +++++++++++---- styles.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 110 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index f3eed1c25..fc2b03a23 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,50 @@ + +
+ + + + + +
diff --git a/main.js b/main.js index e190327f1..8978c23fd 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,16 @@ const menuEmail = document.querySelector(".navbar-email") const desktopMenu = document.querySelector(".desktop-menu") +const menuHamIcon = document.querySelector(".menu") +const mobileMenu = document.querySelector(".mobile-menu") -menuEmail.addEventListener('click', toggleDesktopMenu) +menuEmail.addEventListener('click', toggleDesktopMenu) +menuHamIcon.addEventListener('click', toggleMobileMenu) function toggleDesktopMenu() { -console.log('Click'); -desktopMenu.classList.toggle('inactive') -} \ No newline at end of file + desktopMenu.classList.toggle('inactive') +} + +function toggleMobileMenu() { + mobileMenu.classList.toggle('inactive') +} + diff --git a/styles.css b/styles.css index ddebc59c2..95d6f24b1 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,5 @@ +/* General */ + :root { --white: #FFFFFF; --black: #000000; @@ -12,6 +14,8 @@ margin: 0; font-family: 'Quicksand', sans-serif; } + /* Navbar (general) */ + nav { display: flex; justify-content: space-between; @@ -78,6 +82,8 @@ align-items: center; } + /* Desktop menu */ + .desktop-menu { width: 100px; height: auto; @@ -116,6 +122,41 @@ display: inline-block; } + /* mobile menu*/ + + .mobile-menu { + padding: 24px; + position: absolute; + top: 60px; + cursor: pointer; + + + } + .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; + } .inactive { display: none; } @@ -123,6 +164,7 @@ @media (max-width: 640px) { .menu { display: block; + cursor: pointer; } .navbar-left ul { display: none; @@ -130,4 +172,16 @@ .navbar-email { display: none; } - } \ No newline at end of file + .desktop-menu { + display: none; + } + } + + @media (min-width: 641px) { + .mobile-menu { + display: none; + } + } + + + From 6b29ac2243dd0d3846346396937f543f1347eca5 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 15:12:54 +0200 Subject: [PATCH 4/7] add shopping cart --- index.html | 50 +++++++++++++++++++++++++++++- main.js | 42 ++++++++++++++++++++++--- styles.css | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 177 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index fc2b03a23..10bd737f6 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@
  • platzi@example.com
    • -
  • +
  • shopping cart
    2
    • @@ -112,6 +112,54 @@
+ + \ No newline at end of file diff --git a/main.js b/main.js index 8978c23fd..a72d3bd31 100644 --- a/main.js +++ b/main.js @@ -1,16 +1,50 @@ -const menuEmail = document.querySelector(".navbar-email") -const desktopMenu = document.querySelector(".desktop-menu") -const menuHamIcon = document.querySelector(".menu") -const mobileMenu = document.querySelector(".mobile-menu") +const menuEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); +const menuHamIcon = document.querySelector(".menu"); +const shoppingCartIcon = document.querySelector(".navbar-shopping-cart"); +const mobileMenu = document.querySelector(".mobile-menu"); +const aside = document.querySelector('.product-detail'); menuEmail.addEventListener('click', toggleDesktopMenu) menuHamIcon.addEventListener('click', toggleMobileMenu) +shoppingCartIcon.addEventListener('click',toggleShoppingCartAside) function toggleDesktopMenu() { + + const isAsideOpen = !aside.classList.contains('inactive') + + if (isAsideOpen) { + aside.classList.add('inactive') + } + desktopMenu.classList.toggle('inactive') } function toggleMobileMenu() { + const isAsideOpen = !aside.classList.contains('inactive') + + + if (isAsideOpen) { + aside.classList.add('inactive') + + } + mobileMenu.classList.toggle('inactive') + } +function toggleShoppingCartAside() { + const isMobileMenuOpen = !mobileMenu.classList.contains('inactive') + const isdesktopMenuOpen = !desktopMenu.classList.contains('inactive') + + + if (isMobileMenuOpen ) { + mobileMenu.classList.add('inactive') + + } else if (isdesktopMenuOpen) { + desktopMenu.classList.add('inactive') + } + + aside.classList.toggle('inactive') + +} diff --git a/styles.css b/styles.css index 95d6f24b1..a6a33e5f1 100644 --- a/styles.css +++ b/styles.css @@ -21,6 +21,7 @@ justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); + caret-color: transparent } .menu { display: none; @@ -66,6 +67,7 @@ .navbar-shopping-cart { position: relative; + cursor: pointer; } .navbar-shopping-cart div { width: 16px; @@ -125,10 +127,12 @@ /* mobile menu*/ .mobile-menu { - padding: 24px; + padding: 0 24px; position: absolute; top: 60px; cursor: pointer; + background: white; + margin-top: 1px; } @@ -161,6 +165,88 @@ display: none; } + /* Aside Product Detail */ + + .product-detail { + width: 360px; + padding: 0 24px; + box-sizing: border-box; + position: absolute; + right: 0; + background: white; + } + .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; + cursor: pointer; + + } + .shopping-cart figure { + margin: 0; + } + .shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; + cursor: pointer; + } + .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; @@ -175,6 +261,9 @@ .desktop-menu { display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px) { From 3ded12a62c159aae49f3e4a4daba4d78c7bad151 Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 16:12:55 +0200 Subject: [PATCH 5/7] creating html from js product list --- index.html | 5 + main.js | 62 +++++++++++ styles.css | 315 +++++++++++++++++++++++++++++++++++------------------ 3 files changed, 276 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index 10bd737f6..a7d7aabf9 100644 --- a/index.html +++ b/index.html @@ -160,6 +160,11 @@ +
+
+ +
+ \ No newline at end of file diff --git a/main.js b/main.js index a72d3bd31..d8576d143 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const menuHamIcon = document.querySelector(".menu"); const shoppingCartIcon = document.querySelector(".navbar-shopping-cart"); 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,3 +49,64 @@ function toggleShoppingCartAside() { aside.classList.toggle('inactive') } + +const productArray = []; +productArray.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' +}) +productArray.push({ + name: 'Screen', + price: 220, + image: 'https://images.pexels.com/photos/6476808/pexels-photo-6476808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' +}) +productArray.push({ + name: 'Computer', + price: 620, + image: 'https://images.pexels.com/photos/461064/pexels-photo-461064.jpeg?auto=compress&cs=tinysrgb&w=600' +}) + +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(productArray) + diff --git a/styles.css b/styles.css index a6a33e5f1..31f846eb5 100644 --- a/styles.css +++ b/styles.css @@ -9,67 +9,78 @@ --sm: 14px; --md: 16px; --lg: 18px; - } - body { +} + +body { margin: 0; font-family: 'Quicksand', sans-serif; - } - /* Navbar (general) */ +} + +/* Navbar (general) */ - nav { +nav { display: flex; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); caret-color: transparent - } - .menu { +} + +.menu { display: none; - } - .logo { +} + +.logo { width: 100px; - } - .navbar-left ul, - .navbar-right ul { +} + +.navbar-left ul, +.navbar-right ul { list-style: none; padding: 0; margin: 0; display: flex; 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-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 { +} + +.navbar-left 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); font-size: var(--sm); margin-right: 12px; cursor: pointer; caret-color: transparent; - } +} - .navbar-shopping-cart { +.navbar-shopping-cart { position: relative; cursor: pointer; - } - .navbar-shopping-cart div { +} + +.navbar-shopping-cart div { width: 16px; height: 16px; background-color: var(--hospital-green); @@ -82,111 +93,128 @@ display: flex; justify-content: center; align-items: center; - } +} - /* Desktop menu */ +/* Desktop menu */ - .desktop-menu { +.desktop-menu { width: 100px; height: auto; border: 1px solid var(--very-light-pink); border-radius: 6px; padding: 20px 20px 0 20px; - position:absolute; + position: absolute; background: var(--white); top: 60px; right: 60px; - } - .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(1), +.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; display: inline-block; - } +} - /* mobile menu*/ +/* mobile menu*/ - .mobile-menu { +.mobile-menu { padding: 0 24px; position: absolute; top: 60px; cursor: pointer; background: white; margin-top: 1px; - - } - .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; - } - .inactive { +} + +.inactive { display: none; - } +} + +/* Aside Product Detail */ - /* Aside Product Detail */ - - .product-detail { +.product-detail { width: 360px; padding: 0 24px; box-sizing: border-box; position: absolute; right: 0; background: white; - } - .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; @@ -195,46 +223,55 @@ margin-bottom: 24px; 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; cursor: pointer; - - } - .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; cursor: pointer; - } - .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; @@ -244,33 +281,99 @@ font-size: var(--md); font-weight: bold; height: 50px; - } +} + +/* 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; + caret-color: transparent +} + +.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) { +@media (max-width: 640px) { .menu { - display: block; - cursor: pointer; + display: block; + cursor: pointer; } + .navbar-left ul { - display: none; + display: none; } + .navbar-email { - display: none; + display: none; } + .desktop-menu { display: none; } + .product-detail { width: 100%; - } - } + } - @media (min-width: 641px) { - .mobile-menu { - display: none; + .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; + } +} \ No newline at end of file From f26913ac69afff0297c798bb600210f19f8f8eeb Mon Sep 17 00:00:00 2001 From: Arturo Romero Date: Mon, 22 Jul 2024 16:43:50 +0200 Subject: [PATCH 6/7] adding product details and fixing css errors --- index.html | 20 +++++++++++-- main.js | 16 +++++------ styles.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 100 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index a7d7aabf9..4edf2f5e7 100644 --- a/index.html +++ b/index.html @@ -112,7 +112,7 @@ - -