fix class name conflict

Author: juanamedh

index.html

@@ -112,7 +112,7 @@
     </div>
   </nav>
 
-  <aside class="product-detail inactive">
+  <aside class="shopping-cartContainer inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -158,6 +158,21 @@
       </button>
     </div>
   </aside>
+  <aside class="product-detail 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">

main.js

@@ -3,7 +3,7 @@ const desktopMenu = document.querySelector('.desktop-menu');
 const hamburgerMenu = document.querySelector('nav img.menu');
 const mobileMenu = document.querySelector('.mobile-menu');
 const cartMenuIcon = document.querySelector('li.navbar-shopping-cart');
-const shoppingCartMenu = document.querySelector('aside.product-detail');
+const shoppingCartMenu = document.querySelector('aside.shopping-cartContainer');
 const cardsContainer = document.querySelector('.cards-container');
 
 menuEmail.addEventListener('click', toggleDesktopMenu);

styles.css

@@ -159,7 +159,7 @@ nav {
 }
 
 /* Aside Shopping Cart */
-.product-detail {
+.shopping-cartContainer {
   background-color: var(--white);
   width: 360px;
   padding: 0 24px;
@@ -291,7 +291,7 @@ nav {
   .desktop-menu {
     display: none;
   }
-  .product-detail {
+  .shopping-cartContainer {
     width: 100%;
   }
   .cards-container {