diff --git a/clase11.html b/clase11.html
index 9b43e5b14..164cc901d 100644
--- a/clase11.html
+++ b/clase11.html
@@ -5,95 +5,110 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <style>
-    :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;
-    }
-    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;
-    }
-    .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;
-    }
-    @media (max-width: 640px) {
-      .menu {
-        display: block;
-      }
-      .navbar-left ul {
-        display: none;
-      }
-      .navbar-email {
-        display: none;
-      }
-    }
-  </style>
+<style>
+   :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;
+        }
+
+        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;
+        }
+
+        .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;
+        }
+
+        @media (max-width: 640px) {
+            .menu {
+                display: block;
+            }
+
+            .navbar-left ul {
+                display: none;
+            }
+
+            .navbar-email {
+                display: none;
+            }
+          }
+</style>
 </head>
 <body>
   <nav>
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..da12cfaac
--- /dev/null
+++ b/index.html
@@ -0,0 +1,205 @@
+<!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="./style.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>YardSale: Tienda online</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>
+
+        <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 id="shoppingCartContainer" class="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>
+
+    <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">
+                <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>
+</body>
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 000000000..36e06195e
--- /dev/null
+++ b/main.js
@@ -0,0 +1,165 @@
+//selectores  para realizar ma facil el llamado de algunas propiedades que necesitamos
+const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu = document.querySelector('.desktop-menu');
+const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
+const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
+const menuHamIcon = document.querySelector('.menu');
+const mobileMenu = document.querySelector('.mobile-menu');
+const cardsContainer = document.querySelector('.cards-container');
+const productDetailContainer = document.querySelector('#productDetail');
+const productDetailCloseIcon = document.querySelector('.product-detail-close');
+
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamIcon.addEventListener('click', toggleMobileMenu);
+menuCarritoIcon.addEventListener('click', toggleCarritoAside);
+productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
+
+//toggle permite agregar o eliminar, en este caso el inactive que creamos en css para que cuando tengamos el evento click aparezca o desaparezca.
+
+
+function toggleDesktopMenu(){
+    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+
+        if (!isAsideClosed){
+        shoppingCartContainer.classList.add('inactive');
+    }
+
+       closeProductDetailAside();
+
+    desktopMenu.classList.toggle('inactive');
+
+}
+
+
+//para esta funcion tambien tenemos otra solucion.
+/*
+function toggleMobileMenu(){
+    aside.classList.add('inactive');
+    mobileMenu.classList.toggle('inactive');
+}
+*/
+function toggleMobileMenu(){
+
+    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+
+    if (!isAsideClosed){
+        shoppingCartContainer.classList.add('inactive');
+    }
+
+    closeProductDetailAside();
+
+    mobileMenu.classList.toggle('inactive');
+    
+}
+
+function toggleCarritoAside(){
+
+    const isDesktopClosed = desktopMenu.classList.contains('inactive');
+
+    if (!isDesktopClosed){
+        desktopMenu.classList.add('inactive');
+    }
+    
+    //aside.classList.toggle('inactive');
+    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');
+}
+
+function openProductDetailAside(){
+
+    desktopMenu.classList.add('inactive');
+
+    shoppingCartContainer.classList.add('inactive')
+
+    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',
+})
+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',
+})
+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',
+})
+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: '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 productImgCard = document.createElement('img');
+    productImgCard.setAttribute('src', './icons/bt_add_to_cart.svg')
+
+    productInfoFigure.appendChild(productImgCard);
+
+    productInfo.appendChild(productInfoDiv);
+    productInfo.appendChild(productInfoFigure);
+
+    productCard.appendChild(productImg);
+    productCard.appendChild(productInfo);
+
+    cardsContainer.appendChild(productCard);
+}
+}
+
+renderProducts(productList);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..9fd0b5a7b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,405 @@
+ :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;
+     cursor: pointer;
+ }
+
+ .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);
+     cursor: pointer;
+     font-size: var(--sm);
+     margin-right: 12px;
+ }
+
+ .navbar-shopping-cart {
+     position: relative;
+     cursor: pointer;
+ }
+
+ .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;
+    right: 60px;
+    top: 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;
+ }
+
+ .mobile-menu {
+    background-color: var(--white);
+    position: absolute;
+    /*left: 0;*/
+    top: 60px;
+    padding: 24px;
+    left: 0;
+    width: 100%;
+ }
+
+ .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;
+ }
+
+    aside {
+            background-color: var(--white);
+             width: 360px;
+             box-sizing: border-box;
+             position: absolute;
+             right: 0;
+    }
+
+    #shoppingCardContainer{
+        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;
+             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;
+    }
+
+.cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 240px);
+    gap: 26px;
+    place-content: center;
+    margin-top: 10px;
+}
+.product-card {
+    width: 240px;
+    cursor: pointer;
+}
+.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;
+    margin-bottom: 0;
+    color: var(--very-light-pink);
+}
+
+.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;
+}
+
+ @media (max-width: 640px) {
+     .menu {
+         display: block;
+     }
+
+     .navbar-left ul {
+         display: none;
+     }
+
+     .navbar-email {
+         display: none;
+     }
+     .desktop-menu{
+        display: none;
+     }
+
+    .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;
+    }
+}