diff --git a/clase1.html b/clase1.html
index 3ac779880..f1cf9b4c1 100644
--- a/clase1.html
+++ b/clase1.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -19,32 +20,38 @@
       --md: 16px;
       --lg: 18px;
     }
+
     body {
       margin: 0;
       font-family: 'Quicksand', sans-serif;
     }
+
     .login {
       width: 100%;
       height: 100vh;
       display: grid;
       place-items: center;
     }
+
     .form-container {
       display: grid;
       grid-template-rows: auto 1fr auto;
       width: 300px;
     }
+
     .logo {
       width: 150px;
       margin-bottom: 48px;
       justify-self: center;
       display: none;
     }
+
     .title {
       font-size: var(--lg);
       margin-bottom: 12px;
       text-align: center;
     }
+
     .subtitle {
       color: var(--very-light-pink);
       font-size: var(--md);
@@ -53,15 +60,18 @@
       margin-bottom: 32px;
       text-align: center;
     }
+
     .form {
       display: flex;
       flex-direction: column;
     }
+
     .label {
       font-size: var(--sm);
       font-weight: bold;
       margin-bottom: 4px;
     }
+
     .input {
       background-color: var(--text-input-field);
       border: none;
@@ -71,6 +81,7 @@
       padding: 6px;
       margin-bottom: 12px;
     }
+
     .primary-button {
       background-color: var(--hospital-green);
       border-radius: 8px;
@@ -82,10 +93,12 @@
       font-weight: bold;
       height: 50px;
     }
+
     .login-button {
       margin-top: 14px;
       margin-bottom: 30px;
     }
