1<!DOCTYPE html> 2<html lang="en"> 3 <link rel="preconnect" href="https://fonts.googleapis.com"> 4 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 5 <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Nunito+Sans&display=swap" rel="stylesheet"> --> 6 7 <link 8 rel="stylesheet" 9 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Nunito+Sans&display=swap" 10 media="print" 11 onload="this.media='all'" 12/> 13 <noscript> 14 <link 15 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Nunito+Sans&display=swap" 16 rel="stylesheet" 17 type="text/css" 18 /> 19 </noscript> 20 21 22 23<head> 24 <title>Guitar Lessons: Acoustic & Electric Video Guitar Lessons | JamPlay + TrueFire</title> 25 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 26 <meta charset="utf-8"> 27<!-- google verification --> 28 <meta name="google-site-verification" content="ZYEK8D5rj5aiWqDlWKZbnK2mpdcUYQd72_Z9umlV37c" /> 29 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 30 <meta name="robots" content="index,follow" /> 31 <meta name="distribution" content="global" /> 32 <meta name="description" content="Learn guitar with our video guitar lessons for acoustic or electric guitar. JamPlay & TrueFire offer 1000âs of guitar lessons from 100âs of professional teachers and artists."> 33 <meta name="keywords" content="video guitar lessons, guitar lesson, guitar lesson video, guitar lessons video, electric guitar lessons, acoustic guitar lessons"> 34 <link rel="canonical" href="https://jamplay.com/guitar-lessons" /> 35 <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> 36 <link rel="preconnect" href="https://www.googletagmanager.com" /> 37 <link rel="preconnect" href="https://www.google-analytics.com" /> 38 <link rel="preconnect" href="https://cdn.onesignal.com" /> 39 <link rel="preconnect" href="https://connect.facebook.net" /> 40 41 42 <link rel="dns-prefetch" href="//fonts.googleapis.com" /> 43 <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" /> 44 <!-- <link rel="dns-prefetch" href="//pro.fontawesome.com" /> --> 45 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 46 <link rel="image_src" href="https://www-ecs.jamplay.com/client/global/images/logo/3dlogo.jpg" /> 47 <link rel="apple-touch-icon" sizes="57x57" href="https://www-ecs.jamplay.com/client/global/images/icons/apple/apple-icon-57x57.png" /> 48 <link rel="apple-touch-icon" sizes="72x72" href="https://www-ecs.jamplay.com/client/global/images/icons/apple/apple-icon-72x72.png" /> 49 <link rel="apple-touch-icon" sizes="114x114" href="https://www-ecs.jamplay.com/client/global/images/icons/apple/apple-icon-114x114.png" /> 50 <link rel="apple-touch-icon" sizes="144x144" href="https://www-ecs.jamplay.com/client/global/images/icons/apple/apple-icon-144x144.png" /> 51 <link rel="icon" sizes="144x144" href="https://www-ecs.jamplay.com/client/global/images/icons/apple/apple-icon-144x144.png" /> 52 <meta property="og:title" content="Guitar Lessons: Acoustic & Electric Video Guitar Lessons | JamPlay + TrueFire" /> 53 <meta property="og:url" content="https://jamplay.com/guitar-lessons" /> 54 <meta property="og:description" content="Guitar Lessons online from 100+ pro teachers. Learn guitar with our video guitar lessons for beginner to advanced." /> 55 <meta property="og:site_name" content="JamPlay.com" /> 56 <meta property="og:type" content="website" /> 57 <meta property="og:image" content="https://www-ecs.jamplay.com/client/global/images/logo/jamplay-meta.jpg" /> 58 <meta property="og:image:secure_url" content="https://www-ecs.jamplay.com/client/global/images/logo/jamplay-meta.jpg" /> <meta property="og:image:width" content="1200" /> 59 <meta property="og:image:height" content="630" /> 60 <meta property="og:image:type" content="image/jpeg" /> 61 <meta property="og:rich_attachment" content="true" /> 62 <meta property="fb:app_id" content="244366929406550" /> 63 <meta property="fb:admins" content="21905577" /> 64 <meta name="twitter:card" content="summary_large_image" /> 65 <meta name="twitter:site" content="@jamplay" /> 66 <meta name="twitter:creator" content="@jamplay" />
67 <meta name="twitter:title" content="Guitar Lessons: Acoustic & Electric Video Guitar Lessons | JamPlay + TrueFire" /> 68 <meta name="twitter:description" content="Guitar Lessons online from 100+ pro teachers. Learn guitar with our video guitar lessons for beginner to advanced." /> 69 <meta name="twitter:image" content="https://www-ecs.jamplay.com/client/global/images/logo/jamplay-meta.jpg" /> 70 <link rel="stylesheet" href="https://use.typekit.net/bzq4mxn.css"> 71 <!-- <link rel="stylesheet" href="/assets/css/font-awesome/all.min.css" /> --> 72 <!-- <link rel="stylesheet" href="<=$this->global_css;?>jamify.css?cache=<=$cache;?>125" /> --> 73 <link rel="stylesheet" href="/assets/css/main.css" /> 74 75 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous" /> 76 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-IIED/eyOkM6ihtOiQsX2zizxFBphgnv1zbe1bKA+njdFzkr6cDNy16jfIKWu4FNH" crossorigin="anonymous"> 77 78 <link rel="preconnect" href="https://fonts.googleapis.com"> 79 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 80 <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 81 82 <link rel="stylesheet" href="/assets/css/main.css?cache=20260212"> 83 84 <link rel="stylesheet" href="/assets/css/app.css?cache=20260212" /> 85 86 <link rel="stylesheet" href="https://www-ecs.jamplay.com/client/global/css/ham/hamburgers.min.css" /> 87 88 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,400,700" /> 89 90 91 92 93 94 95 <style> 96 a:hover, .dropdown-menu a:hover {text-decoration: none !important;} 97 a.navPhases:hover h3 .fw-700 {color:#ff0 !important} 98 .navPhases:hover, .navPhases:active {animation:bgPhases .4s ease-in-out 1 0s forwards} 99 .teacherPanel:hover, .teacherPanel:hover:active {animation:bgBlips 0.4s ease-in-out 1 0s forwards} 100 a.navPhases:hover .navIcon, a.navPhases:active .navIcon {animation:iconBlip .4s ease-in-out 1 0s forwards} 101 .bgFadeInScrolled {opacity:0} 102 103 @keyframes iconBlip {80% {transform: scale(1.15);} 100% {transform: scale(1.1);}} 104 @keyframes bgPhases {0% {background-size:40%; background-position:center 15px} 100% {background-size:55%; background-position:center 0px}} 105 @keyframes bgBlips {0% {background-size:150%; background-position:-50px 0px} 100% {background-size:180%; background-position:-65px 0px}} 106 ::-webkit-scrollbar {width: 12px;} 107 ::-webkit-scrollbar-track {box-shadow: inset 0 0 5px #000; border-radius: 5px; } 108 ::-webkit-scrollbar-thumb {background:rgb(100,100,100); border-radius: 10px;} 109 ::-webkit-scrollbar-thumb:hover {background:rgb(130,50,50);} 110 111 body.free-modal-open div.modal-backdrop {z-index:2147483642} 112 body.free-modal-open div.modal-backdrop.show {opacity:.7} 113 114 .list-group-item {border-width:0 0 1px 0 !important} 115 .list-group-item:hover {background:#111 !important} 116 .list-group-item.active {border-color:#444 !important; border-width:0 !important; background:#333 !important} 117 .list-group-item.active a.nav-link span.subText {font-size:25px !important; border:1px solid #fff;} 118 ul.navbar-nav li.show {background-color:#777; -webkit-border-radius:10px 10px 0 0 !important; -moz-border-radius:10px 10px 0 0 !important; border-radius:10px 10px 0 0 !important;} 119 a.nav-link:hover .fa-fw, .list-group-item.active .fa-fw {color:#fc0 !important;} 120 a.nav-link:hover span.subText, a.nav-link.active span.subText {color:#fc0 !important;} 121 a.nav-link.active {border-color:#444 !important; border-width:0 !important; background:#000 !important} 122 123 @media all and (max-width: 992px) { 124 .navbar .hamburger {padding:8px} 125 .navbar .hamburger-inner::before {top:-5px;} 126 .navbar .hamburger-inner::after {bottom:-5px;} 127 .navbar-nav .hamburger-inner, .navbar-nav .hamburger-inner:after, .navbar-nav .hamburger-inner:before {background-color:#aaa;} 128 div.navbar-collapse li.nav-item {width:100%; text-align:left; } 129 div.navbar-collapse li.nav-item.z-700 {border-top:1px solid } 130 .sidebarUL {} 131 .sidebarUL .sidebarLI {flex:1 1 25%;} 132 } 133 @media all and (max-width: 335px) { 134 .navbar .hamburger {padding:5px} 135 } 136 .row .bs5 .container-fluid, .col-12 .container-fluid { 137 margin: 0px !important; 138 border: 0px !important; 139 box-shadow: none !important; 140} 141 </style> 142 143 144 145 146<!-- Google Tag Manager -->
147<script>
vendor: 321 bytes, lines 147-151
147(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 148new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 149j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 150'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 151})(window,document,'script','dataLayer','
151GTM-9MNC
vendor: 4 bytes, line 151
151');
152</script>
152 153<!-- End Google Tag Manager --> 154 155
155<script src="/assets/js/vue/vue.min.js"></script>
155 156 <!-- Vue's being used everywhere. -->
157<script src="/assets/js/vue/vuedev.min.js"></script>
157 158 159<!-- jQuery -->
160<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
160 161 162<!--
162<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
162 --> 163 164<!--
164<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script>
164 --> 165 166 167 168
168<script src="/assets/js/axios.min.js"></script>
168 169
169<script src="/assets/js/jwt.js"></script>
169 170 171 172 173 174 175<!-- temporarily exlcuding this from guitar-chord-finder page. We may be able to disable this sitewide aside from 1 page. Temp fix. --> 176 177 178 <!-- <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> --> 179 180 <link 181 rel="stylesheet" 182 href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" 183 media="print" 184 onload="this.media='all'" 185 /> 186 <noscript> 187 <link 188 href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" 189 rel="stylesheet" 190 type="text/css" 191 /> 192 </noscript> 193 194 195 196 197 198 <!-- Beginner A/B page --> 199 200 <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Nunito+Sans:wght@800;900&display=swap" rel="stylesheet"> --> 201 202 <link 203 rel="stylesheet" 204 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Nunito+Sans:wght@800;900&display=swap" 205 media="print" 206 onload="this.media='all'" 207 /> 208 <noscript> 209 <link 210 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Nunito+Sans:wght@800;900&display=swap" 211 rel="stylesheet" 212 type="text/css" 213 /> 214 </noscript> 215 216 217 218 <!--
218<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
218 --> 219 <!-- Owl for carousels --> 220
220<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
220 221
221<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
221 222
222<script src="https://jamplay.com/assets/js/axios.min.js"></script>
222 223 224 225 <!-- splide --> 226 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"> 227 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide-core.min.css"> 228 229 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 230 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 231 232 233</head> 234 235<body class="nunito bg-222 ddd"> 236<style> 237.signup-navbar-nav a:hover { 238 background-color: #8c2013!important; 239} 240.signup-navbar-nav { 241 list-style:none; 242 margin-top:15px !important; 243} 244 245.signup-navbar-nav a{ 246 font-weight:normal !important; 247} 248 249</style>
250<script src="https://cmp.osano.com/xxTCs6jSBH/de033885-9e6e-4047-bec0-d2a5b4290efb/osano.js"></script>
250 251
252<script> 253 window.dataLayer = window.dataLayer ||[]; 254 function gtag(){dataLayer.push(arguments);} 255 gtag('consent','default',{ 256 'ad_storage':'denied', 257 'analytics_storage':'denied', 258 'ad_user_data':'denied', 259 'ad_personalization':'denied', 260 'personalization_storage':'denied', 261 'functionality_storage':'granted', 262 'security_storage':'granted', 263 'wait_for_update': 500 264 }); 265 gtag("set", "ads_data_redaction", true); 266</script>
vendor: 69 bytes, lines 266-268
266 267 268<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
268GTM-9MNC
vendor: 89 bytes, lines 268-272
268" 269height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 270 271 272
272<svg xmlns="http://www.w3.org/2000/svg" style="width:0; height:0; position:absolute; height:0px; visibility:hidden; overflow:hidden"> 273 <defs style="width:0; height:0; position:absolute; height:0px; visibility:hidden; overflow:hidden"> 274 <linearGradient id="gray-grada" x1="200" y1="45" x2="200" y2="295" gradientUnits="userSpaceOnUse"><stop offset="0.00" stop-color="#111"/><stop offset="0.75" stop-color="#666"/><stop offset="1.00" stop-color="#ccc"/></linearGradient> 275 <linearGradient id="gray-grada-125" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="10%" stop-color="#111"/><stop offset="50%" stop-color="#444"/><stop offset="100%" stop-color="#777"/></linearGradient> 276 <linearGradient id="swoosh-gray" x1="0%" x2="0%" y1="100%" y2="0%"><stop offset="0%" stop-color="rgb(51,51,51)" stop-opacity="1" /><stop offset="100%" stop-color="rgb(90,90,90)" stop-opacity="1" /></linearGradient> 277 <linearGradient id="simple-gray3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb(70,70,70);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(53,53,53);stop-opacity:1" /></linearGradient> 278 <linearGradient id="accent-grad" x1="214.3" y1="194.02" x2="145.52" y2="74.89" gradientUnits="userSpaceOnUse"><stop offset="0.30" stop-color="#444"/><stop offset="1.00" stop-color="#fff"/></linearGradient> 279 <linearGradient id="red-gradient" x1="200" y1="45" x2="200" y2="295" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#737373"/></linearGradient> 280 <linearGradient id="red-gradient-2" x1="214.3" y1="194.02" x2="145.52" y2="74.89" gradientUnits="userSpaceOnUse"><stop offset="0.24" stop-color="#b00"/><stop offset="1" stop-color="#fff"/></linearGradient> 281 <linearGradient id="phase-icon" x1="50" y1="100" x2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#666"/><stop offset="0.1" stop-color="#999"/><stop offset="0.6" stop-color="#fff"/><stop offset="1" stop-color="#fff"/></linearGradient> 282 <linearGradient id="accent-125" x1="125" x2="125" y2="250" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#737373"/></linearGradient> 283 <radialGradient id="red-radial-gradient-125" cx="125" cy="125" r="112.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset="0.15" stop-color="#fb0000"/><stop offset="0.31" stop-color="#ed0000"/><stop offset="0.48" stop-color="#d70000"/><stop offset="0.57" stop-color="#ca0000"/><stop offset="0.79" stop-color="#9f0000"/><stop offset="0.84" stop-color="#9b0000"/><stop offset="0.88" stop-color="#900000"/><stop offset="0.93" stop-color="#7d0000"/><stop offset="0.97" stop-color="#630000"/><stop offset="1" stop-color="#4a0000"/></radialGradient> 284 <radialGradient id="red-radial-gradient" cx="200" cy="170" r="112.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset="0.15" stop-color="#fb0000"/><stop offset="0.31" stop-color="#ed0000"/><stop offset="0.48" stop-color="#d70000"/><stop offset="0.57" stop-color="#ca0000"/><stop offset="0.79" stop-color="#9f0000"/><stop offset="0.84" stop-color="#9b0000"/><stop offset="0.88" stop-color="#900000"/><stop offset="0.93" stop-color="#7d0000"/><stop offset="0.97" stop-color="#630000"/><stop offset="1" stop-color="#4a0000"/></radialGradient> 285 <radialGradient id="gray-grad-rad-125" cx="125" cy="125" r="125" gradientUnits="userSpaceOnUse"><stop offset="0.00" stop-color="#999"/><stop offset="0.70" stop-color="#444"/><stop offset="1.00" stop-color="#111"/></radialGradient> 286 <radialGradient id="gray-grad-rad" cx="200" cy="170" r="125" gradientUnits="userSpaceOnUse"><stop offset="0.00" stop-color="#999"/><stop offset="0.70" stop-color="#444"/><stop offset="1.00" stop-color="#111"/></radialGradient> 287 <linearGradient id="grad-125-top" x1="960" y1="117.05" x2="960" y2="11.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#333"/><stop offset="0.22" stop-color="#363636"/><stop offset="0.90" stop-color="#505150"/></linearGradient> 288 <linearGradient id="grad-200" x1="960" y1="187.27" x2="960" y2="
28818.02" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#333"/><stop offset="0.22" stop-color="#414241"/><stop offset="0.51" stop-color="#505150"/></linearGradient> 289 <linearGradient id="grad-200-top" x1="960" y1="187.27" x2="960" y2="18.02" gradientTransform="translate(1920 200) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#333333"/><stop offset="0.22" stop-color="#333333"/><stop offset="0.51" stop-color="#343434"/></linearGradient> 290 <linearGradient id="save-star-red" x1="176.09" y1="352.18" x2="176.09" gradientUnits="userSpaceOnUse"><stop offset="0.02" stop-color="#a40005"/><stop offset="0.18" stop-color="#b40004"/><stop offset="0.5" stop-color="#df0002"/><stop offset="0.71" stop-color="red"/></linearGradient> 291 <filter color-interpolation-filters="sRGB" id="droptext" height="110%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="2" dy="3" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 292 <filter color-interpolation-filters="sRGB" id="swoosh-shadow2" height="200%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="0" dy="30" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.58"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 293 <filter color-interpolation-filters="sRGB" id="swoosh-shadow" height="210%"><feGaussianBlur in="SourceAlpha" stdDeviation="30"/><feOffset dx="0" dy="0" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="1.28"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 294 <filter color-interpolation-filters="sRGB" id="dropshadow" height="200%"><feGaussianBlur in="SourceAlpha" stdDeviation="10"/><feOffset dx="0" dy="20" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.78"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 295 <filter color-interpolation-filters="sRGB" id="dropshadow2" height="200%"><feGaussianBlur in="SourceAlpha" stdDeviation="20"/><feOffset dx="0" dy="20" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.58"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 296 <filter color-interpolation-filters="sRGB" id="dropshadows" filterUnits="userSpaceOnUse" height="160%" width="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="10"/><feOffset dx="0" dy="0" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.58"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 297 <filter color-interpolation-filters="sRGB" id="jplogotext" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="1" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope=".9"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 298 <filter color-interpolation-filters="sRGB" id="jplogoshadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="2"/><feOffset dx="0" dy="1" result="offsetblur"/><feComponentTransfer><feFuncA type="linear" slope="0.9"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter> 299 </defs> 300 </svg> 301 <!-- animate-all-2 --> 302 303<div id="fixedNav" class=" pos-fixed pos-t-0 pos-r-0 pos-l-0 mx-auto hidden lh-1 grad-shell-nav-111" 304 style=" background-color: black;display: none !important; 305 /*can set a different max width here if we need to*/ 306 max-width:1918px; "> 307 308 309 <header id="headerNav" class="w-100p w-sm-100p pos-relative fff text-shadow-fine pr-0 pr-xl-3 mx-auto align-items-center"> 310 <nav class="navbar w-100 p-0 m-0 d-flex align-items-center navbar-expand-lg z-600 px-2 px-lg-0" id="nav"> 311 <div class="animate-all-2 w-250px w-xl-225px w-lg-200px w-md-175px w-xs-150px align-self-center"> 312 <div id="logoContainer" class=" w-180px w-lg-150px w-xxs-125px mx-auto"> 313 <a href="/" aria-label="JamPlay" class="d-block"> 314<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewB
314ox="0 0 180 37"> 315<defs> 316<linearGradient id="e8119d2d-e919-431d-b2c3-a56c4cd36d33" x1="123" y1="37" x2="123" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#505050"/><stop offset="0.16" stop-color="#232323"/><stop offset="1" stop-color="#737373"/></linearGradient> 317<linearGradient id="a59edcd4-e7b4-4716-a9a3-c86657c3b2a6" x1="57" y1="37" x2="57" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a50005"/><stop offset="0.17" stop-color="#6d0002"/><stop offset="0.7" stop-color="#c40006"/></linearGradient> 318</defs> 319<g><rect y="8" width="180" height="1" style="fill: #777"/><rect y="13" width="180" height="1" style="fill: #777"/><rect y="18" width="180" height="1" style="fill: #777"/><rect y="23" width="180" height="1" style="fill: #777"/><rect y="28" width="180" height="1" style="fill: #777"/><rect x="179" y="8" width="1" height="21" style="fill: #777"/><rect y="8" width="1" height="21" style="fill: #777"/></g> 320<rect x="91" width="64" height="37" style="filter:url(#jplogoshadow); fill: url(#e8119d2d-e919-431d-b2c3-a56c4cd36d33)"/> 321<rect x="25" width="64" height="37" style="filter:url(#jplogoshadow); fill: url(#a59edcd4-e7b4-4716-a9a3-c86657c3b2a6)"/> 322<path style="filter:url(#jplogotext); fill: #fff;fill-rule: evenodd" d="M115,25.78l-2.49-2.55V3.64L115,3ZM38,4.67V6.74H35.89V4.67ZM62.3,8.8c.76,0,3.24,0,5.28,0,2.48,0,3.16,1.29,3.16,1.29.73-1.3,3.18-1.29,3.18-1.29h3.17c2.27,0,4.45-.1,5.51.93.53.52.53,3.11.53,3.11v9.32a8.56,8.56,0,0,0,.54,3.11H80.48A6.8,6.8,0,0,0,81,22.68V11.8s0-1.55-1.06-1.55H73.06C72,10.25,72,12.32,72,12.32V24.75l-2.31-2,.18-10.4s0-2.07-1.59-2.07H61.39c-1.06,0-1.06,2.07-1.06,2.07V22.68a8.86,8.86,0,0,0,.53,2.59s-.67,0-3-.05a21.66,21.66,0,0,0,.36-2.54V10.77a3.92,3.92,0,0,0-.65-2h2.64l.38,1S61.54,8.8,62.3,8.8ZM35.93,8.7h2.12V27.34s0,4.14-2.69,4.14H30.61c-1.05,0-2.11-2.59-2.11-2.59a6.4,6.4,0,0,0,3.18,1h2.65c1.6,0,1.6-2.07,1.6-2.07V8.7Zm4.77,1.55L41.76,8.7H46s4.82-.11,6.37,0a4.43,4.43,0,0,1,2.12.52c1.06.51,1.06,2.58,1.06,2.58v14L53.43,23.2V16H43.35c-.53,0-.53,1.55-.53,1.55v3.11s0,3.1,1.06,3.1h8l.53,1.66H43.92a4,4,0,0,1-2.4-.66,3.5,3.5,0,0,1-.74-2.38V16.41c0-1,.44-2,1.5-2h8s2.77.09,3.18-.51.53-3.63-.53-3.63H40.7ZM97.46,32l-2.13-3.11V10.77a7.7,7.7,0,0,0-.28-1.9h2.32l.19,1a2.06,2.06,0,0,1,1-.91,79,79,0,0,1,9.24,0,1.82,1.82,0,0,1,1.53.72c.46.64.46,3.22.46,3.22v9.8s.27,2.55-1.6,2.55c-1.26.05-8.47-.06-9.2-.05a3.52,3.52,0,0,1-1.57-.47Zm20.8-21.3c0-.36.19-1.83.19-1.83h9.74c1.56,0,3.25,0,3.89.83.79,1.08.68,5,.68,5l0,8.08a18.39,18.39,0,0,0,.13,2.21c-.13-.1-2.44-2.21-2.44-2.21V16l-8-.06H120.8c-1.2-.07-1.07,1.55-1.07,1.55v4.66s-.13,1.52.54,1.55h9.54v1.56l-7.3,0H120.4c-1.06,0-1.59-.51-2.12-1.54s-.27-4.88-.27-4.88a10.5,10.5,0,0,1,.51-3.45,2.35,2.35,0,0,1,1.16-1c.68-.25,9.17,0,9.17,0s1.58,0,1.58-1,.24-2.36-.4-2.74a5,5,0,0,0-1.81-.45h-8A10.21,10.21,0,0,0,118.26,10.7Zm16.86-2h2.65V21.64s0,2.07,1.06,2.07h9c.53,0,.53-3.1.53-3.1V11.37a4.23,4.23,0,0,0-1.07-2.67h3.18V28.37s0,3.11-1.59,3.11H138.83l-2.65-2.07a20.22,20.22,0,0,0,4.24.52h
3227.43c.53,0,.53-1,.53-1V24.75c0,.49-1.06.52-1.06.52h-8.49a4.19,4.19,0,0,1-2.65-1c-.53-.52-.53-2.07-.53-2.07V11.29A8,8,0,0,0,135.12,8.7Zm-36.6,2.07c-1.2.12-1.06,2.07-1.06,2.07v8.28s-.14,1.89.46,2.24a6.27,6.27,0,0,0,2.19.35h6.36s1.6,0,1.6-1V11.8c0-1-1.6-1-1.6-1h-8Z" /> 323</svg> 324</a> 325 </div> 326 </div> 327 <button class="panel-toggler d-block d-lg-none rounded-10 hamburger grad-gray hamburger-md shadow-mediumgrad-gray hamburger--spin" data-toggle="collapse" data-target="#navbarNav" aria-label="Toggle Navigation" role="button" aria-expanded="true" aria-controls="navbarNav"> 328 <span class="hamburger-box align-bottom"><span class="hamburger-inner"></span></span> 329</button> <div class="collapse navbar-collapse p-0 m-0 " id="navbarNav"> 330 <div id="navScrollable" class="text-uppercase text-center text-md-left h-sm-100p w-1350px w-xl-95 w-md-100 w-sm-100p mx-auto mr-sm-0 px-0 px-lg-0 mt-2 mt-lg-0 grad-sm-gray sbg-sm-000 rounded-sm-15 pos-sm-absolute pos-l-0 pos-r-0 h-sm-90p" style="overflow-y:auto"> <!-- d-flex justify-content-end --> 331 332 <ul class="navbar-nav nav-fill d-flex align-items-center"> 333 <li class="bt-sm-444 nav-item py-1 py-sm-0 dropdown pos-static bg-sm-none "><a class="main-nav-dropdown blur-body py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" id="learn_guitar_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="hamburger-wrap d-inline-block"><div class="hamburger ham hamburger--spin p-0 m-0" aria-label="Explore"><span class="hamburger-box align-bottomss"><span class="hamburger-inner"></span></span></div></div> Learn Guitar</a> 334 335<div class="dropdown-menu learn_guitar_shell my-0 mr-auto mr-lg-0 ml-auto p-0 b-none rounded-15 over-hidden w-500px w-sm-95 w-xs-90 lh-1 bg-sm-none grad-gray5 bg-xs-none shadow-medium shadow-sm-none fff text-shadow-fine" aria-labelledby="membershipDropdown"> 336 <div class="row d-flex no-gutters pb-2 pt-0 py-lg-2 px-0 p-lg-3"> 337 <ul class="learn_guitar_dropdown"> 338 <li><a href="/guitar-lessons">Our Learning System</a></li> 339 <li><a href="/guitar-lessons/beginners">Lessons for Beginners</a></li> 340 <li><a href="/guitar-lessons/kids-and-teens">Lessons for Kids</a></li> 341 <li><a href="/guitar-lessons/songs">Song Lessons</a></li> 342 <li><a href="/guitar-lessons/genres">Music Genres</a></li> 343 <li><a href="/guitar-lessons/skill-building">Skills & Techniques</a></li> 344 <li><a href="/guitar-lessons/artists">Master Classes</a></li> 345 </ul> 346 </div> 347</div> 348 </li> 349 <li class="bt-sm-444 nav-item py-1 py-sm-0"><a class="py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" href="/guitar-teachers"><span class="far fs-12-static aaa fa-fw fa-gift d-inline d-lg-none"></span> <span class="sm-inline">Teachers</span> </a></li> 350 <li class="bt-sm-444 nav-item py-1 py-sm-0"><a class="py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" href="/guitar-lessons/new-courses"><span class="far fs-12-static aaa fa-fw fa-gift d-inline d-lg-none"></span> <span class="sm-inline">Popular Courses</span> </a></li> 351 <li class="bt-sm-444 nav-item py-1 py-sm-0 d-none"><a class="py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" href="/live-guitar-lessons"><span class="far fs-12-static aaa fa-fw fa-wifi d-inline d-lg-none"></span> Live <span class="d-inline d-lg-none">Courses</span></a></li> 352 <li class="bt-sm-444 nav-item py-1 py-sm-0 "><a class="py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" href="/features"><span class="far fs-12-static aaa fa-fw fa-book-reader d-inline d-lg-none"></span> Libraries</a></li> 353 <li class="bt-sm-444 nav-item py-1 py-sm-0 "><a class="py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" href="/guitarist-toolkits"><span class="far fs-12-static aaa fa-fw fa-gift d-inline d-lg-none"></span> <span class="sm-inline hidden-xl">Free</span> Toolkits</a></li> 354 <li class="bt-sm-444 nav-item py-1 py-sm-0 dropdown pos-static bg-sm-none "><a class="main-nav-dropdown blur-body py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" id="membershipDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="hamburger-wrap d-inline-block"><div class="hamburger ham hamburger--spin p-0 m-0" aria-label="Explore"><span class="hamburger-box align-bottomss"><span class="hamburger-inner"></span></span></div></div> Membership</a> 355 356 <div class="dropdown-menu pos-l-0 pos-r-5p my-0 mr-auto mr-lg-0 ml-auto p-0 b-none rounded-15 over-hidden w-500px w-sm-95 w-xs-90 lh-1 bg-sm-none grad-gray5 bg-xs-none shadow-medium shadow-sm-none fff text-shadow-fine" aria-labelledby="membershipDropdown" style="text-transform: none;"> 357 <div class="row d-flex no-gutters pb-2 pt-0 py-lg-2 px-0 p-lg-3"> 358 359 <div class="col-12 col-sm-6 col-lg-3 col-lg-12 d-flex align-items-stretch justify-content-stretch pos-relative z-300"> 360 <a class="card-hover text-center bg-161 pos-relative d-block w-100 m-1 m-sm-2 rounded-15 over-hidden bb-999" href="/membership"> 361 <div class="card-hover-element pos-absolute w-100 h-100 z-100 over-hidden bg-size-100 bg-xs-size-100 bg-pos-tc bg-no-repeat" data-echo-bg="https://www-ecs.jamplay.com/client/enroll/images/panels/courses.jpg"></div> 362 <div class="pos-absolute w-100 h-100 shadow-inner-light z-200"></div> 363 <div class="w-100p pos-relative z-300"> 364 <div class="h-75px h-lg-50px h-xs-50px h-xxs-25px"></div> 365 <div class="d-flex flex-column justify-content-end w-100 h-125px h-md-100px h-xs-75px px-3 px-xl-3 grad-to-alpha-161 "> 366 <p class="fff fw-700 fw-xs-400 text-uppercase fs-16-static fs-xl-14 lh-13 fs-md-12 fs-xxs-10 lh-xs-1">What's Included with Membership?</p> 367 <div class="h-10px h-xs-10px h-xxs-5px w-100"></div> 368 </div> 369 </div> 370 </a> 371 </div> 372 373 <div class="col-6 col-sm-6 col-lg-3 col-lg-6 d-flex align-items-stretch justify-content-stretch pos-relative z-300"> 374 <a class="card-hover text-center bg-161 pos-relative d-block w-100 m-1 m-sm-2 rounded-15 over-hidden bb-999" href="/membership/jamplay-review"> 375 <div class="card-hover-element pos-absolute w-100 h-100 z-100 over-hidden bg-size-100 bg-xs-size-100 bg-pos-tc bg-no-repeat" data-echo-bg="https://www-ecs.jamplay.com/client/enroll/images/panels/giveaway-500.jpg"></div> 376 <div class="pos-absolute w-100 h-100 shadow-inner-light z-200"></div> 377 <div class="w-100p pos-relative z-300"> 378 <div class="h-25px h-lg-50px h-xs-25px h-xxs-25px"></div> 379 <div class="d-flex flex-column justify-content-end w-100 h-100px h-md-100px h-xs-75px px-3 px-xl-3 grad-to-alpha-161 "> 380 <p class="fff fw-700 fw-xs-400 text-uppercase fs-16-static fs-xl-14 lh-13 fs-md-12 fs-xxs-10 lh-xs-1">User Reviews</p> 381 <div class="h-10px h-xs-10px h-xxs-5px w-100"></div> 382 </div> 383 </div> 384 </a> 385 </div> 386 387 <div class="col-6 col-sm-4 col-lg-3 col-lg-6 d-flex align-items-stretch justify-content-stretch pos-relative z-300"> 388 <a class="card-hover text-center bg-161 pos-relative d-block w-100 m-1 m-sm-2 rounded-15 over-hidden bb-999" href="/membership/faq"> 389 <div class="card-hover-element pos-absolute w-100 h-100 z-100 over-hidden bg-size-100 bg-xs-size-100 bg-pos-tc bg-no-repeat" data-echo-bg="https://www-ecs.jamplay.com/client/enroll/images/panels/progress-500.jpg"></div> 390 <div class="pos-absolute w-100 h-100 shadow-inner-light z-200"></div> 391 <div class="w-100p pos-relative z-300"> 392 <div class="h-25px h-lg-50px h-xs-25px h-xxs-25px"></div> 393 <div class="d-flex flex-column justify-content-end w-100 h-100px h-md-100px h-xs-75px px-3 px-xl-3 grad-to-alpha-161 "> 394 <p class="fff fw-700 fw-xs-400 text-uppercase fs-16-static fs-xl-14 lh-13 fs-md-12 fs-xxs-10 lh-xs-1">FAQ</p> 395 <div class="h-10px h-xs-10px h-xxs-5px w-100"></div> 396 </div> 397 </div> 398 </a> 399 </div> 400 401 <div class="col-6 col-sm-4 col-lg-6 d-flex align-items-stretch justify-content-stretch pos-relative z-300"> 402 <a class="card-hover text-center bg-161 pos-relative d-block w-100 m-1 m-sm-2 rounded-15 over-hidden bb-999" href="/membership/money-back-guarantee"> 403 <div class="card-hover-element pos-absolute w-100 h-100 z-100 over-hidden bg-size-100 bg-xs-size-100 bg-pos-tc bg-no-repeat" data-echo-bg="https://www-ecs.jamplay.com/client/enroll/images/icons/30-day.png"></div> 404 <div class="pos-absolute w-100 h-100 shadow-inner-light z-200"></div> 405 <div class="w-100p pos-relative z-300"> 406 <div class="h-25px h-lg-50px h-xs-25px h-xxs-25px"></div> 407 <div class="d-flex flex-column justify-content-end w-100 h-100px h-md-100px h-xs-75px px-3 px-xl-3 grad-to-alpha-161 "> 408 <p class="fff fw-700 fw-xs-400 text-uppercase fs-16-static fs-xl-14 lh-13 fs-md-12 fs-xxs-10 lh-xs-1">Risk Free</p> 409 <div class="h-10px h-xs-10px h-xxs-5px w-100"></div> 410 </div> 411 </div> 412 </a> 413 </div> 414 415 <div class="col-6 col-sm-4 col-lg-6 d-flex align-items-stretch justify-content-stretch pos-relative z-300"> 416 <a class="card-hover text-center bg-161 pos-relative d-block w-100 m-1 m-sm-2 rounded-15 over-hidden bb-999" href="/membership/supported-devices"> 417 <div class="card-hover-element pos-absolute w-100 h-100 z-100 over-hidden bg-size-100 bg-xs-size-100 bg-pos-tc bg-no-repeat" data-echo-bg="https://www-ecs.jamplay.com/client/enroll/images/panels/apps-500.jpg"></div> 418 <div class="pos-absolute w-100 h-100 shadow-inner-light z-200"></div> 419 <div class="w-100p pos-relative z-300"> 420 <div class="h-25px h-lg-50px h-xs-25px h-xxs-25px"></div> 421 <div class="d-flex flex-column justify-content-end w-100 h-100px h-md-100px h-xs-75px px-3 px-xl-3 grad-to-alpha-161 "> 422 <p class="fff fw-700 fw-xs-400 text-uppercase fs-16-static fs-xl-14 lh-13 fs-md-12 fs-xxs-10 lh-xs-1">Device Support</p> 423 <div class="h-10px h-xs-10px h-xxs-5px w-100"></div> 424 </div> 425 </div> 426 </a> 427 </div> 428 </div> 429 </div> 430 </li> 431 <li class="bt-sm-444 nav-item py-1 py-sm-0 mx-0 mx-xl-2 py-0 grad-sm-gray" style="flex:0 0 auto"> 432 <div class="d-flex w-xs-100p justify-content-center flex-column py-3 py-lg-0"> 433 <a class="d-block btn btn-sm btn-red px-0 px-sm-3 px-lg-4 py-2 py-lg-1 my-2 my-lg-0 mx-auto rounded-15 w-sm-95 w-xs-90 shadow-light navButton" href="https://enroll.jamplay.com/signup"><span class="fs-16-static fs-lg-14 fs-md-12 fs-sm-16">Signup</span></a> 434 <a class="d-block d-lg-none btn btn-sm btn-gray px-0 px-sm-3 px-lg-4 py-2 py-lg-1 my-2 my-lg-0 mx-auto rounded-15 w-sm-95 w-xs-90 shadow-light navButton" rel="noopener" target="_blank" href="https://jamplay.com/members"><span class="fs-16-static fs-lg-14 fs-md-12 fs-sm-16">Login</span></a> 435 </div> 436 </li> 437 <li class="bt-sm-444 nav-item py-1 py-sm-0 dropdown pos-static bg-sm-none d-block d-lg-none d-lg-block pl-1 pr-0 pr-lg-2" style="flex:0 0 auto"> 438 <a class="main-nav-dropdown blur-body py-2 py-xl-3 pl-4 pl-lg-0 d-block d-md-inline-block fff text-shadow-fine" id="extrasDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><div class="hamburger-wrap d-inline-block"><div class="hamburger ham hamburger--spin p-0 m-0" aria-label="Explore"><span class="hamburger-box align-bottomss"><span class="hamburger-inner"></span></span></div></div> <span class="d-none d-lg-inline fas fa-fw fa-user shadow-img1 fs-xs-14"></span> 439 <span class="d-inline d-lg-none">Company & FAQ</span> 440 </a> 441 <div class="dropdown-menu pos-l-auto pos-r-0 m-0 p-0 pt-1 pb-3 b-none rounded-15 over-hidden lh-1 grad-gray5 bg-xs-none shadow-medium shadow-sm-none fff text-shadow-fine w-300px" aria-label="Toggle Navigation" aria-labelledby="extrasDropdown" style="text-transform: none;"> 442 <b class="py-3 text-left w-80 mx-auto d-block text-uppercase text-tracked-1 fw-200">ACCOUNT</b> 443 <div class="list-group w-90 mx-auto bg-none pb-2 bb-555"> 444 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="https://jamplay.com/members"><span class="fal fa-fw yellow2 fa-unlock"></span> Login to Account</a> 445 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="https://account.jamplay.com/auth/reset_password"><span class="fal fa-fw yellow2 fa-unlock-alt"></span> Forgot Password</a> 446 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="https://account.jamplay.com/"><span class="fal fa-fw yellow2 fa-user-circle"></span> Activate Account</a> 447 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="https://store.jamplay.com/"><span class="fal fa-fw yellow2 fa-gift"></span> Buy Gift Cards</a> 448 </div> 449 <b class="py-3 text-left w-80 mx-auto d-block text-uppercase text-tracked-1 fw-200">COMPANY</b> 450 <div class="list-group w-90 mx-auto bg-none pb-2 bb-555"> 451 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/company/truefire-studios"><span class="fal fa-fw yellow2 fa-fire"></span> TrueFire Studios</a> 452 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/company/contact-us"><span class="fal fa-fw yellow2 fa-envelope-open"></span> Contact Us</a> 453 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/company/privacy-policy"><span class="fal fa-fw yellow2 fa-user-shield"></span> Privacy Policy</a> 454 </div> 455 <b class="py-3 text-left w-80 mx-auto d-block text-uppercase text-tracked-1 fw-200">FREEBIES</b> 456 <div class="list-group w-90 mx-auto bg-none pb-2 bb-555"> 457 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/weekend-warrior">
457<span class="fal fa-fw yellow2 fa-user-friends"></span> Weekend Warrior</a> 458 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/articles"><span class="fal fa-fw yellow2 fa-edit"></span> Articles</a> 459 <a class="list-group-item pt-1 pb-2 bg-none b-none fff text-shadow-fine" href="/tools"><span class="fal fa-fw yellow2 fa-wrench"></span> Tools</a> 460 </div> 461 </div> 462 </li> 463 <li class="nav-item py-2 py-lg-0" style="flex:0 0 auto"> 464 <div class="w-sm-95 mx-auto d-flex justify-content-start justify-content-lg-around text-center lh-1 fs-16-static fs-md-14 fs-sm-24 fs-xs-6vw"> 465 <a href="https://www.instagram.com/jamplay" rel="noopener" target="_blank" aria-label="JamPlay Instagram" class="mr-1 ml-0 d-lg-none d-xl-inline-block"><span class="fab fa-fw fa-instagram shadow-img1 red-light"></span></a> 466 <a href="https://www.twitter.com/jamplay" rel="noopener" target="_blank" aria-label="JamPlay on Twitter" class="mr-1 ml-0 d-lg-none d-xl-inline-block"><span class="fab fa-fw fa-twitter shadow-img1 blue-light"></span></a> 467 <a href="https://www.facebook.com/jamplay" rel="noopener" target="_blank" aria-label="JamPlay on Facebook" class="ml-0 d-lg-none d-xl-inline-block"><span class="fab fa-fw fa-facebook shadow-img1" style="color:#5468ff"></span></a> 468 </div> 469 <div class="d-block d-sm-none h-25px"></div> 470 </li> 471 </ul> 472 473 </div> 474 </div> 475 </nav> 476 </header> 477</div> 478 479<!-- start new --> 480 481<div class="bs5 d-none" id="jamplaynav"> 482 <nav class="navbar navbar-expand navbar-dark text-dark mb-0 rounded-0 py-4"> 483 <div class="container my-1"> 484 485 <!-- logo --> 486 <a href="/" class="navLogo"> 487 <img src="/assets/image/site/jp-new-new-logo.png" class="w-100" alt="JamPlay" id="jamplayRegularLogo" /> 488 </a> 489 490 <div class="flex-grow-1"></div> 491 492 <!-- list of items --> 493 <ul class="navbar-nav d-none d-lg-block"> 494 <li style="margin-left:0px !important; margin-right:0px !important" class="nav-item dropdown mx-1 mx-lg-2 mx-xl-4" :class="item.megamenu ? 'has-megamenu' : ''" v-for="item, n in nav_items" @mouseover="item.showing = true; focus_item = item" style="float:left;"> <!-- @mouseleave="item.showing = false" @mouseout="item.showing = item.megamenu ? true : false" --> 495 <a :href="item.link ? item.link : '#'" class="nav-link text-uppercase px-xxl-4 fs-6"> 496 {{item.name}} 497 </a> 498 <div v-if="item == focus_item" class="dropdown-menu megamenu p-3" :class="item.showing && item.megamenu && item == focus_item ? 'd-block' : 'd-none'" @mouseleave="toggle(item)"><!-- item.showing = false --> 499 <div class="row"> 500 <div class="col-sm-12 col-md-3" v-for="col, a in item.megamenu"> 501 <div class="pb-5 px-3 h-100 pt-3 d-flex flex-column"> 502 <h4 class="text-dark mb-3 fs-5">{{ col.title }}</h4> 503 <ul class="p-0 list-unstyled d-flex flex-column"> 504 <li v-for="item, b in col.items" class="mb-2"> 505 <a :href="item.link" class="text-wrap fs-6">{{item.name}}</a> 506 </li> 507 </ul><br/> 508 <div v-if="col.view_all"> 509 <a :href="col.view_all.link" class="text-wrap fs-6 text-decoration-none">{{col.view_all.name}}</a> 510 </div> 511 </div> 512 </div> 513 </div> 514 </div> 515 <ul class="dropdown-menu p-4 d-block" v-if="item.showing && item == focus_item && item.items && !item.megamenu" @mouseleave="toggle(item)"> 516 <li v-for="subItem, i in item.items" class="p-0 m-0"> 517 <h3 class="mb-2 text-dark fs-6" v-if="subItem.name" :class="{'mt-4': i > 0}">{{subItem.name}}</h3> 518 <div v-for="subSubItem, j in subItem.items" :class="{'mt-2': j > 0}"> 519 <a :href="subSubItem.link" class="text-nowrap fs-6">{{subSubItem.name}}</a> 520 </div> 521 </li> 522 </ul> 523 </li> 524 </ul> 525 526 <div class="flex-grow-1"></div> 527 528 <ul class="signup-navbar-nav d-none d-lg-block"> 529 <li class="nnav-item"> 530 <a href="/guitar-and-bass-membership" style="padding-right:20px; padding-left:20px; color:white" class="jamplay-btn nav-link" id="nav-signup-link" class="jamplay-btn mt-5">Sign Up</a> 531 </li> 532 </ul> 533 534 535 <!-- mobile --> 536 <div class="flex-grow-1 d-lg-none"></div> 537 <a href="#" class="text-dark d-lg-none" @click="mobileShowing = !mobileShowing"> 538 <i class="fa fa-bars fa-2x"></i> 539 </a> 540 541 <ul class="dropdown-menu mobileMenu d-block w-100 d-lg-none p-4 overflow-sroll" v-if="mobileShowing"> 542 <li v-for="item, i in nav_items" class="py-0 px-2"> 543 <div v-if="currentMobileNav == -1" :class="{'mt-4': i > 0}"> 544 <a v-if="item.items || item.megamenu" href="#" class="text-nowrap fs-6 text-uppercase p-0 m-0" @click.prevent="currentMobileNav = i">{{item.name}}</a> 545 <a v-else :href="item.link" class="text-nowrap fs-6 text-uppercase p-0 m-0">{{item.name}}</a> 546 </div> 547 548 <div v-if="i == currentMobileNav && item.items || i == currentMobileNav && item.megamenu"> 549 <h3 class="mt-0 mb-4 fs-6 text-uppercase"> 550 <a href="#" @click.prevent="currentMobileNav = -1" class="text-jp-red">{{item.name}} <i class="fa fa-angle-down float-right text-dark"></i></a></h3> 551 <div v-if="item.megamenu" class="overflow-scroll" style="height: 600px;"> 552 <div v-for="elem in item.megamenu" class="mb-3"> 553 <h3 class="text-dark fs-5">{{elem.title}}</h3> 554 <ul class="d-flex flex-column list-unstyled"> 555 <li v-for="item in elem.items" class="mb-2"> 556 <a :href="item.link" class="text-nowrap fs-6">{{item.name}}</a> 557 </li> 558 </ul> 559 </div> 560 </div> 561 <div v-for="subItem, h in item.items"> 562 <h3 class="mb-4 text-dark fs-6" v-if="subItem.name" :class="{'mt-5': h > 0}">{{subItem.name}}</h3> 563 <div v-for="subSubItem, j in subItem.items" :class="{'mt-4': j > 0}"> 564 <a :href="subSubItem.link" class="text-nowrap fs-6">{{subSubItem.name}}</a> 565 </div> 566 </li> 567 <li class="nav-item"> 568 <a href="/guitar-and-bass-membership" style="margin-top:10px; padding-right:20px; padding-left:20px; color:white; text-align:center" class="jamplay-btn nav-link" id="nav-signup-link" class="jamplay-btn mt-5">Sign Up</a> 569 </li> 570 </div> 571 </li> 572 </ul> 573 </div> 574 </nav> 575</div> 576
577<script> 578 $(() => { 579 const jamplayHeaderTemplate = new Vue({ 580 name: 'jamplay-nav', 581 el: '#jamplaynav', 582 data: { 583 logged_in: TFSUtils?.loggedInAs() ?? false, 584 currentMobileNav: -1, 585 mobileShowing: false, 586 focus_item: false, 587 nav_items: [ 588 { 589 name: 'Courses', 590 showing: false, 591 megamenu: [ 592 { 593 title: 'Courses', 594 items: [ 595 { name: `Guitar Lessons`, link: `/guitar-lessons` }, 596 { name: `Bass Lessons`, link: `/bass-lessons` }, 597 ] 598 }, 599 { 600 title: `Guitar Genres`, 601 items: [ 602 { name: `Rock`, link: `/guitar-lessons/genres/9-rock` }, 603 { name: `Blues`, link: `/guitar-lessons/genres/2-blues` }, 604 { name: `Country`, link: `/guitar-lessons/genres/16-country` }, 605 { name: `Fingerstyle`, link: `/guitar-lessons/genres/3-fingerstyle` }, 606 { name: `Metal`, link: `/guitar-lessons/genres/4-metal` }, 607 { name: `Jazz`, link: `/guitar-lessons/genres/10-jazz` }, 608 ], 609 view_all: { name: `View All`, link: `/guitar-lessons/genres` } 610 }, 611 { 612 title: `Skill Building`, 613 items: [ 614 { name: `Lead Concepts & Techniques`, link: `/guitar-lessons/skill-building/6-lead-concepts-techniques` }, 615 { name: `Theory & Improvisation`, link: `/guitar-lessons/skill-building/19-theory-and-improvisation` }, 616 { name: `Speed & Technique`, link: `/guitar-lessons/skill-building/7-speed-and-technique` }, 617 { name: `Reading Music & Rhythms`, link: `/guitar-lessons/skill-building/12-reading-music-and-rhythms` }, 618 { name: `Rhythm Guitar`, link: `/guitar-lessons/skill-building/22-rhythm-guitar` }, 619 { name: `Tips & Tricks`, link: `/guitar-lessons/skill-building/11-tips-tricks` }, 620 ], 621 view_all: { name: `View All`, link: `/guitar-lessons/skill-building` } 622 }, 623 { 624 title: `Skill Level`, 625 items: [ 626 { name: `Lessons for Beginners`, link: `/guitar-lessons/beginners` }, 627 { name: `Lessons for Kids`, link: `/guitar-lessons/kids-and-teens` }, 628 { name: `Master Classes`, link: `/guitar-lessons/artists` } 629 ] 630 } 631 ], 632 }, 633 { 634 name: `Songs`, 635 link: `/guitar-lessons/songs`, 636 }, 637 638 { 639 name: `Educators`, 640 link: `/guitar-teachers` 641 }, 642 643 { 644 name: `Learning Paths`, 645 link: `/learning-paths` 646 }, 647 648 { 649 name: `Tools`, 650 showing: false, 651 items: [ 652 { 653 items: [ 654 { name: `Guitar Tools`, link: `/tools`}, 655 { name: `Chord Finder`, link: `/tools/guitar-chord-finder`}, 656 { name: `Guitar Chords`, link: `/tools/guitar-chords`}, 657 { name: `Guitar & Bass Tuner`, link: `/tools/online-guitar-tuner`}, 658 { name: `Metronome`, link: `/tools/free-online-metronome`}, 659 { name: `JamPlay Blog`, link: `https://blog.jamplay.com/`}, 660 { name: `Weekend Warrior`, link: `https://jamplay.com/weekend-warrior`}, 661 // { name: `Libraries & Reports`, link: `/features`}, 662 ] 663 } 664 ] 665 }, 666 { 667 name: `Membership`, 668 showing: false, 669 items: [ 670 { 671 items: [ 672 { name: `Log In`, link: `https://account.jamplay.com/auth/login`}, 673 { name: `Join Free`, link: `/get-free-access`}, 674 { name: `Features`, link: `/features`}, 675 { name: `Redeem Gift Card`, link: `https://truefire.com/redeem/jamplay`}, 676 ] 677 } 678 ] 679 }, 680 ], 681 currentMobileNav: -1, 682 mobileShowing: false 683 }, 684 methods: { 685 toggle(item) { 686 item.showing = !item.showing 687 // this.focus_item = item 688 console.log('mouseleave', item.name, item.showing) 689 } 690 } 691 }) 692 }) 693</script>
693 694 695<!-- end new --> 696 697<div id="pageContent"> 698 699 700<div class="container-fluid text-left pos-relative b-none bg-222 over-hidden"> 701 702 <div class="row d-flex no-gutters w-100 mx-auto mh-1000px mh-xs-auto fs-18-static lh-16 fs-lg-16 fs-md-14 bl-333 br-333" style="width:100%"> 703 704 <div class="w-100 col-sm-12 col-lg-10 bt-sm-666 bg-333 order-last pos-relative content_col"> 705 706 <section class="w-90 w-md-85 w-sm-90 mx-auto"> 707 </section> 708 <style> 709 .jw-icon-display .jw-svg-icon-play { display: none; } 710 .jw-preview.jw-reset { background-size: cover !important; } 711 </style> 712 <div id="guitar-lessons" class="bs5 shell-page"> 713 <div class="container-fluid"> 714 <div class="row hero px-0 pb-5 py-lg-5"> 715 <div class="col-12"> 716 <div class="container items p-lg-5"> 717 <div class="row"> 718 <div class="col-sm-12 col-lg-5 order-2 order-lg-1"> 719 <hero-text :title="hero.title" :span="hero.span" :sub="hero.sub" :copy="hero.copy"></hero-text> 720 </div> 721 <div class="col-sm-12 col-lg-7 order-1 order-lg-2"> 722 <div class="hero-video mb-5 ms-md-5"> 723 <div class="embed-responsive embed-responsive-16by9" data-jw-id="skillsHeroVideo" data-jw-image="https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/hero_video.jpg" data-jw-title="" data-jw-file="https://shell-videos-ecl.jamplay.com/JPLS_Video_Final.mp4"> 724 <div class="embed-responsive-item"><div id="skillsHeroVideo"></div></div> 725</div> 726 727 </div> 728 </div> 729 </div> 730 </div> 731 </div> 732 </div> 733 <section-row :custom="'video-guitar-lessons'"> 734 <div class="row pt-4 pb-3"> 735 <section-header :title="section_headers[0].title" :span="section_headers[0].span" :main="section_headers[0].main"></section-header> 736 </div> 737 <div class="row"> 738 <div class="col-sm-12 col-md-6 col-lg-3" v-for="page in pages"> 739 <div class="page-card mb-5 mb-md-0"> 740 <a :href="page.link"> 741 <img :src="page.img" :alt="page.title"> 742 <div class="ctr-copy p-3"> 743 {{page.title}} <i class="fa fa-chevron-right"></i></a> 744 <p class="mt-3">{{ page.copy }}</p> 745 </div> 746 </a> 747 </div> 748 </div> 749 </div> 750 </section-row> 751<div class="row section-row pb-5 by-the-numbers"> 752 <div class="col-12"> 753 <div class="container"> 754 <div class="row mt-md-5 pb-md-3"> 755 <div class="section-header mt-3 mt-md-4"> 756 <h2 class="mb-3 text-uppercase dark">Jamplay + TrueFire <span>By the Numbers</span></h2><!----> 757 758 <p class="dark text-light"></p> 759 </div> 760 </div> 761 762 <div class="row"> 763 <div class="col-sm-12 col-md-4"> 764 <div class="stat d-flex flex-column justify-content-center align-items-center"> 765 <span class="num">1500+</span> <span class="text">Courses</span> 766 </div> 767 </div> 768 769 <div class="col-sm-12 col-md-4"> 770 <div class="stat d-flex flex-column justify-content-center align-items-center"> 771 <span class="num">70,000+</span> <span class="text">Video Lessons</span> 772 </div> 773 </div> 774 775 <div class="col-sm-12 col-md-4"> 776 <div class="stat d-flex flex-column justify-content-center align-items-center"> 777 <span class="num">400+</span> <span class="text">Educators</span> 778 </div> 779 </div> 780 781 <div class="col-sm-12 col-md-4"> 782 <div class="stat d-flex flex-column justify-content-center align-items-center"> 783 <span class="num">450+</span> <span class="text">Song lessons</span> 784 </div> 785 </div> 786 787 <div class="col-sm-12 col-md-4"> 788 <div class="stat d-flex flex-column justify-content-center align-items-center"> 789 <span class="num">20+</span> <span class="text">Music genres</span> 790 </div> 791 </div> 792 793 <div class="col-sm-12 col-md-4"> 794 <div class="stat d-flex flex-column justify-content-center align-items-center"> 795 <span class="num">3,000,000+</span> <span class="text">Students served</span> 796 </div> 797 </div> 798 </div> 799 </div> 800 </div> 801</div> 802 803 804 805 <section-row :custom="'learning-path'"> 806 <div class="row pt-4 pb-3"> 807 <section-header :title="section_headers[2].title" :span="section_headers[2].span" :sub="section_headers[2].sub" :main="section_headers[2].main"></section-header>
808 </div> 809 <div class="row"> 810 <div class="col-sm-12 col-md-6 col-lg-3" v-for="step in steps"> 811 <div class="ctr-step_card mb-md-0"> 812 <img :src="step.img" :alt="step.title"> 813 <div class="ctr-copy py-4"> 814 <h3 class="text-uppercase">{{ step.title }}</h3> 815 <p>{{ step.copy }}</p> 816 <a v-if="step.link" :href="step.link" class="text-uppercase">Get Started <i class="fa fa-chevron-right"></i></a> 817 </div> 818 </div> 819 </div> 820 </div> 821 </section-row> 822 823 824<div class="row section-row pb-5 learning-path" style="padding-bottom:0px !important"> 825<div style="box-sizing:border-box; nobackground: #873e38; position:relative; background-image: linear-gradient( #873e38 0%, #6b221c 100%) 826"> 827 <div id="apps" class="shell-page w-100"> 828 <div class="w-100"> 829 <div class="container" style="text-align:center"> 830 <h2 class="text-uppercase text-light fw-bold montserrat mb-3">Desktop & Mobile Apps</h2> 831 832 <p class="fs-5 text-light montserrat">Access courses via the TrueFire app for Windows, Mac, Linux, iOS, and Android<img style="max-width:80vw" src="https://d2xkd1fof6iiv9.cloudfront.net/images/learning-tools/apps-download-btm.png"></p> 833 834 <div class="row py-5" style="width: 100%; margin: auto;"> 835 <div style="float: left; width: 50%;color:white; text-align:left"> 836 <h3>Download for Mobile Devices & Tablets</h3> 837 OS Requirements: iOS 10+, Android 4+ 838 </div> 839 840 <div style="float: left; width: 50%;color:white; text-align:left"> 841 <h3>Download for Desktop Computers & Laptops</h3> 842 OS Requirements: Windows 7+, Mac 10.13+ 843 </div> 844 </div> 845 </div> 846 </div> 847 </div> 848</div> 849</div> 850 851 852 853 854 855 856<div class="row section-row pb-0 pb-md-5 bottom_cta"><div class="col-12"><div class="container"><div class="row"><div class="col-sm-12 col-md-8 offset-md-5 col-lg-6 offset-lg-6"><div class="my-5 py-5 p-0 p-md-5"><h2> Start learning <br> <span> guitar online today</span></h2> <p class="pb-3"> With over 1500 guitar courses from 400+ instructors and video guitar lessons tailored to every skill level, music genre, and playing style â we meet you where you are and help you become the musician youâve always wanted to be! 857 </p> <a href="/guitar-and-bass-membership" class=" text-uppercase montserrat jamplay-btn mt-5">View Membership Plans</a></div></div></div></div></div></div> 858 859 860 861 862 863 864 </div> 865 </div> 866
866<script src="/assets/js/vue-components.js"></script>
866 867
867<script> 868 const guitarLessonsPage = new Vue({ 869 name: 'guitar-lessons-page', 870 el: '#guitar-lessons', 871 data: { 872 hero: { 873 title:` Guitar lessons from `, 874 span: ` The World's Top Players`, 875 sub: `For Aspiring Acoustic Or Electric Guitar Players`, 876 copy: ` With 1000s of video guitar lessons by hundreds of artists for every skill level and genre, plus learning tools and progress tracking, our online learning platform helps you become the guitar player you want to be.` 877 }, 878 section_headers: [ 879 { 880 title:` Video Guitar Lessons `, 881 span: ` That Really Work`, 882 main: ` With over 1500 guitar courses from 400+ instructors and video guitar lessons tailored to every skill level, music genre, and playing style â we meet you where you are and help you become the musician youâve always wanted to be!` 883 }, 884 { 885 title:` Jamplay `, 886 span: ` By the Numbers`, 887 main: ` ` 888 }, 889 { 890 title:` YOUR `, 891 span: `LEARNING PATH`, 892 sub: ` BEGINNER TO ADVANCED ALL GENRES & STYLES`, 893 main: ` Unlike traditional "learn quick" teaching products, we provide an ongoing guitar teaching service - not just a one-time product. We are constantly producing new lessons to help you learn to play guitar and will help guide you along the way. We have a staff of guitar players, not businessmen. We offer you a full-service platform for your skill levelâ¦from the absolute beginner to the experienced musician.` 894 } 895 ], 896 pages: [ 897 { 898 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/for-beginners.jpg`, 899 title: `For Beginners`, 900 copy: `Build your foundation based on your learning style`, 901 link: `/guitar-lessons/beginners` 902 }, 903 { 904 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/genres-and-skills.jpg`, 905 title: `Genres & Skills`, 906 copy: `Level up your guitar skills in your favorite styles`, 907 link: `/guitar-lessons/genres` 908 }, 909 { 910 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/learn-songs.jpg`, 911 title: `Learn Songs`, 912 copy: `Hundreds of your favorite songs â including full tab and notation`, 913 link: `/guitar-lessons/songs` 914 }, 915 { 916 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/master-classes.jpg`, 917 title: `Master Classes`, 918 copy: ` Learn from touring artists and studio pros`, 919 link: `/guitar-lessons/artists` 920 }, 921 ], 922 stats: [ 923 { number: '450+', text: `Guitar courses` }, 924 { number: '9,347', text: `Guitar lessons` }, 925 { number: '137', text: `Instructors` }, 926 { number: '383', text: `Song lessons` }, 927 { number: '20+', text: `Music genres` }, 928 { number: '500,000+', text: `Students served` }, 929 ], 930 steps: [ 931 { 932 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/get-started.jpg`, 933 title: `1. Get Started`, 934 copy: `Get instant access to our platform and start playing guitar.`, 935 link: `/guitar-and-bass-membership` 936 }, 937 { 938 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/choose-path.jpg`, 939 title: `2. Choose Path`, 940 copy: `Set up your account with which skills you want to learn or refine.` 941 }, 942 { 943 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/practice.jpg`, 944 title: `3. Practice`, 945 copy: `Get to work, practice your guitar, and let us monitor your progress.` 946 }, 947 { 948 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/reach-goals.jpg`, 949 title: `4. Reach Your Goals`, 950 copy: `Make this your breakout year for playing and reach your potential with guitar lessons that grow with you.` 951 }, 952 ], 953 progress: [ 954 { 955 title: `PROGRESS`, 956 copy: `Your progress is tracked automatically as you watch a guitar lesson, and presented to you in a full Progress Report.`, 957 }, 958 { 959 title: `PLAYBACK`, 960 copy: `Our custom video player gives you the ability to change playback rates to 10%, 25%, 50%, 75%, and 100%.`, 961 }, 962 { 963 title: `LOOPING`, 964 copy: `Loop any section of a video guitar lesson, anytime you need it. This also functions along with slow motion control!`, 965 }, 966 { 967 title: `BOOKMARKS`, 968 copy: ` Save a bookmark at any point in a video guitar lesson, along with the ability to give the bookmark a custom title.<br/><br/> 969 Each guitar lesson is professionally filmed in our studios. All video guitar lessons are offered in high-definition 970 quality and presented with 3-5 cameras depending on the material taught. Our guitar lessons stream to you in 5 971 different qualities, with the additional capability to stream all video guitar lessons to your mobile device.`, 972 }, 973 ], 974 tech_features: [ 975 { id: 1, copy: `Collapse sidebar` }, 976 { id: 2, copy: `Resizable video player` }, 977 { id: 3, copy: `Toggle tab view` }, 978 { id: 4, copy: `Invert colors` }, 979 ], 980 live_lessons: [ 981 { 982 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/live-lessons-1.jpg`, 983 title: `LIVE GUITAR LESSONS`, 984 copy: `<strong>In-Studio, Live Lessons</strong> These focused, task-based workshops 985 include full tablature, interactivity with the instruction, and even homework 986 each week. We are bringing live instruction into the next generation with this 987 platform.`, 988 features: [ 989 ` Structured Lessons in 1080p`, 990 ` Full Tabs and Guided Homework`, 991 ` Interact with the Instructor`, 992 ` Live Video Call-in Capability`, 993 ` Free with a JamPlay Membership` 994 ] 995 }, 996 { 997 img: `https://www-ecs.jamplay.com/client/global/images/shell/guitar-lessons/learning-system/live-lessons-2.jpg`, 998 title: `DAILY OPEN Q&A`, 999 copy: `<strong>Teacher Broadcasts.</strong> Have a question when taking one of our 1000 guitar lessons? Wish you had instant access to a pro teacher at just about anytime? 1001 Our Live Q&A solves this problem with live instruction from our teachers ... 1002 streaming daily.`, 1003 features: [ 1004 ` 8+ hours of live sessions - daily`,
1005 ` Live Help from Pro Instructors`, 1006 ` Regular open mic nights`, 1007 ` Webcam-to-Webcam Capability`, 1008 ` Free with a JamPlay Membership` 1009 ] 1010 } 1011 ] 1012 } 1013 }) 1014 </script>
1014 1015 1016 1017<style> 1018#jamplay_footer h5 { 1019 font-size: 20px !important; 1020 color: #333 !important; 1021} 1022 1023#jamplay_footer .main-links ul li a { 1024 color: #999999; 1025 text-decoration: none; 1026 font-weight: 100; 1027 font-size: 21px; 1028 font-weight: 300 !important; 1029} 1030 1031#jamplay_footer .main-links ul li a { 1032 color: #333; 1033} 1034#jamplay_footer .social_links ul li a { 1035 font-size: 36px !important; 1036 color: #777 !important; 1037 margin-right: 20px; 1038} 1039#jamplay_footer .social_links ul { 1040 display: flex; 1041 list-style: none; 1042} 1043 1044#jamplay_footer .main-links ul li a:hover { 1045 color: rgb(144, 13, 2); 1046} 1047 1048</style> 1049 1050<div id="jamplay_footer" style="color:#333; background:#edecf0"> 1051 <div class="container py-5 px-4 text-left"> 1052 1053 <div style="display:flex !important" class="row main-links d-none d-md-flex mt-3 mb-5"> 1054 <div class="col"> 1055 <h5 class="mb-2 fs-6">Lessons</h5> 1056 1057 <ul> 1058 <li class="mb-1"><a href="/guitar-lessons" class="fs-6">Guitar Lessons</a></li> 1059 1060 <li class="mb-1"><a href="/bass-lessons" class="fs-6">Bass Lessons</a></li> 1061 1062 <li class="mb-1"><a href="/guitar-lessons/beginners" class="fs-6">Beginner Guitar Lessons</a></li> 1063 1064 <li class="mb-1"><a href="/learning-paths" class="fs-6">Learning Paths</a></li> 1065 1066 <li class="mb-1"><a href="/guitar-lessons/genres" class="fs-6">Genres & Styles</a></li> 1067 1068 <li class="mb-1"><a href="/guitar-lessons/skill-building" class="fs-6">Skill Building Lessons</a></li> 1069 1070 <li class="mb-1"><a href="/guitar-lessons/songs" class="fs-6">Learn Songs on Guitar</a></li> 1071 1072 <li class="mb-1"><a href="/guitar-lessons/artists" class="fs-6">Guitar Master Classes</a></li> 1073 </ul> 1074 </div> 1075 1076 <div class="col"> 1077 <h5 class="mb-2 fs-6">Membership</h5> 1078 1079 <ul> 1080 1081 <li class="mb-1"><a href="https://account.jamplay.com/auth/login" class="fs-6">Log In</a></li> 1082 <li class="mb-1"><a href="/get-free-access" class="fs-6">Join Free</a></li> 1083 <li class="mb-1"><a href="/features" class="fs-6">Features</a></li> 1084 <li class="mb-1"><a href="https://truefire.com/redeem/jamplay" class="fs-6">Redeem Gift Card</a></li> 1085 1086 1087 </ul> 1088 </div> 1089 1090 <div class="col"> 1091 <h5 class="mb-2 fs-6">Company</h5> 1092 1093 <ul> 1094 <li class="mb-1"><a href="/membership/jamplay-review" class="fs-6">JamPlay Reviews</a></li> 1095 1096 <li class="mb-1"><a href="https://help.truefire.com/hc/en-us/articles/200326536" class="fs-6">Contact Us</a></li> 1097 1098 <!-- <li class="mb-1"><a href="/company/company-information" class="fs-6">Meet our Staff</a></li> --> 1099 1100 <li class="mb-1"><a href="/guitar-teachers" class="fs-6">Guitar Teachers</a></li> 1101 1102 <li class="mb-1"><a href="https://truefire.com/privacy-policy" class="fs-6">Privacy Policy</a></li> 1103 </ul> 1104 </div> 1105 1106 <div class="col"> 1107 <h5 class="mb-2 fs-6">Resources</h5> 1108 1109 <ul> 1110 <li class="mb-1"><a href="/weekend-warrior" class="fs-6">Weekend Warrior</a></li> 1111 1112 <li class="mb-1"><a href="/tools/guitar-chords" class="fs-6">Guitar Chords</a></li> 1113 1114 <li class="mb-1"><a href="/tools/guitar-chord-finder" class="fs-6">Chord Finder</a></li> 1115 1116 <li class="mb-1"><a href="/tools/online-guitar-tuner" class="fs-6">Guitar Tuner</a></li> 1117 1118 <li class="mb-1"><a href="/tools/free-online-metronome" class="fs-6">Metronome</a></li> 1119 1120 <li class="mb-1"><a href="/tools" class="fs-6">Guitar Tools</a></li> 1121 1122 <li class="mb-1"><a href="/articles" class="fs-6">Articles</a></li> 1123 1124 <li class="mb-1"><a href="https://blog.jamplay.com" class="fs-6">JamPlay Blog</a></li> 1125 1126 <!--<li class="mb-1"><a href="https://jamplay.com/guitar-lessons-in" class="fs-6">Guitar Lesson Directory</a></li>--> 1127 </ul> 1128 </div> 1129 1130 1131 <div class="col social_links"> 1132 <ul> 1133 <li class="mx-2"><a href="https://www.facebook.com/jamplay" class="d-flex "> 1134<i class="fab fa-facebook-f"></i> 1135 </a></li> 1136 1137 <li class="mx-2"><a href="https://twitter.com/jamplay" class="d-flex "> 1138<i class="fab fa-twitter"></i> 1139 </a></li> 1140 1141 <li class="mx-2"><a href="https://www.youtube.com/c/jamplay" class="d-flex "> 1142<i class="fab fa-youtube"></i> 1143 </a></li> 1144 1145 <li class="mx-2"><a href="https://instagram.com/jamplay" class="d-flex "> 1146<i class="fab fa-instagram"></i> 1147 </a></li> 1148 </ul> 1149 </div> 1150 </div> 1151 1152 1153 <div class="btm mt-4 mb-5 contact_info"> 1154 <ul> 1155 <li class="me-4 fs-6">Copyright JamPlay, LLC 2006-2023</li> 1156 1157 <li class="me-4 fs-6">2500 Emerson Ave S St. Petersburg, FL 33712</li> 1158 1159 <li class="me-4 fs-6"><a href="tel:+1877-999-4526">1-800-222-3366</a></li> 1160 1161 <li class="me-4 fs-6">
1161<a href="mailto:[email protected]">[email protected]</a></li> 1162 </ul> 1163 </div> 1164 </div> 1165</div> 1166 1167 1168 1169 1170
1171<script> 1172 1173var ModalYT = { 1174 1175 globalYT: false, 1176 PromoYT: false, 1177 Timeouts: [], 1178 1179 whenReady: function(condition, callback, name) { 1180 this.Timeouts[this.TimeoutCounter] = window.setTimeout(function runner() { 1181 if (condition()) { 1182 callback(); 1183 } else { 1184 window.setTimeout(runner, 50); 1185 } 1186 }, 50); 1187 1188 this.TimeoutCounter++; 1189 }, 1190 1191 configureYT: function() { 1192 1193 // already installed and in the modal 1194 if (typeof ModalYT.PromoYT === 'object') { 1195 ModalYT.PromoYT.playVideo(); 1196 } 1197 1198 else { 1199 1200 ModalYT.whenReady(function(){return ($('#YTpanel').length !== 0);}, function(){ 1201 ModalYT.whenReady(function(){return (typeof installYouTube === 'function');}, function(){ 1202 installYouTube(); 1203 ModalYT.whenReady(function(){return (window.YouTubeReady === true);}, function(){ 1204 ModalYT.addPlayer($('#YTpanel').attr('data-youtube-id')); 1205 }); 1206 }); 1207 }); 1208 } 1209 }, 1210 1211 addPlayer: function(id) { 1212 1213 ModalYT.PromoYT = new window.YT.Player('YTpanel', { 1214 width: '100%', 1215 videoId: id, 1216 host: 'https://www.youtube.com', 1217 playerVars: { 1218 'iv_load_policy': 3, 1219 'showinfo': 0, 1220 'controls': 0, 1221 'rel': 0, 1222 'autoplay':1, 1223 'playsinline':1, 1224 'mute':0, 1225 'start': 0, 1226 'loop': 1, 1227 'enablejsapi':1 1228 }, 1229 events: { 1230 'onReady': function() { 1231 $('#YToffer').on('hidden.bs.modal', function (event) { 1232 ModalYT.PromoYT.pauseVideo(); 1233 }); 1234 } 1235 } 1236 }); 1237 } 1238 1239}; 1240 1241ModalYT.whenReady( 1242 function(){return (typeof window.jQuery === 'function');}, 1243 function(){ 1244 $('#YToffer').on('shown.bs.modal', function (event) { 1245 ModalYT.configureYT(); 1246 if (typeof Root === 'object' && typeof Root.isPlaying === 'boolean' && Root.isPlaying === true) 1247 { 1248 Root.stop(); 1249 Root.contract(); 1250 } 1251 }); 1252 } 1253); 1254 1255</script>
1255 1256 1257<!--
1257<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
1257 -->
1258<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
vendor: 1 bytes, line 1258
1258
1259<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
1259<script src="https://www-ecs.jamplay.com/client/shell/js/echo.js?cache=951321334" type="text/javascript"></script>
vendor: 1 bytes, line 1259
1259
1260<script type="text/javascript">echo.init({offset:600});</script>
1260<script src="/assets/js/app.js?cache="></script>
1260 1261
1262<script> 1263 1264// NO SLEEP TILL. 1265var Brooklyn = { 1266 1267 find: function() { 1268 1269 // VIDEOS CONTAINED ON DEMAND VIA MODAL OPEN 1270 // we load jwplayer assets when the modal is opened 1271 $.each($('[data-lesson-id]'), function(i, element) {Brooklyn.Pop.setup(element);}); 1272 1273 // EMBEDDED VIDEOS ONLY. 1274 // we shall hunt for jw attributes used in html, if we find something.. load jwplayer.js externally then execute 1275 var mp3Players = $('[data-jw-mp3]'); 1276 var videoPlayers = $('[data-jw-id]'); 1277 1278 if (mp3Players.length !== 0 || videoPlayers.length !== 0) { 1279 1280 if (typeof jwplayer !== "function") 1281 { 1282 Page.load('https://www-ecs.jamplay.com/client/global/js/jwplayer/8-21-2/jwplayer.js', 'jws'); 1283 Page.load('https://www-ecs.jamplay.com/client/global/js/jwplayer/8-21-2/jwplayer.compatibility.js', 'jws'); 1284 Page.whenReady(function() {return (typeof jwplayer === "function");}, 1285 function() { 1286 jwplayer.key = 'Zud+UecB8cOv7SBudEUIidoO+FqBcNy3r3upJrxs8zxgBM3E'; 1287 1288 $.each(mp3Players, function(i, element) {Brooklyn.configure.mp3(element);}); 1289 $.each(videoPlayers, function(i, element) {Brooklyn.configure.video(element);}); 1290 } 1291 ); 1292 } 1293 } 1294 }, 1295 1296 // may look redudant, and it kind of is, but we need an external call for modals 1297 // if we want to be effecient. we can't chain methods 100% cleanly. 1298 load: function() { 1299 1300 if (typeof jwplayer !== "function") 1301 { 1302 Page.load('https://www-ecs.jamplay.com/client/global/js/jwplayer/8-21-2/jwplayer.js', 'jws'); 1303 Page.load('https://www-ecs.jamplay.com/client/global/js/jwplayer/8-21-2/jwplayer.compatibility.js', 'jws'); 1304 Page.whenReady(function() {return (typeof jwplayer === "function");}, 1305 function() { 1306 jwplayer.key = 'Zud+UecB8cOv7SBudEUIidoO+FqBcNy3r3upJrxs8zxgBM3E'; 1307 } 1308 ); 1309 } 1310 1311 }, 1312 1313 configure: { 1314 1315 openOnce: 0, 1316 closeOnce: 0, 1317 1318 baseSettings: 1319 { 1320 width: '100%', 1321 controls: true, 1322 displayPlaybackLabel: false, 1323 icons: true, 1324 abouttext: "JamPlay, LLC", 1325 aboutlink: "https://www.jamplay.com/", 1326 sharing: {heading:'Share this JamPlay video.', sites: ['email', 'facebook', 'twitter']}, 1327 ga: {}, // looks wrong, is correct 1328 cast:{ 1329 customAppId:"D01164EC", 1330 loadscreen:"https://www-ecs.jamplay.com/client/global/images/general/chromecast/Chromecast-Load-Screen.png", 1331 endscreen:"https://www-ecs.jamplay.com/client/global/images/general/chromecast/Chromecast-Wrapping-Up.png", 1332 logo:"https://www-ecs.jamplay.com/client/global/images/general/chromecast/Chromecast-JamPlay-Logo2.png", 1333 railcolor:'#a30004' 1334 } 1335 }, 1336 1337 track: function(objID) 1338 { 1339 var PLAYER = jwplayer(objID); 1340 1341 PLAYER.on('play', function(callback) {}); 1342 PLAYER.on('ready', function(callback) {}); 1343 PLAYER.on('playlistItem', function(callback) {}); 1344 PLAYER.on('error', function(callback) { 1345 var fileURL = this.getPlaylistItem().file; 1346 Page.track('JW Player Video', 'Error: '+window.location.pathname, callback.message+' - '+fileURL, 0); 1347 }); 1348 1349 PLAYER.on('setupError', function(callback) { 1350 Page.track('JW Player Video', 'Setup Error: '+window.location.pathname, callback.message, 0); 1351 }); 1352 1353 }, 1354 1355 mp3: function(element) 1356 { 1357 var settings = this.baseSettings; 1358 var _container = $(element).attr('id'); 1359 settings.height = 35; 1360 settings.file = $(element).attr('data-jw-mp3'); 1361 1362 jwplayer(_container).setup(settings); 1363 Brooklyn.configure.track(_container); 1364 }, 1365 1366 video: function(element) 1367 { 1368 var _container = $(element).attr('data-jw-id'); 1369 var _playlist = $(element).attr('data-jw-playlist-id') || false; 1370 var _file = $(element).attr('data-jw-file') || false; 1371 var settings = this.baseSettings; 1372 1373 settings.image = $(element).attr('data-jw-image') || false; 1374 settings.title = $(element).attr('data-jw-title') || false; 1375 settings.autostart = $(element).attr('data-jw-autostart') || false; 1376 settings.aspectratio = '16:9', 1377 settings.stretching = 'uniform'; // 'exactfit', 'fill', 'none' 1378 1379 if (_playlist) 1380 { 1381 var quality = (window.screen.availWidth > 1300) ? '720p' : 'super'; 1382 $.getJSON("/services/playlist/lesson/"+_playlist+"-"+quality, function(data) 1383 { 1384 settings.playlist = Brooklyn.configure.qualityCheck(data); 1385 jwplayer(_container).setup(settings); 1386 Brooklyn.configure.track(_container); 1387 }); 1388 } 1389 1390 if (_file) 1391 { 1392 settings.file = _file; 1393 jwplayer(_container).setup(settings); 1394 Brooklyn.configure.track(_container); 1395 } 1396 1397 1398 // send play to gtm 1399 jwplayer(_container).on('play', e => { 1400 if(dataLayer && e && (e.type == 'play' && e.oldstate == 'buffering' && e.reason == 'playing')){ 1401 let videoName = location.pathname.replace(/\//g, '_') 1402 if(videoName == '_') videoName += 'home' 1403 videoName = _container + videoName 1404 dataLayer.push({ 1405 event: 'Video', 1406 'Video Title': videoName 1407 }) 1408 } 1409 }) 1410 1411 }, 1412 1413 qualityCheck: function(playlist) 1414 { 1415 var tempArr = []; 1416 1417 // make sure a quality is chosen. 1418 // go through qualities and stuff a new array with everything that is false 1419 $.each(playlist[0].sources, function(i, arr) { 1420 if (arr.default == true) { 1421 tempArr.push(arr); 1422 } 1423 }); 1424 1425 if (tempArr.length === 0) 1426 { 1427 playlist[0].sources[0].default = true; 1428 playlist[0].sources[1].default = true; 1429 } 1430 1431 return playlist; 1432 } 1433 }, 1434 1435 Pop: { 1436 1437 setup: function(element) 1438 { 1439 // this thing fires 5 times unless contained! 1440 $('#freeLessonModal').on('shown.bs.modal', function (e) { 1441 1442 Brooklyn.configure.openOnce++; 1443 1444 if (Brooklyn.configure.openOnce === 1) { 1445 $('body').addClass('free-modal-open'); 1446 var lesson_id = $(e.relatedTarget).attr('data-lesson-id'); 1447 Brooklyn.load(); 1448 Page.whenReady(function() {return (typeof jwplayer === "function");}, 1449 function() { 1450 Brooklyn.Pop.fetch(lesson_id); 1451 } 1452 ); 1453 1454 // have to stall this or it gets out of control 1455 window.setTimeout(function() { 1456 Brooklyn.configure.openOnce = 0; 1457 if($('.modal-backdrop').length) $('.modal-backdrop').last().remove() // bandaid for world's most-hated jamplay bug! why does it happen? 1458 }, 1000); 1459 } 1460 }); 1461 1462 1463 // when the video modal is closed, delete the containers and player 1464 $('#freeLessonModal').on('hide.bs.modal', function (e) { 1465 1466 Brooklyn.configure.closeOnce++; 1467 1468 if (Brooklyn.configure.closeOnce === 1) { 1469 1470 jwplayer("newContainer").remove(); 1471 $('body').removeClass('free-modal-open'); 1472 $('#openedModalContainer').remove(); 1473 $('#newContainer').remove(); 1474 $('#tempContainer').show(); 1475 $('#modalContainer').hide(); 1476 1477 1478 1479 // have to give jwplayer some room to cleanup deletion of player 1480 window.setTimeout(function() { 1481 Page.track('JW Player Video', 'Closed Video Player', window.location.pathname, 0); 1482 Brooklyn.configure.closeOnce = 0; 1483 }, 1000); 1484 1485 } 1486 }); 1487 1488 }, 1489 1490 fetch: function(lesson_id) 1491 { 1492 var worked = false;
1493 var uri = 'guitar-lessons'; 1494 1495 $.get({url: '/svc/free_lesson_modal', data:{uri:uri, lesson_id:lesson_id}, success: function(data) { 1496 1497 $('#modalContainer').html(data); 1498 1499 // once the content is loaded onto the page, add content then move to jwplayer embeds 1500 Page.whenReady( 1501 function(){return ($('#lessonModalContainer').length === 1);}, 1502 function(){ 1503 var quality = (window.screen.availWidth > 1300) ? '720p' : 'super'; 1504 var containerDiv = $("<div></div>", {"id":"newContainer"},{"class":"embeddedVid"}); 1505 var classToAdd = $('#openedModalContainer').attr('data-parent-css'); 1506 1507 $('#modalDialog').removeClass('modal-high modal-super modal-720 modal-4k').addClass(classToAdd); 1508 containerDiv.appendTo($('#lessonModalContainer')); 1509 1510 var askMatt = $.getJSON("/services/playlist/lesson/"+lesson_id+"-"+quality, function(data) { 1511 1512 // insert player into new container (newContainer) 1513 var settings = Brooklyn.configure.baseSettings; 1514 settings.aspectratio = '16:9', 1515 settings.stretching = 'uniform'; 1516 settings.playlist = Brooklyn.configure.qualityCheck(data); 1517 1518 jwplayer('newContainer').setup(settings); 1519 Brooklyn.configure.track('newContainer'); 1520 1521 $('#tempContainer').fadeOut(600, function(){ 1522 $('#modalContainer').fadeIn(500); 1523 }); 1524 }); 1525 1526 }); 1527 } 1528 }); 1529 } 1530 } 1531}; 1532 1533 1534var Page = { 1535 1536 Timeouts: [], 1537 TimeoutCounter:0, 1538 1539 whenReady: function(condition, callback, name) { 1540 this.Timeouts[this.TimeoutCounter] = window.setTimeout(function runner() { 1541 if (condition()) { 1542 callback(); 1543 } else { 1544 window.setTimeout(runner, 50); 1545 } 1546 }, 50); 1547 1548 this.TimeoutCounter++; 1549 }, 1550 1551 load: function(url, id) { 1552 var js; 1553 var fjs = document.getElementsByTagName('script')[0]; 1554 if (document.getElementById(id)) {return;} 1555 1556 js = document.createElement('script'); 1557 js.async = true; 1558 js.src = url; 1559 js.id = id; 1560 fjs.parentNode.insertBefore(js, fjs); 1561 }, 1562 1563 init: function() { 1564 1565 $.fn.isInViewport = function() { 1566 var elementTop = $(this).offset().top; 1567 var elementBottom = elementTop + $(this).outerHeight(); 1568 var viewportTop = $(window).scrollTop(); 1569 var viewportBottom = viewportTop + $(window).height(); 1570 return elementBottom > viewportTop && elementTop < viewportBottom; 1571 }; 1572 1573 this.Win.setup(); 1574 1575 if ($('#YTvideoPanel').length != 0) { 1576 YT.setup(); 1577 } 1578 1579 this.Default.setup(); 1580 }, 1581 1582 Default: { 1583 1584 setup: function() { 1585 1586 this.immediate(); // immediate 1587 this.triggered(); // trigger off of html entities 1588 window.setTimeout(Page.Default.delayed, 300); //delay 10 seconds 1589 }, 1590 1591 immediate: function() { 1592 // this.Install.raven(); 1593 }, 1594 1595 triggered: function() { 1596 1597 var twitter = $('.twitter-share-button'); 1598 if (twitter.length !== 0) { 1599 Page.load('https://platform.twitter.com/widgets.js','twitter'); 1600 } 1601 }, 1602 1603 delayed: function() { 1604 1605// Page.Default.Install.intercom(); 1606 1607 }, 1608 1609 Install: { 1610 1611/* 1612 intercom: function() { 1613 Page.load('https://widget.intercom.io/widget/utkymetk', 'intercommssss'); 1614 Page.whenReady(function() {return (typeof Intercom === "function");}, 1615 function() { 1616 Intercom('reattach_activator'); 1617 Intercom('update',{app_id: "utkymetk"}); 1618 } 1619 ); 1620 }, 1621 */ 1622 1623 } 1624 1625 }, 1626 1627 1628 Win: { 1629 DOM: {}, 1630 VAR: {}, 1631 setup: function() { 1632 this.DOM.vidControl= $('#videoControls'); 1633 this.DOM.logo = $('#logoContainer'); 1634 this.DOM.saucy = $('.sauce'); 1635 this.DOM.blipper = $('.blipper'); 1636 this.DOM.fader = $('.fader'); 1637 this.DOM.fadeIN = $('.fadeInScroll'); 1638 this.DOM.bgFadeIn = $('.bgFadeInScrolled'); 1639 this.DOM.rotator = $('.rotater'); 1640 this.DOM.window = $(window); 1641 this.DOM.preOrder = $('#preOrderFixed'); 1642 this.DOM.fixedNav = $('#fixedNav'); 1643 this.DOM.header = $('#headerNav'); 1644 this.DOM.nav = $('#navbarNav'); 1645 this.DOM.buggers = $('.hamburger'); 1646 this.DOM.dropmenu = $('.dropdown'); 1647 this.DOM.collapse = $('.collapse'); 1648 this.DOM.dropdowns = $('.main-nav-dropdown'); 1649 this.DOM.hams = $('.hamburger'); 1650 this.DOM.site = $('#pageContent'); 1651 this.DOM.headUpsell= $('#headUpsell'); 1652 this.DOM.saleSpacer= $('#saleSpacer'); 1653 this.DOM.body = $('body,html'); 1654 1655 this.nav.setup(); 1656 Page.Win.scrolled(); 1657 Page.Win.resize(); 1658 this.DOM.cachedwidth = this.DOM.window.width(); 1659 1660 $.each($('div.lessonRow'), function(i, row){ 1661 $(row).on('mouseover', function(el){$(this).addClass('bg-faded-2 rounded-15');}); 1662 $(row).on('mouseout', function(el){$(this).removeClass('bg-faded-2 rounded-15');}); 1663 }); 1664 1665 this.DOM.window.on('scroll', function(i, win) { 1666 Page.Win.scrolled(); 1667 }); 1668 1669 this.DOM.window.resize(function(i, win) { 1670 Page.Win.resize(); 1671 }); 1672 }, 1673 1674 resize: function() { 1675 this.DOM.windowWidth = this.DOM.window.width(); 1676 1677 // if a sale is live, we have to adjust the header due to fixed nav 1678 if (this.DOM.headUpsell.length != 0) { 1679 this.DOM.saleSpacer.css({'height': this.DOM.headUpsell.height()+'px'}); 1680 } 1681 1682 if (this.DOM.windowWidth > 992) { 1683 this.DOM.header.removeClass('h-100'); 1684 this.DOM.fixedNav.removeClass('h-100'); 1685 1686 if (this.DOM.nav.hasClass('show')) { 1687 this.DOM.nav.collapse('hide'); 1688 } 1689
1690 // auto show the collapsed sidebars 1691 $.each($('.collapse-hide-sm'), function(){ 1692 $(this).collapse('show'); 1693 }); 1694 } 1695 1696 // auto collapse when resizing down, needs refactor down the road 1697 // will auto close a forced open nav tree, not exactly ideal 1698 if (this.DOM.windowWidth < 992) { 1699 1700 if (this.DOM.cachedwidth != this.DOM.windowWidth) { 1701 $.each($('.collapse-hide-sm'), function(){ 1702 if ($(this).hasClass('show')){ 1703 $(this).collapse('hide'); 1704 } 1705 }); 1706 } 1707 } 1708 }, 1709 1710 1711 nav: { 1712 DOM: {}, 1713 1714 setup: function() { 1715 1716 that = Page.Win.DOM; 1717 1718 // all collapsable items 1719 that.collapse.on("show.bs.collapse", function(event){ 1720 $("[data-target='#"+$(this).attr('id')+"']").addClass('is-active'); 1721 }); 1722 1723 that.collapse.on("hide.bs.collapse", function(event){ 1724 $("[data-target='#"+$(this).attr('id')+"']").removeClass('is-active'); 1725 }); 1726 1727 1728 // main header navigation 1729 that.dropmenu.on("show.bs.dropdown", function(event){ 1730 Page.Win.nav.clear(); 1731 $(this).find('.hamburger').addClass('is-active'); 1732 // if ($(event.relatedTarget).hasClass('blur-body')) { 1733 // Page.Win.blurBody(); 1734 // } 1735 }); 1736 1737 // if we are mobile / closed panel, scroll the panel to the target 1738 that.dropmenu.on("shown.bs.dropdown", function(event){ 1739 if (Page.Win.DOM.window.width() < 992) { 1740 $('#navScrollable').animate({ 1741 scrollTop: $(event.relatedTarget).offset().top-60 1742 }, 400); 1743 } 1744 }); 1745 1746 1747 that.dropmenu.on("hide.bs.dropdown", function(event){ 1748 Page.Win.nav.clear(); 1749 }); 1750 1751 // main nav when on mobile / tablets. 1752 that.nav.on("show.bs.collapse", function(){ 1753 that.header.addClass('h-100'); 1754 }); 1755 that.nav.on("shown.bs.collapse", function(){ 1756 that.fixedNav.addClass('h-100'); 1757 }); 1758 that.nav.on("hide.bs.collapse", function(){ 1759 that.header.removeClass('h-100'); 1760 }); 1761 that.nav.on("hidden.bs.collapse", function(){ 1762 that.fixedNav.removeClass('h-100'); 1763 }); 1764 }, 1765 1766 clear: function() { 1767 //Page.Win.unblurBody(); 1768 1769 $.each(that.dropdowns, function() { 1770 $(this).find('.hamburger').removeClass('is-active'); 1771 }); 1772 } 1773 1774 }, 1775 1776 scrolled: function() { 1777 var that = Page.Win.DOM; 1778 var winTop = that.window.scrollTop(); 1779 var trigger = (winTop > 100); 1780 1781 /* blur scroll, not yet... 1782 var lolTop = $('#lol').offset().top; 1783 var round = Math.abs(Math.round(lolTop - winTop) / 40); 1784 round = (round < 5) ? 0 : round; 1785 $('#lol').css({'filter':'blur('+round+'px)'}); 1786 */ 1787 this.DOM.fadeIN.each(function(){ 1788 if ($(this).isInViewport() && !$(this).hasClass('fadeIn')) { 1789 1790 $(this).addClass('fadeIn').removeClass('fadeInScroll'); 1791 } 1792 }); 1793 1794 1795 this.DOM.bgFadeIn.each(function(){ 1796 if ($(this).isInViewport() && !$(this).hasClass('bgFadeIn')) { 1797 $(this).addClass('bgFadeIn'); 1798 } 1799 }); 1800 1801 this.DOM.rotator.each(function(){ 1802 if ($(this).isInViewport() && !$(this).hasClass('rotating')) { 1803 $(this).addClass('rotating'); 1804 } 1805 }); 1806 1807 this.DOM.fader.each(function(){ 1808 if ($(this).isInViewport() && !$(this).hasClass('fadeIn')) { 1809 $(this).addClass('fadeIn'); 1810 } 1811 }); 1812 1813 this.DOM.blipper.each(function(){ 1814 if ($(this).isInViewport() && !$(this).hasClass('blip')) { 1815 $(this).addClass('blip'); 1816 } 1817 }); 1818 1819 this.DOM.saucy.each(function(){ 1820 if ($(this).isInViewport() && !$(this).hasClass('saucey-text')) { 1821 $(this).addClass('saucey-text'); 1822 } 1823 }); 1824 1825 1826 1827 if (trigger) { 1828 if (that.logo.hasClass('w-180px')) { 1829 that.headUpsell.hide(); 1830 that.logo.removeClass("w-180px w-lg-150px w-xxs-125px").addClass("w-150px w-lg-125px w-xs-125px"); 1831 that.fixedNav.removeClass('fs-16-static pt-1 h-125px h-lg-100px h-sm-50px grad-shell-nav-111').addClass('fs-14-static bg-000 bb-444'); // h-150px h-lg-125px h-md-100px grad-gray shadow-medium 1832 if (this.DOM.window.width() < 780 && this.DOM.preOrder.is(':hidden')) { 1833 //this.DOM.preOrder.show(); 1834 } 1835 if (this.DOM.window.width() < 480 && that.fixedNav.find('navButton').hasClass('btn-sm')) { 1836 that.fixedNav.find('.btn-sm').removeClass("btn-sm").addClass('btn-tiny'); 1837 } 1838 } 1839 } 1840 else { 1841 if (that.logo.hasClass('w-150px')) { 1842 that.headUpsell.show(); 1843 that.logo.removeClass("w-150px w-lg-125px w-xs-125px").addClass("w-180px w-lg-150px w-xxs-125px"); 1844 that.fixedNav.removeClass('fs-14-static bg-000 bb-444').addClass('fs-16-static pt-1 h-125px h-lg-100px h-sm-50px grad-shell-nav-111'); 1845 1846 if ($('#nav').hasClass('navbar-dark')) { 1847 that.fixedNav.addClass('h-125px'); 1848 } 1849 1850 if (this.DOM.window.width() > 780 && this.DOM.preOrder.is(':visible')) { 1851 //this.DOM.preOrder.hide(); 1852 } 1853 if (this.DOM.window.width() > 480 && that.fixedNav.find('navButton').hasClass('btn-tiny')) { 1854 that.fixedNav.find('.btn-tiny').removeClass("btn-tiny").addClass('btn-sm'); 1855 } 1856 } 1857 } 1858 }, 1859 1860 scrollToID: function(elementID, focusID) { 1861 var element = $('#'+elementID); 1862 $('html, body').animate({ scrollTop: $(element).offset().top-200}, 1000, function(){ 1863 $('#'+focusID).focus().addClass('blip'); 1864 }); 1865 } 1866 }, 1867 1868 setGAcategory: function(passedIn) 1869 { 1870 /* 1871 used this php based "source name" for a while, but tired of setting it manually 1872 so use the page title (limit to two words), and the pathname 1873 var src = ''; 1874 var cat = (src !== '') ? src : passedIn; 1875 if (cat === '' || !cat || cat == null) { 1876 cat = document.title.split(" ").splice(0,2).join(" ") + ' ('+location.pathname+')'; 1877 } 1878 */ 1879 var category = document.title.split(" ").splice(0,2).join(" ") + ' ('+window.location.pathname+')'; 1880 return category; 1881 }, 1882 1883 track: function(category, action, label,value) { 1884 1885 var cat = this.setGAcategory(category); 1886 1887 if (typeof ga == 'function') { 1888 ga('send', 'event', cat, action, label, value); 1889 } 1890 }, 1891 1892 trackOutbound: function(category, action, label, value, url) { 1893 1894 var cat = this.setGAcategory(category); 1895 1896 if (typeof ga == 'function') { 1897 ga('send', 'event', cat, action, label, value, {'hitCallback': function () {document.location = url;}}); 1898 } 1899 } 1900}; 1901 1902Page.whenReady( 1903 function(){return (typeof window.jQuery === 'function');}, 1904 function(){
1905 Page.init(); 1906 Brooklyn.find(); 1907$('#jamplaynav').removeClass('d-none'); 1908 if($('#headUpsell').length) { 1909 // $('#pageContent').addClass('banner_fix'); 1910 $(window).scroll(() => { 1911 let scroll = $(window).scrollTop() 1912 1913 if(scroll >= 75 ) { 1914 $('#headerNav').addClass('bg-000') 1915 } else { 1916 $('#headerNav').removeClass('bg-000') 1917 } 1918 }) 1919 } 1920 } 1921); 1922 1923</script>
1923 1924 1925<span id="_GUARANTEE_SealSpan"></span> 1926
1927<script> 1928 if($('#headUpsell').length) { 1929 console.log('loading...') 1930 // $('#pageContent').addClass('banner_fix'); 1931 $(window).scroll(() => { 1932 let scroll = $(window).scrollTop() 1933 1934 if(scroll >= 75 ) { 1935 $('#headerNav').addClass('bg-000') 1936 } else { 1937 $('#headerNav').removeClass('bg-000') 1938 } 1939 }) 1940 } 1941</script>
1941 1942 1943</div>
1944<script> 1945 window.fbAsyncInit = function() { 1946 FB.init({ 1947 appId : '244366929406550', 1948 xfbml : true, 1949 version : 'v2.10' 1950 }); 1951 FB.AppEvents.logPageView(); 1952 }; 1953 1954 (function(d, s, id){ 1955 var js, fjs = d.getElementsByTagName(s)[0]; 1956 if (d.getElementById(id)) {return;} 1957 js = d.createElement(s); js.id = id; 1958 js.src = "//connect.facebook.net/en_US/sdk.js"; 1959 fjs.parentNode.insertBefore(js, fjs); 1960 }(document, 'script', 'facebook-jssdk')); 1961</script>
1961<script>
vendor: 395 bytes, lines 1961-1967
1961 1962!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? 1963n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; 1964n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; 1965t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, 1966document,'script','https://connect.facebook.net/en_US/fbevents.js'); 1967fbq('init', '
19671617200725166935
vendor: 30 bytes, lines 1967-1968
1967'); 1968fbq('track', "PageView");
1969</script>
1969 1970<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1617200725166935&ev=PageView&noscript=1" alt="FB" /></noscript>
1970<script type="text/javascript"> 1971/* <![CDATA[ */ 1972var google_conversion_id = 1059081593; 1973var google_custom_params = window.google_tag_params; 1974var google_remarketing_only = true; 1975/* ]]> */ 1976</script>
vendor: 1 bytes, line 1976
1976
1977<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> 1978</script>
1978 1979<noscript> 1980<div style="display:inline;"> 1981<img height="1" width="1" style="border-style:none;" alt="JamPlay" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1059081593/?value=0&guid=ON&script=0"/> 1982</div> 1983</noscript>
1984<script> 1985 window.fbAsyncInit = function() { 1986 FB.init({ 1987 appId : '244366929406550', 1988 xfbml : true, 1989 version : 'v2.10' 1990 }); 1991 FB.AppEvents.logPageView(); 1992 }; 1993 1994 (function(d, s, id){ 1995 var js, fjs = d.getElementsByTagName(s)[0]; 1996 if (d.getElementById(id)) {return;} 1997 js = d.createElement(s); js.id = id; 1998 js.src = "//connect.facebook.net/en_US/sdk.js"; 1999 fjs.parentNode.insertBefore(js, fjs); 2000 }(document, 'script', 'facebook-jssdk')); 2001</script>
2001<script>
vendor: 395 bytes, lines 2001-2007
2001 2002!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? 2003n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; 2004n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; 2005t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, 2006document,'script','https://connect.facebook.net/en_US/fbevents.js'); 2007fbq('init', '
20071617200725166935
vendor: 30 bytes, lines 2007-2008
2007'); 2008fbq('track', "PageView");
2009</script>
2009 2010<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1617200725166935&ev=PageView&noscript=1" alt="FB" /></noscript>
2010<script type="text/javascript"> 2011/* <![CDATA[ */ 2012var google_conversion_id = 1059081593; 2013var google_custom_params = window.google_tag_params; 2014var google_remarketing_only = true; 2015/* ]]> */ 2016</script>
vendor: 1 bytes, line 2016
2016
2017<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"> 2018</script>
2018 2019<noscript> 2020<div style="display:inline;"> 2021<img height="1" width="1" style="border-style:none;" alt="JamPlay" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1059081593/?value=0&guid=ON&script=0"/> 2022</div> 2023</noscript> 2024<!-- Emarsys Go Command / Final Commnand to Execute Emarsys Functionality --> 2025
2026<script type="text/javascript"> 2027 // ScarabQueue.push(['go']); 2028</script>
2028 2029 2030 2031 2032</body> 2033</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.