Boxer Briefs 
<!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: 8px;
  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: #292E33; /* Charcoal Gray */
}
.custom-container .dot:nth-child(3) {
  background-color: #000000; /* Space Black */
}
.custom-container .dot:nth-child(4) {
  background-color: #2E3C4B; /* Deep Blue */
}

/* 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 - Image Slider -->
    <div class="column1">
      <div class="slideshow-container">
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.066_700x.jpg?v=1631806876" alt="Charcoal Gray">
          <div class="text">Charcoal Gray</div>
        </div>
        <!-- Add other slides here -->
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.046_700x.jpg?v=1631806876" alt="Space Black">
          <div class="text">Space Black</div>
        </div>
        <div class="mySlides fade">
          <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.056_700x.jpg?v=1631806876" alt="Deep Blue">
          <div class="text">Deep Blue</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: #D31334;"></span> 
          <span class="dot" onclick="currentSlide(2)" style="background-color: #20535D;"></span> 
          <span class="dot" onclick="currentSlide(3)" style="background-color: #292E33;"></span> 
        </div>
      </div>
    </div>

    <!-- Second column - Bullet Points and CTA Button -->
    <div class="column2">
      <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/files/Jetsetter_Boxer_Briefs_Description.jpg?v=1690205945" alt="Jettsetter Boxer Brief 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>
  </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" */

Boxer Briefs

By jsevenrockz
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML

Responsive script for the 3rd 2-column

<!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: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

/* The dots/bullets/indicators / .custom-container .dot { cursor: pointer; height: 20px; width: 20px; 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: #292E33; / Charcoal Gray / } .custom-container .dot:nth-child(3) { background-color: #000000; / Space Black / } .custom-container .dot:nth-child(4) { background-color: #2E3C4B; / Deep Blue */ }

/* 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 - Image Slider --> <div class="column1"> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.066_700x.jpg?v=1631806876" alt="Charcoal Gray"> <div class="text">Charcoal Gray</div> </div> <!-- Add other slides here --> <div class="mySlides fade"> <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.046_700x.jpg?v=1631806876" alt="Space Black"> <div class="text">Space Black</div> </div> <div class="mySlides fade"> <img src="https://jackarcher.com/cdn/shop/products/JackArcherUnderwear.056_700x.jpg?v=1631806876" alt="Deep Blue"> <div class="text">Deep Blue</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: #D31334;"></span> <span class="dot" onclick="currentSlide(2)" style="background-color: #20535D;"></span> <span class="dot" onclick="currentSlide(3)" style="background-color: #292E33;"></span> </div> </div> </div>

<!-- Second column - Bullet Points and CTA Button -->
<div class="column2">
  <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/files/Jetsetter_Boxer_Briefs_Description.jpg?v=1690205945" alt="Jettsetter Boxer Brief 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>

</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>

PLEASE WAIT...