HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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">►</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"> </div>
<div class="fifty-radius black-circle"> </div>
<div class="fifty-radius gray-circle"> </div>
<div class="fifty-radius purple-circle"> </div>
<div class="fifty-radius brown-circle"> </div>
<div class="fifty-radius brick-circle"> </div>
<div class="fifty-radius red-circle"> </div>
<div class="fifty-radius orange-circle"> </div>
<div class="fifty-radius navy-blue-circle"> </div>
<div class="fifty-radius sky-blue-circle"> </div>
<div class="fifty-radius dark-green-circle"> </div>
<div class="fifty-radius yellow-circle"> </div>
<div class="fifty-radius green-circle"> </div>
<div class="fifty-radius gold-circle"> </div>
<div class="fifty-radius blue-circle"> </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>
/* 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;
}
$(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", "*");
}
Also see: Tab Triggers