diff --git a/curso-frontend-developer-javascript-practico b/curso-frontend-developer-javascript-practico
new file mode 160000
index 000000000..686d8fdaf
--- /dev/null
+++ b/curso-frontend-developer-javascript-practico
@@ -0,0 +1 @@
+Subproject commit 686d8fdaf2c0e032a82314b3203c0e4e21e594e1
diff --git a/index.html b/index.html
index 8e91d429a..a89c36842 100644
--- a/index.html
+++ b/index.html
@@ -4,13 +4,10 @@
   <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="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>
 </head>
 <body>
@@ -19,7 +16,9 @@
 
     <div class="navbar-left">
       <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">
-
+ 
+ 
+      <!--menu responsive para Desktop -->
       <ul>
         <li>
           <a href="/">All</a>
@@ -68,7 +67,10 @@
       </ul>
     </div>
 
-    <div class="mobile-menu inactive">
+
+
+    <!--menu responsive para celular -->
+    <div class="mobile-menu ">
       <ul>
         <li>
           <a href="/">CATEGORIES</a>
@@ -111,9 +113,10 @@
         </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>
@@ -161,6 +164,7 @@
   </div>
   </aside>
 
+
   <aside id="productDetail" class="inactive">
     <div class="product-detail-close">
       <img src="./icons/icon_close.png" alt="close">
@@ -177,10 +181,11 @@
     </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>
@@ -192,10 +197,8 @@
           </figure>
         </div>
       </div> -->
-
     </div>
   </section>
-
   <script src="./main.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
index 7ebb1bb3e..2aea64c55 100644
--- a/main.js
+++ b/main.js
@@ -1,17 +1,18 @@
 const menuEmail = document.querySelector('.navbar-email');
 const menuHamIcon = document.querySelector('.menu');
 const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
-const productDetailCloseIcon = document.querySelector('.product-detail-close')
+const productDetailCloseIcon =document.querySelector('.product-detail-close');
+
 const desktopMenu = document.querySelector('.desktop-menu');
 const mobileMenu = document.querySelector('.mobile-menu');
 const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
-const productDetailContainer = document.querySelector('#productDetail');
 const cardsContainer = document.querySelector('.cards-container');
+const productDetailContainer =document.querySelector('#productDetail')
 
 menuEmail.addEventListener('click', toggleDesktopMenu);
 menuHamIcon.addEventListener('click', toggleMobileMenu);
 menuCarritoIcon.addEventListener('click', toggleCarritoAside);
-productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
+productDetailCloseIcon.addEventListener('click', closeProductDetailAside)
 
 function toggleDesktopMenu() {
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
@@ -29,9 +30,8 @@ function toggleMobileMenu() {
   if (!isAsideClosed) {
     shoppingCartContainer.classList.add('inactive'); 
   }
-
-  closeProductDetailAside();
   
+  closeProductDetailAside();
   mobileMenu.classList.toggle('inactive');
 }
 
@@ -39,24 +39,25 @@ function toggleCarritoAside() {
   const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
   
   if (!isMobileMenuClosed) {
-    mobileMenu.classList.add('inactive');
+    mobileMenu.classList.add('inactive'); 
   }
 
-  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+  const isProductDeatilclosed = productDetailContainer.classList.contains('inactive');
   
-  if (!isProductDetailClosed) {
+  if (!isProductDeatilclosed) {
     productDetailContainer.classList.add('inactive'); 
   }
   
   shoppingCartContainer.classList.toggle('inactive');
 }
 
-function openProductDetailAside() {
-  shoppingCartContainer.classList.add('inactive');
+function openProductDetailAside(){
+ shoppingCartContainer.classList.add('inactive');
+
   productDetailContainer.classList.remove('inactive');
 }
-
-function closeProductDetailAside() {
+function closeProductDetailAside(){
   productDetailContainer.classList.add('inactive');
 }
 
@@ -77,7 +78,23 @@ productList.push({
   image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
 });
 
-function renderProducts(arr) {
+/*<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>*/
+
+
+  
+/*codigo encapsulado en función */
+function renderProducts(arr){
   for (product of arr) {
     const productCard = document.createElement('div');
     productCard.classList.add('product-card');
@@ -85,8 +102,8 @@ function renderProducts(arr) {
     // product= {name, price, image} -> product.image
     const productImg = document.createElement('img');
     productImg.setAttribute('src', product.image);
-    productImg.addEventListener('click', openProductDetailAside);
-  
+    productImg.addEventListener('click',openProductDetailAside);
+
     const productInfo = document.createElement('div');
     productInfo.classList.add('product-info');
   
@@ -114,6 +131,8 @@ function renderProducts(arr) {
   
     cardsContainer.appendChild(productCard);
   }
+
+
 }
 
-renderProducts(productList);
+renderProducts(productList)
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 7228eedc8..808430322 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,3 @@
-/* General */
 :root {
   --white: #FFFFFF;
   --black: #000000;
@@ -13,12 +12,13 @@ body {
   margin: 0;
   font-family: 'Quicksand', sans-serif;
 }
-.inactive {
-  display: none;
-}
 
 
-/* Navbar (general) */
+/* este es el codigo del menu para desktop*/
+
+.inactive{
+  display: none;
+}
 nav {
   display: flex;
   justify-content: space-between;
@@ -83,11 +83,10 @@ nav {
   align-items: center;
 }
 
-/* Menu en desktop */
 .desktop-menu {
   position: absolute;
-  top: 60px;
-  right: 60px;
+  top:60px;
+  right: 0;
   background: var(--white);
   width: 100px;
   height: auto;
@@ -120,13 +119,15 @@ nav {
   text-decoration: none;
   margin-bottom: 20px;
   display: inline-block;
+  width: 100%;
 }
 
-/* Menu en mobile */
+
+/* este es el codigo css para el menu de celular */
 .mobile-menu {
   background-color: var(--white);
-  position: absolute;
-  top: 60px;
+  position:absolute;
+  top:60px;
   left: 0;
   width: 100%;
   padding: 24px;
@@ -158,8 +159,10 @@ nav {
 }
 
 
-/* Aside (product detail y carrito) */
-aside {
+
+/* Aside (product detail y carrito*/
+
+ aside{
   background-color: var(--white);
   width: 360px;
   box-sizing: border-box;
@@ -167,9 +170,12 @@ aside {
   right: 0;
 }
 
-/* ShoppingCart */
-#shoppingCartContainer {
+
+
+/*shoppingCart*/
+#shoppingCartContainer{
   padding: 0 24px;
+
 }
 .title-container {
   display: flex;
@@ -239,7 +245,7 @@ aside {
   height: 50px;
 }
 
-/* ProductDetail */
+/*productDetail*/
 .product-detail-close {
   background: var(--white);
   width: 14px;
@@ -260,10 +266,10 @@ aside {
   object-fit: cover;
   border-radius: 0 0 20px 20px;
 }
-#productDetail .product-info {
+ #productDetail .product-info {
   margin: 24px 24px 0 24px;
 }
-#productDetail .product-info p:nth-child(1) {
+ #productDetail .product-info p:nth-child(1) {
   font-weight: bold;
   font-size: var(--md);
   margin-top: 0;
@@ -298,14 +304,14 @@ aside {
   justify-content: center;
 }
 
+/*codigo de la lista de productos clase 6*/
 
-/* Product List */
 .cards-container {
+  margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(auto-fill, 240px);
   gap: 26px;
   place-content: center;
-  margin-top: 20px;
 }
 .product-card {
   width: 240px;
@@ -316,32 +322,43 @@ aside {
   border-radius: 20px;
   object-fit: cover;
 }
-.product-card .product-info {
+ .product-card .product-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 12px;
 }
-.product-card .product-info figure {
+ .product-card .product-info figure {
   margin: 0;
 }
-.product-card .product-info figure img {
+ .product-card .product-info figure img {
   width: 35px;
   height: 35px;
 }
-.product-card .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-card .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) {
+  .cards-container {
+    grid-template-columns: repeat(auto-fill, 140px);
+  }
+  .product-card {
+    width: 140px;
+  }
+  .product-card img {
+    width: 140px;
+    height: 140px;
+  }
+}
 
 @media (max-width: 640px) {
   .menu {
@@ -353,28 +370,21 @@ aside {
   .navbar-email {
     display: none;
   }
-  .desktop-menu {
-    display: none;
+  .desktop-menu{
+    display:none;
   }
-
-  aside {
+  .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;
   }
-}
+
+   
+
+}
\ No newline at end of file
