From ceff01457e4df5954eeff07020c604fc1e076499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Sun, 10 Dec 2023 20:51:50 -0500
Subject: [PATCH 1/6] =?UTF-8?q?fusi=C3=B3n=20del=20men=C3=BA=20en=20deskto?=
 =?UTF-8?q?p?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 clase11.html |   2 +-
 estilos.css  | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++
 fusion.html  |  74 ++++++++++++++++++++++++++++
 principal.js |   8 +++
 4 files changed, 219 insertions(+), 1 deletion(-)
 create mode 100644 estilos.css
 create mode 100644 fusion.html
 create mode 100644 principal.js

diff --git a/clase11.html b/clase11.html
index 9b43e5b14..03183de20 100644
--- a/clase11.html
+++ b/clase11.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>YardaSale: tienda online de cosas</title>
   <style>
     :root {
       --white: #FFFFFF;
diff --git a/estilos.css b/estilos.css
new file mode 100644
index 000000000..1a3a09ab4
--- /dev/null
+++ b/estilos.css
@@ -0,0 +1,136 @@
+: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;
+  }
+
+  .inactive{
+    display: none;
+  }
+
+  nav {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 24px;
+    border-bottom: 1px solid var(--very-light-pink);
+  }
+  .menu {
+    display: none;
+  }
+  .logo {
+    width: 100px;
+  }
+  .navbar-left ul,
+  .navbar-right ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    height: 60px;
+  }
+  .navbar-left {
+    display: flex;
+  }
+  .navbar-left ul {
+    margin-left: 12px;
+  }
+  .navbar-left ul li a,
+  .navbar-right ul li a {
+    text-decoration: none;
+    color: var(--very-light-pink);
+    border: 1px solid var(--white);
+    padding: 8px;
+    border-radius: 8px;
+  }
+  .navbar-left ul li a:hover,
+  .navbar-right ul li a:hover {
+    border: 1px solid var(--hospital-green);
+    color: var(--hospital-green);
+  }
+  .navbar-email {
+    color: var(--very-light-pink);
+    font-size: var(--sm);
+    margin-right: 12px;
+    cursor: pointer;
+  }
+  .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;
+    top:60px;
+    right: 60px;
+    background: var(--white);
+    width: 100px;
+    height: auto;
+    border: 1px solid var(--very-light-pink);
+    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;
+    margin-bottom: 20px;
+    display: inline-block;
+  }
+
+
+
+
+  @media (max-width: 640px) {
+    .menu {
+      display: block;
+    }
+    .navbar-left ul {
+      display: none;
+    }
+    .navbar-email {
+      display: none;
+    }
+  }
\ No newline at end of file
diff --git a/fusion.html b/fusion.html
new file mode 100644
index 000000000..10a75c978
--- /dev/null
+++ b/fusion.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./estilos.css">
+ 
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
+ 
+  <title>YardaSale: tienda online de cosas</title>
+</head>
+<body>
+  <nav>
+    <img src="./icons/icon_menu.svg" alt="menu" class="menu">
+
+    <div class="navbar-left">
+      <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">
+
+      <ul>
+        <li>
+          <a href="/">All</a>
+        </li>
+        <li>
+          <a href="/">Clothes</a>
+        </li>
+        <li>
+          <a href="/">Electronics</a>
+        </li>
+        <li>
+          <a href="/">Furnitures</a>
+        </li>
+        <li>
+          <a href="/">Toys</a>
+        </li>
+        <li>
+          <a href="/">Others</a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="navbar-right">
+      <ul>
+        <li class="navbar-email">platzi@example.com</li>
+        <li class="navbar-shopping-cart">
+          <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
+          <div>2</div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="desktop-menu inactive">
+        <ul>
+          <li>
+            <a href="/" class="title">My orders</a>
+          </li>
+    
+          <li>
+            <a href="/">My account</a>
+          </li>
+    
+          <li>
+            <a href="/">Sign out</a>
+          </li>
+        </ul>
+      </div>
+  </nav>
+
+  <script src="./principal.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/principal.js b/principal.js
new file mode 100644
index 000000000..b7979fdc2
--- /dev/null
+++ b/principal.js
@@ -0,0 +1,8 @@
+const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu = document.querySelector('.desktop-menu');
+
+menuEmail.addEventListener('click',toggleDesktopMenu);
+
+function toggleDesktopMenu(){
+    desktopMenu.classList.toggle('inactive');
+}
\ No newline at end of file

