diff --git a/clase12.html b/clase12.html
index 3a84f2155..b06160e3f 100644
--- a/clase12.html
+++ b/clase12.html
@@ -43,7 +43,7 @@
     .product-detail-close:hover {
       cursor: pointer;
     }
-    .product-detail > img:nth-child(2) {
+    #productDetail > img:nth-child(2) {
       width: 100%;
       height: 360px;
       object-fit: cover;
diff --git a/curso-frontend-javascriptdeveloper-javascript-practico b/curso-frontend-javascriptdeveloper-javascript-practico
new file mode 160000
index 000000000..c99166754
--- /dev/null
+++ b/curso-frontend-javascriptdeveloper-javascript-practico
@@ -0,0 +1 @@
+Subproject commit c99166754243d4de6a1259dc376c96c3ae935d5f
diff --git a/index.html b/index.html
index 8e91d429a..1e7f2cbc2 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,11 @@
   <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>YardSale: Tienda online de cositas</title>
   <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">
-
-  <link rel="stylesheet" href="./styles.css">
-
-  <title>YardSale: tienda online de cositas chidas</title>
+ <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <nav>
@@ -53,67 +50,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>
+        <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>
+    <div class="mobile-menu">
+        <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 id="shoppingCartContainer" class="inactive">
+  <aside id="shoppingCartContainer" class=" inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -179,23 +176,9 @@
 
   <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="./main.js"></script>
+  <script src="main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
index 7ebb1bb3e..95d53803a 100644
--- a/main.js
+++ b/main.js
@@ -1,119 +1,131 @@
+ //SIRVE PARA LLAMAR A LAS VARIABLES
 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 productDetailCloseIcon = document.querySelector('.product-detail-close')
-const desktopMenu = document.querySelector('.desktop-menu');
+const productDetailCloseIcon = document.querySelector('.product-detail-close');
 const mobileMenu = document.querySelector('.mobile-menu');
 const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
 const productDetailContainer = document.querySelector('#productDetail');
 const cardsContainer = document.querySelector('.cards-container');
 
-menuEmail.addEventListener('click', toggleDesktopMenu);
+// LLAMA A LA VARIABLE TOGGLE PARA QUE APAREZCA Y DESAPAREZCA EL MENU
+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(){
+    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
 
-function toggleMobileMenu() {
-  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+    if(!isAsideClosed){
+        shoppingCartContainer.classList.add('inactive');
+    }
 
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive'); 
-  }
+    desktopMenu.classList.toggle('inactive');
+}
+function toggleMobileMenu(){
+    const isAsideClosed = shoppingCartContainer.classList.contains('activate');
 
-  closeProductDetailAside();
-  
-  mobileMenu.classList.toggle('inactive');
+    if(!isAsideClosed){
+        shoppingCartContainer.classList.add('inactive');
+    }
+    closeProductDetailAside();
+
+   mobileMenu.classList.toggle('inactive');  
 }
+function toggleCarritoAside(){
+    const isMbileMenuClose = mobileMenu.classList.contains('inactive');
 
-function toggleCarritoAside() {
-  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
-  
-  if (!isMobileMenuClosed) {
-    mobileMenu.classList.add('inactive');
-  }
+    if(!isMbileMenuClose){
+        mobileMenu.classList.add('inactive');
+    }
+
+    const isProductDetailClosep = productDetailContainer.classList.contains('inactive');
+
+    if(!isProductDetailClosep){
+        productDetailContainer.classList.add('inactive');
+    }
+
+    shoppingCartContainer.classList.toggle('inactive');
 
-  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
-  
-  if (!isProductDetailClosed) {
-    productDetailContainer.classList.add('inactive'); 
-  }
-  
-  shoppingCartContainer.classList.toggle('inactive');
 }
 
-function openProductDetailAside() {
-  shoppingCartContainer.classList.add('inactive');
-  productDetailContainer.classList.remove('inactive');
+function openProductDetailAside(){
+    shoppingCartContainer.classList.add('inactive');
+    productDetailContainer.classList.remove('inactive');
 }
 
-function closeProductDetailAside() {
-  productDetailContainer.classList.add('inactive');
+function closeProductDetailAside(){
+    productDetailContainer.classList.add('inactive');
 }
 
-const productList = [];
+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: 'Pantalla',
-  price: 220,
-  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: '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);
+    name: 'Computador',
+    price: 520,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+    });
+
   
-    cardsContainer.appendChild(productCard);
-  }
+function renderProducts(arr){
+    for(product of arr){
+        const productCard = document.createElement('div');
+        productCard.classList.add('product-card');
+     
+        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);
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
index 7228eedc8..268bb527b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,4 @@
-/* General */
+/*General*/
 :root {
   --white: #FFFFFF;
   --black: #000000;
@@ -13,12 +13,10 @@ body {
   margin: 0;
   font-family: 'Quicksand', sans-serif;
 }
-.inactive {
+/*navbar general*/
+.inactive{
   display: none;
 }
-
-
-/* Navbar (general) */
 nav {
   display: flex;
   justify-content: space-between;
@@ -82,8 +80,7 @@ nav {
   justify-content: center;
   align-items: center;
 }
-
-/* Menu en desktop */
+/*desktop*/
 .desktop-menu {
   position: absolute;
   top: 60px;
@@ -121,15 +118,14 @@ nav {
   margin-bottom: 20px;
   display: inline-block;
 }
-
-/* Menu en mobile */
+/*movile*/
 .mobile-menu {
   background-color: var(--white);
   position: absolute;
+  padding: 24px;
   top: 60px;
-  left: 0;
+  left: 0px;
   width: 100%;
-  padding: 24px;
 }
 .mobile-menu a {
   text-decoration: none;
@@ -156,19 +152,74 @@ nav {
   font-size: var(--sm);
   color: var(--hospital-green) !important;
 }
-
-
-/* Aside (product detail y carrito) */
+/*carrito */
 aside {
   background-color: var(--white);
   width: 360px;
+  padding: 0 24px;
   box-sizing: border-box;
   position: absolute;
   right: 0;
 }
-
-/* ShoppingCart */
-#shoppingCartContainer {
+.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 {
+  margin: 24px 24px 0 24px;
+}
+#productDetail p:nth-child(1) {
+  font-weight: bold;
+  font-size: var(--md);
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+#productDetail p:nth-child(2) {
+  color: var(--very-light-pink);
+  font-size: var(--md);
+  margin-top: 0;
+  margin-bottom: 36px;
+}
+.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;
+}
+/*shopping cart*/
+#shoppingCartContainer{
   padding: 0 24px;
 }
 .title-container {
@@ -238,68 +289,7 @@ aside {
   font-weight: bold;
   height: 50px;
 }
-
-/* 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 */
+/*Lista de productos*/
 .cards-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 240px);
@@ -341,8 +331,11 @@ aside {
   margin-bottom: 0;
   color: var(--very-light-pink);
 }
-
-
+@media (max-width: 640px) {
+  .product-detail {
+    width: 100%;
+  }
+}
 @media (max-width: 640px) {
   .menu {
     display: block;
@@ -353,28 +346,28 @@ aside {
   .navbar-email {
     display: none;
   }
-  .desktop-menu {
+  .desktop-menu{
     display: none;
   }
-
-  aside {
-    width: 100%;
-  }
-
-  .cards-container {
-    grid-template-columns: repeat(auto-fill, 140px);
-  }
-  .product-card {
-    width: 140px;
-  }
-  .product-card img {
-    width: 140px;
-    height: 140px;
-  }
+    .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 {
+  .mobile-menu{
     display: none;
   }
 }
+
+
