product.php

  <div class="container">
    <div class="row">
      <!-- TODO:
        add hero-switch class to switch image
        transition to hide products
        display products according to link clicked
      -->
      <div class="hero-section-audio col-12 border">
      </div>

      <div class="col-2 border">
        left side
      </div>
      <!-- / end of left side -->

      <!-- Single product area -->


      <div class="col-8 product-full">

        <!-- product spotlight area (left side) -->
        <div class="product-spotlight">

          <!-- product title -->
          <h2 class="product-title">Product <small class="text-muted">title</small></h2>

          <!-- product image -->
          <img src="http://placehold.it/280x280" alt="image placeholder" class="product-image">

          <!-- ratings area -->
          <div class="review-ratings">
            <h3 class="product-section--header">Reviews</h3>
            <div class="stars">
              <img src="img/rating-star.png" alt="rating star" class="rating-star">
              <img src="img/rating-star.png" alt="rating star" class="rating-star">
              <img src="img/rating-star.png" alt="rating star" class="rating-star">
            </div>
            <button class="btn btn-outline-primary btn-sm">See Reviews</button>
          </div>
        </div>
        <!-- /.product-spotlight -->

        <!-- product details area (right side) -->
        <div class="product-details">
          <h3 class="product-section--header">Details</h3>

          <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, atque. Inventore recusandae dolore nostrum voluptate.</p>

          <div class="product-features">
            <h3 class="product-section--header">Features</h3>

            <ul>
              <li class="">Feature 1</li>
              <li class="">Feature 2</li>
              <li class="">Feature 3</li>
              <li class="">1 year guarantee!</li>
              <li class="">Lowest price guarantee!</li>
            </ul>
          </div>

          <p class="price">$0.00</p>

          <button class="btn btn-sm btn-success add-to-cart">Add to Cart <i class="fas fa-cart-plus"></i></button>
        </div>
        <!-- /.details -->

        <!-- product specs & table area (bottom) -->
        <div class="product-specs">
          <h3 class="product-section--header">Specs</h3>

          <div class="table-responsive">
            <table class="table table-bordered table-specs">
              <thead class="thead-light">
                <tr>
                  <th scope="col">Type</th>
                  <th scope="col">Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>CPU</td>
                  <td>3.2 Ghz 8-core</td>
                </tr>
                <tr>
                  <td>RAM</td>
                  <td>16 GB</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- / responsive table wrapper -->
        </div>
        <!-- /.product-specs & table -->

        <div class="product-similar">
          <h2 class="product-section--header">Similar Products</h2>
          <div>
            <img src="http://placehold.it/125x100" alt="image placeholder">
            <img src="http://placehold.it/125x100" alt="image placeholder">
            <img src="http://placehold.it/125x100" alt="image placeholder">
            <img src="http://placehold.it/125x100" alt="image placeholder">
          </div>
        </div>

      </div>
      <!-- / end of single product area -->

      <div class="col-2 border">
        aside
      </div>
      <!-- / end of aside -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-->