HERO BANNER WITH VIDEO MODULES
HTML
<div class='hero-banner-1 content-full-width text-center module module-spacing-medium'>
<video loop muted playsinline autoplay="true" id='hero-banner-1'>
<source src="" type="video/mp4">
</video>
<div class='row content-max-width full-height-for-medium full-height-for-large'>
<div class='columns medium-1 large-2 hide-for-small-only'></div>
<div class='columns medium-6 large-5 small-12 left'>
<h1>LOREM<br/>IPSUM<br/><span class='outline'>DOLOR</span></h1>
<!-- Mobile Picture -->
<picture class='show-for-small-only'>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/placeholder-img-mob-3?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/placeholder-img-mob-3?$SCALE-ORIGINAL$" alt="Image Alt Text">
</picture>
<div class='wrapper-text-cta'>
<p class='primary-story show-for-small-only text-white'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class='primary-story hide-for-small-only text-white'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class='cta-wrapper'>
<a class="cta cta-hover-animate cta-hover-animate cta-fill-white-outline-white" href="#">SHOP NOW</a>
</div>
</div>
</div>
<div class='columns medium-4 large-3 small-12 hide-for-small-only right'>
<a href=''>
<!-- Right Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/placeholder-img-mob-3?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/placeholder-img-mob-3?$SCALE-ORIGINAL$" alt="Image Alt Text">
</picture>
</a>
</div>
<div class='columns medium-1 large-2 hide-for-small-only'></div>
</div>
</div>
JAVASCRIPT
function HeroBannerVideo(parameters)
{
this.parameters = parameters;
this.loadVideo = function()
{
var property = undefined;
if (window.innerWidth <= 639)
property = 'small';
if (window.innerWidth >= 640 && window.innerWidth <= 1023)
property = 'medium';
if (window.innerWidth >= 1024)
property = 'large';
var video = document.querySelector(this.parameters.selector);
if (video.getAttribute('src') != this.parameters[property])
video.setAttribute('src', this.parameters[property]);
}
window.addEventListener('resize', this.loadVideo.bind(this));
this.loadVideo();
}
require(["jquery"], function($){
$(document).ready(function(){
var heroBannerVideo1 = new HeroBannerVideo( {
selector: '#hero-banner-1',
small:'https://images.timberland.com/is/content/TimberlandBrand/BTW_square_1_1',
medium: 'https://images.timberland.com/is/content/TimberlandBrand/BTW_25x9_1',
large: 'https://images.timberland.com/is/content/TimberlandBrand/BTW_25x9_1'
});
});
});
JAVASCRIPT
HTML
<div class='module content-max-width hero-banner-2 module-spacing-medium' >
<video loop muted playsinline autoplay="true" id='hero-banner-2'>
<source src="" type="video/mp4">
</video>
<div class='text-center'>
<p class='horizontal-padding-for-small primary-story text-white hide-for-small-only'>NEW BACK TO WORK STYLES FOR HIM</p>
<p class='horizontal-padding-for-small primary-story text-black show-for-small-only'>Made responsibly with better leather<br/> for a long-lasting future</p>
<a class="cta cta-hover-animate cta-fill-transparent-outline-white cta-fill-white-outline-white-for-small" href="vfcategoryurl://SC_UK_MEN-FTW-BOOTS#banner=F20_02.BACK_TO_WORK_VIDEO.HP_HERO_BANNER_NORTH.CTA1">SHOP NOW</a>
</div>
</div>
JAVASCRIPT
function HeroBannerVideo(parameters)
{
this.parameters = parameters;
this.loadVideo = function()
{
var property = undefined;
if (window.innerWidth <= 639)
property = 'small';
if (window.innerWidth >= 640 && window.innerWidth <= 1023)
property = 'medium';
if (window.innerWidth >= 1024)
property = 'large';
var video = document.querySelector(this.parameters.selector);
if (video.getAttribute('src') != this.parameters[property])
video.setAttribute('src', this.parameters[property]);
}
window.addEventListener('resize', this.loadVideo.bind(this));
this.loadVideo();
}
require(["jquery"], function($){
$(document).ready(function(){
var heroBannerVideo2 = new HeroBannerVideo( {
selector: '#hero-banner-2',
small:'https://images.timberland.com/is/content/TimberlandBrand/BTW_square_1_1',
medium: 'https://images.timberland.com/is/content/TimberlandBrand/BTW_25x9_1',
large: 'https://images.timberland.com/is/content/TimberlandBrand/BTW_25x9_1'
});
});
});
JAVASCRIPT
HTML
<div class='hero-banner-3 content-full-width text-center module module-spacing-medium'>
<video loop muted playsinline autoplay="true" id='hero-banner-1'>
<source src="" type="video/mp4">
</video>
<div class='row content-max-width full-height-for-medium full-height-for-large'>
<div class='columns medium-8 large-8 small-12 left'>
<h1><span class="outline">WHAT WILL YOU DO</span><br/><span class='text-orange'>IN YOUR BOOTS?</span></h1>
<div class='wrapper-text-cta'>
<p class='primary-story text-white'>YOU MAKE THEM WORTH EVERYTHNG.<br/>#PULLONYOURBOOTS<br/><span class='secondary-stort'>Share your story</span></p>
<div class='cta-wrapper cta-horizontal'>
<a class="cta cta-hover-animate cta-hover-animate cta-fill-transparent-outline-white" href="/iconic-yellow-boots.html#banner=F20_03.BOOTS_FOR_GOOD.HP_HERO_BANNER.CTA1">DISCOVER MORE</a>
<a class="cta cta-hover-animate cta-hover-animate cta-fill-white-outline-white" href="vfcategoryurl://SC_UK_HIDDEN-ICON_ORIGINAL_YELLOW_BOOT#banner=F20_03.BOOTS_FOR_GOOD.HP_HERO_BANNER.CTA2">SHOP NOW</a>
</div>
</div>
</div>
<div class='columns medium-4 large-4 small-12 hide-for-small-only right'></div>
</div>
</div>
JAVASCRIPT
function HeroBannerVideo(parameters)
{
this.parameters = parameters;
this.loadVideo = function()
{
var property = undefined;
if (window.innerWidth <= 639)
property = 'small';
if (window.innerWidth >= 640 && window.innerWidth <= 1023)
property = 'medium';
if (window.innerWidth >= 1024)
property = 'large';
var video = document.querySelector(this.parameters.selector);
if (video.getAttribute('src') != this.parameters[property])
video.setAttribute('src', this.parameters[property]);
}
window.addEventListener('resize', this.loadVideo.bind(this));
this.loadVideo();
}
require(["jquery"], function($){
$(document).ready(function(){
var heroBannerVideo2 = new HeroBannerVideo( {
selector: '#hero-banner-3',
small:'https://images.timberland.com/is/content/TimberlandBrand/Comp-hero-HP-icon-MOB',
medium: 'https://images.timberland.com/is/content/TimberlandBrand/Comp-hero-HP-icon',
large: 'https://images.timberland.com/is/content/TimberlandBrand/Comp-hero-HP-icon'
});
});
});
JAVASCRIPT
MODULES
HTML
<div class='row collapse content-max-width full-height module module-spacing-large module-2 animate' animate='[{"animateFor":"medium,large","infinite":"false", "y":75,"cssProperty":"transform","cssValue":"translateY(#%)", "from":2.5, "to":0}]'>
<div class='columns large-4 medium-4 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-HIKING_BOOTS#banner=F20_02.OUTDOOR_INSPIRED_HEAD_TO_TOE.HP_STORY_1_NORTH.ID_IMAGE'>
<!-- Left Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_desk_a?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_desk_a?$SCALE-ORIGINAL$" alt="RETHINK DURABILITY">
</picture>
</a>
</div>
<div class='columns large-4 medium-4 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-HIKING_BOOTS#banner=F20_02.OUTDOOR_INSPIRED_HEAD_TO_TOE.HP_STORY_1_NORTH.ID_IMAGE'>
<!-- Left Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_desk_b?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_desk_b?$SCALE-ORIGINAL$" alt="RETHINK DURABILITY">
</picture>
</a>
</div>
<div class='columns large-4 medium-4 small-12 large-text-left medium-text-left small-text-center'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-HIKING_BOOTS#banner=F20_02.OUTDOOR_INSPIRED_HEAD_TO_TOE.HP_STORY_1_NORTH.ID_IMAGE' class='no-text-decoration'>
<div>
<h2 class='horizontal-padding-for-small text-black text-white-for-small overlay-top-for-small'>WATERPROOF HIM</h2>
<!-- Mobile Picture -->
<picture class='show-for-small-only'>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_mob?$SCALE-ORIGINAL$" media="(max-width: 639px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_01_mob?$SCALE-ORIGINAL$" alt="RETHINK DURABILITY">
</picture>
<!-- Paragraphs Desktop and Mobile -->
<p class='horizontal-padding-for-small primary-story text-black'>Full-grain, resilient, waterproof leather. Sustainabily sourced and reliable in the rain.</p>
</div>
</a>
<div class='cta-wrapper'>
<a class="cta cta-hover-animate cta-fill-black-outline-black" href="vfcategoryurl://SC_UK_MEN-FTW-HIKING_BOOTS#banner=F20_02.OUTDOOR_INSPIRED_HEAD_TO_TOE.HP_STORY_1_NORTH.CTA1">SHOP NOW</a>
</div>
</div>
</div>
HTML
<div class='row collapse content-max-width full-height module module-spacing-large module-1 animate' animate='[{"animateFor":"medium,large","infinite":"false", "y":75,"cssProperty":"transform","cssValue":"translateY(#%)", "from":2.5, "to":0}]'>
<div class='columns large-4 medium-4 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-SHOES#banner=F20_02.OAKROAK_OXFORD_HEAD_TO_TOE.HP_STORY_3.ID_IMAGE'>
<!-- Left Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_desk_a?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_desk_a?$SCALE-ORIGINAL$" alt="OXFORD CLASS">
</picture>
</a>
</div>
<div class='columns large-3 medium-3 small-12 large-text-left medium-text-left small-text-center'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-SHOES#banner=F20_02.OAKROAK_OXFORD_HEAD_TO_TOE.HP_STORY_3.ID_IMAGE' class='no-text-decoration'>
<div>
<h2 class='horizontal-padding-for-small text-black'>WATERPROOF HER</h2>
<!-- Mobile Picture -->
<picture class='show-for-small-only'>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_mob?$SCALE-ORIGINAL$" media="(max-width: 639px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_mob?$SCALE-ORIGINAL$" alt="OXFORD CLASS">
</picture>
<!-- Paragraphs Desktop and Mobile -->
<p class='horizontal-padding-for-small primary-story hide-for-small-only'>Good choices for rainy days. Waterproof boots made with Better Leather: sourced from environmentally responsible tanneries.</p>
</div>
</a>
<div class='cta-wrapper'>
<a class="cta cta-hover-animate cta-fill-black-outline-black" href="vfcategoryurl://SC_UK_MEN-FTW-SHOES#banner=F20_02.OAKROAK_OXFORD_HEAD_TO_TOE.HP_STORY_3.CTA1">SHOP NOW</a>
</div>
</div>
<div class='columns large-5 medium-5 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_MEN-FTW-SHOES#banner=F20_02.OAKROAK_OXFORD_HEAD_TO_TOE.HP_STORY_3.ID_IMAGE'>
<!-- Right Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_desk_b?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_02_desk_b?$SCALE-ORIGINAL$" alt="OXFORD CLASS">
</picture>
</a>
</div>
</div>
HTML
<div class='row collapse content-max-width full-height module module-spacing-large module-2 animate' animate='[{"animateFor":"medium,large","infinite":"false", "y":75,"cssProperty":"transform","cssValue":"translateY(#%)", "from":2.5, "to":0}]'>
<div class='columns large-4 medium-4 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_WOMEN-FTW-CHELSEA_BOOTS#banner=F20_02.CHELSEA_WOMEN_HEAD_TO_TOE.HP_STORY_4.ID_IMAGE'>
<!-- Left Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_desk_a?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_desk_a?$SCALE-ORIGINAL$" alt="SILHOUETTE SPOTLIGHT:CHELSEA">
</picture>
</a>
</div>
<div class='columns large-4 medium-4 hide-for-small-only'>
<a href='vfcategoryurl://SC_UK_WOMEN-FTW-CHELSEA_BOOTS#banner=F20_02.CHELSEA_WOMEN_HEAD_TO_TOE.HP_STORY_4.ID_IMAGE'>
<!-- Left Side Desktop Picture -->
<picture>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_desk_b?$SCALE-ORIGINAL$" media="(min-width: 640px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_desk_b?$SCALE-ORIGINAL$" alt="SILHOUETTE SPOTLIGHT:CHELSEA">
</picture>
</a>
</div>
<div class='columns large-4 medium-4 small-12 large-text-left medium-text-left small-text-center'>
<a href='vfcategoryurl://SC_UK_WOMEN-FTW-CHELSEA_BOOTS#banner=F20_02.CHELSEA_WOMEN_HEAD_TO_TOE.HP_STORY_4.ID_IMAGE' class='no-text-decoration'>
<div>
<h2 class='horizontal-padding-for-small text-black'>RECYCLED LEATHER</h2>
<!-- Mobile Picture -->
<picture class='show-for-small-only'>
<source srcset="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_mob?$SCALE-ORIGINAL$" media="(max-width: 639px)">
<img src="https://images.timberland.com/is/image/TimberlandBrand/F20_02_story_03_mob?$SCALE-ORIGINAL$" alt="SILHOUETTE SPOTLIGHT:CHELSEA">
</picture>
<!-- Paragraphs Desktop and Mobile -->
<p class='horizontal-padding-for-small primary-story text-black hide-for-small-only'>Made from discarded leather scraps that were otherwise headed to a landfill</p>
</div>
</a>
<div class='cta-wrapper'>
<a class="cta cta-hover-animate cta-fill-black-outline-black" href="vfcategoryurl://SC_UK_WOMEN-FTW-CHELSEA_BOOTS#banner=F20_02.CHELSEA_WOMEN_HEAD_TO_TOE.HP_STORY_4.CTA1">SHOP NOW</a>
</div>
</div>
</div>
MOBILE VERSIONS
TYPOGRAPHY
EXAMPLE
CODE
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
TYPOGRAPHY COLOR PALETTE
EXAMPLE
CODE
LOREM IPSUM
LOREM IPSUM
LOREM IPSUM
CALL TO ACTIONS
EXAMPLE
CODE
ANIMATED CALL TO ACTIONS
EXAMPLE
CODE
MULTIPLE CALL TO ACTIONS
EXAMPLE
CODE