From 5694707a2b14be02e3d36e37248305b9044a35f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Mon, 11 Dec 2023 10:10:39 -0500
Subject: [PATCH 2/6] menu mobile y desktop responsive

---
 clase8.html  |  1 +
 estilos.css  | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 fusion.html  | 44 ++++++++++++++++++++++++++++++++++++++++++++
 principal.js |  7 +++++++
 4 files changed, 103 insertions(+)

diff --git a/clase8.html b/clase8.html
index 7c3d25c9c..7e6198aa2 100644
--- a/clase8.html
+++ b/clase8.html
@@ -23,6 +23,7 @@
       margin: 0;
       font-family: 'Quicksand', sans-serif;
     }
+    
     .mobile-menu {
       padding: 24px;
     }
diff --git a/estilos.css b/estilos.css
index 1a3a09ab4..9358c6d5e 100644
--- a/estilos.css
+++ b/estilos.css
@@ -1,3 +1,4 @@
+/* Generales */
 :root {
     --white: #FFFFFF;
     --black: #000000;
@@ -17,6 +18,10 @@
     display: none;
   }
 
+
+
+
+/* Navbar General */
   nav {
     display: flex;
     justify-content: space-between;
@@ -82,6 +87,10 @@
   }
 
 
+
+
+
+/* Menu en desktop */
   .desktop-menu {
     position: absolute;
     top:60px;
@@ -121,7 +130,38 @@
   }
 
 
+/* mobile */
 
+.mobile-menu {
+    position: absolute;
+    top: 60px;
+    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;
+  }
 
   @media (max-width: 640px) {
     .menu {
@@ -133,4 +173,15 @@
     .navbar-email {
       display: none;
     }
+
+    .desktop-menu{
+        display: none;
+    }
+
+  }
+
+  @media (min-width: 641px){
+    .mobile-menu{
+        display: none;
+    }
   }
\ No newline at end of file
diff --git a/fusion.html b/fusion.html
index 10a75c978..03774c983 100644
--- a/fusion.html
+++ b/fusion.html
@@ -66,6 +66,50 @@
           </li>
         </ul>
       </div>
+    
+      <div class="mobile-menu inactive">
+        <ul>
+          <li>
+            <a href="/">CATEGORIES</a>
+          </li>
+          <li>
+            <a href="/">All</a>
+          </li>
+          <li>
+            <a href="/">Clothes</a>
+          </li>
+          <li>
+            <a href="/">Electronics</a>
+          </li>
+          <li>
+            <a href="/">Furnitures</a>
+          </li>
+          <li>
+            <a href="/">Toys</a>
+          </li>
+          <li>
+            <a href="/">Other</a>
+          </li>
+        </ul>
+    
+        <ul>
+          <li>
+            <a href="/">My orders</a>
+          </li>
+          <li>
+            <a href="/">My account</a>
+          </li>
+        </ul>
+    
+        <ul>
+          <li>
+            <a href="/" class="email">platzi@example.com</a>
+          </li>
+          <li>
+            <a href="/" class="sign-out">Sign out</a>
+          </li>
+        </ul>
+      </div>
   </nav>
 
   <script src="./principal.js"></script>
diff --git a/principal.js b/principal.js
index b7979fdc2..c2b851791 100644
--- a/principal.js
+++ b/principal.js
@@ -1,8 +1,15 @@
 const menuEmail = document.querySelector('.navbar-email');
 const desktopMenu = document.querySelector('.desktop-menu');
+const menuHamIcon= document.querySelector('.menu');
+const mobileMenu = document.querySelector('.mobile-menu');
 
 menuEmail.addEventListener('click',toggleDesktopMenu);
+menuHamIcon.addEventListener('click',toggleDesktopMenuMobile);
 
 function toggleDesktopMenu(){
     desktopMenu.classList.toggle('inactive');
+}
+
+function toggleDesktopMenuMobile(){
+    mobileMenu.classList.toggle('inactive');
 }
\ No newline at end of file

From cf2c0debb497c9c9b91ba79488dc24a4d653cf64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Mon, 11 Dec 2023 12:48:38 -0500
Subject: [PATCH 3/6] solucion carrito

---
 clase13.html |  1 +
 estilos.css  | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 fusion.html  | 48 ++++++++++++++++++++++++++++++
 principal.js | 16 ++++++++++
 4 files changed, 149 insertions(+)

diff --git a/clase13.html b/clase13.html
index f237347d5..1875e936c 100644
--- a/clase13.html
+++ b/clase13.html
@@ -23,6 +23,7 @@
       margin: 0;
       font-family: 'Quicksand', sans-serif;
     }
