actualizacion menu

index.html

@@ -49,6 +49,7 @@
         </li>
       </ul>
     </div>
+
           <!--Menu desktop-->
   <div class="desktop-menu inactive">
     <ul>
@@ -115,7 +116,7 @@
 
 
 
-  <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>
@@ -163,6 +164,21 @@
   </div>
   </aside>
 
+  <aside id="productDetail" class="">
+      <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>
 
 
   <!--Listado de productos-->

main.js

@@ -3,7 +3,7 @@ const desktopMenu = document.querySelector('.desktop-menu');
 const menuHamIcon = document.querySelector('.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
 const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
-const aside = document.querySelector('.product-detail');
+const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
 const cardsContainer = document.querySelector('.cards-container');
 
 
@@ -16,18 +16,18 @@ menuCarritoIcon.addEventListener('click', toggleCarritoAside);
 
 
 function toggleDesktopMenu() {
-    const isAsaidClosed = aside.classList.contains('inactive');
+    const isAsaidClosed = shoppingCartContainer.classList.contains('inactive');
     if (!isAsaidClosed) {
-        aside.classList.add('inactive');
+        shoppingCartContainer.classList.add('inactive');
     }
     desktopMenu.classList.toggle('inactive');
 }
 
 function toggleMobileMenu() {
-    const isAsaidClosed = aside.classList.contains('inactive');
+    const isAsaidClosed = shoppingCartContainer.classList.contains('inactive');
 
     if (!isAsaidClosed) {
-        aside.classList.add('inactive');
+        shoppingCartContainer.classList.add('inactive');
     }
     mobileMenu.classList.toggle('inactive');
 }
@@ -39,7 +39,7 @@ function toggleCarritoAside() {
         mobileMenu.classList.add('inactive');    
 
   }
-        aside.classList.toggle('inactive');
+  shoppingCartContainer.classList.toggle('inactive');
 
 
 }

style.css

@@ -1,5 +1,5 @@
 :root {
-    --white: #fffff;
+    --white: #f7f7f7;
     --black: #000000;
     --very-light-pink: #C7C7C7;
     --text-input-field: #F7F7F7;
@@ -98,7 +98,7 @@
     .desktop-menu {
       display: none;
     }
-    .product-detail {
+    aside {
       width: 100%;
     }
     .cards-container {
@@ -166,7 +166,9 @@
     background-color: var(--white);
     position: absolute;
     top: 40px;
-    left: 10px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
     padding: 24px;
   }
   .mobile-menu a {
@@ -197,14 +199,19 @@
 
 
 /*------------Carrito de compras-------*/
-.product-detail {
+aside {
   background-color: var(--white);
   width: 360px;
-  padding: 24px;
   box-sizing: border-box;
   position: absolute;
   right: 0;
 }
+
+/*Shoppingcard*/
+
+#shoppingcardconteiner {
+  padding: 24px;
+}
 .title-container {
   display: flex;
 }
@@ -273,6 +280,71 @@
   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;
+}
+
+
+
+
+
 /* Listado de productos, tarjetas de productos*/
 
 .cards-container {
@@ -291,26 +363,26 @@
   border-radius: 15px;
   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;