code-differently · kcee917 · Feb 16, 2021 · Feb 17, 2021 · Feb 17, 2021 · Feb 17, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/Images/download-1.jpg b/Images/download-1.jpg
diff --git a/Images/download-2.jpg b/Images/download-2.jpg
diff --git a/Images/download.jpg b/Images/download.jpg
diff --git a/Images/images-1.jpg b/Images/images-1.jpg
diff --git a/Images/images-2.jpg b/Images/images-2.jpg
diff --git a/Images/images-3.jpg b/Images/images-3.jpg
diff --git a/Images/images-4.jpg b/Images/images-4.jpg
diff --git a/Images/images-5.jpg b/Images/images-5.jpg
diff --git a/Images/images-6.jpg b/Images/images-6.jpg
diff --git a/Images/images-7.jpg b/Images/images-7.jpg
diff --git a/Images/images-8.jpg b/Images/images-8.jpg
diff --git a/Images/images.jpg b/Images/images.jpg
diff --git a/Images/index.js b/Images/index.js
@@ -0,0 +1,36 @@
+// const card_button=document.getElementById("card_button").style.backgroundColor='aqua';
+
+// const container = document.getElementById('grid');
+
+const productData = [{
+    img: "images/download-2.jpg",
+    title: "Product",
+    price: "$50",
+    button: "Add to Cart"
+},{
+    img: "images/download-1.jpg",
+    title: "Product",
+    price: "$50",
+    button: "Add to Cart"
+}
+]
+
+//Container of all the cards
+const container = document.getElementById('grid');
+
+productData.forEach((result) => {
+    //Create a card element
+    const card = document.getElementById('div');
+    //Construct card content
+    const content = `
+    <div class="card">
+    <img src=${result.img} class="card-img-top" alt="product">
+    <div class="card-body">
+    <h5 class="card-title text-center">${result.title}</h5>
+    <p class="card-text text-center">${result.price}</p>
+    <div class="d-grid gap-2 col- mx-auto">
+    <button type="button" class="btn btn-secondary" id="card_button">${result.button}</button>
+    </div>`;
+
+      container.innerHTML += content
+})
diff --git a/Images/style.css b/Images/style.css
@@ -0,0 +1,25 @@
+.card {
+    /* margin-left: 10px; */
+    max-width: 150px;
+    display: inline-block;
+    padding: 1%;
+}
+.card-img-top {
+    list-style: none;
+    padding: 5px;
+    text-align: center;
+    margin: 0 auto;
+    height: 350px;
+    width: 270px;
+}
+.dropdown {
+    text-align: right;
+    display: list-item;
+}
+h1 {
+    font-size: 60px;
+}
+
+container {
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" type="type/css" href="Images/style.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <div class="d-flex justify-content-center">
+    <h1 class="text-warning">Amazon</h1>
+    </div>
+
+    <div class="d-flex justify-content-center">
+      <nav class="navbar navbar-expand-lg navbar-light bg-light">
+          <div class="container-fluid">
+            <div class="collapse navbar-collapse" id="navbarNav">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Shop</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Blog</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Sample Page</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Discount 10%</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Contacts</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Buy Theme</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#"></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+      </nav>
+      </div>
+        <h3>Catalog</h3>
+        <p>Showing all 11 results</p>
+      <div class="container"> 
+        <div class="dropdown dropleft float-right">
+          <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+            Menu
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </div>
+      </div>
+      <!-- Cards -->
+  <!-- <div class="row row-cols-3 row-cols-md-4 g-4"> -->
+    <div id="grid" style="max-width: 250px;"></div>
+
+      <!-- Optional JavaScript; choose one of the two! -->
+      <!-- Option 1: Bootstrap Bundle with Popper -->
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> -->
+      <!-- Option 2: Separate Popper and Bootstrap JS -->
+      <!--
+      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
+      -->
+      <script src="Images/index.js"></script>
+    </body>
+  </html>
+
+