CINXE.COM

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero</title> <link rel="shortcut icon" href="https://www.bootstrapcreative.com/hubfs/bootstrapcreative-icon.png"> <meta name="description" content="Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!"> <link rel="stylesheet" media="print" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/template_assets/85910735011/1689793839328/jake-hs-addons-portal/css/print.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:description" content="Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!"> <meta property="og:title" content="HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero"> <meta name="twitter:description" content="Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!"> <meta name="twitter:title" content="HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero"> <script type="application/ld+json"> { "@context": "http://www.schema.org", "@type": "product", "name": "HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero", "@id": "https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module", "brand": { "@type": "Brand", "name": "Bootstrap Creative" }, "sku": "IF", "mpn": "IF", "image": "https://1637283.fs1.hubspotusercontent-na1.net/hubfs/1637283/hero-banner-module-jake-lett-thumbnail.png", "description": "Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!", "review": { "@type": "Review", "reviewRating": { "@type": "Rating", "ratingValue": "4", "bestRating": "5" }, "author": { "@type": "Person", "name": "Jake Lett" } }, "aggregateRating": { "@type": "aggregateRating", "ratingValue": "5", "reviewCount": "1 ", "bestRating": "5 " } } </script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "4jlsqsoaai"); </script> <link rel="prefetch" href=""> <link rel="prefetch" href=""> <link rel="prefetch" href=""> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{ "@type": "Question", "name": "How Do I Add This Jake Hero Banner to a HubSpot Page? How Do I Make it Full Width?", "acceptedAnswer": { "@type": "Answer", "text": "Steps How to add a Jake Addons custom module to a page. In your HubSpot account, navigate to the page you would like to edit. Hover over a page and click Edit. In the content editor sidebar on the left of the window, locate the search box and type \"jake\" Next, select a module that appears in the All Modules section Click a module and drag it into position on the page. After you add the module, you will then need to adjust the section settings to remove any default padding. You can also choose if you want to be full width or have a maximum width." } },{ "@type": "Question", "name": "What Video Sizes and File Format Do You Recommend?", "acceptedAnswer": { "@type": "Answer", "text": "My recommendations for the video can be adjusted based on your preference on quality\/file size. You want the \"best\" quality video at the smallest file size you can. Best is subjective based on your needs for page load vs branding and design precision. Usually, you need to find a compromise between the two. 16:9 aspect ratio, 1280 x 720 mpg - if it needs to be crisper and less pixelated try increasing the resolution to 1920 x 1080. Here is a full list of video resolutions and how they impact the quality. would make the run time as short as possible to visually communicate your subject matter. This can vary if you are showing different scenes vs a loop background texture. I would also look into building a seamless loop if possible - Watch tutorial on how to make a seamless video edit" } },{ "@type": "Question", "name": "The video is Shown as a Solid Black Color on Mobile. How Do I Fix This?", "acceptedAnswer": { "@type": "Answer", "text": "Make sure you are using a MP4 video format. This is the only video format that works with this module. View the the other FAQ question - \"What video sizes and file format do you recommend\" for more information." } },{ "@type": "Question", "name": "What are Modules in HubSpot?", "acceptedAnswer": { "@type": "Answer", "text": "Some pages you create will require an image gallery or tab content, but others will not. HubSpot modules give you the control to add new functionality to only the pages you need without impacting the rest of the pages on your website. These modules are added to drag-and-drop areas or sections when editing a page. If you are more familiar with WordPress, they are like blocks or plugins in that CMS." } },{ "@type": "Question", "name": "What is HubSpot CMS and How Does it Compare to WordPress?", "acceptedAnswer": { "@type": "Answer", "text": "HubSpot CMS Hub Overview The content management system you need to easily create and personalize website pages for every visitor \u2014 optimized for conversion across every device. Rely on developers as much or as little as you\u2019d like. HubSpot CMS Hub Features Drag and drop page editor Image and file manager Fully integrated CRM Contact attribution analytics \u2013 know where leads come from Multiple language support Build website pages, landing pages, and blog posts Managed website hosting and security HubSpot CMS Hub Benefits Marketing and Sales can have one login and tool for their website Easy to use website builder without having to manage website hosting and plugins Can make content translation and smart content to leverage your CRM data Get Started A Beginner\u2019s Guide to HubSpot CMS - Free eBook HubSpot CMS vs. WordPress Get Started Free HubSpot CMS" } }] } </script> <style> a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px} </style> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/template_assets/89033707915/1721036789539/jake-hs-addons-portal/css/jake-hs-addons-portal.css"> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/template_assets/85910735128/1689793846183/jake-hs-addons-portal/css/theme-overrides.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css"> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/85910489988/1664017004068/module_85910489988_website-header.min.css"> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/89387670625/1667522583555/module_89387670625_parallax-hero-banner-jake.min.css"> <style> /* Dynamic Background Styles */ #dnd_area-module-2:before { background-color: #007CFF; } #dnd_area-module-2 { transition: background 0.1s linear; background-image: url(''); padding-top:50px; padding-bottom:50px; } #dnd_area-module-2 * { color: #fff; } #dnd_area-module-2 .p-hero-jake__content main { font-size: 1em; } /* tablet */ @media only screen and (min-width: 576px) { #dnd_area-module-2 .p-hero-jake__content main { font-size: 1em; } #dnd_area-module-2 { background-image: url(''); padding-top:50px; padding-bottom:50px; } } /* desktop */ @media only screen and (min-width: 768px) { #dnd_area-module-2 { background-image: url(''); padding-top:50px; padding-bottom:50px; } } </style> <link href="https://cdn.jsdelivr.net/npm/jarallax@1.12.7/dist/jarallax.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/89386480134/1667123346237/module_89386480134_page-title-jake.min.css"> <style> #hs_cos_wrapper_dnd_area-module-4 .page-title-jake .page-title-jake__title { font-size:px; } #hs_cos_wrapper_dnd_area-module-4 .page-title-jake .page-title-jake__subtitle { font-size:px; } </style> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/148232064403/1712261723258/module_148232064403_jake-hero-banner.min.css">  <style> #jake-hero-widget_1701897119469 { overflow: hidden; position: relative; border-radius:0px; } @media only screen and (max-width: 767px) { #jake-hero-widget_1701897119469 { border-radius:0px; } } .jake-hero--parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 0; object-fit:cover; visibility:hidden; opacity:0; } .jake-hero-banner--show { visibility:visible; opacity:1; transition:opacity 1s linear; } #jake-hero-widget_1701897119469 .jake-hero-banner__cta .button { text-decoration:none; display: inline-block; background-color:#007CFF; color: #FFFFFF;font-size: 18px;font-family: Lato; padding: 20px; margin-top: 1rem; } #jake-hero-widget_1701897119469 .jake-hero-banner__cta .button:hover { background-color:#007CFF; } #jake-hero-widget_1701897119469 .jake-hero--parallax { background:#0062c9; } #jake-hero-widget_1701897119469:before { content:""; position:absolute; background-color: rgba(0, 98, 201, 30%); height: 100%; width: 100%; top:0; z-index: 1; } #jake-hero-widget_1701897119469 .jake-hero-banner__main-content * { color: #FFFFFF; } #jake-hero-widget_1701897119469 { padding-top: 50px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } #jake-hero-widget_1701897119469 .jake-hero-banner__main-content { text-shadow: 2px 2px 8px #003062; text-align: LEFT ; } #jake-hero-widget_1701897119469 .jake-hero-banner__cta { text-align: LEFT ; } @media only screen and (max-width: 800px) { #jake-hero-widget_1701897119469 .jake-hero-banner__content { padding-left:20px; padding-right:20px; } } @media only screen and (min-width: 800px) { #jake-hero-widget_1701897119469 .jake-hero-banner__content { max-width: 800px; margin:0 auto; box-sizing: content-box; } } @media only screen and (min-width: 800px) { #jake-hero-widget_1701897119469 { padding-top: 200px; padding-right: 0px; padding-bottom: 200px; padding-left: 0px; } } </style>  <style> #jake-hero-module_17079943530644 { overflow: hidden; position: relative; border-radius:30px; } @media only screen and (max-width: 767px) { #jake-hero-module_17079943530644 { border-radius:0px; } } .jake-hero--parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 0; object-fit:cover; visibility:hidden; opacity:0; } .jake-hero-banner--show { visibility:visible; opacity:1; transition:opacity 1s linear; } #jake-hero-module_17079943530644 .jake-hero-banner__cta .button { text-decoration:none; display: inline-block; background-color:#007CFF; color: #FFFFFF;font-family: Lato; margin-top: 1rem; } #jake-hero-module_17079943530644 .jake-hero-banner__cta .button:hover { background-color:#007CFF; } #jake-hero-module_17079943530644:before { content:""; position:absolute; background-color: rgba(0, 98, 201, 30%); height: 100%; width: 100%; top:0; z-index: 1; } #jake-hero-module_17079943530644 .jake-hero-banner__main-content * { color: #FFFFFF; } #jake-hero-module_17079943530644 { background: rgba(0, 98, 201, 30%) url(https://www.bootstrapcreative.com/hubfs/jake-hero-banner-tall.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top: 50px; padding-right: 0px; padding-bottom: 50px; padding-left: 0px; } #jake-hero-module_17079943530644 .jake-hero-banner__main-content { text-shadow: 2px 2px 8px #003062; text-align: CENTER ; margin:0 auto; } #jake-hero-module_17079943530644 .jake-hero-banner__cta { text-align: CENTER ; } @media only screen and (min-width: 800px) { #jake-hero-module_17079943530644 { padding-top: 200px; padding-right: 0px; padding-bottom: 200px; padding-left: 0px; background-image: url('https://www.bootstrapcreative.com/hubfs/jake-hero-banner-wide.jpg'); } } </style> <style> #hs_cos_wrapper_dnd_area-module-6 .page-title-jake .page-title-jake__title { font-size:px; } #hs_cos_wrapper_dnd_area-module-6 .page-title-jake .page-title-jake__subtitle { font-size:px; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/accordion-js@3.3.2/dist/accordion.min.css"> <style> #dnd_area-module-7 .ac-header { background-color:; border-radius:30px; } #dnd_area-module-7 .ac-header .ac-trigger { color: #000000;font-size: 18px; } #dnd_area-module-7 .ac { background:transparent; border:none; border: 1px solid #CCCCCC; background-color:#ffffff; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; margin-top: 20px; margin:1rem 0; } #dnd_area-module-7 .ac.is-active { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } #dnd_area-module-7 .ac-panel { background:; border-radius:30px; } #dnd_area-module-7 .ac-panel_inner { padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px; } #dnd_area-module-7 .ac-trigger { font: inherit; } #dnd_area-module-7 .ac .ac-trigger::after { width: 15px; font-size:15px; line-height:15px; } .ac.is-active>.ac-header .ac-trigger::after { margin-top:-0.2em; } #dnd_area-module-7 .is-active .ac-trigger, .ac .ac-trigger:focus { color:#007CFF; } #dnd_area-module-7 .ac .ac-trigger:hover { color:#007CFF; } @media screen and (min-width:992px) { #dnd_area-module-7.accordion-jake--2col { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap:1%; align-items: flex-start; } #dnd_area-module-7.accordion-jake--2col .ac { flex-basis: 49%; } } </style> <style> #hs_cos_wrapper_dnd_area-module-10 .page-title-jake .page-title-jake__title { font-size:px; } #hs_cos_wrapper_dnd_area-module-10 .page-title-jake .page-title-jake__subtitle { font-size:px; } </style> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/175921903190/1723888741385/module_175921903190_market-research.min.css"> <link rel="stylesheet" href="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/89096634005/1723891321794/module_89096634005_Page_Listing.min.css">  <style id="hs_editor_style" type="text/css"> .dnd_area-row-0-force-full-width-section > .row-fluid { max-width: none !important; } .dnd_area-row-2-force-full-width-section > .row-fluid { max-width: none !important; } /* HubSpot Styles (default) */ .dnd_area-row-1-padding { padding-bottom: 20px !important; } .dnd_area-row-2-padding { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } .dnd_area-row-3-padding { padding-left: 0px !important; padding-right: 0px !important; } .dnd_area-row-4-background-layers { background-image: linear-gradient(rgba(250, 250, 250, 1), rgba(250, 250, 250, 1)) !important; background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important; } .dnd_area-row-5-background-layers { background-image: linear-gradient(rgba(250, 250, 250, 1), rgba(250, 250, 250, 1)) !important; background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important; } </style>  <script> var _hsp = window._hsp = window._hsp || []; _hsp.push(['addPrivacyConsentListener', function(consent) { if (consent.allowed || (consent.categories && consent.categories.analytics)) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create','UA-17717638-2','auto'); ga('send','pageview'); }}]); </script>   <script> var _hsp = window._hsp = window._hsp || []; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} var useGoogleConsentModeV2 = true; var waitForUpdateMillis = 1000; if (!window._hsGoogleConsentRunOnce) { window._hsGoogleConsentRunOnce = true; gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'wait_for_update': waitForUpdateMillis }); if (useGoogleConsentModeV2) { _hsp.push(['useGoogleConsentModeV2']) } else { _hsp.push(['addPrivacyConsentListener', function(consent){ var hasAnalyticsConsent = consent && (consent.allowed || (consent.categories && consent.categories.analytics)); var hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement)); gtag('consent', 'update', { 'ad_storage': hasAdsConsent ? 'granted' : 'denied', 'analytics_storage': hasAnalyticsConsent ? 'granted' : 'denied', 'ad_user_data': hasAdsConsent ? 'granted' : 'denied', 'ad_personalization': hasAdsConsent ? 'granted' : 'denied' }); }]); } } gtag('js', new Date()); gtag('set', 'developer_id.dZTQ1Zm', true); gtag('config', 'G-KV26KCHP36'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-KV26KCHP36"></script>  <link rel="canonical" href="https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module"> <meta property="og:image" content="https://www.bootstrapcreative.com/hubfs/hero-banner-module-jake-lett-thumbnail.png"> <meta name="twitter:image" content="https://www.bootstrapcreative.com/hubfs/hero-banner-module-jake-lett-thumbnail.png"> <meta property="og:url" content="https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module"> <meta name="twitter:card" content="summary"> <meta http-equiv="content-language" content="en"> <meta name="generator" content="HubSpot"></head> <body class=" hs-content-id-148211394407 hs-site-page page jake-hs-addons-portal module"> <div class="body-wrapper"> <header class="header"> <div class="header__container content-wrapper"> <div id="hs_cos_wrapper_page_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <style> #hs_cos_wrapper_page_header .header__top { background-color:rgba(#null,0.0); } #hs_cos_wrapper_page_header .header__language-switcher-current-label>span {} #hs_cos_wrapper_page_header .header__language-switcher:hover .header__language-switcher-current-label>span, #hs_cos_wrapper_page_header .header__language-switcher:focus .header__language-switcher-current-label>span {} #hs_cos_wrapper_page_header .header__language-switcher .lang_list_class a:hover, #hs_cos_wrapper_page_header .header__language-switcher .lang_list_class a:focus {} #hs_cos_wrapper_page_header .header__language-switcher .lang_list_class a:active {} #hs_cos_wrapper_page_header .header__menu-link { color:#FFFFFF; font-size:18px; } #hs_cos_wrapper_page_header .header__menu-item--depth-1>.header__menu-child-toggle svg { fill:#FFFFFF; } #hs_cos_wrapper_page_header .header__menu-item--depth-1>.header__menu-link:hover, #hs_cos_wrapper_page_header .header__menu-item--depth-1>.header__menu-link:focus { color:#FFFFFF; } #hs_cos_wrapper_page_header .header__menu-item--depth-1>.header__menu-link:active { color:#ffffff; } #hs_cos_wrapper_page_header .header__menu-item--depth-1>.header__menu-link--active-link { color:#FFFFFF; } #hs_cos_wrapper_page_header .header__menu-submenu { background-color:rgba(255,255,255,1.0); } #hs_cos_wrapper_page_header .header__menu-submenu .header__menu-link:hover, #hs_cos_wrapper_page_header .header__menu-submenu .header__menu-link:focus { color:#007CFF; } #hs_cos_wrapper_page_header .header__menu-submenu .header__menu-link { color:#007CFF; } #hs_cos_wrapper_page_header .header__menu-child-toggle svg { fill:#007CFF; } #hs_cos_wrapper_page_header .button { background-color:rgba(0,48,98,1.0); border:0px none; color:#FFFFFF; font-size:16px; font-style:normal; font-weight:bold; text-decoration:none; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; } #hs_cos_wrapper_page_header .button:hover, #hs_cos_wrapper_page_header .button:focus { background-color:rgba(#null,0.0); } #hs_cos_wrapper_page_header .button:active { background-color:rgba(#null,0.0); } </style> <div class="header__container header__container--left"> <div class="header__bottom"> <div class="header__wrapper header__wrapper--bottom"> <div class="header__logo-col"> <div class="header__logo"> <a class="header__logo-link" href="/jake-addons"> <img class="header__logo-image" src="https://www.bootstrapcreative.com/hubfs/jake-addons-for-hubspot-cms-white.svg" loading="eager" alt="jake-addons-for-hubspot-cms-white" height="200" width="200"> </a> </div> </div> <div class="header__menu-col"> <nav class="header__menu header__menu--desktop" aria-label="Desktop navigation"> <ul class="header__menu-wrapper no-list"> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="https://www.bootstrapcreative.com/jake-addons/modular-manifesto">Module Manifesto</a> </li> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="/jake-addons/modules"><b>FREE</b> HubSpot Modules</a> </li> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="https://www.bootstrapcreative.com/jake-addons/hubspot-themes-templates">HubSpot Themes</a> </li> </ul> </nav> <div class="header__menu-container header__menu-container--mobile"> <button class="header__menu-toggle header__menu-toggle--open header__menu-toggle--show no-button"> <span class="show-for-sr">Open main navigation</span> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" width="24" aria-hidden="true"><g id="bars1_layer"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" /></g></svg> </button> <button class="header__menu-toggle header__menu-toggle--close no-button"> <span class="show-for-sr">Close main navigation</span> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 384 512" width="24" aria-hidden="true"><g id="times2_layer"><path d="M323.1 441l53.9-53.9c9.4-9.4 9.4-24.5 0-33.9L279.8 256l97.2-97.2c9.4-9.4 9.4-24.5 0-33.9L323.1 71c-9.4-9.4-24.5-9.4-33.9 0L192 168.2 94.8 71c-9.4-9.4-24.5-9.4-33.9 0L7 124.9c-9.4 9.4-9.4 24.5 0 33.9l97.2 97.2L7 353.2c-9.4 9.4-9.4 24.5 0 33.9L60.9 441c9.4 9.4 24.5 9.4 33.9 0l97.2-97.2 97.2 97.2c9.3 9.3 24.5 9.3 33.9 0z" /></g></svg> </button> <nav class="header__menu header__menu--mobile" aria-label="Mobile navigation"> <ul class="header__menu-wrapper no-list"> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="https://www.bootstrapcreative.com/jake-addons/modular-manifesto">Module Manifesto</a> </li> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="/jake-addons/modules"><b>FREE</b> HubSpot Modules</a> </li> <li class="header__menu-item header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a class="header__menu-link " href="https://www.bootstrapcreative.com/jake-addons/hubspot-themes-templates">HubSpot Themes</a> </li> <li class="header__menu-item header__menu-item--button header__menu-item--depth-1 hs-skip-lang-url-rewrite"> <a href="https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer" class="header__button button button--secondary "> Hire a HubSpot Developer </a> </li> </ul> </nav> </div> </div> <div class="header__button-col hidden-phone"> <a href="https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer" class="header__button button button--secondary "> Hire a HubSpot Developer </a> </div> </div> </div> </div> </div> </div> </header> <main class="body-container-wrapper"> <div class="container-fluid body-container"> <div class="row-fluid-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-1 dnd_area-row-0-force-full-width-section dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-2 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <div id="dnd_area-module-2" class="p-hero-jake jarallax"> <div class="centered padding-vertical-0 p-hero-jake__content p-hero-jake__content--center"> <main class="p-hero-jake__content--left" }};> <div id="hs_cos_wrapper_dnd_area-module-2_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_inline_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="inline_rich_text" data-hs-cos-field="main_content"><div class="breadcrumb text-center"><a href="/jake-addons/modules">HubSpot Modules</a> / <h1 class="p">Parallax Hero Banner Module for HubSpot CMS</h1> </div> <div class="text-center"><span class="badge all"> Paid </span></div> <h2 style="text-align: center;"><span>Wave Goodbye to Low Engagement and Start Grabbing Attention with A Parallax Scroll Hero Banner</span></h2> <p style="text-align: center;" class="lead">Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!</p> <div class="button-group text-center"><div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-161109619009" style="max-width:100%; max-height:100%; width:150px;height:58.3984375px" data-hubspot-wrapper-cta-id="161109619009"> <a href="/hs/cta/wi/redirect?encryptedPayload=AVxigLK7tuxheIxUWZ0wwIMXAOYfriAN3dH0htndyl3Xf88F1RXT8f7zrTjrImMpci2g8RWcb7DXQmj2pA1syoXTVqMCGd%2BOV%2FDqFUun%2Bz4OYRLBeksxa5SWgG3KRcjC4P%2FtzEVzQyzQBys0472exXhaOj7ZnuVf3Rws5kmnZKFw%2BAXIOspfnMOO4eM2tDzA7sp3orOJbmf8cxFcmn8WLGE9O2gsDBQt51Ea9%2FBPUXdPPzZrK2rZUuVOTsHjQUqtj6xHZWdp&webInteractiveContentId=161109619009&portalId=1637283" target="_blank" rel="noopener" crossorigin="anonymous"> <img alt="Get Module" loading="lazy" src="https://no-cache.hubspot.com/cta/default/1637283/interactive-161109619009.png" style="height: 100%; width: 100%; object-fit: fill" onerror="this.style.display='none'"> </a> </div> <a href="#faq" rel="noopener" class="button secondary"><span>FAQ</span></a> <a href="#documentation" rel="noopener" class="button secondary"><span>Documentation</span></a></div></div> </main> <footer> </footer> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-3 dnd_area-row-1-padding dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-4 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-4" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <a name="demo"> </a> <div class="page-title-jake " id="dnd_area-module-4"> <h2 class="page-title-jake__title">Module Demo</h2> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-5 dnd_area-row-2-force-full-width-section dnd_area-row-2-padding dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-6 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_widget_1701897119469" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <div id="jake-hero-widget_1701897119469" class="jake-hero-banner"> <video autoplay muted loop playsinline class="jake-hero-banner__video jake-hero--parallax jake-hero--parallax-js"><source src="https://1637283.fs1.hubspotusercontent-na1.net/hubfs/1637283/jake-hero-banner-video.mp4" type="video/mp4" poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></video> <div class="jake-hero-banner__content"> <div class="jake-hero-banner__main-content"><h1 style="font-size: 60px;">Jake Hero Banner</h1> <p style="font-size: 18px;">Parallax Image or Video. Free & Easy to Use.</p></div> <div class="jake-hero-banner__cta"> <a href="#form" class="jake-hero-banner__button button ">Learn More</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-7 dnd-section dnd_area-row-3-padding"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-8 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_module_17079943530644" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <div id="jake-hero-module_17079943530644" class="jake-hero-banner"> <picture> <source media="(min-width:600px)" srcset="https://1637283.fs1.hubspotusercontent-na1.net/hubfs/1637283/jake-hero-banner-wide.jpg"> <img src="https://www.bootstrapcreative.com/hubfs/jake-hero-banner-tall.jpg" alt="jake-hero-banner-tall" loading="eager" class="jake-hero-banner__img jake-hero--parallax jake-hero--parallax-js"> </picture> <div class="jake-hero-banner__content"> <div class="jake-hero-banner__main-content"><h1 style="font-size: 60px;">Also Works With Images</h1> <p style="font-size: 18px;">Parallax Image or Video. Free & Easy to Use.</p></div> <div class="jake-hero-banner__cta"> <a href="#form" class="jake-hero-banner__button button ">Learn More</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-9 dnd-section dnd_area-row-4-background-layers dnd_area-row-4-background-color"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-10 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-6" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <a name="faq"> </a> <div class="page-title-jake " id="dnd_area-module-6"> <h2 class="page-title-jake__title">Frequently Asked Questions</h2> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-11 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-7" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <div class="accordion-jake accordion-container " id="dnd_area-module-7"> <div class="ac item-1"> <h2 class="ac-header"> <button type="button" class="ac-trigger">How Do I Add This Jake Hero Banner to a HubSpot Page? How Do I Make it Full Width?</button> </h2> <div class="ac-panel"> <div class="ac-panel_inner"> <h4>Steps How to add a Jake Addons custom module to a page.</h4> <ol> <li>In your HubSpot account, navigate to the page you would like to edit.</li> <li>Hover over a page and click Edit.</li> <li>In the content editor sidebar on the left of the window, locate the search box and type "jake"<br><img src="https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=910&height=588&name=image-png-Aug-28-2024-09-58-18-0558-AM.png" loading="lazy" width="910" height="588" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=455&height=294&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 455w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=910&height=588&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 910w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=1365&height=882&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 1365w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=1820&height=1176&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 1820w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=2275&height=1470&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 2275w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=2730&height=1764&name=image-png-Aug-28-2024-09-58-18-0558-AM.png 2730w" sizes="(max-width: 910px) 100vw, 910px"></li> <li>Next, select a module that appears in the <strong>All Modules</strong> section</li> <li>Click a module and drag it into position on the page.</li> <li>After you add the module, you will then need to adjust the section settings to remove any default padding. You can also choose if you want to be full width or have a maximum width.</li> </ol> <p><img src="https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=774&height=1000&name=image-png-Aug-28-2024-09-54-14-4097-AM.png" loading="lazy" width="774" height="1000" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=387&height=500&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 387w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=774&height=1000&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 774w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=1161&height=1500&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 1161w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=1548&height=2000&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 1548w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=1935&height=2500&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 1935w, https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=2322&height=3000&name=image-png-Aug-28-2024-09-54-14-4097-AM.png 2322w" sizes="(max-width: 774px) 100vw, 774px"></p> <p> </p> </div> </div> </div> <div class="ac item-2"> <h2 class="ac-header"> <button type="button" class="ac-trigger">What Video Sizes and File Format Do You Recommend?</button> </h2> <div class="ac-panel"> <div class="ac-panel_inner"> <div>My recommendations for the video can be adjusted based on your preference on quality/file size. You want the "best" quality video at the smallest file size you can. Best is subjective based on your needs for page load vs branding and design precision. Usually, you need to find a compromise between the two.</div> <div> <ul> <li>16:9 aspect ratio, 1280 x 720 mpg - if it needs to be crisper and less pixelated try increasing the resolution to 1920 x 1080. <a href="https://typito.com/blog/video-resolutions/" rel="noopener">Here is a full list of video resolutions and how they impact the quality.</a></li> <li>would make the run time as short as possible to visually communicate your subject matter. This can vary if you are showing different scenes vs a loop background texture. I would also look into building a seamless loop if possible - <a href="https://www.youtube.com/watch?v=gP76Sk_P6Ng&t=4s" rel="noopener">Watch tutorial on how to make a seamless video edit</a></li> </ul> </div> </div> </div> </div> <div class="ac item-3"> <h2 class="ac-header"> <button type="button" class="ac-trigger">The video is Shown as a Solid Black Color on Mobile. How Do I Fix This?</button> </h2> <div class="ac-panel"> <div class="ac-panel_inner"> <div>Make sure you are using a MP4 video format. This is the only video format that works with this module. </div> <div>View the the other FAQ question - "What video sizes and file format do you recommend" for more information.</div> </div> </div> </div> <div class="ac item-4"> <h2 class="ac-header"> <button type="button" class="ac-trigger">What are Modules in HubSpot?</button> </h2> <div class="ac-panel"> <div class="ac-panel_inner"> Some pages you create will require an image gallery or tab content, but others will not. HubSpot modules give you the control to add new functionality to only the pages you need without impacting the rest of the pages on your website. These modules are added to drag-and-drop areas or sections when editing a page. If you are more familiar with WordPress, they are like blocks or plugins in that CMS. </div> </div> </div> <div class="ac item-5"> <h2 class="ac-header"> <button type="button" class="ac-trigger">What is HubSpot CMS and How Does it Compare to WordPress?</button> </h2> <div class="ac-panel"> <div class="ac-panel_inner"> <h3>HubSpot CMS Hub Overview</h3> <p>The content management system you need to easily create and personalize website pages for every visitor — optimized for conversion across every device. Rely on developers as much or as little as you’d like.</p> <h4>HubSpot CMS Hub Features</h4> <ul> <li>Drag and drop page editor</li> <li>Image and file manager</li> <li>Fully integrated CRM</li> <li>Contact attribution analytics – know where leads come from</li> <li>Multiple language support</li> <li>Build website pages, landing pages, and blog posts</li> <li>Managed website hosting and security</li> </ul> <h4>HubSpot CMS Hub Benefits</h4> <ul> <li>Marketing and Sales can have one login and tool for their website</li> <li>Easy to use website builder without having to manage website hosting and plugins</li> <li>Can make content translation and smart content to leverage your CRM data</li> </ul> <h3>Get Started</h3> <ul> <li><a href="https://bootstrapcreative.com/resources/a-beginners-guide-to-hubspot-cms/">A Beginner’s Guide to HubSpot CMS - Free eBook</a></li> <li><a href="https://bootstrapcreative.com/hubspot-cms-vs-wordpress/">HubSpot CMS vs. WordPress</a></li> <li><a href="https://bootstrapcreative.com/hubspotcms">Get Started Free HubSpot CMS</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-12 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-8" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_dnd_area-module-8_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><strong>Have a question?</strong> <a href="https://bootstrapcreative.com/contact/">Contact Me</a></span></div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-13 dnd-section dnd_area-row-5-background-layers dnd_area-row-5-background-color"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-14 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-10" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <a name="documentation"> </a> <div class="page-title-jake " id="dnd_area-module-10"> <h2 class="page-title-jake__title">Module Documentation</h2> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-15 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_dnd_area-module-11" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_dnd_area-module-11_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h2>Content Tab</h2> <h3>Text</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text</span> : A rich text box to make it easy to add as much text as you need.</p> <h3>Call to Action</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Link</span> : Add link to a page or file</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Link Text</span> : To hide the call to action, just delete the placeholder text</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Custom CSS Classes</span> : Use this to add a custom button class used by your theme or provided by your developer.</p> <h3>Background</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Choose Background Style</span> : Choose from images or video</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Parallax Background</span> : Toggle the parallax effect</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Stop Video After Scrolling From Top</span> : Pauses the video if you scroll down 500px from the top of the window</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Video (MP4)</span> : Add your MP4 video file (view my video file recommendations above in the FAQ section.)</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Background Imag</span><span style="font-weight: normal;"><span style="font-weight: bold;">e</span> - Desktop: Choose the image to display on desktop</span></p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Background Image - Mobile: <span style="font-weight: normal;">Choose the image to display on mobile devices</span></span></p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Image Loading</span> : If the module is at the top of the page choose eager. Choose lazy if it is in the middle or the bottom of the page.</p> <h2> </h2> <h2>Styles Tab</h2> <h3>Text</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text Font</span>: Adjust the text font styles. Mostly I would use this to adjust the font color and font family. Because you can also make font style adjustments in the rich text editor.</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text Alignment</span> : Change text alignment to left, center, or right</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text Max Width</span> : Helps to control text wrapping of long headlines. Applies only on desktop.</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text Drop Shadow</span> : Used to provide more contrast for your text so it is more readable on a dark background.</p> <h3>Call to Action</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Text Alignment : Change text alignment to left, center, or right</span></p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Background Color</span> : Set a button background color</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Hover Background Color</span> : Set a button background color on hover</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Font</span> : Set a button font color</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Hover Font</span> : Set a button font color on hover</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Spacing</span> : Adjust button padding and margin.</p> <h3>Background</h3> <p style="padding-left: 40px;"><span style="font-weight: bold;">Overlay Color</span> : Set an overlay color to go above your background image or video. Helps to increase contrast and make your text more readable.</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Spacing Mobile</span> : Adjust the padding and margin on mobile</p> <p style="padding-left: 40px;"><span style="font-weight: bold;">Spacing Desktop</span> : Adjust the padding and margin on desktop</p> <p style="padding-left: 40px;"><strong>Border Radius </strong>: Adds rounded corners to the container</p> <p> </p></span></div> </div> </div> </div> </div> </div> </div> <div class="row-fluid-wrapper row-depth-1 row-number-16 dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-17 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_widget_1710754835097" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module widget-type-rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><span id="hs_cos_wrapper_widget_1710754835097_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h3 style="text-align: center; font-size: 36px;">Ready to Use This On Your Page?</h3> <div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-161109619009" style="max-width:100%; max-height:100%; width:150px;height:58.3984375px" data-hubspot-wrapper-cta-id="161109619009"> <a href="/hs/cta/wi/redirect?encryptedPayload=AVxigLK7tuxheIxUWZ0wwIMXAOYfriAN3dH0htndyl3Xf88F1RXT8f7zrTjrImMpci2g8RWcb7DXQmj2pA1syoXTVqMCGd%2BOV%2FDqFUun%2Bz4OYRLBeksxa5SWgG3KRcjC4P%2FtzEVzQyzQBys0472exXhaOj7ZnuVf3Rws5kmnZKFw%2BAXIOspfnMOO4eM2tDzA7sp3orOJbmf8cxFcmn8WLGE9O2gsDBQt51Ea9%2FBPUXdPPzZrK2rZUuVOTsHjQUqtj6xHZWdp&webInteractiveContentId=161109619009&portalId=1637283" target="_blank" rel="noopener" crossorigin="anonymous"> <img alt="Get Module" loading="lazy" src="https://no-cache.hubspot.com/cta/default/1637283/interactive-161109619009.png" style="height: 100%; width: 100%; object-fit: fill" onerror="this.style.display='none'"> </a> </div></span></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </main> <div data-global-resource-path="jake-hs-addons-portal/templates/partials/footer.html"><div class="footer-poll pt-5"> <div class="container-fluid main"> <div class="row-fluid-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-1 dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-2 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_poll-module-2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"><div class="market-research"> <p>POLL</p> <h3>What Type of HubSpot Module Would You Like to See Next?</h3> <hr> <span id="hs_cos_wrapper_poll-module-2_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_form_98265652_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3> <div id="hs_form_target_form_98265652"></div> </span> </div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-related-modules pt-5"> <h3 class="text-center h2"><a href="/jake-addons/modules">Related HubSpot Custom Modules</a></h3> <hr> <div class="container-fluid main"> <div class="row-fluid-wrapper"> <div class="row-fluid"> <div class="span12 widget-span widget-type-cell " style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-1 dnd-section"> <div class="row-fluid "> <div class="span12 widget-span widget-type-cell dnd-column" style="" data-widget-type="cell" data-x="0" data-w="12"> <div class="row-fluid-wrapper row-depth-1 row-number-2 dnd-row"> <div class="row-fluid "> <div class="span12 widget-span widget-type-custom_widget dnd-module" style="" data-widget-type="custom_widget" data-x="0" data-w="12"> <div id="hs_cos_wrapper_unique_name-module-2" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="" data-hs-cos-general-type="widget" data-hs-cos-type="module"> <div class="page-list-nav row-fluid row-fluid--wrap"> <h4> Filter Modules: </h4> <div class="select-dropdown"> <select class="select-dropdown__select" id="plan-filter"> <option value="reset">All</option> <option value="free">Free</option> <option value="all">Paid</option> </select> <div class="select-dropdown__arrow"></div> </div> </div> <div class="page-list list row-fluid row-fluid--wrap"> <div class="list--list-item 148211394407" data-plan="all" data-category="first"> <div> <a href="https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module"> <img src="https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=250&name=hero-banner-module-jake-lett-thumbnail.png" alt="HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero" width="250" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=125&name=hero-banner-module-jake-lett-thumbnail.png 125w, https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=250&name=hero-banner-module-jake-lett-thumbnail.png 250w, https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=375&name=hero-banner-module-jake-lett-thumbnail.png 375w, https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=500&name=hero-banner-module-jake-lett-thumbnail.png 500w, https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=625&name=hero-banner-module-jake-lett-thumbnail.png 625w, https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=750&name=hero-banner-module-jake-lett-thumbnail.png 750w" sizes="(max-width: 250px) 100vw, 250px"> </a> <p class="list--list-item__tags"> <span class="badge all"> Paid </span> </p> </div> <div class="list--list-item__text"> <h2 class="name h4"><a href="https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module">Jake Hero Banner Custom Module<small>for HubSpot CMS</small></a></h2> <p class="description">Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!</p> <p><a href="https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module" class="button secondary">Learn More</a></p> </div> </div> <div class="list--list-item 89385044352" data-plan="free" data-category=""> <div> <a href="https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module"> <img src="https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=250&name=logo-slider-hubspot-module-jake-lett-thumbnail.png" alt="FREE Logo Slider Carousel Module for HubSpot CMS" width="250" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=125&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 125w, https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=250&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 250w, https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=375&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 375w, https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=500&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 500w, https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=625&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 625w, https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=750&name=logo-slider-hubspot-module-jake-lett-thumbnail.png 750w" sizes="(max-width: 250px) 100vw, 250px"> </a> <p class="list--list-item__tags"> <span class="badge free"> Free </span> </p> </div> <div class="list--list-item__text"> <h2 class="name h4"><a href="https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module">Logo Slider Custom Module<small>for HubSpot CMS</small></a></h2> <p class="description">Adding a logo or image carousel is made easy with this logo slider for HubSpot CMS.</p> <p><a href="https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module" class="button secondary">Learn More</a></p> </div> </div> <div class="list--list-item 112324248911" data-plan="free" data-category=""> <div> <a href="https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module"> <img src="https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=250&name=overlap-card-hubspot-module-jake-lett-thumbnail.png" alt="Overlap Card HubSpot Module for HubSpot CMS Hub" width="250" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=125&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 125w, https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=250&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 250w, https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=375&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 375w, https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=500&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 500w, https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=625&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 625w, https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=750&name=overlap-card-hubspot-module-jake-lett-thumbnail.png 750w" sizes="(max-width: 250px) 100vw, 250px"> </a> <p class="list--list-item__tags"> <span class="badge free"> Free </span> </p> </div> <div class="list--list-item__text"> <h2 class="name h4"><a href="https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module">Overlap Card Custom Module<small>for HubSpot CMS</small></a></h2> <p class="description">Want to have a text block overlapping an image? Or the reverse with the image on top of text? Now you can do this easily without writing any code. Overlap Card HubSpot Module,</p> <p><a href="https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module" class="button secondary">Learn More</a></p> </div> </div> <div class="list--list-item 122776541348" data-plan="free" data-category=""> <div> <a href="https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module"> <img src="https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=250&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png" alt="Stylized Card HubSpot Module for HubSpot CMS Hub" width="250" srcset="https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=125&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 125w, https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=250&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 250w, https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=375&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 375w, https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=500&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 500w, https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=625&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 625w, https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=750&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png 750w" sizes="(max-width: 250px) 100vw, 250px"> </a> <p class="list--list-item__tags"> <span class="badge free"> Free </span> </p> </div> <div class="list--list-item__text"> <h2 class="name h4"><a href="https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module">Stylized Card Custom Module<small>for HubSpot CMS</small></a></h2> <p class="description">The Stylized Card Module for HubSpot makes it easy to add block of content into a column grid. You can add a border, background color, background image, and drop shadow. </p> <p><a href="https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module" class="button secondary">Learn More</a></p> </div> </div> </div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer footer--no-navigation"> <div class="footer__container content-wrapper"> <div class="row-fluid author-block mb-5"> <div class="span2"> <a href="https://bootstrapcreative.com/about/"><img width="150" height="150" src="https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=150&height=150&name=jake-lett-2022-orange.jpeg" alt="Jake Lett Lett headshot photo" class="rounded-circle img-fluid" srcset="https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=75&height=75&name=jake-lett-2022-orange.jpeg 75w, https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=150&height=150&name=jake-lett-2022-orange.jpeg 150w, https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=225&height=225&name=jake-lett-2022-orange.jpeg 225w, https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=300&height=300&name=jake-lett-2022-orange.jpeg 300w, https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=375&height=375&name=jake-lett-2022-orange.jpeg 375w, https://1637283.fs1.hubspotusercontent-na1.net/hub/1637283/hubfs/jake-lett-2022-orange.jpeg?width=450&height=450&name=jake-lett-2022-orange.jpeg 450w" sizes="(max-width: 150px) 100vw, 150px"></a> <br> Jake Lett <p style="display:flex;align-items:center;justify-content: center;"> <a target="_blank" href="https://www.linkedin.com/in/jacoblett/"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-linkedin" viewbox="0 0 16 16"> <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" /> </svg> </a> <a target="_blank" href="https://icons.getbootstrap.com/icons/youtube/"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-youtube" viewbox="0 0 16 16"> <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" /> </svg> </a> </p> </div> <div class="span10 text-left"> <h3 class="mb-4" style="text-align: left;"> <a href="https://bootstrapcreative.com/about/">HubSpot modules & themes created by Jake Lett</a><br> <small>Detroit, Michigan</small> </h3> <p class="lead"><b>Hey there!</b> I'm passionate about helping marketers and business owners like you unlock the full potential of their websites. Whether you're looking to attract more visitors, generate leads, boost sales, or even streamline customer service, I'm here to partner with you and make it happen.</p> <p class="lead"> <strong>Have questions or feedback?</strong><br> <a href="https://bootstrapcreative.com/contact/">Email me</a> </p> </div> </div> <div class="row-fluid" style="max-width:500px;margin:0 auto;"> <div class="span6 text-center"> <a class="align-middle" href="https://bootstrapcreative.com"> <svg width="250" class="img-responsive" version="1.1" viewbox="0 0 191.16 28.055" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><clippath id="a"><path d="M 0,21.041 H 143.373 V 0 H 0 Z"></path></clippath></defs><g transform="matrix(1.3333 0 0 -1.3333 0 28.055)"><g clip-path="url(#a)"><g transform="translate(9.7627 17.087)"><path d="m0 0h-8.477c1.682-2.849 7.763-10.286 15.886-11.644v1.391c-4.708 1.599-7.437 7.243-7.409 10.253" fill="#007aeb"></path></g><g transform="translate(15.971 12.432)"><path d="m0 0c-1.537 0.556-2.938 1.479-4.099 2.626-2e-3 3e-3 -5e-3 7e-3 -8e-3 9e-3 1.163-3.168 2.855-5.997 5.308-7.186v4.192c-0.406 0.094-0.81 0.216-1.201 0.359" fill="#87929f"></path></g><g transform="translate(25.682 6.7315)"><path d="m0 0c0.676 0 1.204 0.182 1.586 0.547 0.38 0.365 0.571 0.869 0.571 1.513 0 0.375-0.07 0.687-0.209 0.933-0.14 0.247-0.325 0.443-0.556 0.588-0.23 0.145-0.496 0.247-0.796 0.305-0.3 0.059-0.612 0.089-0.933 0.089h-3.493v-3.975zm-0.772 5.263c0.869 0 1.494 0.153 1.875 0.459 0.38 0.305 0.571 0.764 0.571 1.376 0 0.407-0.065 0.729-0.194 0.965-0.127 0.236-0.305 0.418-0.53 0.547s-0.486 0.212-0.781 0.25c-0.295 0.037-0.608 0.056-0.941 0.056h-3.058v-3.653zm-0.419 4.941c0.247 0 0.512-3e-3 0.796-8e-3 0.285-6e-3 0.567-0.022 0.846-0.049 0.278-0.026 0.539-0.067 0.781-0.12 0.241-0.054 0.447-0.134 0.619-0.242 0.376-0.225 0.694-0.536 0.958-0.933 0.262-0.397 0.394-0.885 0.394-1.465 0-0.611-0.147-1.14-0.442-1.585-0.295-0.446-0.717-0.776-1.264-0.99v-0.032c0.708-0.151 1.25-0.472 1.626-0.966 0.375-0.493 0.563-1.094 0.563-1.803 0-0.418-0.075-0.826-0.225-1.222-0.15-0.397-0.373-0.749-0.668-1.055-0.296-0.305-0.661-0.552-1.095-0.74-0.435-0.188-0.936-0.282-1.505-0.282h-5.551v11.492z" fill="#8c95a0"></path></g><g transform="translate(32 8.2525)"><path d="m0 0c0.134-0.392 0.319-0.719 0.555-0.982s0.512-0.464 0.829-0.603c0.317-0.14 0.652-0.209 1.006-0.209s0.689 0.069 1.006 0.209c0.316 0.139 0.593 0.34 0.829 0.603 0.235 0.263 0.421 0.59 0.555 0.982 0.134 0.391 0.201 0.839 0.201 1.344 0 0.504-0.067 0.951-0.201 1.344-0.134 0.391-0.32 0.721-0.555 0.99-0.236 0.267-0.513 0.471-0.829 0.611-0.317 0.139-0.652 0.209-1.006 0.209s-0.689-0.07-1.006-0.209c-0.317-0.14-0.593-0.344-0.829-0.611-0.236-0.269-0.421-0.599-0.555-0.99-0.134-0.393-0.201-0.84-0.201-1.344 0-0.505 0.067-0.953 0.201-1.344m-1.393 3.058c0.172 0.531 0.43 0.992 0.773 1.384 0.343 0.391 0.767 0.7 1.271 0.925 0.505 0.225 1.084 0.339 1.739 0.339 0.666 0 1.248-0.114 1.746-0.339 0.5-0.225 0.92-0.534 1.263-0.925 0.344-0.392 0.601-0.853 0.773-1.384 0.171-0.531 0.258-1.102 0.258-1.714s-0.087-1.181-0.258-1.706c-0.172-0.526-0.429-0.985-0.773-1.376-0.343-0.392-0.763-0.698-1.263-0.918-0.498-0.219-1.08-0.33-1.746-0.33-0.655 0-1.234 0.111-1.739 0.33-0.504 0.22-0.928 0.526-1.271 0.918-0.343 0.391-0.601 0.85-0.773 1.376-0.17 0.525-0.256 1.094-0.256 1.706s0.086 1.183 0.256 1.714" fill="#8c95a0"></path></g><g transform="translate(40.916,8.2525)"><path d="m0 0c0.134-0.392 0.318-0.719 0.556-0.982 0.236-0.263 0.512-0.464 0.828-0.603 0.316-0.14 0.652-0.209 1.006-0.209s0.69 0.069 1.006 0.209c0.317 0.139 0.593 0.34 0.829 0.603s0.421 0.59 0.555 0.982c0.134 0.391 0.201 0.839 0.201 1.344 0 0.504-0.067 0.951-0.201 1.344-0.134 0.391-0.319 0.721-0.555 0.99-0.236 0.267-0.512 0.471-0.829 0.611-0.316 0.139-0.652 0.209-1.006 0.209s-0.69-0.07-1.006-0.209c-0.316-0.14-0.592-0.344-0.828-0.611-0.238-0.269-0.422-0.599-0.556-0.99-0.135-0.393-0.202-0.84-0.202-1.344 0-0.505 0.067-0.953 0.202-1.344m-1.392 3.058c0.171 0.531 0.429 0.992 0.772 1.384 0.344 0.391 0.767 0.7 1.272 0.925 0.504 0.225 1.083 0.339 1.738 0.339 0.665 0 1.247-0.114 1.746-0.339s0.92-0.534 1.264-0.925c0.343-0.392 0.6-0.853 0.772-1.384s0.257-1.102 0.257-1.714-0.085-1.181-0.257-1.706c-0.172-0.526-0.429-0.985-0.772-1.376-0.344-0.392-0.765-0.698-1.264-0.918-0.499-0.219-1.081-0.33-1.746-0.33-0.655 0-1.234 0.111-1.738 0.33-0.505 0.22-0.928 0.526-1.272 0.918-0.343 0.391-0.601 0.85-0.772 1.376-0.172 0.525-0.258 1.094-0.258 1.706s0.086 1.183 0.258 1.714" fill="#8c95a0"></path></g><g transform="translate(51.868 13.765)"><path d="m0 0v-1.208h-1.658v-5.166c0-0.161 0.014-0.289 0.04-0.386 0.027-0.096 0.078-0.172 0.153-0.225 0.076-0.054 0.18-0.089 0.315-0.105 0.133-0.015 0.307-0.024 0.523-0.024h0.627v-1.207h-1.046c-0.354 0-0.658 0.024-0.91 0.072-0.252 0.049-0.456 0.138-0.611 0.266-0.156 0.129-0.271 0.311-0.346 0.547s-0.112 0.547-0.112 0.934v5.294h-1.417v1.208h1.417v2.495h1.367v-2.495z" fill="#8c95a0"></path></g><g transform="translate(54.105,7.3027)"><path d="m0 0c0.129-0.209 0.298-0.376 0.507-0.499 0.209-0.124 0.445-0.212 0.708-0.266 0.263-0.053 0.533-0.08 0.812-0.08 0.216 0 0.441 0.016 0.677 0.048s0.453 0.091 0.651 0.177c0.199 0.086 0.362 0.212 0.491 0.378s0.194 0.379 0.194 0.636c0 0.355-0.135 0.622-0.403 0.805-0.268 0.182-0.604 0.33-1.006 0.443-0.402 0.112-0.839 0.214-1.312 0.306-0.471 0.091-0.909 0.219-1.311 0.385-0.403 0.167-0.737 0.4-1.006 0.701-0.269 0.3-0.402 0.718-0.402 1.255 0 0.419 0.093 0.778 0.281 1.079 0.188 0.299 0.43 0.544 0.724 0.732 0.296 0.188 0.628 0.327 0.999 0.418 0.369 0.091 0.737 0.137 1.102 0.137 0.472 0 0.906-0.04 1.304-0.121 0.397-0.08 0.748-0.22 1.053-0.418 0.306-0.199 0.55-0.467 0.733-0.805 0.182-0.338 0.29-0.759 0.322-1.263h-1.368c-0.021 0.267-0.091 0.491-0.209 0.668-0.119 0.177-0.269 0.319-0.451 0.426-0.183 0.107-0.384 0.185-0.604 0.233-0.22 0.049-0.442 0.073-0.667 0.073-0.205 0-0.411-0.016-0.62-0.049-0.209-0.031-0.4-0.088-0.572-0.169-0.171-0.08-0.311-0.188-0.418-0.321-0.108-0.135-0.161-0.309-0.161-0.523 0-0.237 0.083-0.432 0.25-0.588 0.166-0.155 0.377-0.284 0.635-0.386 0.257-0.102 0.547-0.188 0.869-0.258 0.323-0.07 0.644-0.142 0.966-0.217 0.344-0.075 0.678-0.166 1.005-0.273 0.328-0.108 0.618-0.25 0.87-0.427 0.253-0.177 0.456-0.4 0.611-0.668 0.156-0.269 0.234-0.601 0.234-0.998 0-0.504-0.105-0.923-0.313-1.255-0.21-0.333-0.483-0.601-0.821-0.805s-0.719-0.346-1.143-0.427c-0.424-0.08-0.845-0.12-1.263-0.12-0.462 0-0.902 0.048-1.321 0.145-0.418 0.097-0.789 0.255-1.11 0.474-0.322 0.22-0.579 0.51-0.773 0.87-0.192 0.359-0.301 0.797-0.321 1.311h1.368c0.01-0.3 0.08-0.555 0.209-0.764" fill="#8c95a0"></path></g><g transform="translate(64.341 13.765)"><path d="m0 0v-1.208h-1.658v-5.166c0-0.161 0.014-0.289 0.041-0.386 0.026-0.096 0.077-0.172 0.152-0.225 0.075-0.054 0.18-0.089 0.315-0.105 0.133-0.015 0.307-0.024 0.523-0.024h0.627v-1.207h-1.046c-0.354 0-0.658 0.024-0.91 0.072-0.252 0.049-0.456 0.138-0.611 0.266-0.156 0.129-0.271 0.311-0.347 0.547-0.074 0.236-0.111 0.547-0.111 0.934v5.294h-1.417v1.208h1.417v2.495h1.367v-2.495z" fill="#8c95a0"></path></g><g transform="translate(66.771 13.765)"><path d="m0 0v-1.754h0.032c0.333 0.675 0.74 1.174 1.223 1.497 0.483 0.321 1.095 0.471 1.835 0.45v-1.448c-0.547 0-1.014-0.076-1.4-0.225-0.386-0.151-0.697-0.371-0.933-0.661-0.237-0.289-0.408-0.641-0.515-1.054-0.108-0.413-0.161-0.888-0.161-1.424v-3.702h-1.368v8.321z" fill="#8c95a0"></path></g><g transform="translate(75.044 9.459)"><path d="m0 0c-0.279-0.059-0.572-0.107-0.877-0.145-0.306-0.037-0.615-0.08-0.926-0.128-0.311-0.049-0.591-0.126-0.837-0.234-0.247-0.107-0.448-0.26-0.603-0.458-0.156-0.199-0.234-0.47-0.234-0.813 0-0.225 0.046-0.416 0.137-0.572 0.091-0.155 0.209-0.281 0.355-0.378 0.144-0.096 0.315-0.167 0.514-0.209 0.199-0.043 0.4-0.064 0.603-0.064 0.452 0 0.837 0.062 1.16 0.185 0.321 0.123 0.584 0.278 0.788 0.466s0.355 0.392 0.45 0.612c0.097 0.22 0.146 0.426 0.146 0.62v1.4c-0.172-0.129-0.397-0.223-0.676-0.282m1.915-4.192c-0.353 0-0.636 0.099-0.845 0.297-0.209 0.199-0.314 0.524-0.314 0.974-0.376-0.45-0.813-0.775-1.312-0.974-0.498-0.198-1.038-0.297-1.617-0.297-0.376 0-0.73 0.04-1.062 0.12-0.333 0.081-0.625 0.215-0.877 0.403-0.253 0.187-0.451 0.429-0.596 0.724s-0.217 0.652-0.217 1.07c0 0.472 0.08 0.858 0.241 1.159 0.161 0.3 0.373 0.545 0.636 0.733 0.262 0.187 0.563 0.329 0.902 0.426 0.337 0.097 0.684 0.177 1.038 0.242 0.375 0.074 0.731 0.131 1.069 0.168 0.338 0.038 0.637 0.092 0.894 0.162 0.257 0.068 0.461 0.171 0.612 0.305 0.149 0.134 0.224 0.33 0.224 0.588 0 0.3-0.055 0.541-0.169 0.724-0.113 0.182-0.256 0.322-0.434 0.418-0.177 0.097-0.375 0.161-0.596 0.193-0.219 0.033-0.436 0.049-0.652 0.049-0.579 0-1.062-0.11-1.448-0.33s-0.595-0.636-0.627-1.248h-1.369c0.022 0.515 0.129 0.95 0.323 1.304 0.192 0.354 0.45 0.641 0.773 0.861 0.321 0.22 0.691 0.379 1.11 0.475s0.858 0.145 1.319 0.145c0.375 0 0.748-0.027 1.119-0.081 0.369-0.054 0.705-0.164 1.006-0.33 0.3-0.166 0.542-0.4 0.725-0.7 0.181-0.301 0.273-0.692 0.273-1.175v-4.281c0-0.322 0.019-0.558 0.056-0.708s0.163-0.225 0.379-0.225c0.118 0 0.257 0.026 0.417 0.08v-1.062c-0.236-0.14-0.562-0.209-0.981-0.209" fill="#8c95a0"></path></g><g transform="translate(84.901 10.811)"><path d="m0 0c-0.103 0.37-0.258 0.7-0.467 0.99-0.21 0.29-0.478 0.52-0.805 0.692-0.328 0.172-0.711 0.257-1.151 0.257-0.461 0-0.852-0.09-1.175-0.273-0.321-0.183-0.585-0.421-0.788-0.716-0.204-0.296-0.352-0.631-0.442-1.006-0.092-0.376-0.137-0.756-0.137-1.143 0-0.407 0.048-0.802 0.145-1.183 0.095-0.381 0.249-0.716 0.459-1.006 0.208-0.289 0.479-0.523 0.811-0.699 0.333-0.178 0.736-0.266 1.208-0.266s0.866 0.091 1.183 0.273c0.316 0.183 0.571 0.424 0.764 0.725 0.194 0.3 0.333 0.644 0.418 1.03 0.086 0.386 0.129 0.783 0.129 1.19 0 0.387-0.05 0.765-0.152 1.135m-4.917 2.954v-1.127h0.032c0.226 0.461 0.579 0.797 1.062 1.006s1.014 0.314 1.594 0.314c0.643 0 1.204-0.119 1.681-0.355 0.478-0.235 0.874-0.555 1.191-0.957s0.555-0.866 0.716-1.392c0.162-0.526 0.242-1.084 0.242-1.674s-0.079-1.148-0.234-1.674-0.39-0.985-0.707-1.376c-0.317-0.392-0.714-0.7-1.192-0.926-0.477-0.225-1.032-0.337-1.665-0.337-0.204 0-0.432 0.022-0.684 0.064-0.253 0.043-0.502 0.113-0.749 0.209-0.247 0.097-0.48 0.228-0.7 0.395-0.22 0.166-0.405 0.373-0.555 0.619h-0.032v-4.281h-1.369v11.492z" fill="#8c95a0"></path></g><g transform="translate(94.96 15.31)"><path d="m0 0c-0.585 0.408-1.279 0.612-2.084 0.612-0.687 0-1.274-0.129-1.763-0.386-0.488-0.258-0.89-0.604-1.207-1.039s-0.55-0.931-0.7-1.488c-0.15-0.558-0.225-1.138-0.225-1.739 0-0.654 0.075-1.274 0.225-1.858 0.15-0.585 0.383-1.095 0.7-1.529 0.317-0.435 0.722-0.781 1.215-1.039 0.494-0.257 1.084-0.386 1.771-0.386 0.505 0 0.952 0.083 1.344 0.249 0.391 0.166 0.73 0.397 1.014 0.693 0.284 0.295 0.507 0.646 0.667 1.054 0.161 0.407 0.258 0.847 0.29 1.32h1.529c-0.15-1.449-0.649-2.576-1.496-3.38-0.847-0.805-2.007-1.208-3.476-1.208-0.892 0-1.669 0.153-2.335 0.459-0.664 0.306-1.217 0.727-1.657 1.264-0.44 0.536-0.77 1.169-0.99 1.899s-0.33 1.513-0.33 2.35 0.117 1.622 0.354 2.358c0.236 0.734 0.582 1.376 1.038 1.923s1.024 0.979 1.706 1.295c0.681 0.317 1.462 0.475 2.342 0.475 0.601 0 1.169-0.08 1.706-0.241s1.013-0.397 1.432-0.708c0.419-0.312 0.767-0.7 1.046-1.167 0.28-0.467 0.462-1.006 0.547-1.618h-1.528c-0.172 0.816-0.55 1.427-1.135 1.835" fill="#8c95a0"></path></g><g transform="translate(100.01 13.765)"><path d="m0 0v-1.754h0.032c0.332 0.675 0.74 1.174 1.223 1.497 0.483 0.321 1.095 0.471 1.835 0.45v-1.448c-0.548 0-1.015-0.076-1.401-0.225-0.385-0.151-0.697-0.371-0.933-0.661-0.236-0.289-0.408-0.641-0.516-1.054-0.106-0.413-0.16-0.888-0.16-1.424v-3.702h-1.368v8.321z" fill="#8c95a0"></path></g><g transform="translate(109.08 11.318)"><path d="m0 0c-0.124 0.29-0.29 0.539-0.5 0.749-0.208 0.208-0.455 0.375-0.739 0.499-0.285 0.122-0.599 0.184-0.943 0.184-0.353 0-0.672-0.062-0.957-0.184-0.284-0.124-0.529-0.293-0.732-0.508-0.204-0.215-0.365-0.464-0.483-0.748s-0.188-0.588-0.209-0.91h4.78c-0.022 0.322-0.095 0.628-0.217 0.918m0.33-5.344c-0.623-0.471-1.406-0.708-2.35-0.708-0.666 0-1.243 0.108-1.73 0.323-0.489 0.214-0.899 0.514-1.231 0.9-0.333 0.387-0.582 0.848-0.748 1.385-0.167 0.536-0.261 1.121-0.283 1.754 0 0.633 0.097 1.212 0.29 1.738s0.464 0.982 0.813 1.369c0.348 0.385 0.762 0.686 1.239 0.901 0.477 0.214 1 0.322 1.569 0.322 0.741 0 1.354-0.153 1.843-0.459 0.487-0.306 0.88-0.695 1.175-1.167s0.498-0.987 0.611-1.545c0.114-0.558 0.159-1.089 0.137-1.594h-6.228c-0.011-0.364 0.032-0.71 0.128-1.038 0.097-0.327 0.253-0.617 0.467-0.869 0.215-0.252 0.488-0.453 0.822-0.603 0.332-0.151 0.723-0.225 1.174-0.225 0.579 0 1.054 0.133 1.424 0.402 0.37 0.268 0.614 0.676 0.733 1.223h1.351c-0.182-0.934-0.585-1.636-1.206-2.109" fill="#8c95a0"></path></g><g transform="translate(116.31 9.459)"><path d="m0 0c-0.279-0.059-0.572-0.107-0.878-0.145-0.306-0.037-0.614-0.08-0.926-0.128-0.31-0.049-0.59-0.126-0.837-0.234-0.246-0.107-0.448-0.26-0.603-0.458-0.155-0.199-0.233-0.47-0.233-0.813 0-0.225 0.045-0.416 0.137-0.572 0.09-0.155 0.209-0.281 0.354-0.378 0.144-0.096 0.316-0.167 0.515-0.209 0.199-0.043 0.399-0.064 0.604-0.064 0.45 0 0.837 0.062 1.158 0.185 0.322 0.123 0.585 0.278 0.788 0.466 0.205 0.188 0.355 0.392 0.451 0.612 0.097 0.22 0.145 0.426 0.145 0.62v1.4c-0.172-0.129-0.397-0.223-0.675-0.282m1.914-4.192c-0.354 0-0.635 0.099-0.845 0.297-0.209 0.199-0.313 0.524-0.313 0.974-0.376-0.45-0.814-0.775-1.312-0.974-0.5-0.198-1.038-0.297-1.617-0.297-0.376 0-0.73 0.04-1.063 0.12-0.332 0.081-0.625 0.215-0.877 0.403-0.252 0.187-0.45 0.429-0.595 0.724-0.146 0.295-0.217 0.652-0.217 1.07 0 0.472 0.079 0.858 0.24 1.159 0.162 0.3 0.373 0.545 0.637 0.733 0.262 0.187 0.564 0.329 0.901 0.426s0.684 0.177 1.038 0.242c0.376 0.074 0.732 0.131 1.071 0.168 0.337 0.038 0.635 0.092 0.892 0.162 0.257 0.068 0.461 0.171 0.612 0.305 0.15 0.134 0.225 0.33 0.225 0.588 0 0.3-0.056 0.541-0.169 0.724-0.112 0.182-0.256 0.322-0.434 0.418-0.178 0.097-0.376 0.161-0.596 0.193-0.22 0.033-0.437 0.049-0.651 0.049-0.579 0-1.063-0.11-1.448-0.33-0.387-0.22-0.596-0.636-0.629-1.248h-1.368c0.022 0.515 0.129 0.95 0.322 1.304s0.451 0.641 0.772 0.861c0.322 0.22 0.693 0.379 1.112 0.475 0.418 0.096 0.857 0.145 1.319 0.145 0.376 0 0.748-0.027 1.118-0.081 0.371-0.054 0.706-0.164 1.007-0.33 0.3-0.166 0.541-0.4 0.724-0.7 0.182-0.301 0.273-0.692 0.273-1.175v-4.281c0-0.322 0.019-0.558 0.057-0.708s0.163-0.225 0.378-0.225c0.118 0 0.257 0.026 0.418 0.08v-1.062c-0.236-0.14-0.563-0.209-0.982-0.209" fill="#8c95a0"></path></g><g transform="translate(123.39 13.765)"><path d="m0 0v-1.208h-1.658v-5.166c0-0.161 0.013-0.289 0.041-0.386 0.026-0.096 0.077-0.172 0.152-0.225 0.075-0.054 0.18-0.089 0.315-0.105 0.133-0.015 0.307-0.024 0.523-0.024h0.627v-1.207h-1.047c-0.353 0-0.657 0.024-0.909 0.072-0.252 0.049-0.456 0.138-0.611 0.266-0.156 0.129-0.272 0.311-0.346 0.547-0.075 0.236-0.112 0.547-0.112 0.934v5.294h-1.417v1.208h1.417v2.495h1.367v-2.495z" fill="#8c95a0"></path></g><path d="m125.71 5.444h-1.369v8.321h1.369z" fill="#8c95a0"></path><g transform="translate(129.47 5.4439)"><path d="m0 0-3.09 8.321h1.528l2.334-6.937h0.033l2.268 6.937h1.433l-3.042-8.321z" fill="#8c95a0"></path></g><g transform="translate(139.83 11.318)"><path d="m0 0c-0.123 0.29-0.289 0.539-0.499 0.749-0.209 0.208-0.456 0.375-0.74 0.499-0.284 0.122-0.598 0.184-0.942 0.184-0.354 0-0.673-0.062-0.958-0.184-0.284-0.124-0.528-0.293-0.731-0.508-0.204-0.215-0.365-0.464-0.483-0.748-0.119-0.284-0.188-0.588-0.209-0.91h4.779c-0.022 0.322-0.093 0.628-0.217 0.918m0.33-5.344c-0.622-0.471-1.406-0.708-2.35-0.708-0.666 0-1.242 0.108-1.73 0.323-0.487 0.214-0.898 0.514-1.231 0.9-0.332 0.387-0.582 0.848-0.748 1.385-0.167 0.536-0.261 1.121-0.282 1.754 0 0.633 0.097 1.212 0.289 1.738 0.194 0.526 0.464 0.982 0.814 1.369 0.347 0.385 0.762 0.686 1.238 0.901 0.479 0.214 1.001 0.322 1.569 0.322 0.741 0 1.356-0.153 1.844-0.459 0.487-0.306 0.879-0.695 1.174-1.167 0.296-0.472 0.5-0.987 0.612-1.545 0.113-0.558 0.158-1.089 0.137-1.594h-6.228c-0.011-0.364 0.032-0.71 0.128-1.038 0.097-0.327 0.252-0.617 0.466-0.869 0.216-0.252 0.489-0.453 0.822-0.603 0.332-0.151 0.724-0.225 1.174-0.225 0.58 0 1.054 0.133 1.425 0.402 0.37 0.268 0.613 0.676 0.733 1.223h1.352c-0.184-0.934-0.586-1.636-1.208-2.109" fill="#87929f"></path></g><g transform="translate(125.97 16.046)"><path d="m0 0c0-0.523-0.424-0.947-0.947-0.947-0.524 0-0.948 0.424-0.948 0.947s0.424 0.948 0.948 0.948c0.523 0 0.947-0.425 0.947-0.948" fill="#007aeb"></path></g></g></g></svg> </a> </div> <div class="span6 text-center"> <a href="https://bootstrapcreative.com/hubspotcms" class="align-middle"> <img width="100" alt="HubSpot" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMzguNjU5NjEgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMzOC42NTk2MSA5NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBvbHlnb24gZmlsbD0iIzIxMzM0MyIgcG9pbnRzPSIzNi42NzcyNSw1NC4zMzIxOSAxMS44MDkxOCw1NC4zMzIxOSAxMS44MDkxOCw4MC41Mjg1OSAwLDgwLjUyODU5IDAsMTUuODkwODMgMTEuODA5MTgsMTUuODkwODMgCgkJMTEuODA5MTgsNDIuOTcxMDMgMzYuNjc3MjUsNDIuOTcxMDMgMzYuNjc3MjUsMTUuODkwODMgNDguNDgzNzgsMTUuODkwODMgNDguNDgzNzgsODAuNTI4NTkgMzYuNjc3MjUsODAuNTI4NTkgCSIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTg2LjI2OTM2LDU5LjYzNjM0YzAsNS4zODM0NC00LjM4NTMxLDkuNzYzNzUtOS43Njc1NSw5Ljc2Mzc1Yy01LjM4MzY4LDAtOS43NjYxNi00LjM4MDMxLTkuNzY2MTYtOS43NjM3NQoJCXYtMjcuNjg0OUg1NS41NTMzOXYyNy42ODQ5YzAsMTEuNTUwMjUsOS4zOTc2NCwyMC45NDU1OCwyMC45NDg0MiwyMC45NDU1OGMxMS41NDg0MiwwLDIwLjk0NjA1LTkuMzk1MzMsMjAuOTQ2MDUtMjAuOTQ1NTgKCQl2LTI3LjY4NDloLTExLjE3ODVWNTkuNjM2MzR6Ii8+Cgk8cGF0aCBmaWxsPSIjMjEzMzQzIiBkPSJNMTY5LjI0NTU2LDM0LjgwMTljMC01LjY3NjIxLDMuNzU2OTktNy40NzYxNSw3Ljg3MDI1LTcuNDc2MTVjMy4zMTIwMSwwLDcuNjk0NzIsMi41MjA2OSwxMC41NTQyNCw1LjU4MzYxCgkJbDcuMzMzMjUtOC42NDQ0Yy0zLjY2NDUxLTQuOTUxMi0xMS4wODc5MS04LjM3NDEzLTE3LjE3MDc1LTguMzc0MTNjLTEyLjE2NzMxLDAtMjAuOTMzODUsNy4xMTQyNC0yMC45MzM4NSwxOC45MTEwNgoJCWMwLDIxLjg4MDQ2LDI2Ljc0ODIsMTQuOTQ0NzksMjYuNzQ4MiwyNy4xOTQwNGMwLDMuNzc3NTMtMy42NjYzOCw3LjExMjM2LTcuODY5MzQsNy4xMTIzNgoJCWMtNi42MjE3LDAtOC43Njk2MS0zLjI0MTc0LTExLjgwOTg2LTYuNjY0bC04LjE0MTgyLDguNDYyNzJjNS4xOTEyMiw2LjM5MzczLDExLjYzMDA4LDkuNjM3MzYsMTkuMzIzNjUsOS42MzczNgoJCWMxMS41Mzk0OSwwLDIwLjg0MzI1LTcuMjA0MDUsMjAuODQzMjUtMTguNDYxNDlDMTk1Ljk5MjgsMzcuNzcxNDgsMTY5LjI0NTU2LDQ1LjMzNjI3LDE2OS4yNDU1NiwzNC44MDE5eiIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTMzNC43MjA0OSw3MC4yMDI3OGMtNi42MTY5NywwLTguNDk1MDYtMi44NjA5Ni04LjQ5NTA2LTcuMjQ1OThWNDMuNTQ2NThoMTAuMjg0ODJ2LTkuODM4OTJoLTEwLjI4NDgyCgkJVjIwLjczNTE1bC0xMS4zNTc3OSw1LjA5ODI2djM5LjUzOTMxYzAsMTAuMTA5Myw2Ljk3NDY0LDE1LjIwOTIsMTYuNTQyNjYsMTUuMjA5MmMxLjQzMTIxLDAsMy40MDEyMS0wLjA5MjQ4LDQuNDc1NjgtMC4zNTc2NgoJCWwyLjc3MzYyLTEwLjE5NzA2QzMzNy40MDc3NSw3MC4xMTM1NywzMzUuOTc3MDIsNzAuMjAyNzgsMzM0LjcyMDQ5LDcwLjIwMjc4eiIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTEyOC44OTMyMywzMi4yNzUzM2MtNS41NDY3MywwLTkuNDE4MjksMS42MTAwMi0xMy4xNTczNiw1LjI4MDAzVjE2LjI3Njg1aC0xMS4yMTgwOXYzOS40MzU0NgoJCWMwLDE0Ljc2MDQsMTAuNjcxNjEsMjQuODY5NjMsMjIuNjYyMzYsMjQuODY5NjNjMTMuMzI5MDYsMCwyNS4wMDc3Ny0xMC4yODg5OSwyNS4wMDc3Ny0yNC4xNTIzMgoJCUMxNTIuMTg3OTEsNDIuNzQxOTEsMTQxLjQxODY5LDMyLjI3NTMzLDEyOC44OTMyMywzMi4yNzUzM3ogTTEyOC44MjM1LDY5LjI5MTczYy03LjAyNzU0LDAtMTIuNzIzNzQtNS42OTY0Mi0xMi43MjM3NC0xMi43MjM1MwoJCWMwLTcuMDI2ODksNS42OTYyLTEyLjcyMzUzLDEyLjcyMzc0LTEyLjcyMzUzYzcuMDI2NjcsMCwxMi43MjMzMSw1LjY5NjY0LDEyLjcyMzMxLDEyLjcyMzUzCgkJQzE0MS41NDY4MSw2My41OTUzLDEzNS44NTAxNyw2OS4yOTE3MywxMjguODIzNSw2OS4yOTE3M3oiLz4KCTxwYXRoIGZpbGw9IiMyMTMzNDMiIGQ9Ik0yNTAuNjgzNDYsNTUuODQ3MjRjMC0xMy44NjMzMy0xMS42Nzg3My0yNC4xNTIzMi0yNS4wMDc3OC0yNC4xNTIzMgoJCWMtMTEuOTkwNzUsMC0yMi42NjIzNSwxMC4xMDkyMi0yMi42NjIzNSwyNC44Njk2M1Y5NmgxMS4yMTgwOVY3NC43MjE0OWMzLjczOTA2LDMuNjcwMDEsNy42MTA2Myw1LjI4MDAzLDEzLjE1NzM1LDUuMjgwMDMKCQlDMjM5LjkxNDIyLDgwLjAwMTUyLDI1MC42ODM0Niw2OS41MzQ5NCwyNTAuNjgzNDYsNTUuODQ3MjR6IE0yNDAuMDQyMzQsNTUuNzA4NjVjMCw3LjAyNjg5LTUuNjk2NjQsMTIuNzIzNTMtMTIuNzIzMzEsMTIuNzIzNTMKCQljLTcuMDI3NTQsMC0xMi43MjM3NC01LjY5NjY0LTEyLjcyMzc0LTEyLjcyMzUzYzAtNy4wMjcxLDUuNjk2Mi0xMi43MjM1MywxMi43MjM3NC0xMi43MjM1MwoJCUMyMzQuMzQ1Nyw0Mi45ODUxMywyNDAuMDQyMzQsNDguNjgxNTUsMjQwLjA0MjM0LDU1LjcwODY1eiIvPgoJPHBhdGggZmlsbD0iI0ZGNUMzNSIgZD0iTTI4Ni45MzI0NiwzMS4xNTE1NFYxOS44ODMxMmMyLjk0MTE2LTEuMzg5NTEsNS4wMDIwMS00LjM2NTA4LDUuMDAyMDEtNy44MTg1di0wLjI2MDM4CgkJYzAtNC43NjU1Ny0zLjg5OTQ0LTguNjY0OC04LjY2NDgzLTguNjY0OGgtMC4yNjAxNmMtNC43NjU3OCwwLTguNjY1MjIsMy44OTkyMy04LjY2NTIyLDguNjY0OHYwLjI2MDM4CgkJYzAsMy40NTM0MSwyLjA2MTI4LDYuNDI5NDIsNS4wMDI0MSw3LjgxODcydjExLjI2ODQyYy00LjM3OTI0LDAuNjc2NTYtOC4zODA2NSwyLjQ4MjY5LTExLjY4MjE5LDUuMTQwNzlsLTMwLjkzODg3LTI0LjA2NzU2CgkJYzAuMjAzNTEtMC43ODM3NywwLjM0NjQ1LTEuNTkxMjksMC4zNDczMi0yLjQzODY4YzAuMDA2OTctNS4zOTc5MS00LjM2MzEzLTkuNzc5MzMtOS43NjEyNS05Ljc4NjMxCgkJYy01LjM5ODEzLTAuMDA2NzUtOS43Nzk1Niw0LjM2MzU2LTkuNzg2NTMsOS43NjE0N2MtMC4wMDY1Myw1LjM5NzkxLDQuMzYzNTYsOS43NzkzMyw5Ljc2MTY5LDkuNzg2MDkKCQljMS43NTkyOCwwLjAwMjE4LDMuMzg3MzktMC40OTc0NSw0LjgxNDYxLTEuMzA5MTFsMzAuNDM0NjUsMjMuNjc1NzljLTIuNTg4NTksMy45MDY4NS00LjEwNDI1LDguNTg2OC00LjEwNDI1LDEzLjYyNDUyCgkJYzAsNS4yNzQ1OCwxLjY2NjAyLDEwLjE1MjgxLDQuNDgyMDksMTQuMTY1NzdsLTkuMjU1NzQsOS4yNTU3NGMtMC43MzE2OS0wLjIxOTQyLTEuNDkxMjctMC4zNzMwNC0yLjI5NDg2LTAuMzczMDQKCQljLTQuNDM1NDcsMC04LjAzMTYsMy41OTU5Mi04LjAzMTYsOC4wMzE2czMuNTk2MTMsOC4wMzE2LDguMDMxNiw4LjAzMTZjNC40MzU5LDAsOC4wMzE1OS0zLjU5NTkyLDguMDMxNTktOC4wMzE2CgkJYzAtMC44MDMxNi0wLjE1MzM4LTEuNTYyOTYtMC4zNzMwMi0yLjI5NDY1bDkuMTU1NDktOS4xNTUyOGM0LjE1NTcsMy4xNzI1NSw5LjMzMDY5LDUuMDc4MDMsMTQuOTYyODMsNS4wNzgwMwoJCWMxMy42NDU0NSwwLDI0LjcwNzUyLTExLjA2MjI5LDI0LjcwNzUyLTI0LjcwODE3QzMwNy44NDc3NSw0My4xODU4NywyOTguNzcyODYsMzIuOTgwMzMsMjg2LjkzMjQ2LDMxLjE1MTU0eiBNMjgzLjE0MDIzLDY4LjIwNjI4CgkJYy02Ljk5NjE1LDAtMTIuNjY4NC01LjY3MTM3LTEyLjY2ODQtMTIuNjY3NTNjMC02Ljk5NTk0LDUuNjcyMjQtMTIuNjY3NTMsMTIuNjY4NC0xMi42Njc1MwoJCWM2Ljk5NTMsMCwxMi42Njc1NCw1LjY3MTU4LDEyLjY2NzU0LDEyLjY2NzUzQzI5NS44MDc3Nyw2Mi41MzQ5MiwyOTAuMTM1NTMsNjguMjA2MjgsMjgzLjE0MDIzLDY4LjIwNjI4eiIvPgo8L2c+Cjwvc3ZnPgo="> </a></div> </div> <div class="footer__copyright d-md-flex justify-content-center"> <span id="hs_cos_wrapper_footer_copyright_text_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="text">© 2024 Designed by Jake Lett. Bootstrap Creative All rights reserved. <a href="https://bootstrapcreative.com/hubspotcms"><b>Built on HubSpot CMS</b></a></span> <span id="hs_cos_wrapper_footer__copyright__links" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_simple_menu" style="" data-hs-cos-general-type="widget" data-hs-cos-type="simple_menu"><div id="hs_menu_wrapper_footer__copyright__links" class="hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal" role="navigation" data-sitemap-name="" data-menu-id="" aria-label="Navigation Menu"> <ul role="menu"> <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://bootstrapcreative.com/privacy-policy/" role="menuitem" target="_self">Privacy Policy</a></li> <li class="hs-menu-item hs-menu-depth-1" role="none"><a href="https://bootstrapcreative.com/shop/billing-terms-conditions/" role="menuitem" target="_self">Website Terms and Conditions</a></li> </ul> </div></span> </div> </div> </footer></div> </div> <script src="/hs/hsstatic/jquery-libs/static-1.4/jquery/jquery-1.11.2.js"></script> <script>hsjQuery = window['jQuery'];</script>  <script defer src="/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <script src="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/template_assets/89036677527/1689793835647/jake-hs-addons-portal/js/jake-hs-addons-portal.min.js"></script> <script> var hsVars = hsVars || {}; hsVars['language'] = 'en'; </script> <script src="/hs/hsstatic/cos-i18n/static-1.53/bundles/project.js"></script> <script src="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/85910489988/1664017003172/module_85910489988_website-header.min.js"></script>  <script defer src="https://js.hubspot.com/web-interactives-embed.js" type="text/javascript" id="hubspot-web-interactives-loader" data-loader="hs-previewer" data-hsjs-portal="1637283" data-hsjs-env="prod" data-hsjs-hublet="na1"></script>  <script src="https://cdn.jsdelivr.net/npm/jarallax@1.12.7/dist/jarallax.min.js"></script> <script> jarallax(document.querySelectorAll("#dnd_area-module-2.jarallax")); </script>  <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js" async></script> <script> window.onload = function(){ // Pause the video if scrolled down beyond 500px //const parallaxElementwidget_1701897119469 = document.querySelector('#jake-hero-widget_1701897119469 .jake-hero--parallax-js'); var parallaxElements = document.querySelectorAll('.jake-hero--parallax-js'); new simpleParallax(parallaxElements, { delay: 0, orientation: 'up', scale: 1.5, transition: 'cubic-bezier(0,0,0,1)' //customContainer: '.container', //customWrapper: '.wrapper' }); //parallaxwidget_1701897119469.destroy(); //parallaxwidget_1701897119469.refresh(); setTimeout(() => { var parallaxElementBackground = document.querySelectorAll('.jake-hero--parallax'); parallaxElementBackground.forEach(function(item) { item.classList.add('jake-hero-banner--show'); }); }, "100") }; </script>  <script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.1/dist/simpleParallax.min.js" async></script> <script> window.onload = function(){ // Pause the video if scrolled down beyond 500px //const parallaxElementmodule_17079943530644 = document.querySelector('#jake-hero-module_17079943530644 .jake-hero--parallax-js'); var parallaxElements = document.querySelectorAll('.jake-hero--parallax-js'); new simpleParallax(parallaxElements, { delay: 0, orientation: 'up', scale: 1.5, transition: 'cubic-bezier(0,0,0,1)' //customContainer: '.container', //customWrapper: '.wrapper' }); //parallaxmodule_17079943530644.destroy(); //parallaxmodule_17079943530644.refresh(); setTimeout(() => { var parallaxElementBackground = document.querySelectorAll('.jake-hero--parallax'); parallaxElementBackground.forEach(function(item) { item.classList.add('jake-hero-banner--show'); }); }, "100") }; </script> <script src="https://cdn.jsdelivr.net/npm/accordion-js@3.3.2/dist/accordion.min.js"></script> <script> // https://github.com/michu2k/Accordion new Accordion('#dnd_area-module-7', { duration: 400, showMultiple: false, onOpen: function(currentElement) { console.log(currentElement); } }); </script>  <script data-hs-allowed="true" src="/_hcms/forms/v2.js"></script> <script data-hs-allowed="true"> var options = { portalId: '1637283', formId: '13be7ad7-fb53-43c1-bab7-e540dc2ac63a', formInstanceId: '1838', pageId: '148211394407', region: 'na1', pageName: "HubSpot Banner for HubSpot CMS | Parallax Image \/ Video Hero", inlineMessage: "<h2 style=\"text-align: center;\">Thank you for sharing your idea.<\/h2>\n<div style=\"text-align: center;\">I will take it into consideration for a future module I create.<\/div>", rawInlineMessage: "<h2 style=\"text-align: center;\">Thank you for sharing your idea.<\/h2>\n<div style=\"text-align: center;\">I will take it into consideration for a future module I create.<\/div>", hsFormKey: "9eed58dc1138376967d5d38c387ffca1", css: '', target: '#hs_form_target_form_98265652', contentType: "standard-page", formsBaseUrl: '/_hcms/forms/', formData: { cssClass: 'hs-form stacked hs-custom-form' } }; options.getExtraMetaDataBeforeSubmit = function() { var metadata = {}; if (hbspt.targetedContentMetadata) { var count = hbspt.targetedContentMetadata.length; var targetedContentData = []; for (var i = 0; i < count; i++) { var tc = hbspt.targetedContentMetadata[i]; if ( tc.length !== 3) { continue; } targetedContentData.push({ definitionId: tc[0], criterionId: tc[1], smartTypeId: tc[2] }); } metadata["targetedContentMetadata"] = JSON.stringify(targetedContentData); } return metadata; }; hbspt.forms.create(options); </script> <script src="https://www.bootstrapcreative.com/hs-fs/hub/1637283/hub_generated/module_assets/89096634005/1723891321149/module_89096634005_Page_Listing.min.js"></script>  <script type="text/javascript"> var _hsq = _hsq || []; _hsq.push(["setContentType", "standard-page"]); _hsq.push(["setCanonicalUrl", "https:\/\/www.bootstrapcreative.com\/jake-addons\/jake-hero-banner-module"]); _hsq.push(["setPageId", "148211394407"]); _hsq.push(["setContentMetadata", { "contentPageId": 148211394407, "legacyPageId": "148211394407", "contentFolderId": null, "contentGroupId": null, "abTestId": null, "languageVariantId": 148211394407, "languageCode": "en", }]); </script> <script type="text/javascript" id="hs-script-loader" async defer src="/hs/scriptloader/1637283.js"></script>  <script type="text/javascript"> var hsVars = { render_id: "f7555024-a146-4ea3-97bf-11ecd273adbe", ticks: 1732677156649, page_id: 148211394407, content_group_id: 0, portal_id: 1637283, app_hs_base_url: "https://app.hubspot.com", cp_hs_base_url: "https://cp.hubspot.com", language: "en", analytics_page_type: "standard-page", scp_content_type: "", analytics_page_id: "148211394407", category_id: 1, folder_id: 0, is_hubspot_user: false } </script> <script defer src="/hs/hsstatic/HubspotToolsMenu/static-1.354/js/index.js"></script> <script defer> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:326627,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); console.log('hotjar loaded'); (function (e, t, o, n, p, r, i) { e.visitorGlobalObjectAlias = n; e[e.visitorGlobalObjectAlias] = e[e.visitorGlobalObjectAlias] || function () { (e[e.visitorGlobalObjectAlias].q = e[e.visitorGlobalObjectAlias].q || []).push(arguments) }; e[e.visitorGlobalObjectAlias].l = (new Date).getTime(); r = t.createElement("script"); r.src = o; r.async = true; i = t.getElementsByTagName("script")[0]; i.parentNode.insertBefore(r, i) })(window, document, "https://diffuser-cdn.app-us1.com/diffuser/diffuser.js", "vgo"); vgo('setAccount', '225739363'); vgo('setTrackByDefault', true); vgo('process'); console.log('ac script loaded'); </script> <script type="text/javascript"> _linkedin_partner_id = "171634"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=171634&fmt=gif"> </noscript> </body></html>