+
     @media (max-width: 640px) {
       .logo {
         display: block;
@@ -93,13 +106,14 @@
     }
   </style>
 </head>
+
 <body>
   <div class="login">
     <div class="form-container">
       <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">
 
       <h1 class="title">Create a new password</h1>
-      <p class="subtitle">Enter a new passwrd for yue account</p>
+      <p class="subtitle">Enter a new password for you account</p>
 
       <form action="/" class="form">
         <label for="password" class="label">Password</label>
@@ -113,4 +127,5 @@ <h1 class="title">Create a new password</h1>
     </div>
   </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e91d429a..ee7d2a771 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -11,8 +12,10 @@
 
   <link rel="stylesheet" href="./styles.css">
 
-  <title>YardSale: tienda online de cositas chidas</title>
+  <title>MAYECREMS cremas naturales hechas con amor</title>
+
 </head>
+
 <body>
   <nav>
     <img src="./icons/icon_menu.svg" alt="menu" class="menu">
@@ -57,11 +60,11 @@
         <li>
           <a href="/" class="title">My orders</a>
         </li>
-  
+
         <li>
           <a href="/">My account</a>
         </li>
-  
+
         <li>
           <a href="/">Sign out</a>
         </li>
@@ -92,7 +95,7 @@
           <a href="/">Other</a>
         </li>
       </ul>
-  
+
       <ul>
         <li>
           <a href="/">My orders</a>
@@ -101,7 +104,7 @@
           <a href="/">My account</a>
         </li>
       </ul>
-  
+
       <ul>
         <li>
           <a href="/" class="email">platzi@example.com</a>
@@ -111,6 +114,7 @@
         </li>
       </ul>
     </div>
+
   </nav>
 
   <aside id="shoppingCartContainer" class="inactive">
@@ -122,7 +126,9 @@
     <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">
+          <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>
@@ -131,7 +137,9 @@
 
       <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">
+          <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>
@@ -140,7 +148,9 @@
 
       <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">
+          <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>
@@ -158,14 +168,16 @@
         Checkout
       </button>
     </div>
-  </div>
+    </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">
+    <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>
@@ -180,8 +192,10 @@
   <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-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>
@@ -191,11 +205,13 @@
             <img src="./icons/bt_add_to_cart.svg" alt="">
           </figure>
         </div>
-      </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..c55ea9195 100644
--- a/main.js
+++ b/main.js
@@ -1,119 +1,167 @@
 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 desktopMenu = document.querySelector('.desktop-menu');
+const carritoIcon = document.querySelector('.navbar-shopping-cart');
+const productDetailCloseIconIcon = document.querySelector('.product-detail-close');
+const menuHamIcon = document.querySelector('.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);
+menuEmail.addEventListener('click', toogleDesktopMenu);
+menuHamIcon.addEventListener('click', toogleMobileMenu);
+carritoIcon.addEventListener('click', toogleCarritoAside);
+productDetailCloseIconIcon.addEventListener('click', closeProductDetailAside);
 
-function toggleDesktopMenu() {
+function toogleDesktopMenu() {
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
 
   if (!isAsideClosed) {
     shoppingCartContainer.classList.add('inactive');
   }
-  
+
   desktopMenu.classList.toggle('inactive');
 }
 
-function toggleMobileMenu() {
+function toogleMobileMenu() {
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
 
   if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive'); 
+    shoppingCartContainer.classList.add('inactive');
   }
 
   closeProductDetailAside();
-  
   mobileMenu.classList.toggle('inactive');
 }
 
-function toggleCarritoAside() {
+function toogleCarritoAside() {
   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');
 }
 
-function openProductDetailAside() {
-  shoppingCartContainer.classList.add('inactive');
+function OpenproductDetailAside() {
+  
+  shoppingCartContainer.classList.add('inative');
   productDetailContainer.classList.remove('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: '100',
+  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: 'computer',
+  price: '400',
+  image:
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Computadora-PC.png/800px-Computadora-PC.png',
 });
+
 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',
+  name: 'car',
+  price: '1000',
+  image:
+    'https://images.unsplash.com/photo-1614200179396-2bdb77ebf81b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D',
 });
 
+productList.push({
+  name: 'bike',
+  price: '100',
+  image:
+    'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+});
+
+productList.push({
+  name: 'computer',
+  price: '400',
+  image:
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Computadora-PC.png/800px-Computadora-PC.png',
+});
+
+productList.push({
+  name: 'car',
+  price: '1000',
+  image:
+    'https://images.unsplash.com/photo-1614200179396-2bdb77ebf81b?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8OXx8fGVufDB8fHx8fA%3D%3D',
+});
+
+/* <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);
-    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);
+    productImg.addEventListener('click', OpenproductDetailAside);
+     
+
+  const productInfo = document.createElement('div');
+  productInfo.classList.add('product-info');    
   
-    cardsContainer.appendChild(productCard);
-  }
+  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/opcion_codigo/class DOMelementos b/opcion_codigo/class DOMelementos
new file mode 100644
index 000000000..6701aa4cb
--- /dev/null
+++ b/opcion_codigo/class DOMelementos	
@@ -0,0 +1,21 @@
+class DOMelementos {
+  constructor() {
+    this.menuEmail = document.querySelector(".navbar-email");
+    this.desktopMenu = document.querySelector(".desktop-menu");
+    this.menuHamIcon = document.querySelector(".menu");
+    this.mobileMenu = document.querySelector(".mobile-menu");
+  }
+}
+
+const elementos = new DOMelementos();
+
+elementos.menuEmail.addEventListener("click", toogleDesktopMenu);
+elementos.menuHamIcon.addEventListener("click", toogleMobileMenu);
+
+function toogleDesktopMenu() {
+  desktopMenu.classList.toggle("inactive");
+}
+
+function toogleMobileMenu() {
+  mobileMenu.classList.toggle("inactive");
+}
diff --git a/styles.css b/styles.css
index 7228eedc8..ac0a8c786 100644
--- a/styles.css
+++ b/styles.css
@@ -67,6 +67,7 @@ nav {
 }
 .navbar-shopping-cart {
   position: relative;
+  cursor: pointer;
 }
 .navbar-shopping-cart div {
   width: 16px;
