Jettsetter Pants 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Add a unique class name to the container to isolate CSS styles */
.custom-container {
  * {box-sizing: border-box}
  font-family: Verdana, sans-serif;
  margin: 0;
}

/* Two-column layout */
.custom-container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}

/* First column (image slider) */
.custom-container .column1 {
  flex: 1;
  max-width: 600px;
  background-color: #F4F4F4;
  padding: 20px;
}

.custom-container .mySlides {display: none}
.custom-container img {vertical-align: middle; width: 100%; height: auto;}

/* Slideshow container */
.custom-container .slideshow-container {
  position: relative;
}

/* Caption text */
.custom-container .text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 10px; /* Adjusted position: 10px above the bottom */
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.custom-container .dot {
  cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 0 2px;
  background-color: #D31334; /* Red */
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  outline: 2px solid black; /* Add an outline to the dots */
}

.custom-container .dot.active {
  background-color: #FFFFFF; /* White (Active dot color) */
}

/* Additional colored dots */
.custom-container .dot:nth-child(2) {
  background-color: #20535D; /* Teal */
}
.custom-container .dot:nth-child(3) {
  background-color: #292E33; /* Dark Gray */
}

/* Second column (bullet points and CTA button) */
.custom-container .column2 {
  flex: 1;
  max-width: 600px;
  background-color: #F4F4F4;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-container .bullet-points {
  font-size: 24px; /* Updated heading font size */
  font-family: Calibre, sans-serif; /* Use Calibre font */
  text-align: center;
}

.custom-container .bullet-points ul {
  list-style-type: none;
  padding-left: 0; /* Remove padding for bullet points */
}

.custom-container .bullet-points li {
  margin-bottom: 10px;
}

.custom-container .bullet-points li::before {
  content: "";
  display: none; /* Hide bullet points */
}

.custom-container .bullet-points .shop-button {
  display: block;
  margin-top: 20px;
  background-color: #D31334;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 20px; /* Updated CTA button font size */
  font-weight: bold; /* Use bold font for CTA button */
  border-radius: 5px;
  text-transform: uppercase; /* Capitalize the CTA button text */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .custom-container .row {
    flex-direction: column;
    align-items: center;
  }

  .custom-container .column1, .custom-container .column2 {
    max-width: 100%;
  }

  .custom-container .bullet-points li::before {
    top: 5px; /* Adjusted icon size for mobile */
  }
}
</style>
</head>
<body>

<!-- Add the custom-container class to isolate the custom code -->
<div class="custom-container">
  <div class="row">
    <!-- First column - Bullet Points and CTA Button -->
    <div class="column2">
      <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/files/Jetsetter_Pants_Description.jpg?v=1690205945" alt="Jetsetter Pants Description" style="max-width: 100%;">
      <div class="bullet-points">
        <!-- Add bullet points here -->
        <a href="https://jackarcher.com/pages/build-your-own-bundle#byo-section" class="shop-button">Shop the Bundle</a>
      </div>
    </div>

    <!-- Second column - Image Slider -->
    <div class="column1">
      <div class="slideshow-container">
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherJetsetterTechPants.003_700x.jpg?v=1626823770" alt="Charcoal Gray">
          <div class="text">Charcoal Gray</div>
        </div>
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherJetsetterTechPants.033_10271bf6-860e-4431-9eb7-1eb1b2f0fa5c_700x.jpg?v=1626822557" alt="Space Black">
          <div class="text">Deep Blue</div>
        </div>
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherJetsetterTechPants.019_2e277204-0303-4a04-bdae-f6ec0383d22b_700x.jpg?v=1626016885" alt="Space Black">
          <div class="text">Space Black</div>
        </div>
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherPants.002_700x.jpg?v=1641913987" alt="Stone">
          <div class="text">Stone</div>
        </div>
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/files/OPEN-STORE-2023-03-28-KB8829copy_700x.jpg?v=1684515884" alt="Olive Green">
          <div class="text">Olive Green</div>
        </div>
      </div>
      <br>
      <div class="slideshow-text">
        <p style="text-align: center; font-size: 16px; font-weight: bold;">Available in these colors</p>
        <div style="text-align: center">
          <span class="dot" onclick="currentSlide(1)" style="background-color: #20535D;"></span> 
          <span class="dot" onclick="currentSlide(2)" style="background-color: #000555;"></span> 
          <span class="dot" onclick="currentSlide(3)" style="background-color: #00000f;"></span> 
          <span class="dot" onclick="currentSlide(4)" style="background-color: #F5F5DC;"></span> 
          <span class="dot" onclick="currentSlide(5)" style="background-color: #3C4F39;"></span> 
        </div>
      </div>
    </div>
  </div>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].classList.add("active");
}
</script>

</body>
</html>
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Jettsetter Pants

By jsevenrockz
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...