1<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Fri May 15 2026 21:13:36 GMT+0000 (Coordinated Universal Time) --> 2<html data-wf-page="69fbadd39b9ba02294f67691" data-wf-site="69fb63b81280810ee9d14519" lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>Webflow Design Company | Minnesota | Red Pantherâ¢</title> 6 <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." name="description"> 7 <meta content="Webflow Design Company | Minnesota | Red Pantherâ¢" property="og:title"> 8 <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." property="og:description"> 9 <meta content="https://cdn.prod.website-files.com/69fb63b81280810ee9d14519/6a078c673692c057ffe48f5f_Exploration%201.png" property="og:image"> 10 <meta content="Webflow Design Company | Minnesota | Red Pantherâ¢" property="twitter:title"> 11 <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." property="twitter:description"> 12 <meta property="og:type" content="website"> 13 <meta content="summary_large_image" name="twitter:card"> 14 <meta content="width=device-width, initial-scale=1" name="viewport"> 15 <meta content="Webflow" name="generator"> 16 <link href="home-assets/css/normalize.css" rel="stylesheet" type="text/css"> 17 <link href="home-assets/css/webflow.css" rel="stylesheet" type="text/css"> 18 <link href="home-assets/css/rp-2026.webflow.css" rel="stylesheet" type="text/css"> 19
19<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
19 20 <link href="home-assets/images/favicon.png" rel="shortcut icon" type="image/png"> 21 <link href="home-assets/images/webclip.png" rel="apple-touch-icon"> 22 <!-- Reb2b --> 23
23<script>!function () {var reb2b = window.reb2b = window.reb2b || [];if (reb2b.invoked) return;reb2b.invoked = true;reb2b.methods = ["identify", "collect"];reb2b.factory = function (method) {return function () {var args = Array.prototype.slice.call(arguments);args.unshift(method);reb2b.push(args);return reb2b;};};for (var i = 0; i < reb2b.methods.length; i++) {var key = reb2b.methods[i];reb2b[key] = reb2b.factory(key);}reb2b.load = function (key) {var script = document.createElement("script");script.type = "text/javascript";script.async = true;script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/reb2b.js.gz";var first = document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script, first);};reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("7R6G5YHD3P65");}();</script>
23 24 <!-- Google Tag Manager --> 25
25<script>
vendor: 335 bytes, lines 25-29
25(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 26 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 27 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 28 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 29 })(window,document,'script','dataLayer','
29GTM-NXWH6B9
vendor: 3 bytes, line 29
29');
29</script>
29 30 <!-- End Google Tag Manager --> 31 <!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 31-32
31 32 <script async src="https://www.googletagmanager.com/gtag/js?id=
32G-54MEDCHJB0
vendor: 14 bytes, lines 32-33
32"></script> 33
33<script> 34
vendor: 139 bytes, lines 34-37
34window.dataLayer = window.dataLayer || []; 35 function gtag(){dataLayer.push(arguments);} 36 gtag('js', new Date()); 37 gtag('config', '
37G-54MEDCHJB0
vendor: 6 bytes, lines 37-38
37'); 38
38</script>
38 39</head> 40<body> 41 <!-- Google Tag Manager (noscript) -->
vendor: 70 bytes, lines 41-42
41 42 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
42GTM-NXWH6B9
vendor: 87 bytes, lines 42-44
42" 43 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 44
44<!-- End Google Tag Manager (noscript) --> 45 <div class="page-wrapper u-minh-100vh"> 46 <div data-animation="default" class="nav u-mode-light w-nav" data-easing2="ease" data-easing="ease" data-wf--nav--settings-theme="base" data-collapse="medium" role="banner" data-duration="0" data-doc-height="1"> 47 <div class="u-d-none w-embed"> 48 <style> 49 /* Mobile menu button animation */ 50 .nav-menu_btn.w--open .cc-top { 51 transform: translateY(9px) rotate(45deg); 52 } 53 .nav-menu_btn.w--open .cc-middle { 54 opacity: 0; 55 transform: translateY(0); 56 } 57 .nav-menu_btn.w--open .cc-bottom { 58 transform: translateY(-9px) rotate(-45deg); 59 } 60 /* When a nav dropdown is open.. */ 61 /* ..Rotate narrow */ 62 .nav-link.w--open .nav-dropdown_arrow { 63 transform: rotate(180deg) 64 } 65 /* ..Show overlay on desktop */ 66 @media (min-width: 992px) { 67 .nav-menu:has(.nav-link.w--open) .nav-dropdown_overlay { 68 display: block; 69 } 70 } 71 /* Lock body scroll when mobile nav is open */ 72 body:has( .w-nav-button.w--open) { 73 overflow: hidden; 74 } 75 /* Nav CTA wrapper mode when nav menu hidden */ 76 @media (min-width: 992px) { 77 .nav-menu + .nav-cta-wrapper { 78 margin-left: 0; 79 } 80 } 81</style> 82 </div> 83 <div class="u-d-none w-embed w-script"> 84
84<script> 85 //---- Skip to <main> backup if #main anchor link isn't set ---- 86 document.addEventListener('DOMContentLoaded', () => { 87 const skipLinkEle = document.getElementById('skip-link'); 88 if (!skipLinkEle) return; 89 skipLinkEle.addEventListener('click', handleSkipLink); 90 skipLinkEle.addEventListener('keydown', handleSkipLink); 91 }); 92 function handleSkipLink(e) { 93 if (e.type === 'keydown' && e.key !== 'Enter') return; 94 e.preventDefault(); 95 const target = document.querySelector('main'); 96 target.setAttribute('tabindex', '-1'); 97 target.focus(); 98 } 99</script>
99 100 </div> 101 <a id="skip-link" href="#main" class="nav-skip-link">Skip to Main Content</a> 102 <div class="container cc-nav width"> 103 <a href="/" class="nav-logo_link w-nav-brand"><img src="home-assets/images/red-panther-svg-logo-dark.svg" loading="lazy" alt="" class="im-brand"> 104 <div>Red Panther</div> 105 </a> 106 <div class="u-d-none"> 107 <div class="nav-menu_btn w-nav-button"> 108 <div class="nav-menu_btn-bar cc-top"></div> 109 <div class="nav-menu_btn-bar cc-middle"></div> 110 <div class="nav-menu_btn-bar cc-bottom"></div> 111 </div> 112 </div> 113 <nav role="navigation" class="nav-menu u-d-none w-nav-menu"> 114 <div class="nav-dropdown_overlay"></div> 115 </nav> 116 <div class="nav-cta-wrapper"> 117 <div data-wf--button--button-variant="secondary" class="button w-variant-052759b4-b398-e98d-c28c-099b380d4426"> 118 <div aria-hidden="true" class="btn-text">Book a call</div> 119 <a href="/contact" class="u-link-cover w-inline-block"> 120 <div class="u-sr-only">Book a call</div> 121 </a> 122 </div> 123 </div> 124 </div> 125 </div> 126 <div class="custom-code-component"> 127 <div class="w-embed"> 128 <style> 129 /* Col pad design mode indicator */ 130 html.wf-design-mode .row .col:has( .slot)::before, 131 html.wf-design-mode .row .col:has( .slot)::after { 132 content: ""; 133 position: absolute; 134 top: 0; 135 bottom: 0; 136 width: calc(var(--_layout---grid--gap-main) / 2); 137 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' viewBox='0 0 3 3' fill='none'%3E%3Cg clip-path='url(%23clip0_481_2070)'%3E%3Cpath d='M2.99997 0.970703L0.969971 3.0007H2.02997L2.99997 2.0307V0.970703Z' fill='%23259d4d'/%3E%3Cpath d='M0.97 0L0 0.97V2.03L2.03 0H0.97Z' fill='%23259d4d'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_481_2070'%3E%3Crect width='3' height='3' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-repeat: repeat; 138 background-size: 4px; 139 opacity: 0; 140 pointer-events: none; 141 } 142 html.wf-design-mode .col:has(>.slot)::before { 143 left: 0; 144 } 145 html.wf-design-mode .col:has(>.slot)::after { 146 right: 0; 147 } 148 html.wf-design-mode .col:has(>.slot):hover::before, 149 html.wf-design-mode .col:has(>.slot):hover::after { 150 opacity: 0.5; 151 } 152 /* Remove pointer events on overlays for easier canvas editing */ 153 html.wf-design-mode .u-link-cover { 154 pointer-events: none; 155 } 156 html.wf-design-mode .btn-text { 157 pointer-events: auto; 158 } 159 /* Space tab panes */ 160 html.wf-design-mode .tabs-pane:has(+.tabs-pane) { 161 margin-bottom: var(--_layout---grid--gap-main); 162 } 163</style> 164 </div> 165 <div class="w-embed"> 166 <style> 167 /* Text Selection Color */ 168 ::selection { 169 background: var(--primary--text); 170 color: var(--primary--background); 171 } 172 ::-moz-selection { 173 background: var(--primary--text); 174 color: var(--primary--background); 175 } 176 /* Apply font smoothing */ 177 body { 178 -webkit-font-smoothing: antialiased; 179 -moz-font-smoothing: antialiased; 180 -o-font-smoothing: antialiased; 181 } 182 /* Ensure column stack on increased default browser font size (for accessibility) */ 183 body.font-size-increased .row { 184 container-type: inline-size; 185 } 186 body.font-size-increased { 187 @container (max-width: 40rem) { 188 .col:not([data-wf--grid-column--column-size="shrink"]) { 189 flex: 0 0 100% !important; 190 max-width: 100% !important; 191 } 192 } 193 } 194 /* Rich text modifiers */ 195 .w-richtext>:first-child { 196 margin-top: 0; 197 } 198 /* Line clamp modifiers */ 199 .u-text-clamp-1 { 200 -webkit-line-clamp: 1; 201 -webkit-box-orient: vertical; 202 } 203 .u-text-clamp-2 { 204 -webkit-line-clamp: 2; 205 -webkit-box-orient: vertical; 206 } 207 .u-text-clamp-3 { 208 -webkit-line-clamp: 3; 209 -webkit-box-orient: vertical; 210 } 211 /* Row/col gap modifiers */ 212 .row.row-gap-0 .col { 213 --_layout---grid--gap-main: 0; 214 } 215 .row.row-gap-0:has( .col[class*="contain"]) .col { 216 --_layout---grid--gap-main: 1px; 217 } 218 .row.row-gap-md .col { 219 --_layout---grid--gap-main: var(--_layout---grid--gap-md); 220 } 221 .row.row-gap-sm .col { 222 --_layout---grid--gap-main: var(--_layout---grid--gap-sm); 223 } 224 .row.row-gap-button .col { 225 --_layout---grid--gap-main: var(--_layout---grid--gap-button); 226 } 227 /* Build mode modifiers */
228 .slot .button:not([data-slider]) { 229 align-self: flex-start; 230 } 231 .slot > *:last-child, 232 .slot > .heading-component:last-child *, 233 .slot > .rich-text-component:last-child .rich-text > *:last-child, 234 .rich-text-component.u-mb-0 .rich-text > *:last-child, 235 .eyebrow-component.u-mb-0 .eyebrow { 236 margin-bottom: 0; 237 } 238 .slot.cc-column > .eyebrow-component { 239 align-self: start; 240 } 241 .card:has(>.u-link-cover:focus-visible) { 242 outline: 2px solid var(--primary--accent); 243 outline-offset: 2px; 244 } 245 .section:has( > .container > .slot > [data-wf--image--settings-aspect-ratio="background"]), 246 .page-wrapper:has( [data-wf--image--settings-aspect-ratio="background"]) { 247 background: transparent !important; 248 z-index: 1; 249 } 250 .card > .slot > [data-wf--image--settings-aspect-ratio="background"] { 251 z-index: 0; 252 } 253 .card > .slot > *:not([data-wf--image--settings-aspect-ratio="background"]) { 254 z-index: 1; 255 } 256 /* Load animation FOUS */ 257 html:not(.wf-design-mode) [data-animate="stagger-children"] > * { 258 opacity: 0; 259 visibility: hidden; 260 } 261 .move-this { 262 will-change: transform; /* Hint to the browser for smoother performance */ 263} 264</style> 265 </div> 266 <div class="w-embed w-script"> 267
267<script> 268 // ---- Detect default and mark default font size increase (for accessibility) ---- 269 (function() { 270 function detectFontSizeIncrease() { 271 // Get the root font size in pixels 272 const rootFontSize = parseFloat( 273 getComputedStyle(document.documentElement).fontSize 274 ); 275 // Default is typically 16px 276 const defaultSize = 16; 277 const multiplier = rootFontSize / defaultSize; 278 // Add or remove class based on multiplier 279 if (multiplier >= 2) { 280 document.body.classList.add('font-size-increased'); 281 } else { 282 document.body.classList.remove('font-size-increased'); 283 } 284 } 285 // Run on load 286 detectFontSizeIncrease(); 287 // Watch for changes (when user adjusts font size) 288 const observer = new ResizeObserver(() => { 289 detectFontSizeIncrease(); 290 }); 291 observer.observe(document.documentElement); 292 })(); 293 // ---- Update foot year to current year ---- 294 document.addEventListener('DOMContentLoaded', function() { 295 document.querySelectorAll('[data-footer-year]').forEach(el => { 296 el.textContent = new Date().getFullYear(); 297 }); 298 }); 299</script>
299 300
300<script> 301 // Register the ScrollTrigger plugin 302gsap.registerPlugin(ScrollTrigger); 303// Loop through each element to ensure they trigger based on their own position 304gsap.utils.toArray(".move-this").forEach((element) => { 305 gsap.to(element, { 306 y: -100, // Move up by 100 pixels 307 ease: "none", // Keeps the movement linear with the scroll 308 scrollTrigger: { 309 trigger: element, 310 start: "top bottom", // Animation starts when the top of the element hits the bottom of the viewport 311 end: "bottom top", // Animation ends when the bottom of the element hits the top of the viewport 312 scrub: true, // Links the animation progress to the scrollbar 313 markers: false // Set to true if you need to debug the start/end points 314 } 315 }); 316}); 317</script>
317 318 </div> 319 <div> 320 <div> 321 <div class="w-embed"> 322 <style> 323 /* Set light/dark theme on HTML */ 324 :root { 325 color-scheme: light dark; 326 } 327 @media (prefers-color-scheme: dark) { 328 /* Reset Webflow injected Lightning CSS Polyfill */ 329 --lightningcss-light: ; 330 --lightningcss-dark: initial; 331 } 332 @media (prefers-color-scheme: light) { 333 /* Reset Webflow injected Lightning CSS Polyfill */ 334 --lightningcss-light: initial; 335 --lightningcss-dark: ; 336 /* Canvas modifiers to show the toggle state in Designer */ 337 html.wf-design-mode [data-theme-toggle="checkbox"]::before { 338 transform: translateX(1.5em); 339 } 340 html.wf-design-mode [data-theme-toggle="dark-label"] { 341 display: none; 342 } 343 html.wf-design-mode [data-theme-toggle="light-label"] { 344 display: block; 345 } 346 } 347 /* Toggle switch styling */ 348 [data-theme-toggle="checkbox"]::before { 349 content: ""; 350 position: absolute; 351 width: 1.1em; 352 height: 1.1em; 353 border-radius: 50%; 354 background-color: var(--primary--text); 355 top: 0.2em; 356 left: 0.2em; 357 transition: transform 0.3s ease; 358 } 359 [data-theme-toggle="checkbox"]:checked::before { 360 transform: translateX(1.5em); 361 } 362</style> 363 </div> 364 <div class="w-embed w-script"><!-- Mast Theme Toggle JS --> 365
365<script src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/theme-toggle.min.js"></script>
365 366 </div> 367 </div> 368 <div> 369 <div class="w-embed"> 370 <style> 371 /* Reset apple form styles */ 372 input, textarea, select { 373 -webkit-appearance: none; 374 -moz-appearance: none; 375 appearance: none; border-radius: 0; 376 background-image: none; 377 } 378 /* Adjust input autofill to brand colors */ 379 input:-webkit-autofill, 380 input:-webkit-autofill:focus { 381 background-color: var(--primary--background) !important; 382 color: var(--primary--text) !important; 383 -webkit-box-shadow: 0 0 0 50px var(--primary--background) inset; 384 -webkit-text-fill-color: var(--primary--text); 385 } 386 /* Select input custom arrow */ 387 .input-group:has(.input.cc-select)::after { 388 content: ""; 389 position: absolute; 390 top: 50%; 391 right: 1.5rem; 392 border-top: 2px solid var(--primary--text); 393 border-right: 2px solid var(--primary--text); 394 transform: translateY(-90%) rotate(135deg); 395 width: 0.4rem; 396 height: 0.4rem; 397 pointer-events: none; 398 } 399</style> 400 </div> 401 </div> 402 <div> 403 <div class="w-embed"><!-- Phosphor regular icons --> 404 <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/[email protected]/src/regular/style.css"> 405 </div> 406 </div> 407 <div data-custom-code="marquee"> 408 <div class="w-embed"> 409 <style> 410 /* Marquee */ 411 @keyframes marquee-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } 412 @keyframes marquee-scroll-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } 413 @keyframes marquee-scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } 414 @keyframes marquee-scroll-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } 415 .marquee-component[data-marquee-pause-on-hover="true"]:hover .marquee-group { 416 animation-play-state: paused; 417 } 418 .marquee-component[data-marquee-reverse="false"] .marquee-group { 419 animation: marquee-scroll-left var(--marquee-duration) linear infinite; 420 } 421 .marquee-component[data-marquee-reverse="true"] .marquee-group { 422 animation: marquee-scroll-right var(--marquee-duration) linear infinite; 423 } 424 .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-reverse="false"] .marquee-group { 425 animation: marquee-scroll-down var(--marquee-duration) linear infinite; 426 } 427 .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-reverse="true"] .marquee-group { 428 animation: marquee-scroll-up var(--marquee-duration) linear infinite; 429 } 430 .marquee-component:not([data-wf--marquee--settings-orientation="vertical"])[data-marquee-fade-edges="true"] { 431 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); 432 mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); 433 } 434 .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-fade-edges="true"] { 435 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); 436 mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); 437 } 438</style> 439 </div> 440 </div> 441 <div data-custom-code="accordion"> 442 <div class="w-embed"> 443 <style> 444 /* Accordion */ 445 :root { 446 interpolate-size: allow-keywords; /* To animate accordions */ 447 } 448 details[open] .accordion-icon { 449 transform: rotate(45deg); 450 } 451 details[data-accordion-animating='closing'] > [data-accordion='content'] { 452 display: block; 453 } 454 summary::-webkit-details-marker { 455 display: none; /* Hide older Safari's default disclosure arrow */ 456 } 457</style> 458 </div> 459 <div class="w-embed w-script"><!-- Mast Accordion JS --> 460
460<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@b014a1b/accordion.min.js"></script>
460 461 </div> 462 </div> 463 <div data-custom-code="modal"> 464 <div class="w-embed"> 465 <style> 466 /* Modal */ 467 body:has(dialog[open]) { 468 overflow: hidden !important; 469 } 470 dialog.modal[open] { 471 animation: fadein 400ms ease-out forwards; 472 } 473 dialog.modal::backdrop { 474 background: color-mix(in srgb, var(--_color---neutral--black) 80%, transparent); 475 } 476 @keyframes fadein{ 477 0%{ 478 opacity:0; 479 } 480 100%{ 481 opacity:1; 482 } 483 } 484 dialog::-webkit-scrollbar { 485 width: 10px; 486 } 487 dialog::-webkit-scrollbar-track { 488 border-radius: 10px; 489 background-color: transparent; 490 } 491 dialog::-webkit-scrollbar-thumb { 492 border-radius: 10px; 493 border: 2px solid var(--primary--background); 494 background: var(--primary--text); 495 } 496 dialog::-webkit-scrollbar-thumb:window-inactive { 497 background: var(--primary--text); 498 } 499</style> 500 </div> 501 <div class="w-embed w-script"><!-- Mast Modal JS --> 502
502<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@e3479b3/modal.min.js"></script>
502 503 </div> 504 </div> 505 <div data-custom-code="slider"> 506 <div class="w-embed"><!-- Swiper Slider CSS --> 507 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> 508 <style> 509 /* Slider */ 510 .swiper-button-disabled { 511 opacity: 0.5; 512 pointer-events: none; 513 } 514 [data-slider="component"] { 515 --lg: 3; /* Desktop (992px+) */ 516 --md: 2; /* Tablet (768-991px) */ 517 --sm: 1; /* Mobile Landscape (480-767px) */ 518 --xs: 1; /* Mobile Portrait (0-479px) */ 519 --gap: 24px; /* Spacing between slides */ 520 --current-slides-per-view: var(--xs); /* Current active slides per view (changes with media queries) */ 521 } 522 @media (min-width: 480px) and (max-width: 767px) { 523 [data-slider="component"] {--current-slides-per-view: var(--sm);} 524 } 525 @media (min-width: 768px) and (max-width: 991px) { 526 [data-slider="component"] {--current-slides-per-view: var(--md);} 527 } 528 @media (min-width: 992px) { 529 [data-slider="component"] {--current-slides-per-view: var(--lg);} 530 } 531 [data-slider="component"] .swiper-slide { 532 width: calc((100% - (var(--current-slides-per-view) - 1) * var(--gap)) / var(--current-slides-per-view)) !important; 533 margin-right: var(--gap); 534 } 535 [data-slider-overflow="false"] { 536 overflow: hidden; 537 } 538 [data-slider-overflow="true"] { 539 overflow: visible !important; 540 } 541 [data-slider="component"] .swiper-wrapper:empty { 542 min-height: 300px; 543 } 544 [data-slider="component"] .swiper-wrapper .w-dyn-list, 545 [data-slider="component"] .swiper-wrapper .w-dyn-items, 546 [data-slider="component"] .swiper-wrapper .w-dyn-item { 547 display: contents; 548 } 549</style> 550 </div> 551 <div class="w-embed w-script"><!-- Swiper Slider JS --> 552
552<script defer="" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
552 553 <!-- Mast Slider JS (must be used with Swiper) --> 554
554<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/slider.min.js"></script>
554 555 </div> 556 </div> 557 <div data-custom-code="inline-video"> 558 <div class="w-embed w-script"><!-- Mast Inline Video JS --> 559
559<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/inline-video.min.js"></script>
559 560 </div> 561 </div> 562 <div data-custom-code="tabs"> 563 <div class="w-embed"> 564 <style> 565 /* Tab pane animations */ 566 .tabs-pane { 567 animation: tabsFadeIn 0.5s ease; 568 } 569 @keyframes tabsFadeIn { 570 from { opacity: 0; } 571 to { opacity: 1; } 572 } 573 .tabs-pane[aria-hidden="true"] { 574 display: none; 575 } 576 /* Vertical menu mods */ 577 [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-link { 578 border-bottom: none; 579 border-left: 2px solid var(--primary--border); 580 } 581 [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-link.cc-active { 582 border-color: var(--primary--text); 583 } 584 [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-autoplay-progress { 585 top: 0; 586 right: auto; 587 bottom: 0; 588 left: -2px; 589 width: 2px; 590 height: 0%; 591 } 592 /* Autoplay animation */ 593 .tabs-menu[data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress { 594 animation: autoplayProgress var(--autoplay-duration, 5s) linear forwards; 595 }
596 .tabs-component.autoplay-paused .tabs-menu[data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress { 597 animation-play-state: paused; 598 } 599 @keyframes autoplayProgress { 600 from { width: 0%; } 601 to { width: 100%; } 602 } 603 .tabs-component .tabs-menu[data-wf--tabs-menu--settings-alignment="vertical"][data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress { 604 animation: autoplayProgressVertical var(--autoplay-duration, 5s) linear forwards; 605 } 606 .tabs-component.autoplay-paused .tabs-menu[data-wf--tabs-menu--settings-alignment="vertical"][data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress { 607 animation-play-state: paused; 608 } 609 @keyframes autoplayProgressVertical { 610 from { height: 0%; } 611 to { height: 100%; } 612 } 613 /* Play/pause button */ 614 .tabs-component.autoplay-paused .tabs-autoplay-toggle_pause { 615 display: none; 616 } 617 .tabs-component.autoplay-paused .tabs-autoplay-toggle_play { 618 display: flex; 619 } 620 /* Mobile dropdown */ 621 @media (max-width: 767px) { 622 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle { 623 display: flex; 624 } 625 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle.cc-open { 626 border-radius: var(--_components---button--border-radius) var(--_components---button--border-radius) 0 0; 627 } 628 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle.cc-open .tabs-menu_dropdown-arrow { 629 transform: rotate(180deg); 630 } 631 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-menu { 632 display: none; 633 position: absolute; 634 top: calc(100% - 1px); 635 left: 0; 636 right: 0; 637 background: var(--primary--background); 638 border: 1px solid var(--primary--border); 639 border-radius: 0 0 var(--_components---button--border-radius) var(--_components---button--border-radius); 640 z-index: 10; 641 max-height: 300px; 642 overflow-x: hidden; 643 overflow-y: auto; 644 } 645 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-menu.cc-open { 646 display: block; 647 } 648 .tabs-menu[data-tab-mobile-dropdown="true"] .slot.cc-tabs-menu { 649 display: flex; 650 flex-direction: column; 651 } 652 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-link { 653 border: none; 654 } 655 .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-link.cc-active { 656 background-color: var(--primary--border); 657 } 658 } 659</style> 660 </div> 661 <div class="w-embed w-script"><!-- Mast Tabs JS --> 662
662<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/tabs.min.js"></script>
662 663 </div> 664 </div> 665 </div> 666 </div> 667 <div class="u-d-none w-embed w-script"><!-- GSAP Libraries --> 668
668<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
668 669
669<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
669 670
670<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>
670 671
671<script> 672window.addEventListener("DOMContentLoaded", () => { 673 gsap.registerPlugin(ScrollTrigger); 674 // Small timeout to ensure the DOM and styles are fully painted 675 setTimeout(() => { 676 const items = document.querySelectorAll(".move-this"); 677 items.forEach((el) => { 678 gsap.to(el, { 679 y: -800, // Distance to move up 680 ease: "power1.out", // Adds a smooth deceleration 681 scrollTrigger: { 682 trigger: el, 683 start: "top bottom", 684 end: "bottom top", 685 scrub: 1.5, // The higher the number, the smoother/slower the "catch up" 686 markers: false 687 } 688 }); 689 }); 690 ScrollTrigger.refresh(); 691 }, 100); 692}); 693</script>
693 694 </div> 695 <main class="page-main u-mode-light"> 696 <div class="svg-gradient w-embed"><svg width="100%" height="100%" viewbox="0 0 1920 5845" fill="none" xmlns="http://www.w3.org/2000/svg"> 697 <g filter="url(#filter0_f_403_106)"> 698 <path d="M2451.56 720.2C2299.23 873.367 1979.76 1196.9 1920.56 1265.7C1846.56 1351.7 1501 1893.7 1510 2006.7C1519 2119.7 2157.5 2867.7 2157.5 2938.7C2157.5 3009.7 247.562 2924.2 212.062 2938.7C176.562 2953.2 -212.502 3523.2 -200.502 3564.7C-188.502 3606.2 177.563 3953.7 225.063 4078.2C272.563 4202.7 427.5 4590.2 416 4640.2C406.8 4680.2 79.73 4918.53 40.0634 5124.2" stroke="#EB1B3A" stroke-opacity="0.31" stroke-width="423" stroke-linecap="round"></path> 699 </g> 700 <defs> 701 <filter id="filter0_f_403_106" x="-920.973" y="0.000183105" width="4092.74" height="5844.44" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB"> 702 <feflood flood-opacity="0" result="BackgroundImageFix"> 703 <feblend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"> 704 <fegaussianblur stddeviation="254.35" result="effect1_foregroundBlur_403_106"> 705 </fegaussianblur></feblend></feflood></filter> 706 </defs> 707 </svg></div> 708 <section class="section u-pt-0"> 709 <div class="container"> 710 <div class="hero-content"> 711 <div data-poster-url="videos/red-flare-500k_poster.0000000.jpg" data-video-urls="videos/red-flare-500k_mp4.mp4,videos/red-flare-500k_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover u-d-none w-background-video w-background-video-atom"><video id="be0c9af4-9384-7139-8e7d-a17e0243bbd6-video" autoplay="" loop="" style="background-image:url("home-assets/videos/red-flare-500k_poster.0000000.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"> 712 <source src="home-assets/videos/red-flare-500k_mp4.mp4" data-wf-ignore="true"> 713 <source src="home-assets/videos/red-flare-500k_webm.webm" data-wf-ignore="true"> 714 </video> 715 <div data-wf--image--settings-aspect-ratio="4x3" class="img-component"><img class="u-img-cover" src="home-assets/images/flare-new.avif" width="Auto" alt="" sizes="(max-width: 800px) 100vw, 800px" data-wf--image-fit--image-fit="cover---center" loading="lazy" fetchpriority="" srcset="home-assets/images/flare-new-p-500.avif 500w, home-assets/images/flare-new-p-800.avif 800w, home-assets/images/flare-new-p-1080.avif 1080w, home-assets/images/flare-new.avif 1328w"> 716 <div class="img-component_bg-overlay"></div> 717 </div> 718 </div> 719 <div class="persp-wrap"> 720 <div class="persp-clip"></div> 721 <div class="persp-form"> 722 <div class="bg-vid-hp move-this"> 723 <div data-poster-url="videos/3d_house_test_ultra_poster.0000000.jpg" data-video-urls="videos/3d_house_test_ultra_mp4.mp4,videos/3d_house_test_ultra_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover hp-vid w-background-video w-background-video-atom"><video id="7df3fc11-a237-1ee2-fdf9-df03031ca106-video" autoplay="" loop="" style="background-image:url("home-assets/videos/3d_house_test_ultra_poster.0000000.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"> 724 <source src="home-assets/videos/3d_house_test_ultra_mp4.mp4" data-wf-ignore="true"> 725 <source src="home-assets/videos/3d_house_test_ultra_webm.webm" data-wf-ignore="true"> 726 </video></div> 727 <div class="w-embed"> 728 <style> 729 /* 1. Establish a 3D space on the parent */ 730.bg-vid-hp { 731 perspective: 1000px; 732 overflow: hidden; /* Optional: keeps the movement contained */ 733} 734/* 2. Set the initial state of the child */ 735.u-img-cover { 736 transition: transform 0.5s ease; 737 display: block; /* Ensures transform applies correctly */ 738} 739</style> 740 </div> 741 </div><img src="home-assets/images/Group-79.avif" loading="eager" sizes="(max-width: 1531px) 100v
741w, 1531px" srcset="home-assets/images/Group-79-p-500.avif 500w, home-assets/images/Group-79.avif 1531w" alt="" class="img-flare red-flare"><img src="home-assets/images/blue-flare1.avif" loading="lazy" alt="" class="img-flare hide-land"><img src="home-assets/images/blue-flare1.avif" loading="lazy" alt="" class="img-flare r fade-up hide-land"><img src="home-assets/images/grid-texture1.avif" loading="lazy" sizes="(max-width: 5280px) 100vw, 5280px" srcset="home-assets/images/grid-texture1-p-500.png 500w, home-assets/images/grid-texture1-p-800.png 800w, home-assets/images/grid-texture1.avif 5280w" alt="" class="arb-image fade-up hide-land"><img src="home-assets/images/grid-texture1.avif" loading="lazy" sizes="(max-width: 5280px) 100vw, 5280px" srcset="home-assets/images/grid-texture1-p-500.png 500w, home-assets/images/grid-texture1-p-800.png 800w, home-assets/images/grid-texture1.avif 5280w" alt="" class="arb-image fade-up hide-land"> 742 <div class="w-embed"> 743 <style> 744.fade-up { 745 /* Prevent the mask from tiling/repeating */ 746 -webkit-mask-repeat: no-repeat; 747 mask-repeat: no-repeat; 748 /* Force the mask to span the full width/height */ 749 -webkit-mask-size: 100% 100%; 750 mask-size: 100% 100%; 751 /* Use exact stops with the prefix first */ 752 -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); 753 mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); 754} 755</style> 756 </div> 757 </div> 758 </div> 759 <div class="inner-content-padding"> 760 <div class="row u-mb-md flex-m"> 761 <div class="col col-lg-10"> 762 <div class="eyebrow">Web Design & Development Freelancer</div> 763 <div class="heading-component"> 764 <h1 class="heading-text h1-m">Websites that <em>sell</em>, <em>grow</em>, and are <em>enjoyed</em> by you and your customers</h1> 765 </div> 766 <div class="logo-css u-d-none w-embed"> 767 <style> 768 .space-control { 769 animation: rotateYAxis 150s linear infinite; 770 animation-play-state: paused; 771 transform-style: preserve-3d; 772 } 773 .is-playing { 774 animation-play-state: running !important; 775 } 776 @keyframes rotateYAxis { 777 from { transform: rotateY(0deg); } 778 to { transform: rotateY(360deg); } 779 } 780</style> 781 </div> 782 <div class="logo-js u-d-none w-embed w-script"> 783
783<script> 784window.addEventListener("load", () => { 785 // 1. DUPLICATION 786 const sourceSpace = document.querySelector('.space'); 787 const destination = document.querySelector('.space-clip-top'); 788 if (sourceSpace && destination) { 789 const spaceClone = sourceSpace.cloneNode(true); 790 spaceClone.querySelectorAll('[id]').forEach(el => el.removeAttribute('id')); 791 destination.appendChild(spaceClone); 792 } 793 // 2. DISTRIBUTION & FADE 794 const containers = document.querySelectorAll('.space-control'); 795 containers.forEach((container) => { 796 const style = window.getComputedStyle(container); 797 const duration = parseFloat(style.animationDuration) || 150; 798 const originals = Array.from(container.children).filter(child => 799 child.classList.contains('space-rotate') 800 ); 801 if (originals.length === 0) return; 802 originals.forEach((el) => { 803 container.appendChild(el.cloneNode(true)); 804 }); 805 const allElements = container.querySelectorAll('.space-rotate'); 806 const totalCount = allElements.length; 807 const angleStep = 360 / totalCount; 808 allElements.forEach((el, index) => { 809 // Set rotation on parent 810 let rotationY = index * angleStep; 811 if (rotationY === 0) rotationY = 0.01; 812 el.style.transform = `rotateY(${rotationY}deg)`; 813 // Fade on child (.space-face) 814 const face = el.querySelector('.space-face'); 815 if (face) { 816 const delayOffset = (index / totalCount) * duration; 817 gsap.fromTo(face, 818 { opacity: 1 }, 819 { 820 opacity: 0, 821 duration: duration / 2, 822 repeat: -1, 823 yoyo: true, 824 ease: "sine.inOut", 825 delay: -delayOffset 826 } 827 ); 828 } 829 }); 830 container.classList.add('is-playing'); 831 }); 832 // 3. SCROLL TILT 833 if (window.gsap && window.ScrollTrigger) { 834 gsap.registerPlugin(ScrollTrigger); 835 gsap.fromTo(".space-scroll", 836 { rotationX: -18 }, 837 { 838 rotationX: 12, 839 ease: "none", 840 scrollTrigger: { 841 trigger: ".space-scroll", 842 start: "top bottom", 843 end: "bottom top", 844 scrub: 1 845 } 846 } 847 ); 848 } 849}); 850</script>
850 851 </div> 852 </div> 853 <div class="col col-lg-2 bottom u-mb-md"> 854 <div data-wf--button--button-variant="primary" class="button"> 855 <div aria-hidden="true" class="btn-text">Book a call</div> 856 <a href="/contact" class="u-link-cover w-inline-block"> 857 <div class="u-sr-only">Book a call</div> 858 </a> 859 </div> 860 </div> 861 </div> 862 </div> 863 <div class="space-wrap"> 864 <div class="space-clip-first"> 865 <div class="space"> 866 <div class="space-scroll"> 867 <div class="space-control"> 868 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 869 <div class="space-face"> 870 <div class="link-logo"><img loading="lazy" src="home-assets/images/inkit-logo.svg" alt="" class="image-logo"></div> 871 </div> 872 </div> 873 <div data-wf--logo-carousel---image--variant="sm" class="space-rotate"> 874 <div class="space-face"> 875 <div class="link-logo w-variant-4a6f280b-11ab-1a69-ee52-5db8370487c4"><img loading="lazy" src="home-assets/images/formateria.svg" alt="" class="image-logo"></div> 876 </div> 877 </div> 878 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 879 <div class="space-face"> 880 <div class="link-logo"><img loading="lazy" src="home-assets/images/skedda-logo.svg" alt="" class="image-logo"></div> 881 </div> 882 </div> 883 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 884 <div class="space-face"> 885 <div class="link-logo"><img loading="lazy" src="home-assets/images/all-cares.svg" alt="" class="image-logo"></div> 886 </div> 887 </div> 888 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 889 <div class="space-face"> 890 <div class="link-logo"><img loading="lazy" src="home-assets/images/knoetic.svg" alt="" class="image-logo"></div> 891 </div> 892 </div> 893 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 894 <div class="space-face"> 895 <div class="link-logo"><img loading="lazy" src="home-assets/images/malomo.svg" alt="" class="image-logo"></div> 896 </div> 897 </div> 898 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 899 <div class="space-face"> 900 <div class="link-logo"><img loading="lazy" src="home-assets/images/social-sport.svg" alt="" class="image-logo"></div> 901 </div> 902 </div> 903 <div data-wf--logo-carousel---image--variant="md" class="space-rotate"> 904 <div class="space-face"> 905 <div class="link-logo"><img loading="lazy" src="home-assets/images/songbird.svg" alt="" class="image-logo"></div> 906 </div> 907 </div> 908 <div data-wf--logo-carousel---image--variant="sm" class="space-rotate"> 909 <div class="space-face"> 910 <div class="link-logo w-variant-4a6f280b-11ab-1a69-ee52-5db8370487c4"><img loading="lazy" src="home-assets/images/siro.svg" alt="" class="image-logo"></div> 911 </div> 912 </div> 913 </div> 914 </div> 915 </div> 916 </div> 917 <div class="space-clip-top"></div> 918 </div> 919 </div> 920 </div> 921 </section> 922 <section class="section"> 923 <div class="container"> 924 <div class="slot cc-section"> 925 <div class="large-content-text"> 926 <div id="scroll-text"><strong>Red Panther</strong>⢠is a one man Web Design and Development company run by Karr Fager.<br><br><strong>Services</strong> include full website refreshes, website sprints, month-to-month maintenance, and subscriptions.<br><br><strong>Industries</strong> include B2B, tech, AI, health, contractors, and more.<br><br>100% <strong>happiness guarantee</strong>: you donât pay unless youâre 100% happy. Seriously.<br><br><strong>Authentic</strong> companies only.</div> 927 <div class="w-embed w-script"> 928 <style> 929 #scroll-text .word { 930 display: inline-block; 931 opacity: 0.1; 932 will-change: opacity; 933 } 934</style> 935
935<script> 936 document.addEventListener('DOMContentLoaded', () => { 937 if (!document.getElementById('scroll-text')) return; 938 if (typeof gsap === 'undefined' || typeof SplitType === 'undefined') return; 939 gsap.registerPlugin(ScrollTrigger); 940 document.fonts.ready.then(() => { 941 const split = new SplitType('#scroll-text', { types: 'words' }); 942 gsap.to(split.words, { 943 opacity: 1, 944 ease: 'none', 945 stagger: 0.5, 946 scrollTrigger: { 947 trigger: '#scroll-text', 948 start: 'top 75%', 949 end: 'bottom 35%', 950 scrub: true 951 } 952 }); 953 }); 954 }); 955</script>
955 956 </div> 957 </div> 958 </div> 959 </div> 960 </section> 961 <section class="section"> 962 <div class="container"> 963 <div class="slot cc-section"> 964 <div> 965 <div data-poster-url="videos/cta_callout_final_poster.0000000.jpg" data-video-urls="videos/cta_callout_final_mp4.mp4,videos/cta_callout_final_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover cta-callout w-background-video w-background-video-atom"><video id="3dde3176-aa62-ddec-497d-9c5881b6e3c8-video" autoplay="" loop="" style="background-image:url("home-assets/videos/cta_callout_final_poster.0000000.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"> 966 <source src="home-assets/videos/cta_callout_final_mp4.mp4" data-wf-ignore="true"> 967 <source src="home-assets/videos/cta_callout_final_webm.webm" data-wf-ignore="true"> 968 </video> 969 <div class="cta-callout-bg-over"></div> 970 <div class="cc-width-40 u-position-relative"> 971 <div class="u-d-flex badge-row"> 972 <div class="u-d-flex badge-flex"> 973 <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 289 181" fill="none" xmlns="http://www.w3.org/2000/svg"> 974 <path fill-rule="evenodd" clip-rule="evenodd" d="M288.606 0L196.515 180.027H110.016L148.556 105.416H146.827C115.032 146.69 67.5931 173.861 0 180.027V106.449C0 106.449 43.2409 103.895 68.661 77.169H0V0.00142205H77.1676V63.4706L78.8996 63.4635L110.433 0.00142205H168.793V63.0682L170.525 63.0654L203.241 0H288.606Z" fill="white"></path> 975 </svg></div> 976 <div class="eyebrow badge-eyebrow">Any platform</div> 977 </div> 978 <div class="u-d-flex badge-flex"> 979 <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 84 33" fill="none" xmlns="http://www.w3.org/2000/svg"> 980 <path d="M41.812 0L43.7079 5.83472H49.8428L44.8795 9.44077L46.7754 15.2755L41.812 11.6694L36.8487 15.2755L38.7446 9.44077L33.7812 5.83472H39.9162L41.812 0Z" fill="white"></path> 981 <path d="M58.687 6.3335L60.5829 12.1682H66.7178L61.7545 15.7743L63.6504 21.609L58.687 18.0029L53.7237 21.609L55.6196 15.7743L50.6562 12.1682H56.7912L58.687 6.3335Z" fill="white"></path> 982 <path d="M24.9136 6.3335L26.8094 12.1682H32.9444L27.9811 15.7743L29.8769 21.609L24.9136 18.0029L19.9503 21.609L21.8461 15.7743L16.8828 12.1682H23.0178L24.9136 6.3335Z" fill="white"></path> 983 <path d="M75.5777 16.8887L77.4735 22.7234H83.6085L78.6452 26.3294L80.541 32.1642L75.5777 28.5581L70.6144 32.1642L72.5102 26.3294L67.5469 22.7234H73.6819L75.5777 16.8887Z" fill="white"></path> 984 <path d="M8.0308 16.8887L9.92661 22.7234H16.0616L11.0983 26.3294L12.9941 32.1642L8.0308 28.5581L3.06749 32.1642L4.96331 26.3294L0 22.7234H6.13498L8.0308 16.8887Z" fill="white"></path> 985 </svg></div> 986 <div class="eyebrow badge-eyebrow">4.9/5 Google rating</div> 987 </div> 988 <div class="u-d-flex badge-flex"> 989 <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg"> 990 <mask id="mask0_410_60" style="mask-type:alpha" maskunits="userSpaceOnUse" x="0" y="0" width="63" height="63"> 991 <circle cx="31.5" cy="31.5" r="31.5" fill="white"></circle> 992 </mask> 993 <g mask="url(#mask0_410_60)"> 994 <rect y="32" width="63" height="31" fill="white"></rect> 995 <circle cx="44" cy="15" r="5" fill="white"></circle> 996 <circle cx="19" cy="15" r="5" fill="white"></circle> 997 </g> 998 </svg></div> 999 <div class="eyebrow badge-eyebrow">one man crew</div> 1000 </div> 1001 </div> 1002 <div class="u-mt-sm"> 1003 <h2 class="h2">Start your next website project today</h2> 1004 </div> 1005 <div class="u-mt-md"> 1006 <div data-wf--button--button-variant="primary" class="button"> 1007 <div aria-hidden="true" class="btn-text">Book a call</div> 1008 <a href="/contact" class="u-link-cover w-inline-block"> 1009 <div class="u-sr-only">Book a call</div> 1010 </a> 1011 </div> 1012 </div> 1013 </div> 1014 </div> 1015 </div> 1016 </div> 1017 </div> 1018 </section> 1019 </main> 1020 </div> 1021 <div class="footer-section section u-bg-white"> 1022 <div class="metal-texture"></div> 1023 <div class="metal-texture bot"></div> 1024 <div class="container-2 z-index-10"> 1025 <div class="four-grid footer-grid"> 1026 <div id="w-node-f8a19393-0186-d599-2189-e8278609b894-94f67691"> 1027 <div class="nav-top-flex"> 1028 <div>Latest YouTube Vid</div> 1029 <a href="https://youtube.com/@redpantherio?sub_confirmation=1" class="nav-link-2 w-inline-block"> 1030 <div>Subscribe</div> 1031 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1032 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1033 </svg></div> 1034 </a> 1035 </div> 1036 <div class="yt_vid_container"> 1037 <div class="yt_vid_embed w-embed w-iframe w-script"><iframe class="latestVideoEmbed" vnum="0" cid="UC0sEqnEgQSx5ee0sdYXQMiQ" width="100%" height="100%" frameborder="0" allowfullscreen="" loading="lazy"></iframe> 1038
1038<script> 1039document.addEventListener("DOMContentLoaded", function () { 1040 var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id="); 1041 function loadVideo(iframe) { 1042 fetch(reqURL + iframe.getAttribute('cid')) 1043 .then(response => response.json()) 1044 .then(data => { 1045 var videoNumber = iframe.getAttribute('vnum') ? Number(iframe.getAttribute('vnum')) : 0; 1046 var link = data.items[videoNumber].link; 1047 var title = data.items[videoNumber].title; 1048 var id = link.substr(link.indexOf("=") + 1); 1049 iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=1&autoplay=0"); 1050 iframe.parentElement.querySelector("#video-title").innerText = title; 1051 }) 1052 .catch(error => console.error("Failed to load YouTube video data:", error)); 1053 } 1054 var iframes = document.getElementsByClassName('latestVideoEmbed'); 1055 Array.prototype.forEach.call(iframes, function(iframe) { 1056 loadVideo(iframe); 1057 }); 1058}); 1059</script>
1059 1060 </div> 1061 </div> 1062 </div> 1063 <div id="w-node-f8a19393-0186-d599-2189-e8278609b89e-94f67691"> 1064 <div class="nav-top-flex"> 1065 <div>Coming 2026!</div> 1066 <a href="https://youtube.com/@redpantherio?sub_confirmation=1" class="nav-link-2 w-inline-block"> 1067 <div>Get Notified</div> 1068 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1069 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1070 </svg></div> 1071 </a> 1072 </div> 1073 <div class="yt_vid_container"> 1074 <div class="redesigns-live"> 1075 <div class="h4-2">Live website redesigns </div><img src="home-assets/images/website-redesigns.jpg" loading="lazy" sizes="100vw" srcset="home-assets/images/website-redesigns-p-500.jpg 500w, home-assets/images/website-redesigns.jpg 1313w" alt="" class="u-mt-1 ar-16-9"> 1076 <div class="_2nd-column-loop-wrap"> 1077 <div class="full-text-column loop"> 1078 <div>Coming soon</div> 1079 </div> 1080 <div class="full-text-column loop"> 1081 <div>Coming soon</div> 1082 </div> 1083 </div> 1084 </div> 1085 </div> 1086 </div> 1087 <div id="w-node-f8a19393-0186-d599-2189-e8278609b8b2-94f67691" class="nav-link-wrap"> 1088 <div class="nav-list"> 1089 <div>Company</div> 1090 <div class="links"> 1091 <a href="#" class="nav-link-2 w-inline-block"> 1092 <div>About</div> 1093 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1094 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1095 </svg></div> 1096 </a> 1097 <a href="/portfolio" class="nav-link-2 w-inline-block"> 1098 <div>Portfolio</div> 1099 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1100 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1101 </svg></div> 1102 </a> 1103 <a href="/courses/3d-jumpstarter" class="nav-link-2 w-inline-block"> 1104 <div>Courses</div> 1105 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1106 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1107 </svg></div> 1108 </a> 1109 <a href="/news" class="nav-link-2 w-inline-block"> 1110 <div>News</div> 1111 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1112 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1113 </svg></div> 1114 </a> 1115 <a href="/blog" class="nav-link-2 w-inline-block"> 1116 <div>Blog</div> 1117 <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> 1118 <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path> 1119 </svg></div> 1120 </a> 1121 </div> 1122 </div> 1123 </div> 1124 <div id="w-node-f8a19393-0186-d599-2189-e8278609b8fb-94f67691" class="footer_extra_links u-hflex-left-center u-gap-small"> 1125 <a aria-current='page' aria-label='Homepage' class='footer_brand_link w-inline-block w--current' href='/'><img src="home-assets/images/red-panther-svg-logo-dark.svg" loading="lazy" alt="" class="footer_brand_icon"></a> 1126 <a href="https://webflow.com/@redpanther" class="webflow_link_wrap u-hflex-center-center u-gap-xsmall w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 57 35" fill="none" class="webflow_brand_icon"> 1127 <g clip-path="url(#clip0_1495_2)"> 1128 <path fill-rule="evenodd" clip-rule="evenodd" d="M56.0831 0L38.1877 34.9836H21.3788L28.8681 20.4849H28.532C22.3535 28.5055 13.135 33.7854 0 34.9836V20.6855C0 20.6855 8.40278 20.1892 13.3425 14.9958H0V0.000276334H14.9956V12.3339L15.3321 12.3325L21.4598 0.000276334H32.8005V12.2557L33.1371 12.2551L39.4947 0H56.0831Z" fill="currentColor"></path> 1129 </g> 1130 <defs> 1131 <clippath id="clip0_1495_2"> 1132 <rect width="56.0831" height="35" fill="currentColor"></rect> 1133 </clippath> 1134 </defs> 1135 </svg> 1136 <div>Webflow Certified Partner</div> 1137 </a> 1138 </div> 1139 <div id="w-node-f8a19393-0186-d599-2189-e8278609b907-94f67691" class="footer_small_text u-text-small u-color-faded">Copyright © 2026 Red Panther. Privacy Policy. Red Panther is a Trademark of Red Panther LLC.</div> 1140 </div> 1141 </div> 1142 </div> 1143
1143<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=69fb63b81280810ee9d14519" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1143 1144
1144<script src="home-assets/js/webflow.js" type="text/javascript"></script>
1144 1145
1145<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
1145 1146
1146<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 1146
1146
1147<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dc8e0eb73bb342c8bb2dc0c57d04f600","r":1,"spa":2}' crossorigin="anonymous"></script>
1147 1148</body> 1149</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.