2 columns: Image with Text 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

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

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

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

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

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

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

.dot.active {
  background-color: #FFFFFF; /* Active dot color */
}

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

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

.subheading {
  font-size: 30px; /* Updated subheading font size */
  font-family: Calibre, sans-serif; /* Use Calibre font */
}

.body-text {
  font-size: 24px; /* Updated body font size */
  font-family: Calibre, sans-serif; /* Use Calibre font */
}

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

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

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

.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;
}

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

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

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

<div class="row">
  <!-- First column - Image Slider -->
  <div class="column1">
    <div class="slideshow-container">
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/products/JA_AnytimeTee_Asphalt_PDP_7_3b6c5a85-1cad-4801-b568-7287c2f6cc17.jpg?v=1682098854" alt="Asphalt">
        <div class="text">Asphalt</div>
      </div>
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/files/JA_AnytimeTee_BeringSea_PDP_7_bc98cca5-acdb-4cc5-b80f-c16d7b6a6f84.jpg?v=1683054252" alt="Bering Sea">
        <div class="text">Bering Sea</div>
      </div>
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/files/JA_AnytimeTee_SpaceBlack_PDP_6_a3cc6b4d-64c2-47d8-8f96-3545a5683b91.jpg?v=1683053309" alt="Space Black">
        <div class="text">Space Black</div>
      </div>
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/products/JA_AnytimeTee_Navy_PDP_8.jpg?v=1682090292" alt="Dark Blue">
        <div class="text">Dark Blue</div>
      </div>
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/products/JA_AnytimeTee_DarkOlive_PDP_8_183961d0-afa6-441e-91da-e8ce1d1adf0e.jpg?v=1682952391" alt="Dark Olive">
        <div class="text">Dark Olive</div>
      </div>
      <div class="mySlides fade">
        <img src="https://cdn.shopify.com/s/files/1/0531/1506/0388/products/JA_AnytimeTee_White_PDP_Flatlay_1.jpg?v=1682090240" alt="White">
        <div class="text" style="color: black;">White</div>
      </div>
    </div>
    <br>
    <div class="slideshow-text">
      <p style="text-align: center; font-size: 16px; font-weight: bold;">Also available in these colors</p>
      <div style="text-align: center">
        <span class="dot" onclick="currentSlide(1)" style="background-color: #43464B;"></span> 
        <span class="dot" onclick="currentSlide(2)" style="background-color: #20535D;"></span> 
        <span class="dot" onclick="currentSlide(3)" style="background-color: #292E33;"></span> 
        <span class="dot" onclick="currentSlide(4)" style="background-color: #2E3C4B;"></span> 
        <span class="dot" onclick="currentSlide(5)" style="background-color: #3C4F39;"></span> 
        <span class="dot" onclick="currentSlide(6)" style="background-color: #FFFFFF;"></span> 
      </div>
    </div>
  </div>

  <!-- Second column - Bullet Points and CTA Button -->
  <div class="column2">
    <div class="bullet-points">
      <p style="font-size: 44px; font-weight: bold; text-align: left;">Anytime Tee</p>
      <p class="subheading" style="text-align: left; font-size: 30px;">Created with work leisure in mind, our crew tee leaves a lasting impression by resisting fades, tears, pilling, and wrinkling.</p>
      <ul style="text-align: left; padding-left: 0;">
        <li><img src="https://jackarcher.com/cdn/shop/files/1icon_small.svg?v=1678375406" alt="Icon 1" style="width: 32px; height: 32px;"> Maintains luster, size, & shape wash after wash</li>
        <li><img src="https://jackarcher.com/cdn/shop/files/2icon_small.svg?v=1678375406" alt="Icon 2" style="width: 32px; height: 32px;"> Lightly caressing and stretchy</li>
        <li><img src="https://jackarcher.com/cdn/shop/files/3icon_small.svg?v=1678374827" alt="Icon 3" style="width: 32px; height: 32px;"> Doesn't wrinkle like cotton</li>
        <li><img src="https://jackarcher.com/cdn/shop/files/4icon_small.svg?v=1678374827" alt="Icon 4" style="width: 32px; height: 32px;"> Sweat & odor-proof</li>
      </ul>
      <a href="https://jackarcher.com/pages/build-your-own-bundle#byo-section" class="shop-button">Shop the Bundle</a>
    </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" */

2 columns: Image with Text

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