Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="champion-made-uniforms">
  <div class="cmu-top-area">
    <div class="logo-container">
      <img class="logo-container-img" src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/ChampionMade.png" alt="champion-made-logo">
    </div>
    <h1>A Custom Breakthrough</h1>
    <p>Design your fully custom uniform for less with Champion Made.</p>
  </div>

  <div class="cmu-hero-img">
    <picture class="full">
      <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/Hero_m.png" media="(max-width:639px)" />
      <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/hero.png" alt="hero cheerleaders">
    </picture>
  </div>

  <div class="cmu-form-area">
    <h2>Let's Get Started</h2>
    <p>Need a quote, sample, or help creating your look? Contact us today!</p>

    <iframe id="iframeResize" src="https://getstarted.championteamwear.com/l/764213/2019-08-28/583y" type="text/html" allowtransparency="true" style="border: 0px none; height: 439px;" onload="setIframeHeight(this)" width="100%"></iframe>
  </div>

  <div class="cmu-make-your-own-area">
    <picture class="full">
      <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/Multi_Unis_m.png" media="(max-width:639px)" />
      <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Multi_Unis.png" alt="multi unis">
    </picture>
    <h2>Make It Your Own</h2>
    </picture>
  </div>

  <!-- request mockup area -->
  <div class="row">
    <div class="make-it-your-own-top-text">
      <div class="large-3 medium-3 small-3 columns">
        <div class="make-text-wrapper background-color-blue">
          <div class="miyo-text">
            <p>Choose your uniform style,<br> skirt length and body colors.</p>
          </div>
        </div>
      </div>
      <div class="large-3 medium-3 small-3 columns">
        <div class="make-text-wrapper background-color-blue">
          <div class="miyo-text">
            <p>Chose your braid<br> style and colors.</p>
          </div>
        </div>
      </div>
      <div class="large-3 medium-3 small-3 columns">
        <div class="make-text-wrapper background-color-blue">
          <div class="miyo-text">
            <p>Add your artwork.</p>
          </div>
        </div>
      </div>
      <div class="large-3 medium-3 small-3 columns">
        <div class="make-text-wrapper background-color-blue">
          <div class="miyo-text">
            <p><span class="right-arrow">&#9658;</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="make-it-your-own-container">
    <picture class="full">
      <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/MakeItYourOwn_m.png" media="(max-width:639px)" />
      <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/MakeItYourOwn.png" alt="hero cheerleaders">
    </picture>
  </div>

  <!-- 1. CHOOSE PRODUCTS & COLORS -->
  <div class="row">
    <div class="customize-text-area background-color-blue">
      <div class="num-center">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/1.png" alt="1">
      </div>
      <h3>Choose your products & colors</h3>
      <p>Choose your school colors for a custom look that will WOW the crowd.</p>
    </div>

    <div class="shell-container">

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/V-NECK SHELL 1.png" alt="cheer shell">
        <h4>V-Neck Shell 1</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/V-NECK SHELL 2.png" alt="cheer shell">
        <h4>V-Neck Shell 2</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/V-NECK SHELL 3.png" alt="cheer shell">
        <h4>V-Neck Shell 3</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/V-NECK SHELL 4.png" alt="cheer shell">
        <h4>V-Neck Shell 4</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/NEW V-NECK SHELL 5.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>V-Neck Shell 5</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/NEW V-NECK SHELL 6.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>V-Neck Shell 6</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/NEW V-NECK SHELL 7.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>V-Neck Shell 7</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/shells/HalterShell1.png" alt="cheer shell">
        <h4>Halter Shell 1</h4>
      </div>

    </div>

    <div class="skirt-container">

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 1.png" alt="cheer shell">
        <h4>V-Notch Skirt 1</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 2.png" alt="cheer shell">
        <h4>V-Notch Skirt 2</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 3.png" alt="cheer shell">
        <h4 class="gold-text">Coming Soon</h4>
        <h4>V-Notch Skirt 3</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/AlineSkirt1.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>A-Line Skirt 1</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/AlineSkirt2.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>A-Line Skirt 2</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/NEW PLEATED SKIRT 1.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>Pleated Skirt 1</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/NEW PLEATED SKIRT 2.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>Pleated Skirt 2</h4>
      </div>

      <div class="shell-style">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/NEW SIDE PLEAT SKIRT 1.png" alt="cheer shell">
        <h4 class="gold-text">New</h4>
        <h4>Side Pleat Skirt</h4>
      </div>

    </div>

    <div class="shell-skirt-text">
      <p>1" side seam for easy alterations</p>
      <h3>Take it up or add length ot your skirt</h3>
      <p class="button">Learn More</p>
    </div>
  </div>

  <div class="switching-skirt shell-skirt-text">
    <div class="row">
      <h3>Customize Your Uniform By Switching Your Skirt</h3>
      <p>Add or subtract length for the right fit.</p>

      <div class="switch-skirt-container">
        <div class="switch-skirt-style">
          <h4>V-Notch Skirt</h4>
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 2.png" alt="cheer shell">
        </div>
        <div class="switch-skirt-style">
          <h4>Solid V-Notch Skirt</h4>
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 2.png" alt="cheer shell">
        </div>
        <div class="switch-skirt-style">
          <h4>Pleated Skirt</h4>
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Skirts/minis/V-NOTCH SKIRT 2.png" alt="cheer shell">
        </div>
      </div>
    </div>
  </div>

  <div class="select-body-color">
    <div class="row text-center">
      <h3>Select Your Color for the Body of the Uniform!</h3>
      <p>Back body is a separate zone.</p>
    </div>

    <div class="flex body-colors">
      <div class="fifty-radius white-circle">&nbsp;</div>
      <div class="fifty-radius black-circle">&nbsp;</div>
      <div class="fifty-radius gray-circle">&nbsp;</div>
      <div class="fifty-radius purple-circle">&nbsp;</div>
      <div class="fifty-radius brown-circle">&nbsp;</div>
      <div class="fifty-radius brick-circle">&nbsp;</div>
      <div class="fifty-radius red-circle">&nbsp;</div>
      <div class="fifty-radius orange-circle">&nbsp;</div>
      <div class="fifty-radius navy-blue-circle">&nbsp;</div>
      <div class="fifty-radius sky-blue-circle">&nbsp;</div>
      <div class="fifty-radius dark-green-circle">&nbsp;</div>
      <div class="fifty-radius yellow-circle">&nbsp;</div>
      <div class="fifty-radius green-circle">&nbsp;</div>
      <div class="fifty-radius gold-circle">&nbsp;</div>
      <div class="fifty-radius blue-circle">&nbsp;</div>
    </div>

  </div>

  <!-- 2. CHOOSE BRAID STYLE AND COLORS -->
  <div class="row">
    <div class="customize-text-area background-color-blue">
      <div class="num-center">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/2.png" alt="2">
      </div>
      <h3>Choose your braid style and colors</h3>
      <p>Choose your sublimated braid by blending bold colors and patterns.</p>
    </div>
  </div>

  <!-- 3. ADD YOUR TEAM NAME OR MASCOT -->
  <div class="row">
    <div class="customize-text-area background-color-blue">
      <div class="num-center">
        <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3.png" alt="3">
        <h3>Add your team name or mascot</h3>
        <p>Customize your art to match your squad's personality.</p>
      </div>
    </div>

    <div class="embellishments">
      <div class="row">
        <div class="art-container">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Twill 1.png" alt="3">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Twill 2.png" alt="3">
          <h3>Twill</h3>
        </div>

        <div class="art-container">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Emb 1.png" alt="3">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Emb 2.png" alt="3">
          <h3>Embroidery</h3>
        </div>

        <div class="art-container">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Twill w Rhine 1.png" alt="3">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Twill w Rhine 2.png" alt="3">
          <h3>Twill With Rhinestones</h3>
        </div>

        <div class="art-container">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Rhinestones 1.png" alt="3">
          <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/3_Embellishments/Rhinestones 2.png" alt="3">
          <h3>Rhinestones</h3>
        </div>

        <a class="button" href="#">Request A Mockup</a>

      </div>
    </div>

    <!-- FULL LINEUP -->
    <div class="row cmu-full-lineup">
      <h2>Get it All With the Full Lineup</h2>
      <p>Custom uniforms, warm-ups, and practice wear are a step above the rest. Pair our designs and your school colors for the ultimate cheer look.</p>
      <div class="row">
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_1.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_1.png" alt="Full Lineup image">
          </picture>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_2.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_2.png" alt="Full Lineup image">
          </picture>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_3.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_3.png" alt="Full Lineup image">
          </picture>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_4.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_4.png" alt="Full Lineup image">
          </picture>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_5.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_5.png" alt="Full Lineup image">
          </picture>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <picture class="full">
            <source srcset="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/mobile/GIA_m_6.png" media="(max-width:639px)" />
            <img src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/Full Lineup/Full_Lineup_6.png" alt="Full Lineup image">
          </picture>
        </div>
      </div>

      <a class="btn button full-lineup-btn" href="#">View Catalog</a>

    </div>

    <div class="row cmu-footer-area">
      <div class="logo-container">
        <img class="margin-2rem-bottom" src="https://static.gtmsportswear.com/LandingPages/ChampionMade/2021/ChampionMade.png" alt="champion-made-logo">
      </div>
      <h2>Call Us to Customize</h2>

      <h2 class="knockout--welter">Call Us to Customize <a href="tel:18772544586">1.877.254.4586</a></h2>

      <h2 class="red-underline">Make Your Mark in Champion Made</h2>
    </div>

