Listing of products from array done

index.html

@@ -165,6 +165,27 @@
 
 
 
+  <!--Listado de productos-->
+  <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>

main.js

@@ -4,7 +4,7 @@ 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 cardsContainer = document.querySelector('.cards-container');
 
 
 
@@ -42,4 +42,77 @@ function toggleCarritoAside() {
         aside.classList.toggle('inactive');
 
 
-}
+}
+
+
+
+const productList = [];
+productList.push({
+    name: 'FAJC 5832',
+    precio: 24,
+    image: 'https://lh3.googleusercontent.com/4P9eskycIJHwokZ6p_0420LNjHGImMqxveKz2uHKjFnOkb2t2cOozzlr9KKxH05dQW7RH0fIDiZ04lLQ-5AWJk0kgkKn_4OVSOLf=w600',   
+})
+productList.push({
+    name: 'FAJC 5833',
+    precio: 10,
+    image: 'https://lh3.googleusercontent.com/8II5BvLgWgC9C4EDomKV_f61zm1bvqf21173ydEFagWhojvUun8WTXJQ8Iq_-oewPqNzknGIiDpLcil3_sneeOF-RD5r5OaK-aaM=w600',   
+})
+productList.push({
+    name: 'FAJC 5834',
+    precio: 40,
+    image: 'https://lh3.googleusercontent.com/59TM6D7ZjAIF_32eLG73HiX3yrACEo7ZbMTVIK5_F5sJ2DXzhbY2EB9AKgZEcERTBkqldp2-yIVT42myeNLscRp-su4YCL0FM6V1=w600',   
+})
+productList.push({
+    name: 'FAJC 5836',
+    precio: 120,
+    image: 'https://lh3.googleusercontent.com/9vnsILutDDoPO6z0T06nLlaxNRgfI12Ea-FPDxMsap5XYTeehaBjNG9VUf7An5IsdXtS6vBH-R28Y0NQqslLP2nsSCYqJCe0UYnNTw=w600',   
+})
+productList.push({
+    name: 'FAJC 5837',
+    precio: 40,
+    image: 'https://lh3.googleusercontent.com/oprzLI6Ffxi0eSWRoIcy5we4NB3aJ8CiFuzZBfRjA_mkEONyC_aoG32eHZ6TQb--I6bR9V9J-lp2YSgSscUc0MoXXh_lOFJyYpAM=w600',   
+})
+productList.push({
+    name: 'FAJC 5839',
+    precio: 16,
+    image: 'https://lh3.googleusercontent.com/L4YR1Fq2kchlMJUinudpqgHF8X78TYowFyyjIlyfhop4klqWxPx5gMelyCoSR8lV1AX9sF2x_Q8hb7SQMPhHGpso9aQ81B6udSaimA=w600',   
+})
+
+function renderProducts(arr){
+    for (product of arr) {
+        const productCard = document.createElement('div');
+        productCard.classList.add('product-card');
+
+        const productImg = document.createElement('img');
+        productImg.setAttribute('src', product.image);
+
+        const productInfo = document.createElement('div');
+        productInfo.classList.add('product-info');
+
+        const productInfoDiv = document.createElement('div');
+
+        const productPrice = document.createElement('p');
+        productPrice.innerText = '$' + product.precio;
+        const productName = document.createElement('p');
+        productName.innerText = product.name;
+
+        productInfoDiv.appendChild(productPrice);
+        productInfoDiv.appendChild(productName);
+
+        const porductInfoFigure = document.createElement('figure');
+        const porductImgCart = document.createElement('img');
+        porductImgCart.setAttribute('src','./icons/bt_add_to_cart.svg');
+
+        porductInfoFigure.appendChild(porductImgCart);
+
+        productInfo.appendChild(productInfoDiv);
+        productInfo.appendChild(porductInfoFigure);
+
+        productCard.appendChild(productImg);
+        productCard.appendChild(productInfo);
+
+        cardsContainer.appendChild(productCard);
+    }
+}
+
+renderProducts(productList);

style.css

@@ -1,5 +1,5 @@
 :root {
-    --white: #FFFFFF;
+    --white: #fffff;
     --black: #000000;
     --very-light-pink: #C7C7C7;
     --text-input-field: #F7F7F7;
@@ -101,6 +101,16 @@
     .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) {
@@ -263,3 +273,46 @@
   height: 50px;
 }
 
+/* Listado de productos, tarjetas de productos*/
+
+.cards-container {
+  margin-top: 30px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 240px);
+  gap: 26px;
+  place-content: center;
+}
+.product-card {
+  width: 240px;
+}
+.product-card img {
+  width: 240px;
+  height: 240px;
+  border-radius: 15px;
+  object-fit: cover;
+}
+.product-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+.product-info figure {
+  margin: 0;
+}
+.product-info figure img {
+  width: 35px;
+  height: 35px;
+}
+.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) {
+  font-size: var(--sm);
+  margin-top: 0;
+  margin-bottom: 0;
+  color: var(--very-light-pink);
+}