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/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/curso-2/icons/icon_close_black.png b/curso-2/icons/icon_close_black.png new file mode 100644 index 0000000..149c8ee Binary files /dev/null and b/curso-2/icons/icon_close_black.png differ 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..a6c3c25 --- /dev/null +++ b/curso-2/index.html @@ -0,0 +1,174 @@ + + + + + + + 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..3de4e9b --- /dev/null +++ b/curso-2/script.js @@ -0,0 +1,350 @@ +const burgerIcon = document.getElementById("burger-icon") +const emailAnchorMobile = document.getElementById("email-anchor-mobile"); +const emailAnchorDesktop = document.getElementById("email-anchor-desktop"); +const shoppingAnchor = document.getElementById("shopping-anchor"); +burgerIcon.addEventListener("click", ftoggleMobileMenu); +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 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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 +}) + // let cardFiller = ""; + // cardFiller += ` + //
+ // + //
+ //
+ //

${product.fullname}

+ //

${product.price}$

+ //
+ //
+ // + //
+ //
+ //
+ // ` + // cardsContainer.innerHTML = cardFiller; + +let clicky = false; +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.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"); + 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.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() { + toggleMobileEmail.classList.add("toggle-mobile-email"); + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleMobileMenu.classList.toggle("toggle-mobile-menu"); +} +function ftoggleMobileEmail() { + toggleMobileMenu.classList.add("toggle-mobile-menu"); + toggleAsideMenu.classList.add("toggle-aside-menu"); + toggleMobileEmail.classList.toggle("toggle-mobile-email"); +} +function ftoggleAsideMenu() { + 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 new file mode 100644 index 0000000..dd1e780 --- /dev/null +++ b/curso-2/style.css @@ -0,0 +1,391 @@ +: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: grid; +} +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + 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; +} +.toggle-mobile-menu, .toggle-mobile-email, .toggle-aside-menu, .toggle-product-description, .toggle-desktop-email { + 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 .navbar-email { + display: none; +} +.navbar-right > ul, .mobile-nav > ul { + display: flex; +} +.navbar-left > ul, .navbar-right > ul, .mobile-nav > ul { + list-style: none; + padding: 0; + margin: 0; + align-items: center; + height: 6rem; +} +.mobile-nav > ul { + height: 2rem; +} +.navbar-left > ul { + margin-left: 1.2rem; +} +.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: 0.8rem; + border-radius: 0.8rem; + display: flex; + align-items: center; +} +.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: 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; +} +.email-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 + .email-menu { + display: block; +} */ +.email-menu ul { + list-style: none; +} +.email-menu ul li { + text-align: end; +} +.email-menu ul li:nth-child(1), .email-menu ul li:nth-child(2) { + color: var(--black); + font-weight: bold; +} +.email-menu ul li:last-child { + padding-top: 2rem; + border-top: 0.1rem solid var(--very-light-pink); +} +.email-menu ul li:last-child a { + color: var(--hospital-green); + font-size: var(--sm); +} +.email-menu ul li a { + color: var(--back); + text-decoration: none; + margin-bottom: 2rem; + display: inline-block; +} +/* aside thingy */ +.product-detail, .product-description { + width: 100%; +} +.product-detail { + 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, 15rem); + gap: 1.6rem 1.2rem; + place-content: center; + margin-top: 1rem; +} +.product-card { + width: 14rem; +} +.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: 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); + /* 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; + } + .navbar-left, .navbar-left > ul{ + display: flex; + } + .cards-container { + margin: 0 1vw; + grid-template-columns: repeat(auto-fill, 24rem); + } + .product-card, .product-card > img { + width: 24rem; + } + .product-card > img { + height: 24rem; + } + .product-detail, .product-description { + width: 36rem; + } +} +@media (min-width: 740px) { + .mobile-nav { + display: none; + } + .navbar-right .navbar-email { + display: block; + } +} \ No newline at end of file