</section>
              
            
!

CSS

              
                /* GENERAL STYLES */
.row {
  margin: 0 auto;
  max-width: 75rem;
  width: 100%;
}

h1 {
  color: #232d64;
  font-family: Knockout-Welterweight, sans-serif;
  font-size: 4em;
  line-height: 1;
  margin: 0 0 0.5rem;
  padding: 0;
  text-align: center;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

h2 {
  color: #232d64;
  font-family: Knockout-Welterweight, sans-serif;
  font-size: 3em;
  line-height: 1;
  margin: 0 0 0.5rem;
  padding: 0;
  text-align: center;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

p {
  color: #222;
  font-family: Knockout-JuniorMiddle, sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  text-rendering: optimizeLegibility;
}

.background-color-blue {
  background-color: #232d64;
}

.background-color-blue p {
  color: #fff;
  margin: 0;
}

.logo-container {
  margin: 2rem auto;
  max-width: 200px;
  width: 100%;
}

/*HERO*/
.cmu-top-area p {
  margin-bottom: 45px;
}

.cmu-hero-img {
  margin: 0 auto;
  max-width: max-content;
  width: 100%;
}

/* LET'S GET STARTED/FORM */
.cmu-form-area h2 {
  margin-top: 6rem;
}

/* MAKE IT YOUR OWN - MULTI UNI*/
.cmu-make-your-own-area {
  margin: 50px auto;
  max-width: max-content;
  width: 100%;
}

.cmu-make-your-own-area img {
  margin: 0 0 30px;
  max-width: max-content;
  width: 100%;
}

.make-it-your-own-top-text {
  align-items: center;
  display: flex;
}

.make-it-your-own-top-text .columns {
  padding: 0 0.25rem;
}

.large-3.medium-3.small-3.columns:last-child {
  padding-right: 0;
}

.num-center {
  margin: 0 auto;
  text-align: center;
  width: max-content;
}

/*MAKE IT YOUR OWN*/
.make-it-your-own-container {
  margin: 0 auto;
  max-width: max-content;
  width: 100%;
}

.cmu-full-lineup .row .columns {
  margin: 0.9375rem 0;
}

.champion-made-uniforms .row .background-color-blue {
  background: #232d64;
  min-height: 7rem;
  padding: 10px;
}

.miyo-text {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
}

.right-arrow {
  font-size: 3rem;
}

/* CUSTOMIZE */
.customize-text-area > img {
  width: max-content;
  margin: 0 auto;
  display: block;
}

.customize-text-area h3 {
  color: #fff;
  font-family: Knockout-Welterweight, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

/*SHELL & SKIRT CONTAINERS*/
.shell-container,
.skirt-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px auto;
}

.shell-container h4,
.skirt-container h4,
.switch-skirt-style h4 {
  color: #000;
  font-family: Knockout-Welterweight, sans-serif;
  font-size: 1.2rem;
  margin: 0.3rem 0;
  text-align: center;
  text-transform: uppercase;
}

.shell-container h4.gold-text,
.skirt-container h4.gold-text {
  color: #f89926;
  margin-bottom: 0;
}

.shell-skirt-text h3 {
  font-family: Knockout-Welterweight, sans-serif;
  font-size: 1.5rem;
  text-align: center;
  text-transform: uppercase;
}

/* SWITCHING SKIRT */
.switching-skirt {
  background: #f3efed;
  padding: 2rem 0.9375rem;
}

.switch-skirt-container {
  display: flex;
  justify-content: space-around;
}

/* BODY COLORS */

.body-colors {
  margin: 0 auto;
  max-width: max-content;
  width: 100%;
}

.fifty-radius {
  border: 1px solid #000;
  border-radius: 50%;
  height: 60px;
  margin: 15px;
  width: 60px;
}

.white-circle {
  background: #fff;
}

.black-circle {
  background: #231e20;
}

.gray-circle {
  background: #c3c5c9;
}

.purple-circle {
  background: #301347;
}

.brown-circle {
  background: #3f1120;
}

.brick-circle {
  background: #7e1f27;
}

.red-circle {
  background: #ae1c2e;
}

.orange-circle {
  background: #f36520;
}

.navy-blue-circle {
  background: #00012d;
}

.sky-blue-circle {
  background: #69a0d1;
}

.dark-green-circle {
  background: #053b27;
}

.yellow-circle {
  background: #fbb125;
}

.green-circle {
  background: #046336;
}

.gold-circle {
  background: #046336;
}

.blue-circle {
  background: #034e9f;
}

/* FULL LINEUP */
.full-lineup-btn {
  display: block;
  margin: 20px auto 40px;
  text-align: center;
  width: max-content;
}

/* FOOTER - CHAMPION */
.cmu-footer-area {
  background: #f3efed;
  padding: 2rem 0.9375rem;
}

.red-underline {
  text-decoration: underline 5px solid #e61937;
}

/* FONTS */
@font-face {
  font-family: Knockout-JuniorMiddle;
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorMiddle.eot);
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorMiddle.eot?#iefix)
      format("embedded-opentype"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorMiddle.woff)
      format("woff"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorMiddle.woff2)
      format("woff2"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorMiddle.ttf)
      format("truetype");
  font-weight: 330;
  font-style: normal;
}

@font-face {
  font-family: Knockout-JuniorCruise;
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorCruise.eot);
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorCruise.eot?#iefix)
      format("embedded-opentype"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorCruise.woff)
      format("woff"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorCruise.woff2)
      format("woff2"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-JuniorCruise.ttf)
      format("truetype");
  font-weight: 330;
  font-style: normal;
}

