diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..38b2514 --- /dev/null +++ b/.gitignore @@ -0,0 +1,20 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore + +style-guide.md +README-template.md +design/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..e96a48f --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +

Blogr landing page

+ +![Design preview for the Blogr landing page coding challenge](./images/project-preview.png) + +
+

+ + Live + + | + + Challenge + +

+
+
+ Solution for a challenge from frontendmentor.io. +
+
+
+
+ +## About The Project + +

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with. +

Your users should be able to: +
1. View the optimal layout depending on their device's screen size +
2. See hover states for interactive elements

+ +## Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- Grid +- Desktop-first workflow + +## What I learned + +The postioning of elements and centering of elements was a bit of a challange. But it worked out in the end. Still applying a overlay over elements seemed to be challenging diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/images/favicon-32x32.png differ diff --git a/images/icon-cart.svg b/images/icon-cart.svg new file mode 100644 index 0000000..c5b3d1b --- /dev/null +++ b/images/icon-cart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-close.svg b/images/icon-close.svg new file mode 100644 index 0000000..44ed6ff --- /dev/null +++ b/images/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-delete.svg b/images/icon-delete.svg new file mode 100644 index 0000000..052e485 --- /dev/null +++ b/images/icon-delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-menu.svg b/images/icon-menu.svg new file mode 100644 index 0000000..aeadad3 --- /dev/null +++ b/images/icon-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-minus.svg b/images/icon-minus.svg new file mode 100644 index 0000000..bcbd4d1 --- /dev/null +++ b/images/icon-minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-next.svg b/images/icon-next.svg new file mode 100644 index 0000000..d4c47f5 --- /dev/null +++ b/images/icon-next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-plus.svg b/images/icon-plus.svg new file mode 100644 index 0000000..a381026 --- /dev/null +++ b/images/icon-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon-previous.svg b/images/icon-previous.svg new file mode 100644 index 0000000..d567ad0 --- /dev/null +++ b/images/icon-previous.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/image-avatar.png b/images/image-avatar.png new file mode 100644 index 0000000..8540104 Binary files /dev/null and b/images/image-avatar.png differ diff --git a/images/image-product-1-thumbnail.jpg b/images/image-product-1-thumbnail.jpg new file mode 100644 index 0000000..0730ac8 Binary files /dev/null and b/images/image-product-1-thumbnail.jpg differ diff --git a/images/image-product-1.jpg b/images/image-product-1.jpg new file mode 100644 index 0000000..f7e0975 Binary files /dev/null and b/images/image-product-1.jpg differ diff --git a/images/image-product-2-thumbnail.jpg b/images/image-product-2-thumbnail.jpg new file mode 100644 index 0000000..558c8d5 Binary files /dev/null and b/images/image-product-2-thumbnail.jpg differ diff --git a/images/image-product-2.jpg b/images/image-product-2.jpg new file mode 100644 index 0000000..dc235b2 Binary files /dev/null and b/images/image-product-2.jpg differ diff --git a/images/image-product-3-thumbnail.jpg b/images/image-product-3-thumbnail.jpg new file mode 100644 index 0000000..f9156f7 Binary files /dev/null and b/images/image-product-3-thumbnail.jpg differ diff --git a/images/image-product-3.jpg b/images/image-product-3.jpg new file mode 100644 index 0000000..b70596d Binary files /dev/null and b/images/image-product-3.jpg differ diff --git a/images/image-product-4-thumbnail.jpg b/images/image-product-4-thumbnail.jpg new file mode 100644 index 0000000..db609d0 Binary files /dev/null and b/images/image-product-4-thumbnail.jpg differ diff --git a/images/image-product-4.jpg b/images/image-product-4.jpg new file mode 100644 index 0000000..e27b340 Binary files /dev/null and b/images/image-product-4.jpg differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..5d6c296 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/project-preview.png b/images/project-preview.png new file mode 100644 index 0000000..9de9fb9 Binary files /dev/null and b/images/project-preview.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1c3b57c --- /dev/null +++ b/index.html @@ -0,0 +1,288 @@ + + + + + + + + [E-commerce product page] | Frontend Mentor + + + + +
+ +
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ + + +
+
+ + + +
+
+
+
+ +
+
+
    +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
  • +
    + +
    • +
+
+
+
+
+
Sneaker Company
+

Fall Limited Edition Sneakers

+ + These low-profile sneakers are your perfect casual wear companion. + Featuring a durable rubber outer sole, they’ll withstand everything + the weather can offer. + +
+
+