+    
     .product-detail {
       width: 360px;
       padding: 24px;
diff --git a/estilos.css b/estilos.css
index 9358c6d5e..47ad9032b 100644
--- a/estilos.css
+++ b/estilos.css
@@ -30,6 +30,7 @@
   }
   .menu {
     display: none;
+    cursor: pointer;
   }
   .logo {
     width: 100px;
@@ -133,6 +134,7 @@
 /* mobile */
 
 .mobile-menu {
+    background-color: var(--white);
     position: absolute;
     top: 60px;
     padding: 24px;
@@ -163,6 +165,85 @@
     color: var(--hospital-green) !important;
   }
 
+  /*Aside y product detail y carrito */
+  .product-detail {
+    background-color: var(--white);
+    width: 360px;
+    padding: 0 24px;
+    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;
+  }
+
+
+
   @media (max-width: 640px) {
     .menu {
       display: block;
@@ -178,6 +259,9 @@
         display: none;
     }
 
+    .product-detail {
+        width: 100%;
+      }
   }
 
   @media (min-width: 641px){
diff --git a/fusion.html b/fusion.html
index 03774c983..9813b1a84 100644
--- a/fusion.html
+++ b/fusion.html
@@ -112,6 +112,54 @@
       </div>
   </nav>
 
+  <aside class="product-detail inactive">
+    <div class="title-container">
+      <img src="./icons/flechita.svg" alt="arrow">
+      <p class="title">My order</p>
+    </div>
+
+    <div class="my-order-content">
+      <div class="shopping-cart">
+        <figure>
+          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+        </figure>
+        <p>Bike</p>
+        <p>$30,00</p>
+        <img src="./icons/icon_close.png" alt="close">
+      </div>
+
+      <div class="shopping-cart">
+        <figure>
+          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+        </figure>
+        <p>Bike</p>
+        <p>$30,00</p>
+        <img src="./icons/icon_close.png" alt="close">
+      </div>
+
+      <div class="shopping-cart">
+        <figure>
+          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+        </figure>
+        <p>Bike</p>
+        <p>$30,00</p>
+        <img src="./icons/icon_close.png" alt="close">
+      </div>
+
+      <div class="order">
+        <p>
+          <span>Total</span>
+        </p>
+        <p>$560.00</p>
+      </div>
+
+      <button class="primary-button">
+        Checkout
+      </button>
+    </div>
+  </div>
+  </aside>
+
   <script src="./principal.js"></script>
 
 </body>
diff --git a/principal.js b/principal.js
index c2b851791..e3365721a 100644
--- a/principal.js
+++ b/principal.js
@@ -1,10 +1,26 @@
 const menuEmail = document.querySelector('.navbar-email');
 const desktopMenu = document.querySelector('.desktop-menu');
+
+const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
+const aside = document.querySelector('.product-detail')
+
 const menuHamIcon= document.querySelector('.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
 
 menuEmail.addEventListener('click',toggleDesktopMenu);
 menuHamIcon.addEventListener('click',toggleDesktopMenuMobile);
+menuCarritoIcon.addEventListener('click',toggleCarritoAside);
+
+function toggleCarritoAside(){
+    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
+   
+    
+    if(!isMobileMenuClosed){
+        mobileMenu.classList.add('inactive'); 
+    }
+    
+    aside.classList.toggle('inactive')
+}
 
 function toggleDesktopMenu(){
     desktopMenu.classList.toggle('inactive');

From ff665dee65e0e6fe432b14a1905e9799774c6132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Mon, 11 Dec 2023 13:50:11 -0500
Subject: [PATCH 4/6] carrito-menumobile-menudesktop, todo corregido

---
 fusion.html  |  2 ++
 principal.js | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/fusion.html b/fusion.html
index 9813b1a84..fd0cd2027 100644
--- a/fusion.html
+++ b/fusion.html
@@ -160,6 +160,8 @@
   </div>
   </aside>
 
+  
+
   <script src="./principal.js"></script>
 
 </body>
diff --git a/principal.js b/principal.js
index e3365721a..cec37913c 100644
--- a/principal.js
+++ b/principal.js
@@ -23,9 +23,26 @@ function toggleCarritoAside(){
 }
 
 function toggleDesktopMenu(){
-    desktopMenu.classList.toggle('inactive');
+
+   // desktopMenu.classList.toggle('inactive');
+   const isCarritoClosed = aside.classList.contains('inactive');
+
+   if(!isCarritoClosed){
+       aside.classList.add('inactive');
+       desktopMenu.classList.toggle('inactive');
+   }
+
+   desktopMenu.classList.toggle('inactive');
 }
 
 function toggleDesktopMenuMobile(){
+    
+    const isCarritoClosed = aside.classList.contains('inactive');
+
+    if(!isCarritoClosed){
+        aside.classList.add('inactive');
+    }
+
     mobileMenu.classList.toggle('inactive');
+    
 }
\ No newline at end of file

From f2b821ba8b327c1de3dd5f3ed31163af9e99f2df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Mon, 11 Dec 2023 21:47:15 -0500
Subject: [PATCH 5/6] =?UTF-8?q?maquetaci=C3=B3n=20con=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 estilos.css  | 58 +++++++++++++++++++++++++++++++++++++
 fusion.html  | 17 ++++++++++-
 principal.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 153 insertions(+), 2 deletions(-)

diff --git a/estilos.css b/estilos.css
index 47ad9032b..9d2d64342 100644
--- a/estilos.css
+++ b/estilos.css
@@ -242,6 +242,52 @@
     height: 50px;
   }
 
+/* Product list */
+
+.cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 240px);
+    gap: 26px;
+    place-content: center;
+    margin-top: 30px;
+  }
+  .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-size: var(--sm);
+    margin-top: 0;
+    margin-bottom: 0;
+    color: var(--very-light-pink);
+  }
+
+ 
+
 
 
   @media (max-width: 640px) {
@@ -262,6 +308,18 @@
     .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: 641px){
diff --git a/fusion.html b/fusion.html
index fd0cd2027..4c6422e92 100644
--- a/fusion.html
+++ b/fusion.html
@@ -160,7 +160,22 @@
   </div>
   </aside>
 
-  
+  <section class="main-container">
+    <div class="cards-container">
+        <!--      <div class="product-card">
+        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
+        <div class="product-info">
+          <div>
+            <p>$120,00</p>
+            <p>Bike</p>
+          </div>
+          <figure>
+            <img src="./icons/bt_add_to_cart.svg" alt="">
+          </figure>
+        </div>
+      </div> -->
+    </div>
+  </section>
 
   <script src="./principal.js"></script>
 
diff --git a/principal.js b/principal.js
index cec37913c..0bdca09d4 100644
--- a/principal.js
+++ b/principal.js
@@ -6,6 +6,8 @@ const aside = document.querySelector('.product-detail')
 
 const menuHamIcon= document.querySelector('.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
+const cardsContainer =document.querySelector('.cards-container');
+
 
 menuEmail.addEventListener('click',toggleDesktopMenu);
 menuHamIcon.addEventListener('click',toggleDesktopMenuMobile);
@@ -45,4 +47,80 @@ function toggleDesktopMenuMobile(){
 
     mobileMenu.classList.toggle('inactive');
     
-}
\ No newline at end of file
+}
+
+const productList = [];
+productList.push({
+    name:'Bike',
+    price:120,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});
+
+productList.push({
+    name:'car',
+    price:120,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});
+productList.push({
+    name:'screen',
+    price:120,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});
+
+
+/* 
+<div class="product-card">
+        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
+        <div class="product-info">
+          <div>
+            <p>$120,00</p>
+            <p>Bike</p>
+          </div>
+          <figure>
+            <img src="./icons/bt_add_to_cart.svg" alt="">
+          </figure>
+        </div>
+      </div> */
+
+
+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);
+
+
+        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);

