From b1054857fb2da609feded4e14084214e820c9119 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20V=C3=A9liz?= Date: Tue, 8 Nov 2022 15:31:01 -0500 Subject: [PATCH 1/2] =?UTF-8?q?Versi=C3=B3n=20inicial=20del=20commit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {icons => curso-2/icons}/bt_add_to_cart.svg | 0 {icons => curso-2/icons}/bt_added_to_cart.svg | 0 {icons => curso-2/icons}/email.svg | 0 {icons => curso-2/icons}/flechita.svg | 0 {icons => curso-2/icons}/icon_close.png | Bin {icons => curso-2/icons}/icon_menu.svg | 0 .../icons}/icon_shopping_cart.svg | 0 .../icon_shopping_cart_notification.svg | 0 curso-2/index.html | 168 ++++++++++ .../logos}/favicon_bota_fora.svg | 0 .../logos}/favicon_yard_sale.svg | 0 {logos => curso-2/logos}/logo_bota_fora.svg | 0 {logos => curso-2/logos}/logo_yard_sale.svg | 0 curso-2/script.js | 133 ++++++++ curso-2/style.css | 295 ++++++++++++++++++ 15 files changed, 596 insertions(+) rename {icons => curso-2/icons}/bt_add_to_cart.svg (100%) rename {icons => curso-2/icons}/bt_added_to_cart.svg (100%) rename {icons => curso-2/icons}/email.svg (100%) rename {icons => curso-2/icons}/flechita.svg (100%) rename {icons => curso-2/icons}/icon_close.png (100%) rename {icons => curso-2/icons}/icon_menu.svg (100%) rename {icons => curso-2/icons}/icon_shopping_cart.svg (100%) rename {icons => curso-2/icons}/icon_shopping_cart_notification.svg (100%) create mode 100644 curso-2/index.html rename {logos => curso-2/logos}/favicon_bota_fora.svg (100%) rename {logos => curso-2/logos}/favicon_yard_sale.svg (100%) rename {logos => curso-2/logos}/logo_bota_fora.svg (100%) rename {logos => curso-2/logos}/logo_yard_sale.svg (100%) create mode 100644 curso-2/script.js create mode 100644 curso-2/style.css diff --git a/icons/bt_add_to_cart.svg b/curso-2/icons/bt_add_to_cart.svg similarity index 100% rename from icons/bt_add_to_cart.svg rename to curso-2/icons/bt_add_to_cart.svg diff --git a/icons/bt_added_to_cart.svg b/curso-2/icons/bt_added_to_cart.svg similarity index 100% rename from icons/bt_added_to_cart.svg rename to curso-2/icons/bt_added_to_cart.svg diff --git a/icons/email.svg b/curso-2/icons/email.svg similarity index 100% rename from icons/email.svg rename to curso-2/icons/email.svg diff --git a/icons/flechita.svg b/curso-2/icons/flechita.svg similarity index 100% rename from icons/flechita.svg rename to curso-2/icons/flechita.svg diff --git a/icons/icon_close.png b/curso-2/icons/icon_close.png similarity index 100% rename from icons/icon_close.png rename to curso-2/icons/icon_close.png diff --git a/icons/icon_menu.svg b/curso-2/icons/icon_menu.svg similarity index 100% rename from icons/icon_menu.svg rename to curso-2/icons/icon_menu.svg diff --git a/icons/icon_shopping_cart.svg b/curso-2/icons/icon_shopping_cart.svg similarity index 100% rename from icons/icon_shopping_cart.svg rename to curso-2/icons/icon_shopping_cart.svg diff --git a/icons/icon_shopping_cart_notification.svg b/curso-2/icons/icon_shopping_cart_notification.svg similarity index 100% rename from icons/icon_shopping_cart_notification.svg rename to curso-2/icons/icon_shopping_cart_notification.svg diff --git a/curso-2/index.html b/curso-2/index.html new file mode 100644 index 0000000..51e24b3 --- /dev/null +++ b/curso-2/index.html @@ -0,0 +1,168 @@ + + + + + + + Shopping Thing + + + + + + + +
+ + + + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/logos/favicon_bota_fora.svg b/curso-2/logos/favicon_bota_fora.svg similarity index 100% rename from logos/favicon_bota_fora.svg rename to curso-2/logos/favicon_bota_fora.svg diff --git a/logos/favicon_yard_sale.svg b/curso-2/logos/favicon_yard_sale.svg similarity index 100% rename from logos/favicon_yard_sale.svg rename to curso-2/logos/favicon_yard_sale.svg diff --git a/logos/logo_bota_fora.svg b/curso-2/logos/logo_bota_fora.svg similarity index 100% rename from logos/logo_bota_fora.svg rename to curso-2/logos/logo_bota_fora.svg diff --git a/logos/logo_yard_sale.svg b/curso-2/logos/logo_yard_sale.svg similarity index 100% rename from logos/logo_yard_sale.svg rename to curso-2/logos/logo_yard_sale.svg diff --git a/curso-2/script.js b/curso-2/script.js new file mode 100644 index 0000000..99fa3cd --- /dev/null +++ b/curso-2/script.js @@ -0,0 +1,133 @@ +const burgerIcon = document.getElementById("burger-icon") +const platziAnchor = document.getElementById("platzi-anchor"); +const shoppingAnchor = document.getElementById("shopping-anchor"); +burgerIcon.addEventListener("click", ftoggleMobileMenu); +platziAnchor.addEventListener("click", ftoggleDesktopMenu); +shoppingAnchor.addEventListener("click", ftoggleAsideMenu); + +const toggleNav = document.querySelector(".toggle-nav"); +const toggleMobileMenu = document.querySelector(".toggle-mobile-menu"); +const toggleDesktopMenu = document.querySelector(".toggle-desktop-menu"); +const toggleAsideMenu = document.querySelector(".toggle-aside-menu"); + +const cardsContainer = document.getElementById("cards-container"); +const productList = []; +productList.push({ + name: "Scooter (skate)", + img: "https://images.pexels.com/photos/3671151/pexels-photo-3671151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + price: 100 +}) +productList.push({ + name: "Rollerskates", + img: "https://media.istockphoto.com/id/182383572/es/foto/pat%C3%ADn-en-l%C3%ADnea.jpg?s=1024x1024&w=is&k=20&c=kKH67u3hYuxv6_Tx8dEI2zhWrq5iS7zmI-XlJF-9X0k=", + price: 125 +}) +productList.push({ + name: "Skateboard", + img: "https://images.pexels.com/photos/165236/pexels-photo-165236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + price: 150 +}) +productList.push({ + name: "Bike", + img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + price: 240 +}) +productList.push({ + name: "Scooter (bike)", + img: "https://images.pexels.com/photos/159192/vespa-roller-motor-scooter-cult-159192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + price: 360 +}) +productList.push({ + name: "Motorcycle", + img: "https://images.pexels.com/photos/2626665/pexels-photo-2626665.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", + price: 540 +}) +productList.push({ + name: "Kart", + img: "https://media.istockphoto.com/id/509793078/es/foto/go-kart.jpg?s=1024x1024&w=is&k=20&c=TwJCxnayGmr3CmrCae9C76-cB6BHlPgeD3OqOxyVwf0=", + price: 720 +}) +productList.push({ + name: "Quad", + img: "https://media.istockphoto.com/id/485397116/es/foto/potente-moderna-atv.jpg?s=1024x1024&w=is&k=20&c=vh9h38qojbMXjaYpTEahA9xgOmeLU1k9rJ0t3AgFojU=", + price: 999 +}) + // let cardFiller = ""; + // cardFiller += ` + //
+ // + //
+ //
+ //

${product.name}

+ //

${product.price}$

+ //
+ //
+ // + //
+ //
+ //
+ // ` + // cardsContainer.innerHTML = cardFiller; + +function renderProducts() { + for (product of productList) { + const productCardDiv = document.createElement("div"); + productCardDiv.classList.add("product-card"); + cardsContainer.appendChild(productCardDiv); + + const productImg = document.createElement("img"); + productImg.src = product.img; + productCardDiv.appendChild(productImg); + + const productInfoDiv = document.createElement("div"); + productInfoDiv.classList.add("product-info"); + productCardDiv.appendChild(productInfoDiv); + + const productInfoDivDiv = document.createElement("div"); + productInfoDiv.appendChild(productInfoDivDiv); + + const productInfoPrice = document.createElement("p"); + productInfoPrice.innerText = product.price + "$"; + productInfoDivDiv.appendChild(productInfoPrice); + + const productInfoName = document.createElement("p"); + productInfoName.innerText = product.name; + productInfoDivDiv.appendChild(productInfoName); + + const productInfoFigure = document.createElement("figure"); + productInfoDiv.appendChild(productInfoFigure); + + const addToCart = document.createElement("img"); + addToCart.src = "./icons/bt_add_to_cart.svg"; + productInfoFigure.appendChild(addToCart); + } +} +renderProducts(); + +function ftoggleMobileMenu() { + const isAsideClosed = toggleAsideMenu.classList.contains("toggle-aside-menu"); + if (!isAsideClosed) { + toggleAsideMenu.classList.toggle("toggle-aside-menu"); + }toggleMobileMenu.classList.toggle("toggle-mobile-menu"); + +} + +function ftoggleDesktopMenu() { + const isAsideClosed = toggleAsideMenu.classList.contains("toggle-aside-menu"); + if (!isAsideClosed) { + toggleAsideMenu.classList.toggle("toggle-aside-menu"); + } + toggleDesktopMenu.classList.toggle("toggle-desktop-menu"); +} + +function ftoggleAsideMenu() { + const isMobileClosed = toggleMobileMenu.classList.contains("toggle-mobile-menu"); + if (!isMobileClosed) { + toggleMobileMenu.classList.toggle("toggle-mobile-menu"); + } + const isDesktopClosed = toggleDesktopMenu.classList.contains("toggle-desktop-menu"); + if (!isDesktopClosed) { + toggleDesktopMenu.classList.toggle("toggle-desktop-menu"); + } + toggleAsideMenu.classList.toggle("toggle-aside-menu"); +} \ No newline at end of file diff --git a/curso-2/style.css b/curso-2/style.css new file mode 100644 index 0000000..8e998dc --- /dev/null +++ b/curso-2/style.css @@ -0,0 +1,295 @@ +: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; + align-items: center; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); +} +.menu { + cursor: pointer; +} +.menu, .toggle-mobile-menu, .toggle-desktop-menu, .toggle-aside-menu { + display: none; +} +.mobile-menu { + 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; +} +.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; + display: flex; + align-items: center; +} +.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; + position: relative; +} +.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; + width: 110px; + top: 133%; + height: auto; + background: var(--white); + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; +} +/* .navbar-email:hover a + .desktop-menu { + display: block; +} */ +.desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; +} +.desktop-menu ul li { + text-align: end; +} +.desktop-menu ul li:nth-child(1), .desktop-menu ul li:nth-child(2) { + color: var(--black); + 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; +} +/* aside thingy */ +.product-detail { + width: 360px; + padding: 8px 24px; + background: var(--white); + 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; +} + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + margin-top: 1rem; +} +.product-card { + width: 240px; +} +.product-card img { + width: 240px; + height: 240px; + border-radius: 20px; + object-fit: cover; +} +.product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} +.product-info figure { + margin: 0; +} +.product-info figure img { + width: 35px; + height: 35px; +} +.product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-info div p:nth-child(2) { + font-weight: bold; + 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, .navbar-email { + 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; + } +} +@media (min-width: 640px) { + .mobile-menu { + display: none; + } +} \ No newline at end of file From c07351540d4ed9b7e1942d8d0fbe8a4d1bb7fb18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leonardo=20V=C3=A9liz?= Date: Wed, 9 Nov 2022 16:09:21 -0500 Subject: [PATCH 2/2] =?UTF-8?q?Versi=C3=B3n=20estable=20myfirstwebv2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- curso-2/clase12.html | 372 +++++++++++++++++++++++++++++ curso-2/icons/icon_close_black.png | Bin 0 -> 7669 bytes curso-2/index.html | 138 ++++++----- curso-2/script.js | 285 +++++++++++++++++++--- curso-2/style.css | 292 ++++++++++++++-------- 5 files changed, 889 insertions(+), 198 deletions(-) create mode 100644 curso-2/icons/icon_close_black.png diff --git a/curso-2/clase12.html b/curso-2/clase12.html index 3a84f21..7359d87 100644 --- a/curso-2/clase12.html +++ b/curso-2/clase12.html @@ -91,6 +91,378 @@ width: 100%; } } + + +onaseturertnaosu+ + +aoenurnaoreu + +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 1.4rem; + --md: 1.6rem; + --lg: 1.8rem; +} +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +body { + font-size: 1.6rem; + max-width: 100vw; + font-family: 'Quicksand', sans-serif; +} +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2.4rem; + border-bottom: 1px solid var(--very-light-pink); +} +.menu { + cursor: pointer; +} +.menu, .toggle-mobile-menu, .toggle-desktop-menu, .toggle-aside-menu, .toggle-product-description { + display: none; +} +.mobile-menu { + background: var(--white); + padding: 1.6rem 0.8rem; + position: relative; + z-index: 99; +} +.mobile-menu a { + text-decoration: none; + color: var(--black); + font-weight: bold; + /* margin-bottom: 24px; */ +} +.mobile-menu ul { + padding: 0; + margin: 2.4rem 0 0; + list-style: none; +} +.mobile-menu ul:first-child { + border-bottom: 1px solid var(--very-light-pink); +} +.mobile-menu ul li { + margin-bottom: 24px; +} +ul li .email { + font-size: var(--sm); + font-weight: 300; +} +li .sign-out { + font-size: var(--sm); + color: var(--hospital-green); +} +.logo { + width: 10rem; +} +.navbar-left > ul, .navbar-right > ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 6rem; +} +.navbar-left { + display: flex; +} +.navbar-left > ul { + margin-left: 1.2rem; +} +.navbar-left > ul li a, .navbar-right > ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 0.8rem; + border-radius: 8px; + display: flex; + align-items: center; +} +.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: 1.2rem; + position: relative; +} +.navbar-shopping-cart { + position: relative; +} +.navbar-shopping-cart div { + width: 1.6rem; + height: 1.6rem; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -0.6rem; + right: -0.3rem; + display: flex; + justify-content: center; + align-items: center; +} +.desktop-menu { + position: absolute; + width: 14rem; + top: 133%; + height: auto; + background: var(--white); + border: 0.1rem solid var(--very-light-pink); + border-radius: 6px; + padding: 1rem 1rem 0 1rem; +} +/* .navbar-email:hover a + .desktop-menu { + display: block; +} */ +.desktop-menu ul { + list-style: none; +} +.desktop-menu ul li { + text-align: end; +} +.desktop-menu ul li:nth-child(1), .desktop-menu ul li:nth-child(2) { + color: var(--black); + font-weight: bold; +} +.desktop-menu ul li:last-child { + padding-top: 2rem; + border-top: 0.1rem 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: 2rem; + display: inline-block; +} +/* aside thingy */ +.product-detail { + width: 36rem; + padding: 0.8rem 2.4rem; + background: var(--white); + position: absolute; + right: 0; + z-index: 99; +} +.title-container { + display: flex; +} +.title-container #close-product-detail { + cursor: pointer; + transform: rotate(180deg); + margin-right: 1.4rem; +} +.title { + padding: 1.2rem 0; + font-size: var(--lg); + font-weight: bold; +} +.order { + display: grid; + grid-template-columns: auto 1fr; + gap: 1.6rem; + align-items: center; + background-color: var(--text-input-field); + margin-bottom: 2.4rem; + border-radius: 0.8rem; + padding: 0 2.4rem; +} +.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: 1.6rem; + margin-bottom: 2.4rem; + align-items: center; +} +.shopping-cart figure img { + width: 7rem; + height: 7rem; + border-radius: 2rem; + 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: 0.8rem; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 5rem; +} +/* begin JS cards container */ +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 24rem); + gap: 1.6rem 1.2rem; + place-content: center; + margin-top: 1rem; +} +.product-card { + width: 24rem; +} +.product-card img { + width: 24rem; + height: 24rem; + border-radius: 2rem; + object-fit: cover; +} +.product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1.2rem; +} +.product-info figure img, .primary-button figure img { + width: 100%; + height: 100%; +} +.product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 0.4rem; +} +.product-info div p:nth-child(2) { + font-weight: bold; + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); +} +/* another product thingy */ +.product-description { + background: var(--white); + width: 36rem; + /* padding-bottom: 24px; */ + position: absolute; + margin: 0 auto; + top: 7.5%; + right: 0; + left: 0; +} +.product-description-close { + background: var(--white); + width: 2.1rem; + height: 2.1rem; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 2.4rem; + left: 2.4rem; + border-radius: 50%; +} +.product-description-close img { + width: 66.7%; + height: 66.7%; +} +.product-description-close img:hover { + cursor: pointer; +} +.product-description > img:nth-child(2) { + width: 100%; + height: 36rem; + object-fit: cover; + border-radius: 0 0 2rem 2rem; +} +.product-description-info { + margin: 2.4rem 2.4rem 0 2.4rem; +} +.product-description-info p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-bottom: 0.4rem; +} +.product-description-info p:nth-child(2), .product-description-info p:nth-child(3) { + margin-bottom: 1.6rem; +} +.product-description-info p:nth-child(2){ + color: var(--very-light-pink); + font-size: var(--md); +} +.product-description-info p:nth-child(3) { + color: var(--black); + font-size: var(--sm); +} +.add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; +} +.add-to-cart-button::after { + content: "Add to cart"; +} +.add-to-cart-button, .mini-add-to-cart { + cursor: crosshair; +} +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul, .navbar-email { + display: none; + } + .product-detail, .product-description { + width: 100%; + } + .cards-container { + grid-template-columns: repeat(auto-fill, 15rem); + } + .product-card { + width: 14rem; + } + .product-card > img { + width: 14rem; + height: 14rem; + } +} +@media (min-width: 640px) { + .mobile-menu { + display: none; + } +} + + diff --git a/curso-2/icons/icon_close_black.png b/curso-2/icons/icon_close_black.png new file mode 100644 index 0000000000000000000000000000000000000000..149c8ee34aeedf6ebc1c3d6f0c8786f8a8989633 GIT binary patch literal 7669 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 bMA&3nF2lD*ku`9P`IwN#)<%^Er^5dS1)8Q~ literal 0 HcmV?d00001 diff --git a/curso-2/index.html b/curso-2/index.html index 51e24b3..a6c3c25 100644 --- a/curso-2/index.html +++ b/curso-2/index.html @@ -12,104 +12,125 @@
diff --git a/curso-2/script.js b/curso-2/script.js index 99fa3cd..3de4e9b 100644 --- a/curso-2/script.js +++ b/curso-2/script.js @@ -1,54 +1,81 @@ const burgerIcon = document.getElementById("burger-icon") -const platziAnchor = document.getElementById("platzi-anchor"); +const emailAnchorMobile = document.getElementById("email-anchor-mobile"); +const emailAnchorDesktop = document.getElementById("email-anchor-desktop"); const shoppingAnchor = document.getElementById("shopping-anchor"); burgerIcon.addEventListener("click", ftoggleMobileMenu); -platziAnchor.addEventListener("click", ftoggleDesktopMenu); +emailAnchorMobile.addEventListener("click", ftoggleMobileEmail); +emailAnchorDesktop.addEventListener("click", ftoggleDesktopEmail); shoppingAnchor.addEventListener("click", ftoggleAsideMenu); const toggleNav = document.querySelector(".toggle-nav"); const toggleMobileMenu = document.querySelector(".toggle-mobile-menu"); -const toggleDesktopMenu = document.querySelector(".toggle-desktop-menu"); +const toggleMobileEmail = document.querySelector(".toggle-mobile-email"); +const toggleDesktopEmail = document.querySelector(".toggle-desktop-email"); const toggleAsideMenu = document.querySelector(".toggle-aside-menu"); +const shoppingCounter = document.getElementById("shopping-counter"); +const closeProductDetail = document.getElementById("close-product-detail"); +closeProductDetail.addEventListener("click", closeAsideMenu); +const myOrderContent = document.querySelector(".my-order-content"); +const totalPrice = document.getElementById("total-price"); + const cardsContainer = document.getElementById("cards-container"); const productList = []; +const shoppingList = []; +let itemCounter = 0; productList.push({ - name: "Scooter (skate)", + classname: "scooter-skate", + fullname: "Scooter (skate)", + description: "A skating scooter is a street vehicle with a handlebar, deck, and wheels propelled by a rider pushing off the ground with their leg.", img: "https://images.pexels.com/photos/3671151/pexels-photo-3671151.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: 100 }) productList.push({ - name: "Rollerskates", + classname: "roller-skates", + fullname: "Rollerskates", + description: "Freeskates consist of two separate metal or wooden plates with two wheels attached. Freeskating is practiced around the world.", img: "https://media.istockphoto.com/id/182383572/es/foto/pat%C3%ADn-en-l%C3%ADnea.jpg?s=1024x1024&w=is&k=20&c=kKH67u3hYuxv6_Tx8dEI2zhWrq5iS7zmI-XlJF-9X0k=", price: 125 }) productList.push({ - name: "Skateboard", + classname: "skateboard", + fullname: "Skateboard", + description: "A type of sports equipment used for skateboarding. The skateboard must be concaved to perform tricks.", img: "https://images.pexels.com/photos/165236/pexels-photo-165236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: 150 }) productList.push({ - name: "Bike", + classname: "bike", + fullname: "Bike", + description: "With its practical position, this bike also fulfills a decorative function, add your hall or workspace.", img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", price: 240 }) productList.push({ - name: "Scooter (bike)", + classname: "scooter-bike", + fullname: "Scooter (bike)", + description: "A motorcycle with an underbone or step-through frame, a seat, and a platform for the rider's feet, emphasizing comfort and fuel economy.", img: "https://images.pexels.com/photos/159192/vespa-roller-motor-scooter-cult-159192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: 360 }) productList.push({ - name: "Motorcycle", + classname: "motorcycle", + fullname: "Motorcycle", + description: "This vehicle serves a range of different purposes: long-distance travel, commuting, cruising, sport (including racing), and off-road riding.", img: "https://images.pexels.com/photos/2626665/pexels-photo-2626665.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", price: 540 }) productList.push({ - name: "Kart", + classname: "kart", + fullname: "Kart", + description: "Go-karts come in all shapes and forms, from non-motorised models to high-performance racing karts.", img: "https://media.istockphoto.com/id/509793078/es/foto/go-kart.jpg?s=1024x1024&w=is&k=20&c=TwJCxnayGmr3CmrCae9C76-cB6BHlPgeD3OqOxyVwf0=", price: 720 }) productList.push({ - name: "Quad", + classname: "quad", + fullname: "Quad", + description: "A vehicle that travels on low-pressure tires, as the name implies, it is designed to handle a wider variety of terrain than most other vehicles.", img: "https://media.istockphoto.com/id/485397116/es/foto/potente-moderna-atv.jpg?s=1024x1024&w=is&k=20&c=vh9h38qojbMXjaYpTEahA9xgOmeLU1k9rJ0t3AgFojU=", price: 999 }) @@ -58,7 +85,7 @@ productList.push({ // //
//
- //

${product.name}

+ //

${product.fullname}

//

${product.price}$

//
//
@@ -69,6 +96,7 @@ productList.push({ // ` // cardsContainer.innerHTML = cardFiller; +let clicky = false; function renderProducts() { for (product of productList) { const productCardDiv = document.createElement("div"); @@ -76,8 +104,118 @@ function renderProducts() { cardsContainer.appendChild(productCardDiv); const productImg = document.createElement("img"); + productImg.title = product.fullname; productImg.src = product.img; + productImg.style.cursor = "pointer"; productCardDiv.appendChild(productImg); + + const productDescription = document.createElement("div"); + productDescription.classList.add("product-description"); + productDescription.classList.add("toggle-product-description"); + if (window.innerWidth > 640) { + productDescription.style.position = "absolute"; + productDescription.style.top = "25%"; + } + productDescription.style.borderRadius = "5%"; + productCardDiv.appendChild(productDescription); + + const figureClose = document.createElement("figure"); + figureClose.classList.add("product-description-close"); + productDescription.appendChild(figureClose); + + const xclose = document.createElement("img"); + xclose.setAttribute("id", `${product.classname}-close`); + xclose.setAttribute("src", "./icons/icon_close_black.png"); + xclose.setAttribute("alt", "close"); + figureClose.appendChild(xclose); + + const productDescriptionImg = document.createElement("img"); + productDescriptionImg.setAttribute("src", `${product.img}`); + productDescriptionImg.setAttribute("alt", `${product.fullname}`); + productDescriptionImg.style.objectFit = "contain"; + productDescription.appendChild(productDescriptionImg); + + const productDescriptionInfo = document.createElement("div"); + productDescriptionInfo.classList.add("product-description-info"); + productDescriptionInfo.style.flexDirection = "column"; + productDescriptionInfo.style.alignItems = "center"; + productDescriptionInfo.style.width = "100%"; + productDescriptionInfo.style.textAlign = "center"; + productDescriptionInfo.style.padding = "1rem"; + productDescriptionInfo.style.background = "lightcyan"; + productDescription.appendChild(productDescriptionInfo); + + const productDescriptionInfoPrice = document.createElement("p"); + productDescriptionInfoPrice.innerText = `${product.price}` + "$"; + productDescriptionInfo.appendChild(productDescriptionInfoPrice); + + const productDescriptionInfoName = document.createElement("p"); + productDescriptionInfoName.innerText = `${product.fullname}`; + productDescriptionInfo.appendChild(productDescriptionInfoName); + + const productDescriptionInfoText = document.createElement("p"); + productDescriptionInfoText.innerText = `${product.description}`; + productDescriptionInfo.appendChild(productDescriptionInfoText); + + const productButton = document.createElement("button"); + // productButton.innerText = "Add to cart"; + productButton.classList.add("primary-button"); + productButton.classList.add("add-to-cart-button"); + productDescriptionInfo.appendChild(productButton); + productButton.addEventListener("click", addItemToCart); + + + const cartFigure = document.createElement("figure"); + productButton.appendChild(cartFigure); + + const cartImg = document.createElement("img"); + cartImg.classList.add("add-to-cart"); + cartImg.setAttribute("alt", "add to cart") + cartImg.setAttribute("src", "./icons/bt_add_to_cart.svg") + cartFigure.appendChild(cartImg); + + // productDescription.innerHTML = ` + //
+ // close + //
+ // ${product.fullname} + //
+ //

${product.price}$

+ //

${product.fullname}

+ //

${product.description}

+ // + //
+ // ` + xclose.addEventListener("click", () => { + productDescription.style.width = "360px"; + productDescription.style.height = "auto"; + productDescription.classList.toggle("toggle-product-description"); + cardsContainer.style.gap = "16px 12px"; + clicky = false; + }) + + productImg.addEventListener("click", () => { + if (!clicky) { + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleMobileEmail.classList.add("toggle-mobile-email"); + toggleDesktopEmail.classList.add("toggle-desktop-email"); + if (window.innerWidth < 640) { + productDescription.style.width = "90vw"; + productDescription.style.height = "90vh"; + } else { + productDescription.style.width = "60vw"; + productDescription.style.height = "60vh"; + } + productDescription.classList.toggle("toggle-product-description"); + cardsContainer.style.gap = "16px 1px"; + clicky = true; + } + }) const productInfoDiv = document.createElement("div"); productInfoDiv.classList.add("product-info"); @@ -91,43 +229,122 @@ function renderProducts() { productInfoDivDiv.appendChild(productInfoPrice); const productInfoName = document.createElement("p"); - productInfoName.innerText = product.name; + productInfoName.innerText = product.fullname; productInfoDivDiv.appendChild(productInfoName); const productInfoFigure = document.createElement("figure"); productInfoDiv.appendChild(productInfoFigure); const addToCart = document.createElement("img"); + addToCart.classList.add("mini-add-to-cart"); + addToCart.price = `${product.price}`; + addToCart.classname = `${product.classname}`; + addToCart.fullname = `${product.fullname}`; + addToCart.itemimg = `${product.img}`; + addToCart.description = `${product.description}`; addToCart.src = "./icons/bt_add_to_cart.svg"; productInfoFigure.appendChild(addToCart); + + function addItemToCart() { + /*
+
+ bike +
+

Bike

+

$30,00

+ close +
*/ + itemCounter++; + shoppingList.push({ + classname: addToCart.classname, + fullname: addToCart.fullname, + id: addToCart.classname + itemCounter, + description: addToCart.description, + img: addToCart.itemimg, + price: addToCart.price + }) + const itemID = addToCart.classname + itemCounter; + console.log(itemID); + let total = 30; + for (item of shoppingList) { + total += +item.price; + } + console.log(total); + shoppingCounter.innerText = shoppingList.length + 1; + totalPrice.innerText = "$" + total; + + console.log(addToCart.fullname); + console.log(addToCart.price); + const shoppingCart = document.createElement("div"); + shoppingCart.classList.add("shopping-cart") + myOrderContent.appendChild(shoppingCart); + + const shoppingFigure = document.createElement("figure"); + shoppingCart.appendChild(shoppingFigure); + + const shoppingItemImg = document.createElement("img"); + shoppingItemImg.src = addToCart.itemimg; + shoppingItemImg.alt = addToCart.fullname; + shoppingFigure.appendChild(shoppingItemImg); + + const shoppingItemName = document.createElement("p"); + shoppingItemName.innerText = addToCart.fullname; + shoppingCart.appendChild(shoppingItemName); + + const shoppingItemPrice = document.createElement("p"); + shoppingItemPrice.innerText = "$" + addToCart.price; + shoppingCart.appendChild(shoppingItemPrice); + + const shoppingItemClose = document.createElement("img"); + shoppingItemClose.style.cursor = "pointer"; + + shoppingItemClose.alt = "remove item"; + shoppingItemClose.src = "./icons/icon_close_black.png"; + shoppingCart.appendChild(shoppingItemClose); + shoppingItemClose.addEventListener("click", () => { + console.log("remove: " + itemID); + myOrderContent.removeChild(shoppingCart); + const itemIndex = shoppingList.findIndex((item) => item.id == itemID); + if (itemIndex >= 0) { + console.log(itemIndex); + shoppingList.splice(itemIndex, 1); + } + + let total = 30; + for (item of shoppingList) { + total += +item.price; + } + console.log(total); + shoppingCounter.innerText = shoppingList.length + 1; + totalPrice.innerText = "$" + total; + }) + toggleAsideMenu.classList.remove("toggle-aside-menu"); + } + addToCart.addEventListener("click", addItemToCart); } } renderProducts(); function ftoggleMobileMenu() { - const isAsideClosed = toggleAsideMenu.classList.contains("toggle-aside-menu"); - if (!isAsideClosed) { - toggleAsideMenu.classList.toggle("toggle-aside-menu"); - }toggleMobileMenu.classList.toggle("toggle-mobile-menu"); - + toggleMobileEmail.classList.add("toggle-mobile-email"); + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleMobileMenu.classList.toggle("toggle-mobile-menu"); } - -function ftoggleDesktopMenu() { - const isAsideClosed = toggleAsideMenu.classList.contains("toggle-aside-menu"); - if (!isAsideClosed) { - toggleAsideMenu.classList.toggle("toggle-aside-menu"); - } - toggleDesktopMenu.classList.toggle("toggle-desktop-menu"); +function ftoggleMobileEmail() { + toggleMobileMenu.classList.add("toggle-mobile-menu"); + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleMobileEmail.classList.toggle("toggle-mobile-email"); } - function ftoggleAsideMenu() { - const isMobileClosed = toggleMobileMenu.classList.contains("toggle-mobile-menu"); - if (!isMobileClosed) { - toggleMobileMenu.classList.toggle("toggle-mobile-menu"); - } - const isDesktopClosed = toggleDesktopMenu.classList.contains("toggle-desktop-menu"); - if (!isDesktopClosed) { - toggleDesktopMenu.classList.toggle("toggle-desktop-menu"); - } + toggleMobileMenu.classList.add("toggle-mobile-menu"); + toggleMobileEmail.classList.add("toggle-mobile-email"); + toggleDesktopEmail.classList.add("toggle-desktop-email"); toggleAsideMenu.classList.toggle("toggle-aside-menu"); +} +function ftoggleDesktopEmail() { + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleDesktopEmail.classList.toggle("toggle-desktop-email"); +} +function closeAsideMenu() { + toggleAsideMenu.classList.add("toggle-aside-menu"); } \ No newline at end of file diff --git a/curso-2/style.css b/curso-2/style.css index 8e998dc..dd1e780 100644 --- a/curso-2/style.css +++ b/curso-2/style.css @@ -4,29 +4,51 @@ --very-light-pink: #C7C7C7; --text-input-field: #F7F7F7; --hospital-green: #ACD9B2; - --sm: 14px; - --md: 16px; - --lg: 18px; + --sm: 1.4rem; + --md: 1.6rem; + --lg: 1.8rem; } -body { +* { + box-sizing: border-box; margin: 0; + padding: 0; +} +html { + font-size: 62.5%; +} +body { + font-size: 1.6rem; + max-width: 100vw; font-family: 'Quicksand', sans-serif; } nav { + display: grid; +} +.main-nav { display: flex; justify-content: space-between; align-items: center; - padding: 0 24px; + padding: 0 2.4rem; + border-bottom: 1px solid var(--very-light-pink); +} +.mobile-nav { + width: 100%; + display: flex; + justify-content: center; border-bottom: 1px solid var(--very-light-pink); } .menu { + display: block; cursor: pointer; } -.menu, .toggle-mobile-menu, .toggle-desktop-menu, .toggle-aside-menu { +.toggle-mobile-menu, .toggle-mobile-email, .toggle-aside-menu, .toggle-product-description, .toggle-desktop-email { display: none; } .mobile-menu { - padding: 24px; + background: var(--white); + padding: 1.6rem 0.8rem; + position: relative; + z-index: 99; } .mobile-menu a { text-decoration: none; @@ -36,147 +58,159 @@ nav { } .mobile-menu ul { padding: 0; - margin: 24px 0 0; + margin: 2.4rem 0 0; list-style: none; } -.mobile-menu ul:nth-child(1) { +.mobile-menu ul:first-child { border-bottom: 1px solid var(--very-light-pink); } .mobile-menu ul li { margin-bottom: 24px; } -.email { +ul li .email { font-size: var(--sm); - font-weight: 300 !important; + font-weight: 300; } -.sign-out { +li .sign-out { font-size: var(--sm); - color: var(--hospital-green) !important; + color: var(--hospital-green); } .logo { - width: 100px; + width: 10rem; +} +.navbar-left ul, .navbar-right .navbar-email { + display: none; +} +.navbar-right > ul, .mobile-nav > ul { + display: flex; } -.navbar-left > ul, -.navbar-right > ul { +.navbar-left > ul, .navbar-right > ul, .mobile-nav > ul { list-style: none; padding: 0; margin: 0; - display: flex; align-items: center; - height: 60px; + height: 6rem; } -.navbar-left { - display: flex; +.mobile-nav > ul { + height: 2rem; } .navbar-left > ul { - margin-left: 12px; + margin-left: 1.2rem; } -.navbar-left > ul li a, -.navbar-right > ul li a { +.navbar-left > ul li a, .navbar-right > ul li a, .mobile-nav > ul li a { text-decoration: none; color: var(--very-light-pink); border: 1px solid var(--white); - padding: 8px; - border-radius: 8px; + padding: 0.8rem; + border-radius: 0.8rem; display: flex; align-items: center; } -.navbar-left > ul li a:hover, -.navbar-right > ul li a:hover { +.mobile-nav > ul li a { + border: none; + padding: 0.2rem 0.4rem; +} +.navbar-left > ul li a:hover, .navbar-right > ul li a:hover, .mobile-nav > ul li a:hover { border: 1px solid var(--hospital-green); color: var(--hospital-green); } +.mobile-nav > ul li a:hover { + border: none; + background: var(--black); +} .navbar-email { color: var(--very-light-pink); font-size: var(--sm); - margin-right: 12px; + margin-right: 1.2rem; position: relative; } .navbar-shopping-cart { position: relative; } .navbar-shopping-cart div { - width: 16px; - height: 16px; + width: 1.6rem; + height: 1.6rem; background-color: var(--hospital-green); border-radius: 50%; font-size: var(--sm); font-weight: bold; position: absolute; - top: -6px; - right: -3px; + top: -0.6rem; + right: -0.3rem; display: flex; justify-content: center; align-items: center; } -.desktop-menu { +.email-menu { position: absolute; - width: 110px; + width: 14rem; top: 133%; height: auto; background: var(--white); - border: 1px solid var(--very-light-pink); + border: 0.1rem solid var(--very-light-pink); border-radius: 6px; - padding: 20px 20px 0 20px; + padding: 1rem 1rem 0 1rem; } -/* .navbar-email:hover a + .desktop-menu { +/* .navbar-email:hover a + .email-menu { display: block; } */ -.desktop-menu ul { +.email-menu ul { list-style: none; - padding: 0; - margin: 0; } -.desktop-menu ul li { +.email-menu ul li { text-align: end; } -.desktop-menu ul li:nth-child(1), .desktop-menu ul li:nth-child(2) { +.email-menu ul li:nth-child(1), .email-menu ul li:nth-child(2) { color: var(--black); font-weight: bold; } -.desktop-menu ul li:last-child { - padding-top: 20px; - border-top: 1px solid var(--very-light-pink); +.email-menu ul li:last-child { + padding-top: 2rem; + border-top: 0.1rem solid var(--very-light-pink); } -.desktop-menu ul li:last-child a { +.email-menu ul li:last-child a { color: var(--hospital-green); font-size: var(--sm); } -.desktop-menu ul li a { +.email-menu ul li a { color: var(--back); text-decoration: none; - margin-bottom: 20px; + margin-bottom: 2rem; display: inline-block; } /* aside thingy */ +.product-detail, .product-description { + width: 100%; +} .product-detail { - width: 360px; - padding: 8px 24px; + padding: 0.8rem 2.4rem; background: var(--white); - box-sizing: border-box; position: absolute; right: 0; + z-index: 99; } .title-container { display: flex; } -.title-container img { +.title-container #close-product-detail { + cursor: pointer; transform: rotate(180deg); - margin-right: 14px; + margin-right: 1.4rem; } .title { + padding: 1.2rem 0; font-size: var(--lg); font-weight: bold; } .order { display: grid; grid-template-columns: auto 1fr; - gap: 16px; + gap: 1.6rem; align-items: center; background-color: var(--text-input-field); - margin-bottom: 24px; - border-radius: 8px; - padding: 0 24px; + margin-bottom: 2.4rem; + border-radius: 0.8rem; + padding: 0 2.4rem; } .order p:nth-child(1) { display: flex; @@ -193,17 +227,14 @@ nav { .shopping-cart { display: grid; grid-template-columns: auto 1fr auto auto; - gap: 16px; - margin-bottom: 24px; + gap: 1.6rem; + margin-bottom: 2.4rem; align-items: center; } -.shopping-cart figure { - margin: 0; -} .shopping-cart figure img { - width: 70px; - height: 70px; - border-radius: 20px; + width: 7rem; + height: 7rem; + border-radius: 2rem; object-fit: cover; } .shopping-cart p:nth-child(2) { @@ -215,50 +246,47 @@ nav { } .primary-button { background-color: var(--hospital-green); - border-radius: 8px; + border-radius: 0.8rem; border: none; color: var(--white); width: 100%; cursor: pointer; font-size: var(--md); font-weight: bold; - height: 50px; + height: 5rem; } - +/* begin JS cards container */ .cards-container { display: grid; - grid-template-columns: repeat(auto-fill, 240px); - gap: 26px; + grid-template-columns: repeat(auto-fill, 15rem); + gap: 1.6rem 1.2rem; place-content: center; margin-top: 1rem; } .product-card { - width: 240px; + width: 14rem; } -.product-card img { - width: 240px; - height: 240px; - border-radius: 20px; +.product-card > img { + width: 14rem; + height: 14rem; + border-radius: 2rem; object-fit: cover; } .product-info { display: flex; justify-content: space-between; align-items: center; - margin-top: 12px; -} -.product-info figure { - margin: 0; + margin-top: 1.2rem; } -.product-info figure img { - width: 35px; - height: 35px; +.product-info figure img, .primary-button figure img { + width: 100%; + height: 100%; } .product-info div p:nth-child(1) { font-weight: bold; font-size: var(--md); margin-top: 0; - margin-bottom: 4px; + margin-bottom: 0.4rem; } .product-info div p:nth-child(2) { font-weight: bold; @@ -267,29 +295,97 @@ nav { margin-bottom: 0; color: var(--very-light-pink); } -@media (max-width: 640px) { - .menu { - display: block; - } - .navbar-left ul, .navbar-email { +/* another product thingy */ +.product-description { + background: var(--white); + /* padding-bottom: 2.4rem; */ + position: absolute; + margin: 0 auto; + top: 6.2%; + right: 0; + left: 0; +} +.product-description-close { + background: var(--white); + width: 2.1rem; + height: 2.1rem; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 2.4rem; + left: 2.4rem; + border-radius: 50%; +} +.product-description-close img { + width: 66.7%; + height: 66.7%; +} +.product-description-close img:hover { + cursor: pointer; +} +.product-description > img:nth-child(2) { + width: 100%; + height: 36rem; + object-fit: cover; + border-radius: 0 0 2rem 2rem; +} +/* .product-description-info { + margin: 2.4rem 2.4rem 0 2.4rem; +} */ +.product-description-info p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-bottom: 0.4rem; +} +.product-description-info p:nth-child(2), .product-description-info p:nth-child(3) { + margin-bottom: 1.6rem; +} +.product-description-info p:nth-child(2){ + color: var(--very-light-pink); + font-size: var(--md); +} +.product-description-info p:nth-child(3) { + color: var(--black); + font-size: var(--sm); +} +.add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; +} +.add-to-cart-button::after { + content: "Add to cart"; +} +.add-to-cart-button, .mini-add-to-cart { + cursor: crosshair; +} +@media (min-width: 640px) { + .menu, .mobile-menu { display: none; } - .product-detail { - width: 100%; + .navbar-left, .navbar-left > ul{ + display: flex; } .cards-container { - grid-template-columns: repeat(auto-fill, 140px); + margin: 0 1vw; + grid-template-columns: repeat(auto-fill, 24rem); + } + .product-card, .product-card > img { + width: 24rem; } - .product-card { - width: 140px; + .product-card > img { + height: 24rem; } - .product-card img { - width: 140px; - height: 140px; + .product-detail, .product-description { + width: 36rem; } } -@media (min-width: 640px) { - .mobile-menu { +@media (min-width: 740px) { + .mobile-nav { display: none; } + .navbar-right .navbar-email { + display: block; + } } \ No newline at end of file