$125.00

+ 50% +
+

$250.00

+
+
+
+
+ + + + + + +
+ 0 +
+ + + + + + +
+
+ +
+
+
+ + +
+ Challenge by + Frontend Mentor. Coded by Karan. +
+ + diff --git a/main.js b/main.js new file mode 100644 index 0000000..7bdc74f --- /dev/null +++ b/main.js @@ -0,0 +1,160 @@ +let counter = 0 + +const plus_icon = document.getElementById('plus_icon') +const minus_icon = document.getElementById('minus_icon') +const count = document.getElementById('count') +const previous_icon = document.getElementById('previous_icon') +const next_icon = document.getElementById('next_icon') +const product_img = document.getElementById('product_img_list') +const add_to_cart_btn = document.getElementById('btn_container') + +const hamburger_icon_container = document.querySelector( + '.hamburger_icon_container' +) +const close_icon_container = document.querySelector('.close_icon_container') +const nav_links_container = document.querySelector('.nav_links_container') + +const cart_icon_container = document.getElementById('cart_icon_container') +const item_count = document.getElementById('item-count') + +const checkout_preview_container = document.getElementById( + 'checkout_preview_container' +) +const checkout_preview_item = document.getElementById('checkout_preview_item') +let checkout_preview_item_delete = document.getElementById( + 'checkout_preview_item_delete' +) + +const checkout_preview_item_price = document.getElementById( + 'checkout_preview_item_price' +) +const checkout_preview_item_total_price = document.getElementById( + 'checkout_preview_item_total_price' +) +const checkout_preview_btn = document.getElementById('checkout_preview_btn') + +const main_img = document.getElementById('main_img') +const thumbnail_images = document.querySelectorAll('.thumbnail_img') + +function removeItem() { + counter = 0 + count.textContent = counter + item_count.textContent = counter + + checkout_preview_item.innerHTML = `
Your cart is empty
` + + if (!checkout_preview_btn.classList.contains('none')) + checkout_preview_btn.classList.add('none') +} +function getProductNumber(url) { + // Extract the filename from the URL + const filename = url.split('/').pop() + + // Extract the product number from the filename (assuming it's the first part before the hyphen) + const productNumber = filename.split('-')[2] + + return productNumber +} + +hamburger_icon_container.addEventListener('click', () => { + nav_links_container.classList.add('show') +}) + +close_icon_container.addEventListener('click', () => { + nav_links_container.classList.remove('show') +}) + +plus_icon.addEventListener('click', () => { + counter++ + count.textContent = counter +}) + +minus_icon.addEventListener('click', () => { + if (counter > 0) counter-- + count.textContent = counter +}) + +previous_icon.addEventListener('click', () => { + // Get the current left style value as a number + const currentLeft = parseFloat(product_img.style.left) || 0 // Handle cases where left is not set + + // Calculate the new left position + let newLeft = currentLeft + 100 // Subtract 100vw from the current value + + if (newLeft > 0) newLeft = -300 + + if (product_img.children.length * 100 <= Math.abs(newLeft)) { + newLeft = 0 + } + + // Set the new left style with units (vw) + product_img.style.left = `${newLeft}vw` +}) + +next_icon.addEventListener('click', () => { + // Get the current left style value as a number + const currentLeft = parseFloat(product_img.style.left) || 0 // Handle cases where left is not set + + // Calculate the new left position + let newLeft = currentLeft - 100 // Subtract 100vw from the current value + + if (product_img.children.length * 100 <= Math.abs(newLeft)) { + newLeft = 0 + } + + // Set the new left style with units (vw) + product_img.style.left = `${newLeft}vw` +}) + +add_to_cart_btn.addEventListener('click', () => { + item_count.textContent = counter + + if (counter > 0) { + checkout_preview_item.innerHTML = ` +
+ +
+
+
+ Fall Limited Edition Sneakers +
+
+ $125.00 x ${counter} + \$${(counter * 125).toFixed(2)} +
+
+
+ +
+ ` + if (checkout_preview_btn.classList.contains('none')) + checkout_preview_btn.classList.remove('none') + } else { + checkout_preview_item.innerHTML = `
Your cart is empty
` + + if (!checkout_preview_btn.classList.contains('none')) + checkout_preview_btn.classList.add('none') + } + + checkout_preview_item_delete = document.getElementById( + 'checkout_preview_item_delete' + ) + + checkout_preview_item_delete.addEventListener('click', removeItem) +}) + +cart_icon_container.addEventListener('click', () => { + checkout_preview_container.classList.toggle('none') +}) + +thumbnail_images.forEach((el) => { + el.addEventListener('click', () => { + main_img.src = `./images/image-product-${getProductNumber( + el.children[1].src + )}.jpg` + }) +}) diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..91c362c --- /dev/null +++ b/styles.css @@ -0,0 +1,754 @@ +@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap'); + +:root { + --header-height: 3.5rem; + + /*========== Colors ==========*/ + /* Change favorite color */ + --hue-color: 250; + /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ + + /* HSL color mode */ + --orange-color: hsl(26, 100%, 55%); + --orange-light-color: hsl(25, 100%, 94%); + --cyan-color: hsla(0, 0%, 0%, .5); + --light-grey-blue-color: hsl(223, 64%, 98%); + --grey-blue-color: hsl(220, 14%, 75%); + --dark-grey-blue-color: hsl(219, 9%, 45%); + --black-color: hsl(0, 0%, 0%); + --white-color: #fff; + + /*========== Font and typography ==========*/ + --body-font-alt: 'Poppins', sans-serif; + --body-font: "Kumbh Sans", sans-serif; + + /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */ + --bigger-font-size: 3rem; + --big-font-size: 2rem; + --h1-font-size: 1.5rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1.125rem; + --h4-font-size: 1rem; + --normal-font-size: .938rem; + --small-font-size: .813rem; + --smaller-font-size: .75rem; + + /*========== Font weight ==========*/ + --font-medium: 500; + --font-semi-bold: 600; + --font-bold: 700; + + /*========== Margenes Bottom ==========*/ + /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */ + --mb-0-25: .25rem; + --mb-0-5: .5rem; + --mb-0-75: .75rem; + --mb-1: 1rem; + --mb-1-5: 1.5rem; + --mb-2: 2rem; + --mb-2-5: 2.5rem; + --mb-3: 3rem; + --mb-4: 4rem; + + /*========== z index ==========*/ + --z-tooltip: 10; + --z-fixed: 100; + --z-modal: 1000; +} + +/* Font size for large devices */ +@media screen and (min-width: 968px) { + :root { + --header-height: 7rem; + --bigger-font-size: 4rem; + --big-font-size: 3rem; + --h1-font-size: 2.25rem; + --h2-font-size: 1.5rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: .875rem; + --smaller-font-size: .813rem; + } +} + + +/*==================== BASE ====================*/ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; + overflow-x: hidden; +} + +body { + margin: var(--header-height) auto 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + color: var(--black-color); + overflow: hidden; + max-width: 1024px; +} + +h1, h2, h3, h4 { + font-weight: var(--font-semi-bold); +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +button { + display: block; + outline: none; +} + +img { + display: block; + max-width: 100%; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.none { + display: none; +} + +.header { + margin: 0 auto; + display: flex; + justify-content: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-bottom: 1px solid var(--grey-blue-color); + height: var(--header-height); +} + +.nav { + position: relative; + max-width: 1024px; + anchor-name: --my-nav; +} + +.nav, .left-side_header, .right-side_header { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 100%; +} + +.right-side_header { + justify-content: end; +} + +.left-side_header, .right-side_header { + padding: 0 var(--mb-0-5); +} + +.logo { + transform: scale(.8); +} + +.nav_links_container { + /* display: none; */ + position: fixed; + top: 0; + left: -100%; + /* left: 0%; */ + height: 100%; + width: 100%; + color: var(--black-color); + font-weight: var(--font-bold); + background-color: var(--cyan-color); + z-index: var(--z-modal); + transition: left 700ms ease-in-out; +} + +.show { + left: 0%; +} + +.nav_links { + height: 100%; + width: 70vw; + z-index: 100; + background-color: var(--white-color); +} + +.close_icon_container { + padding: var(--mb-1) 0 var(--mb-4) var(--mb-1); +} + +.nav_list { + display: flex; + flex-direction: column; + gap: var(--mb-1); + margin-left: var(--mb-1); +} + +.cart_icon_container { + position: relative; + anchor-name: --my-cart; +} + +.cart_svg { + transform: scale(.8); +} + +.item-count { + position: absolute; + top: -30%; + right: -30%; + border-radius: 50%; + width: 16px; + height: 16px; + background-color: var(--orange-color); + display: flex; + place-content: center; + align-items: center; + font-size: var(--smaller-font-size); +} + +.profile_container { + margin: 0 var(--mb-0-5); + height: 50%; +} + +.profile_img { + height: 100%; +} + +.checkout_preview_container { + position: absolute; + width: 90%; + top: anchor(--my-nav bottom, calc(var(--header-height) + var(--mb-1))); + left: 50%; + transform: translate(-50%); + border-radius: var(--mb-0-5); + background: var(--white-color); + z-index: var(--z-fixed); +} + +.checkout_preview_title { + border-bottom: 2px solid var(--grey-blue-color); + padding: var(--mb-1) var(--mb-1-5); + font-weight: var(--font-bold); + font-size: var(--small-font-size); +} + +.checkout_preview_item { + display: flex; + place-items: center; + place-content: center; + gap: var(--mb-0-5); + padding: var(--mb-1); +} + +.checkout_preview_item_desc { + display: flex; + flex-direction: column; + gap: var(--mb-0-25); + place-content: center; + margin-right: auto; + color: var(--grey-blue-color); + font-size: var(--normal-font-size); +} + +.checkout_preview_item_total_price { + padding-left: 10px; + color: var(--black-color); + font-weight: var(--font-bold); +} + +.checkout_preview_item_img { + border-radius: var(--mb-0-25); + width: 50px; + height: 50px; + overflow: hidden; +} + +.checkout_preview_item_img img { + width: auto; + height: auto; + object-fit: cover; +} + +.checkout_preview_empty { + font-size: var(--small-font-size); + font-weight: var(--font-bold); + color: var(--grey-blue-color); + margin: var(--mb-2) 0; +} + +.checkout_preview_btn { + padding: 0 var(--mb-1); +} + +.checkout_preview_btn button { + background: var(--orange-color); + border: none; + padding: var(--mb-1); + border-radius: var(--mb-0-5); + width: 100%; + color: var(--white-color); + font-weight: var(--font-bold); + margin-bottom: var(--mb-1-5); +} + +.desktop_display { + display: none; +} + +.mobile-slider { + position: relative; + height: 100vw; + width: 500vw; +} + +.product_img_list { + position: absolute; + left: 0vw; + display: flex; +} + +.product_img { + width: 100vw; +} + +.previous_icon, .next_icon { + position: absolute; + top: 50%; + background-color: var(--white-color); + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + place-content: center; + align-items: center; +} + +.previous_icon { + left: 1%; +} + +.next_icon { + right: 81%; +} + +.product_container { + padding: var(--mb-1); +} + +.brand_title { + color: var(--orange-color); + text-transform: uppercase; + letter-spacing: .1rem; + font-weight: var(--font-bold); +} + +.product_title { + line-height: 1.1; + padding: var(--mb-0-5) 0 var(--mb-0-75); + font-weight: var(--font-bold); +} + +.product_description { + color: var(--grey-blue-color); + font-weight: var(--font-medium); + font-size: var(--small-font-size); +} + +.price_container { + margin: var(--mb-1) 0; + display: flex; + justify-content: space-between; +} + +.sale_container { + display: flex; + align-items: center; +} + +.discounted_price { + margin-right: var(--mb-1); + font-weight: var(--font-bold); +} + +.sale_percent { + background-color: var(--orange-light-color); + padding: var(--mb-0-25) var(--mb-0-5); + border-radius: var(--mb-0-5); + color: var(--orange-color); + font-weight: var(--font-bold); +} + +.actual_price { + text-decoration: line-through; + color: var(--grey-blue-color); +} + +.count_container { + background-color: var(--light-grey-blue-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--mb-0-75); +} + +.count { + font-weight: var(--font-bold); +} + +.btn_container { + border: none; + margin-top: var(--mb-0-75); + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--orange-color); + color: var(--white-color); + padding: var(--mb-0-75) 0; + border-radius: var(--mb-0-5); +} + +.attribution { + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + font-size: 11px; + text-align: center; +} + +.attribution a { + color: hsl(228, 45%, 44%); +} + +@media screen and (min-width: 360px) { + .hamburger_icon_container { + margin-left: var(--mb-0-5); + } + + .logo { + transform: scale(.9); + margin-left: var(--mb-0-5); + } +} + +@media screen and (min-width: 600px) { + + + .logo { + transform: scale(1.1); + margin-left: var(--mb-2); + } + + .cart_svg { + transform: scale(1.3); + } + + .item-count { + width: 20px; + height: 20px; + font-size: var(--normal-font-size); + } + + .profile_container { + height: 65%; + margin: 0 var(--mb-1); + } + + .profile_img { + height: 100%; + } + + .mobile-slider { + display: none; + } + + .desktop_display { + display: flex; + gap: var(--mb-1-5); + } + + .main_img { + overflow: hidden; + border-radius: 0 var(--mb-1-5) var(--mb-1-5) 0; + } + + .thumbnail_container { + display: flex; + + } + + .thumbnail_list { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 100%; + margin-right: var(--mb-1); + } + + .thumbnail_img { + position: relative; + overflow: hidden; + border-radius: var(--mb-1-5); + } + + .thumbnail_img:hover { + outline: 3px solid var(--orange-color); + } + + .overlay { + position: absolute; + width: 100%; + height: 100%; + background: var(--light-grey-blue-color); + opacity: .5; + } + + .brand_title { + font-size: var(--normal-font-size); + } + + .product_title { + font-size: var(--big-font-size); + } + + .product_description { + font-size: var(--h3-font-size); + } + + .discounted_price { + font-size: var(--big-font-size); + } + + .sale_percent { + font-size: var(--h3-font-size); + } + + .actual_price { + font-size: var(--h3-font-size); + } + + .count { + font-size: var(--h2-font-size); + } + + .minus_icon, .plus_icon { + transform: scale(1.3); + } + + .count_container { + padding: var(--mb-0-75) var(--mb-2); + } + + .btn_container { + margin-top: var(--mb-1-5); + font-size: var(--h3-font-size); + font-weight: bold; + } + + .cart { + transform: scale(1.2); + padding-right: var(--mb-0-75); + } +} + +@media screen and (min-width: 968px) { + .nav { + display: grid; + flex-direction: row; + grid-template-columns: auto 1fr; + align-items: center; + width: 100%; + height: 100%; + } + + .left-side_header { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: var(--mb-2); + place-content: center; + width: 100%; + height: 100%; + } + + .nav_links_container { + display: flex; + place-items: center; + position: initial; + background-color: transparent; + } + + .nav_links { + width: auto; + } + + + .nav_links { + height: 0%; + width: auto; + z-index: 100; + background-color: transparent; + } + + .nav_list { + display: flex; + flex-direction: column; + gap: var(--mb-1); + margin-left: var(--mb-1); + } + + .nav_list { + flex-direction: row; + align-items: center; + font-size: var(--h4-font-size); + height: 100%; + color: var(--grey-blue-color); + font-weight: var(--font-semi-bold); + } + + .nav_item { + margin-left: var(--mb-0-75); + } + + + + .logo_container { + width: fit-content; + } + + .logo { + transform: scale(1.3); + } + + .hamburger_icon_container { + display: none; + } + + .close_icon_container { + display: none; + } + + .cart_svg { + transform: scale(1.5); + } + + .profile_container { + height: 40%; + } + + .checkout_preview_container { + width: 400px; + left: initial; + right: 0%; + transform: translate(0%); + border: 1px solid var(--grey-blue-color); + } + + .main { + display: grid; + grid-template-columns: .8fr 1fr; + align-items: center; + column-gap: var(--mb-4); + } + + .image_container { + margin-top: var(--mb-4); + } + + .desktop_display { + gap: var(--mb-1-5); + flex-direction: column; + } + + .main_img { + border-radius: var(--mb-1-5); + } + + .thumbnail_list { + padding: var(--mb-0-25); + flex-direction: row; + gap: var(--mb-1-5); + margin: 0; + justify-content: space-between; + } + + .brand_title { + font-size: var(--small-font-size); + } + + .product_title { + font-size: var(--h1-font-size); + } + + .product_description { + font-size: var(--h4-font-size); + } + + .price_container { + gap: var(--mb-0-5); + flex-direction: column; + } + + .discounted_price { + font-size: var(--h2-font-size); + } + + .sale_percent { + font-size: var(--h4-font-size); + } + + .actual_price { + font-size: var(--normal-font-size); + } + + .grid_container { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: var(--mb-1); + } + + .count_container { + padding: 0 var(--mb-1-5); + } + + .count { + font-size: var(--h3-font-size); + } + + .btn_container { + margin-top: 0; + font-size: var(--h4-font-size); + } + + .cart { + transform: scale(.6); + padding-right: var(--mb-0-75); + } + + .minus_icon, .plus_icon { + display: flex; + place-content: center; + } +} \ No newline at end of file