From fb65d265b99220b5130ba13b0da662827f08742f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?santiago=20=C3=81lvarez?= <santiagoaas10@gmail.com>
Date: Tue, 12 Dec 2023 15:34:27 -0500
Subject: [PATCH 6/6] productos y todo interactivo listo para pull request

---
 estilos.css  | 186 ++++++++++++++++++++++++++++++-----------------
 fusion.html  | 152 ++++++++++++++++++++++-----------------
 principal.js | 199 +++++++++++++++++++++++++--------------------------
 3 files changed, 300 insertions(+), 237 deletions(-)

diff --git a/estilos.css b/estilos.css
index 9d2d64342..be98057b8 100644
--- a/estilos.css
+++ b/estilos.css
@@ -1,4 +1,4 @@
-/* Generales */
+/* General */
 :root {
     --white: #FFFFFF;
     --black: #000000;
@@ -13,15 +13,12 @@
     margin: 0;
     font-family: 'Quicksand', sans-serif;
   }
-
-  .inactive{
+  .inactive {
     display: none;
   }
-
-
-
-
-/* Navbar General */
+  
+  
+  /* Navbar (general) */
   nav {
     display: flex;
     justify-content: space-between;
@@ -30,7 +27,6 @@
   }
   .menu {
     display: none;
-    cursor: pointer;
   }
   .logo {
     width: 100px;
@@ -65,9 +61,9 @@
   }
   .navbar-email {
     color: var(--very-light-pink);
+    cursor: pointer;
     font-size: var(--sm);
     margin-right: 12px;
-    cursor: pointer;
   }
   .navbar-shopping-cart {
     position: relative;
@@ -86,15 +82,11 @@
     justify-content: center;
     align-items: center;
   }
-
-
-
-
-
-/* Menu en desktop */
+  
+  /* Menu en desktop */
   .desktop-menu {
     position: absolute;
-    top:60px;
+    top: 60px;
     right: 60px;
     background: var(--white);
     width: 100px;
@@ -129,14 +121,14 @@
     margin-bottom: 20px;
     display: inline-block;
   }
-
-
-/* mobile */
-
-.mobile-menu {
+  
+  /* Menu en mobile */
+  .mobile-menu {
     background-color: var(--white);
     position: absolute;
     top: 60px;
+    left: 0;
+    width: 100%;
     padding: 24px;
   }
   .mobile-menu a {
@@ -147,7 +139,7 @@
   }
   .mobile-menu ul {
     padding: 0;
-    margin: 24px 0 0;  
+    margin: 24px 0 0;
     list-style: none;
   }
   .mobile-menu ul:nth-child(1) {
@@ -164,16 +156,21 @@
     font-size: var(--sm);
     color: var(--hospital-green) !important;
   }
-
-  /*Aside y product detail y carrito */
-  .product-detail {
+  
+  
+  /* Aside (product detail y carrito) */
+  aside {
     background-color: var(--white);
     width: 360px;
-    padding: 0 24px;
     box-sizing: border-box;
     position: absolute;
     right: 0;
   }
+  
+  /* ShoppingCart */
+  #shoppingCartContainer {
+    padding: 0 24px;
+  }
   .title-container {
     display: flex;
   }
@@ -241,15 +238,74 @@
     font-weight: bold;
     height: 50px;
   }
-
-/* Product list */
-
-.cards-container {
+  
+  /* ProductDetail */
+  .product-detail-close {
+    background: var(--white);
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: 2;
+    padding: 12px;
+    border-radius: 50%;
+  }
+  .product-detail-close:hover {
+    cursor: pointer;
+  }
+  #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;
+    border: none;
+    color: var(--white);
+    width: 100%;
+    cursor: pointer;
+    font-size: var(--md);
+    font-weight: bold;
+    height: 50px;
+  }
+  .add-to-cart-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  
+  /* Product List */
+  .cards-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, 240px);
     gap: 26px;
     place-content: center;
