collection.html

<!-- include virtual="[FORD_INCLUDE]html/header.html"-->

<!-- include virtual="[FORD_INCLUDE]html/topbar.html"-->

<!-- Start of Summary Body -->
<section id="summary">
  <!-- include virtual="[FORD_INCLUDE]collection/topbar.html"-->

  <!-- include virtual="[FORD_INCLUDE]collection/viewToggle.html"-->
  
  <!-- Start of Collection body -->
  
  <div class="">
    <div
      class="w-full h-auto min-h-[400px] bg-white px-[15px] sm:px-[100px] grid grid-cols-6 justify-items-stretch pt-[40px] pb-[80px] gap-x-[25px] gap-y-[25px]"
    >
    
      <!-- Start of Records -->
      <div
        class="col-span-6 bg-white grid grid-cols-3 text-[#4D4D4D] record h-[20vw] min-h-[100px] max-h-[300px]"
      >
        <div class="col-span-1 bg-test bg-cover"></div>

        <div
          class="col-span-2 bg-[#F2F2F2] p-[15px] flex justify-between items-center space-x-[16px]"
        >
          <div class="text-[12px] leading-[12px]">
            <h2 class="sm:text-[20px] sm:leading-[24px] font-medium">
              2008 Ford F-150 Raptor in Las Vegas
            </h2>
            <p class="sm:text-[12px] sm:leading-[15px]">JPEG</p>
          </div>

          <div
            class="grid place-items-center text-[#243C5A] cursor-pointer collection-remove"
          >
            <span class="material-icons"> close </span>
          </div>
        </div>
      </div>
      <!-- End of Records -->

      <!-- Start of Pagination -->
      <div
        id="pagination"
        class="col-span-6 flex justify-center w-full space-x-[36px] mt-[50px] text-[18px] leading-[24px] tracking-[1px] text-[#243C5A]"
      >
        <button class="flex self-center">
          <span class="material-icons"> arrow_back_ios </span>Prev
        </button>
        <div class="flex justify-around text-center space-x-[36px] self-center">
          <div
            class="w-[40px] pb-[5px] border-b-[3px] border-solid border-b-[#243C5A]"
          >
            <a class="">1</a>
          </div>
          <div class="w-[40px]">
            <a class="">2</a>
          </div>
          <div class="w-[40px]">
            <a class="">3</a>
          </div>
        </div>

        <button class="flex self-center">
          Next
          <span class="material-icons"> arrow_forward_ios </span>
        </button>
      </div>
      <!-- End of Pagination -->

      <!-- Start of Remove/Download buttons -->
      <div class="col-span-6 grid sm:hidden justify-items-center">
        <div class="flex justify-between text-[18px] space-x-[30px]">
          <div class="hover:drop-shadow-xl">
            <button
              class="h-[40px] w-auto text-[#243C5A] grid content-center hover:drop-shadow-xl collection-removeAll"
            >
              Remove All
            </button>
          </div>

          <div class="hover:drop-shadow-xl">
            <button
              class="h-[40px] w-auto text-[#FFFFFF] rounded-[20px] px-[30px] py-[5px] bg-[#243C5A] grid content-center buttonShadow hover:drop-shadow-xl collection-downloadAll"
            >
              > Download All
            </button>
          </div>
        </div>
      </div>
      <!-- End of Remove/Download buttons -->
    </div>
  </div>
  <!-- End of Collection body -->
</section>
<!-- End of Summary Body -->
<!-- include virtual="[FORD_INCLUDE]html/footer.html"-->