diff --git a/clase11.html b/clase11.html index 9b43e5b14..2a1a358b1 100644 --- a/clase11.html +++ b/clase11.html @@ -1,3 +1,4 @@ + diff --git a/clase7.html b/clase7.html index d7458ff6f..fc6fd57ae 100644 --- a/clase7.html +++ b/clase7.html @@ -9,53 +9,7 @@ Document diff --git a/index.html b/index.html index 8e91d429a..368267862 100644 --- a/index.html +++ b/index.html @@ -1,201 +1,175 @@ - - - - - - - - - - - YardSale: tienda online de cositas chidas + + + + + + + + + YardSale: tienda online de cositas chidas - - - - - - - -
-
- - + +
+
-
-
- - +
+
+ - + + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..f995c5f2c 100644 --- a/main.js +++ b/main.js @@ -19,7 +19,7 @@ function toggleDesktopMenu() { if (!isAsideClosed) { shoppingCartContainer.classList.add('inactive'); } - + desktopMenu.classList.toggle('inactive'); } @@ -27,27 +27,27 @@ function toggleMobileMenu() { const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); + shoppingCartContainer.classList.add('inactive'); } closeProductDetailAside(); - + mobileMenu.classList.toggle('inactive'); } function toggleCarritoAside() { const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); - + if (!isMobileMenuClosed) { mobileMenu.classList.add('inactive'); } const isProductDetailClosed = productDetailContainer.classList.contains('inactive'); - + if (!isProductDetailClosed) { - productDetailContainer.classList.add('inactive'); + productDetailContainer.classList.add('inactive'); } - + shoppingCartContainer.classList.toggle('inactive'); } @@ -81,39 +81,39 @@ function renderProducts(arr) { for (product of arr) { const productCard = document.createElement('div'); productCard.classList.add('product-card'); - + // product= {name, price, image} -> product.image const productImg = document.createElement('img'); productImg.setAttribute('src', product.image); productImg.addEventListener('click', openProductDetailAside); - + const productInfo = document.createElement('div'); productInfo.classList.add('product-info'); - + const productInfoDiv = document.createElement('div'); - + const productPrice = document.createElement('p'); productPrice.innerText = '$' + product.price; const productName = document.createElement('p'); productName.innerText = product.name; - + productInfoDiv.appendChild(productPrice); productInfoDiv.appendChild(productName); - + const productInfoFigure = document.createElement('figure'); const productImgCart = document.createElement('img'); productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg'); - + productInfoFigure.appendChild(productImgCart); - + productInfo.appendChild(productInfoDiv); productInfo.appendChild(productInfoFigure); - + productCard.appendChild(productImg); productCard.appendChild(productInfo); - + cardsContainer.appendChild(productCard); } } -renderProducts(productList); +renderProducts(productList); \ No newline at end of file diff --git a/styles.css b/styles.css index 7228eedc8..a786761ef 100644 --- a/styles.css +++ b/styles.css @@ -9,10 +9,12 @@ --md: 16px; --lg: 18px; } + body { margin: 0; font-family: 'Quicksand', sans-serif; } + .inactive { display: none; } @@ -25,12 +27,15 @@ nav { padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); } + .menu { display: none; } + .logo { width: 100px; } + .navbar-left ul, .navbar-right ul { list-style: none; @@ -40,12 +45,15 @@ nav { 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; @@ -54,20 +62,24 @@ nav { padding: 8px; border-radius: 8px; } + .navbar-left ul li a:hover, .navbar-right ul li a:hover { border: 1px solid var(--hospital-green); color: var(--hospital-green); } + .navbar-email { color: var(--very-light-pink); cursor: pointer; font-size: var(--sm); margin-right: 12px; } + .navbar-shopping-cart { position: relative; } + .navbar-shopping-cart div { width: 16px; height: 16px; @@ -95,26 +107,32 @@ nav { border-radius: 6px; padding: 20px 20px 0 20px; } + .desktop-menu ul { list-style: none; padding: 0; margin: 0; } + .desktop-menu ul li { text-align: end; } + .desktop-menu ul li:nth-child(1), .desktop-menu ul li:nth-child(2) { font-weight: bold; } + .desktop-menu ul li:last-child { padding-top: 20px; border-top: 1px solid var(--very-light-pink); } + .desktop-menu ul li:last-child a { color: var(--hospital-green); font-size: var(--sm); } + .desktop-menu ul li a { color: var(--back); text-decoration: none; @@ -131,27 +149,33 @@ nav { width: 100%; padding: 24px; } + .mobile-menu a { text-decoration: none; color: var(--black); font-weight: bold; /* margin-bottom: 24px; */ } + .mobile-menu ul { padding: 0; margin: 24px 0 0; list-style: none; } + .mobile-menu ul:nth-child(1) { border-bottom: 1px solid var(--very-light-pink); } + .mobile-menu ul li { margin-bottom: 24px; } + .email { font-size: var(--sm); font-weight: 300 !important; } + .sign-out { font-size: var(--sm); color: var(--hospital-green) !important; @@ -171,17 +195,21 @@ aside { #shoppingCartContainer { padding: 0 24px; } + .title-container { display: flex; } + .title-container img { transform: rotate(180deg); margin-right: 14px; } + .title { font-size: var(--lg); font-weight: bold; } + .order { display: grid; grid-template-columns: auto 1fr; @@ -192,18 +220,22 @@ aside { 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; @@ -211,22 +243,27 @@ aside { 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; @@ -251,36 +288,43 @@ aside { padding: 12px; border-radius: 50%; } + .product-detail-close:hover { cursor: pointer; } -#productDetail > img:nth-child(2) { + +#productDetail>img:nth-child(2) { width: 100%; height: 360px; object-fit: cover; border-radius: 0 0 20px 20px; } + #productDetail .product-info { margin: 24px 24px 0 24px; } + #productDetail .product-info p:nth-child(1) { font-weight: bold; font-size: var(--md); margin-top: 0; margin-bottom: 4px; } + #productDetail .product-info p:nth-child(2) { color: var(--very-light-pink); font-size: var(--md); margin-top: 0; margin-bottom: 36px; } + #productDetail .product-info p:nth-child(3) { color: var(--very-light-pink); font-size: var(--sm); margin-top: 0; margin-bottom: 36px; } + .primary-button { background-color: var(--hospital-green); border-radius: 8px; @@ -292,6 +336,7 @@ aside { font-weight: bold; height: 50px; } + .add-to-cart-button { display: flex; align-items: center; @@ -307,34 +352,41 @@ aside { place-content: center; margin-top: 20px; } + .product-card { width: 240px; } + .product-card img { width: 240px; height: 240px; border-radius: 20px; object-fit: cover; } + .product-card .product-info { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } + .product-card .product-info figure { margin: 0; } + .product-card .product-info figure img { width: 35px; height: 35px; } + .product-card .product-info div p:nth-child(1) { font-weight: bold; font-size: var(--md); margin-top: 0; margin-bottom: 4px; } + .product-card .product-info div p:nth-child(2) { font-size: var(--sm); margin-top: 0; @@ -347,12 +399,15 @@ aside { .menu { display: block; } + .navbar-left ul { display: none; } + .navbar-email { display: none; } + .desktop-menu { display: none; } @@ -364,9 +419,11 @@ aside { .cards-container { grid-template-columns: repeat(auto-fill, 140px); } + .product-card { width: 140px; } + .product-card img { width: 140px; height: 140px; @@ -377,4 +434,4 @@ aside { .mobile-menu { display: none; } -} +} \ No newline at end of file