@font-face {
  font-family: Knockout-Welterweight;
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-Welterweight.eot);
  src: url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-Welterweight.eot?#iefix)
      format("embedded-opentype"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-Welterweight.woff)
      format("woff"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-Welterweight.woff2)
      format("woff2"),
    url(https://static.gtmsportswear.com/assets/font/knockout/Knockout-Welterweight.ttf)
      format("truetype");
  font-weight: 365;
  font-style: normal;
}

              
            
!

JS

              
                $(document).ready(function () {
  var speed = "300";
  var small = "641";
  var large = "1025";
  var slick = $(".slick");

  $(".slick-message-bnr").slick({
    infinite: true,
    speed: speed,
    slidesToShow: 1,
    draggable: true,
    swipe: true,
    swipeToSlide: true,
    touchMove: true,
    mobileFirst: true,
    autoplay: true,
    autoplaySpeed: 4000,
    pauseOnFocus: true,
    pauseOnHover: true,
    arrows: false,
    dots: true
  });

  $(".slick-medUp-2").slick({
    infinite: true,
    speed: speed,
    slidesToShow: 1,
    draggable: true,
    swipe: true,
    swipeToSlide: true,
    touchMove: true,
    mobileFirst: true,
    responsive: [
      {
        breakpoint: small,
        settings: {
          slidesToShow: 2
        }
      }
    ]
  });

  $(".slick-lrgUp-3").slick({
    infinite: true,
    speed: speed,
    slidesToShow: 1,
    draggable: true,
    swipe: true,
    swipeToSlide: true,
    touchMove: true,
    mobileFirst: true,
    responsive: [
      {
        breakpoint: small,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: large,
        settings: {
          slidesToShow: 3
        }
      }
    ]
  });

  $(".slick-lrgUp-4").slick({
    infinite: true,
    speed: speed,
    slidesToShow: 1,
    draggable: true,
    swipe: true,
    swipeToSlide: true,
    touchMove: true,
    mobileFirst: true,
    responsive: [
      {
        breakpoint: small,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: large,
        settings: {
          slidesToShow: 4
        }
      }
    ]
  });

  $(".slick-tablet-down").slick({
    lazyLoad: "ondemand",
    mobileFirst: true,
    draggable: true,
    swipeToSlide: true,
    arrows: true,
    speed: speed,
    slidesToShow: 1,
    responsive: [
      {
        breakpoint: small,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: large,
        settings: "unslick"
      }
    ]
  });

  // iframe resizer -------------------------
  // Listen for messages sent from the iFrame
  var eventMethod = window.addEventListener
    ? "addEventListener"
    : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  eventer(
    messageEvent,
    function (e) {
      // If the message is a resize frame request
      if (e.data.indexOf("resize::") != -1) {
        var height = e.data.replace("resize::", "");
        document.getElementById("iframeResize").style.height = height + "px";
      }
    },
    false
  );
});

// iframe resizer
document
  .getElementById("iframeResize")
  .setAttribute("onload", "setIframeHeight(this)");

window.addEventListener("message", function (event) {
  //Here We have to check content of the message event  for safety purpose
  //event data contains message sent from page added in iframe as shown in step 3
  if (event.data.hasOwnProperty("FrameHeight")) {
    //Set height of the Iframe
    $("#iframeResize").css("height", event.data.FrameHeight);
  }
});

function setIframeHeight(ifrm) {
  var height = ifrm.contentWindow.postMessage("FrameHeight", "*");
}

              
            
!
999px

Console