-    margin-top: 30px;
+    margin-top: 20px;
   }
   .product-card {
     width: 240px;
@@ -260,36 +316,33 @@
     border-radius: 20px;
     object-fit: cover;
   }
-  .product-info {
+  .product-card .product-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 12px;
   }
-  .product-info figure {
+  .product-card .product-info figure {
     margin: 0;
   }
-  .product-info figure img {
+  .product-card .product-info figure img {
     width: 35px;
     height: 35px;
   }
-  .product-info div p:nth-child(1) {
+  .product-card .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) {
+  .product-card .product-info div p:nth-child(2) {
     font-size: var(--sm);
     margin-top: 0;
     margin-bottom: 0;
     color: var(--very-light-pink);
   }
-
- 
-
-
-
+  
+  
   @media (max-width: 640px) {
     .menu {
       display: block;
@@ -300,30 +353,29 @@
     .navbar-email {
       display: none;
     }
-
-    .desktop-menu{
-        display: none;
+    .desktop-menu {
+      display: none;
+    }
+  
+    aside {
+      width: 100%;
     }
-
-    .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: 641px){
-    .mobile-menu{
-        display: none;
+  
+    .cards-container {
+      grid-template-columns: repeat(auto-fill, 140px);
     }
-  }
\ No newline at end of file
+    .product-card {
+      width: 140px;
+    }
+    .product-card img {
+      width: 140px;
+      height: 140px;
+    }
+  }
+  
+  @media (min-width: 641px) {
+    .mobile-menu {
+      display: none;
+    }
+  }
+  
\ No newline at end of file
diff --git a/fusion.html b/fusion.html
index 4c6422e92..8e91d429a 100644
--- a/fusion.html
+++ b/fusion.html
@@ -4,13 +4,14 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./estilos.css">
- 
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
- 
-  <title>YardaSale: tienda online de cosas</title>
+
+  <link rel="stylesheet" href="./styles.css">
+
+  <title>YardSale: tienda online de cositas chidas</title>
 </head>
 <body>
   <nav>
@@ -52,67 +53,67 @@
     </div>
 
     <div class="desktop-menu inactive">
-        <ul>
-          <li>
-            <a href="/" class="title">My orders</a>
-          </li>
-    
-          <li>
-            <a href="/">My account</a>
-          </li>
-    
-          <li>
-            <a href="/">Sign out</a>
-          </li>
-        </ul>
-      </div>
-    
-      <div class="mobile-menu inactive">
-        <ul>
-          <li>
-            <a href="/">CATEGORIES</a>
-          </li>
-          <li>
-            <a href="/">All</a>
-          </li>
-          <li>
-            <a href="/">Clothes</a>
-          </li>
-          <li>
-            <a href="/">Electronics</a>
-          </li>
-          <li>
-            <a href="/">Furnitures</a>
-          </li>
-          <li>
-            <a href="/">Toys</a>
-          </li>
-          <li>
-            <a href="/">Other</a>
-          </li>
-        </ul>
-    
-        <ul>
-          <li>
-            <a href="/">My orders</a>
-          </li>
-          <li>
-            <a href="/">My account</a>
-          </li>
-        </ul>
-    
-        <ul>
-          <li>
-            <a href="/" class="email">platzi@example.com</a>
-          </li>
-          <li>
-            <a href="/" class="sign-out">Sign out</a>
-          </li>
-        </ul>
-      </div>
+      <ul>
+        <li>
+          <a href="/" class="title">My orders</a>
+        </li>
+  
+        <li>
+          <a href="/">My account</a>
+        </li>
+  
+        <li>
+          <a href="/">Sign out</a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="mobile-menu inactive">
+      <ul>
+        <li>
+          <a href="/">CATEGORIES</a>
+        </li>
+        <li>
+          <a href="/">All</a>
+        </li>
+        <li>
+          <a href="/">Clothes</a>
+        </li>
+        <li>
+          <a href="/">Electronics</a>
+        </li>
+        <li>
+          <a href="/">Furnitures</a>
+        </li>
+        <li>
+          <a href="/">Toys</a>
+        </li>
+        <li>
+          <a href="/">Other</a>
+        </li>
+      </ul>
+  
+      <ul>
+        <li>
+          <a href="/">My orders</a>
+        </li>
+        <li>
+          <a href="/">My account</a>
+        </li>
+      </ul>
+  
+      <ul>
+        <li>
+          <a href="/" class="email">platzi@example.com</a>
+        </li>
+        <li>
+          <a href="/" class="sign-out">Sign out</a>
+        </li>
+      </ul>
+    </div>
   </nav>
 
-  <aside class="product-detail inactive">
+  <aside id="shoppingCartContainer" class="inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -160,9 +161,26 @@
   </div>
   </aside>
 
+  <aside id="productDetail" class="inactive">
+    <div class="product-detail-close">
+      <img src="./icons/icon_close.png" alt="close">
+    </div>
+    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
+    <div class="product-info">
+      <p>$35,00</p>
+      <p>Bike</p>
+      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
+      <button class="primary-button add-to-cart-button">
+        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
+        Add to cart
+      </button>
+    </div>
+  </aside>
+
   <section class="main-container">
     <div class="cards-container">
-        <!--      <div class="product-card">
+
+      <!-- <div class="product-card">
         <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
         <div class="product-info">
           <div>
@@ -174,10 +192,10 @@
           </figure>
         </div>
       </div> -->
+
     </div>
   </section>
 
-  <script src="./principal.js"></script>
-
+  <script src="./main.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/principal.js b/principal.js
index 0bdca09d4..7ebb1bb3e 100644
--- a/principal.js
+++ b/principal.js
@@ -1,126 +1,119 @@
 const menuEmail = document.querySelector('.navbar-email');
-const desktopMenu = document.querySelector('.desktop-menu');
-
+const menuHamIcon = document.querySelector('.menu');
 const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
-const aside = document.querySelector('.product-detail')
-
-const menuHamIcon= document.querySelector('.menu');
+const productDetailCloseIcon = document.querySelector('.product-detail-close')
+const desktopMenu = document.querySelector('.desktop-menu');
 const mobileMenu = document.querySelector('.mobile-menu');
-const cardsContainer =document.querySelector('.cards-container');
-
-
-menuEmail.addEventListener('click',toggleDesktopMenu);
-menuHamIcon.addEventListener('click',toggleDesktopMenuMobile);
-menuCarritoIcon.addEventListener('click',toggleCarritoAside);
-
-function toggleCarritoAside(){
-    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
-   
-    
-    if(!isMobileMenuClosed){
-        mobileMenu.classList.add('inactive'); 
-    }
-    
-    aside.classList.toggle('inactive')
+const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
+const productDetailContainer = document.querySelector('#productDetail');
+const cardsContainer = document.querySelector('.cards-container');
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamIcon.addEventListener('click', toggleMobileMenu);
+menuCarritoIcon.addEventListener('click', toggleCarritoAside);
+productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
+
+function toggleDesktopMenu() {
+  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+
+  if (!isAsideClosed) {
+    shoppingCartContainer.classList.add('inactive');
+  }
+  
+  desktopMenu.classList.toggle('inactive');
 }
 
-function toggleDesktopMenu(){
+function toggleMobileMenu() {
+  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
 
-   // desktopMenu.classList.toggle('inactive');
-   const isCarritoClosed = aside.classList.contains('inactive');
+  if (!isAsideClosed) {
+    shoppingCartContainer.classList.add('inactive'); 
+  }
 
-   if(!isCarritoClosed){
-       aside.classList.add('inactive');
-       desktopMenu.classList.toggle('inactive');
-   }
-
-   desktopMenu.classList.toggle('inactive');
+  closeProductDetailAside();
+  
+  mobileMenu.classList.toggle('inactive');
 }
 
-function toggleDesktopMenuMobile(){
-    
-    const isCarritoClosed = aside.classList.contains('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'); 
+  }
+  
+  shoppingCartContainer.classList.toggle('inactive');
+}
 
-    if(!isCarritoClosed){
-        aside.classList.add('inactive');
-    }
+function openProductDetailAside() {
+  shoppingCartContainer.classList.add('inactive');
+  productDetailContainer.classList.remove('inactive');
+}
 
-    mobileMenu.classList.toggle('inactive');
-    
+function closeProductDetailAside() {
+  productDetailContainer.classList.add('inactive');
 }
 
 const productList = [];
 productList.push({
-    name:'Bike',
-    price:120,
-    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+  name: 'Bike',
+  price: 120,
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
 });
-
 productList.push({
-    name:'car',
-    price:120,
-    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+  name: 'Pantalla',
+  price: 220,
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
 });
 productList.push({
-    name:'screen',
-    price:120,
-    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+  name: 'Compu',
+  price: 620,
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
 });
 
+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);
+  }
+}
 
-/* 
-<div class="product-card">
-        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
-        <div class="product-info">
-          <div>
-            <p>$120,00</p>
-            <p>Bike</p>
-          </div>
-          <figure>
-            <img src="./icons/bt_add_to_cart.svg" alt="">
-          </figure>
-        </div>
-      </div> */
-
-
-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);
-
-
-        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);