add product info

Author: solygambas

ninja-coffee/index.html

@@ -33,6 +33,110 @@
         </div>
       </div>
     </nav>
+    <!-- breadcrumbs -->
+    <div class="section pt-4 pb-0">
+      <nav class="breadcrumb has-arrow-separator">
+        <ul class="container">
+          <li><a class="has-text-grey">Coffee Ninja</a></li>
+          <li><a class="has-text-grey">Shop</a></li>
+          <li class="is-active"><a>Docker Dark Roast</a></li>
+        </ul>
+      </nav>
+    </div>
+    <!-- product info -->
+    <section class="section">
+      <div class="container">
+        <div class="columns is-vcentered is-multiline">
+          <div class="column is-6-tablet is-3-desktop">
+            <h1 class="is-size-3-mobile is-size-1-desktop title">Docker</h1>
+            <h2 class="is-size-4-mobile is-size-2-desktop subtitle">
+              Dark Roast
+            </h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Reiciendis cupiditate est quasi ab eaque? Aspernatur dicta
+              doloribus nihil dolor corporis?
+            </p>
+          </div>
+          <div class="column is-6-tablet is-5-desktop has-text-centered">
+            <img
+              src="assets/product.png"
+              alt="docker coffee image"
+              class="px-6"
+            />
+          </div>
+          <div class="column is-12-tablet is-4-desktop">
+            <div class="is-size-4 mb-4">€10.95</div>
+            <p class="mb-4">
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid,
+              repellendus?
+            </p>
+            <button class="button is-primary">Add to Cart</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-7-tablet">
+            <!-- tabs -->
+            <div class="tabs is-boxed">
+              <ul>
+                <li class="is-active" data-target="product-details">
+                  <a>Product Details</a>
+                </li>
+                <li data-target="delivery-information">
+                  <a>Delivery Information</a>
+                </li>
+              </ul>
+            </div>
+            <div class="px-2" id="tab-content">
+              <div id="product-details">
+                <h3 class="is-size-5 title">Product Details</h3>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Laboriosam nihil voluptatum doloremque mollitia? Dignissimos
+                  dolorem incidunt mollitia, reiciendis totam debitis eaque
+                  blanditiis temporibus aliquam laboriosam, molestias velit
+                  rerum, quibusdam consequatur!
+                </p>
+              </div>
+              <div id="delivery-information" class="is-hidden">
+                <h3 class="is-size-5 title">Delivery Information</h3>
+                <p>
+                  Dignissimos dolorem incidunt mollitia, reiciendis totam
+                  debitis eaque blanditiis temporibus aliquam laboriosam,
+                  molestias velit rerum, quibusdam consequatur! Lorem ipsum
+                  dolor sit amet consectetur adipisicing elit. Laboriosam nihil
+                  voluptatum doloremque mollitia?
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="column is-5-tablet">
+            <!-- message box -->
+            <div class="message">
+              <div class="message-header">
+                <p>Earn Points with the Coffee Club</p>
+              </div>
+              <div class="message-body">
+                <p>
+                  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                  Ducimus eveniet consequuntur odio perspiciatis consectetur
+                  amet voluptates recusandae ratione perferendis, nam corrupti.
+                  Dicta voluptatem voluptatum nostrum deserunt aliquid molestiae
+                  repellat illum!
+                </p>
+                <div class="has-text-centered">
+                  <button class="button mt-5">Sign Up</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <script src="index.js"></script>
   </body>
 </html>

ninja-coffee/index.js

@@ -5,3 +5,20 @@ const navBarMenu = document.querySelector("#nav-links");
 burgerIcon.addEventListener("click", () =>
   navBarMenu.classList.toggle("is-active")
 );
+
+// tabs
+const tabs = document.querySelectorAll(".tabs li");
+const tabContentBoxes = document.querySelectorAll("#tab-content > div");
+
+tabs.forEach((tab) => {
+  tab.addEventListener("click", () => {
+    tabs.forEach((item) => item.classList.remove("is-active"));
+    tab.classList.add("is-active");
+    const target = tab.dataset.target;
+    tabContentBoxes.forEach((box) => {
+      box.getAttribute("id") === target
+        ? box.classList.remove("is-hidden")
+        : box.classList.add("is-hidden");
+    });
+  });
+});