Profile Picture
Akshay Joshi

App Hero Section

App-focused hero section — gradient headline, clear CTA, and side-by-side code showcase. Note: use SPAN tag for the gradient color
Copy component
Download JSON
{"id":6874,"name":"app-hero-section","title":"App Hero Section","date":"2026-03-19 07:27:49","date_formatted":"March 19, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/app-hero-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"aa4d2b","name":"section","parent":0,"children":["46e6ad"],"settings":{"_cssGlobalClasses":["app_hero__section"]},"label":"Hero Section"},{"id":"46e6ad","name":"container","parent":"aa4d2b","children":["03e06b","7c0c70"],"settings":{"_cssGlobalClasses":["app_hero__container"]},"label":"Two Column Container"},{"id":"03e06b","name":"block","parent":"46e6ad","children":["8c2a9a","ea46a7","5a69c7","1eee37","73d697"],"settings":{"_cssGlobalClasses":["app_hero__left"]},"label":"Left Column"},{"id":"8c2a9a","name":"block","parent":"03e06b","children":["99ff56","09eaa0"],"settings":{"_cssGlobalClasses":["app_hero__badge"]},"label":"Badge"},{"id":"99ff56","name":"text-basic","parent":"8c2a9a","children":[],"settings":{"text":">_","tag":"span","_cssGlobalClasses":["app_hero__badge-prefix"]},"label":"Badge Prefix"},{"id":"09eaa0","name":"text-basic","parent":"8c2a9a","children":[],"settings":{"text":"v2.4 \u2014 Now with AI schema generation","tag":"span","_cssGlobalClasses":["app_hero__badge-text"]},"label":"Badge Text"},{"id":"ea46a7","name":"block","parent":"03e06b","children":["ccfcce"],"settings":{"_cssGlobalClasses":["app_hero__heading-wrap"]},"label":"Heading Block"},{"id":"ccfcce","name":"heading","parent":"ea46a7","children":[],"settings":{"text":"APIs that just work","tag":"h1","_cssGlobalClasses":["app_hero__h1","app_hero__h1--dark","app_hero__h1--gradient"]},"label":"H1 Line 1"},{"id":"5a69c7","name":"text-basic","parent":"03e06b","children":[],"settings":{"text":"Ship production-ready APIs in minutes, not months. Beautiful docs, instant SDKs, and monitoring that actually helps.","tag":"p","_cssGlobalClasses":["app_hero__body"]},"label":"Body Text"},{"id":"1eee37","name":"block","parent":"03e06b","children":["e3f7b2","406a0f"],"settings":{"_cssGlobalClasses":["app_hero__buttons"]},"label":"Buttons Row"},{"id":"e3f7b2","name":"button","parent":"1eee37","children":[],"settings":{"text":"\u2192 Start Building \u2014 Free","style":"primary","link":{"type":"external","url":"#"},"_cssGlobalClasses":["app_hero__btn","fsebdo"]},"label":"Primary Button"},{"id":"406a0f","name":"button","parent":"1eee37","children":[],"settings":{"text":"See how it works","style":"secondary","link":{"type":"external","url":"#"},"_cssGlobalClasses":["app_hero__btn","app_hero__btn--ghost"]},"label":"Ghost Button"},{"id":"73d697","name":"block","parent":"03e06b","children":["385e85","dc7e34","943457"],"settings":{"_cssGlobalClasses":["app_hero__trust-bar"]},"label":"Trust Bar"},{"id":"385e85","name":"block","parent":"73d697","children":["7fbf7f","dca7e0"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 1"},{"id":"7fbf7f","name":"icon","parent":"385e85","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"dca7e0","name":"text-basic","parent":"385e85","children":[],"settings":{"text":"No credit card","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]},"label":"Text"},{"id":"dc7e34","name":"block","parent":"73d697","children":["b7379b","6871e2"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 2"},{"id":"b7379b","name":"icon","parent":"dc7e34","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"6871e2","name":"text-basic","parent":"dc7e34","children":[],"settings":{"text":"1,000 free requests\/day","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]}},{"id":"943457","name":"block","parent":"73d697","children":["8c428d","2a7667"],"settings":{"_cssGlobalClasses":["app_hero__trust-item"]},"label":"Trust 3"},{"id":"8c428d","name":"icon","parent":"943457","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["yjdfmy"]},"themeStyles":[]},{"id":"2a7667","name":"text-basic","parent":"943457","children":[],"settings":{"text":"Deploy in seconds","tag":"span","_cssGlobalClasses":["app_hero__trust-text"]}},{"id":"7c0c70","name":"block","parent":"46e6ad","children":["058058","dce1d4"],"settings":{"_cssGlobalClasses":["app_hero__right"]},"label":"Right Column"},{"id":"058058","name":"block","parent":"7c0c70","children":["6498a9","b0883d"],"settings":{"_cssGlobalClasses":["app_hero__code-window"]},"label":"Code Window"},{"id":"6498a9","name":"block","parent":"058058","children":["e004e4","852ccd"],"settings":{"_cssGlobalClasses":["app_hero__code-titlebar"]},"label":"Title Bar"},{"id":"e004e4","name":"block","parent":"6498a9","children":["1f88f3","1accee","cb0a92","8944d9"],"settings":{"_cssGlobalClasses":["app_hero__code-titlebar-left"]},"label":"Titlebar Left"},{"id":"1f88f3","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["lanrmm"]},"themeStyles":[]},{"id":"1accee","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["zzysqo"]},"themeStyles":[]},{"id":"cb0a92","name":"icon","parent":"e004e4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["sszzsi"]},"themeStyles":[]},{"id":"8944d9","name":"text-basic","parent":"e004e4","children":[],"settings":{"text":"index.js","tag":"span","_cssGlobalClasses":["app_hero__code-filename"]},"label":"Filename"},{"id":"852ccd","name":"text-basic","parent":"6498a9","children":[],"settings":{"text":"JAVASCRIPT","tag":"span","_cssGlobalClasses":["app_hero__code-lang"]},"label":"Language Label"},{"id":"b0883d","name":"block","parent":"058058","children":["456350"],"settings":{"_cssGlobalClasses":["app_hero__code-body"]},"label":"Code Body"},{"id":"456350","name":"code","parent":"b0883d","children":[],"settings":{"code":"const forge = require('@apiforge\/sdk');\n\nconst api = forge.create({\n name: 'my-api',\n version: '1.0.0',\n auth: 'api-key',\n});\n","_cssGlobalClasses":["app_hero__code-element"],"prettify":"tomorrow-night"},"label":"Code Content","themeStyles":[]},{"id":"dce1d4","name":"block","parent":"7c0c70","children":["635265","caf41c"],"settings":{"_cssGlobalClasses":["app_hero__deploy-badge"]},"label":"Deploy Badge"},{"id":"635265","name":"icon","parent":"dce1d4","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle"},"_cssGlobalClasses":["sszzsi"]},"themeStyles":[]},{"id":"caf41c","name":"text-basic","parent":"dce1d4","children":[],"settings":{"text":"Deployed to 200+ edge locations","tag":"span","_cssGlobalClasses":["app_hero__deploy-text"]},"label":"Deploy Text"}],"templateType":"section","global_classes":[{"id":"app_hero__section","name":"app_hero__section","settings":{"_background":{"color":{"hex":"#f4f8f6"}},"_padding":{"top":"7%","bottom":"7%","left":"5%","right":"5%"},"_cssCustom":".app_hero__section { overflow: hidden; }"}},{"id":"app_hero__container","name":"app_hero__container","settings":{"_display":"grid","_gridTemplateColumns":"1fr 1fr","_gridGap":"60","_alignItemsGrid":"center","_widthMax":"100%","_width":"1240","_gridTemplateColumns:tablet_portrait":"repeat(1, 1fr)","_gridTemplateColumns:mobile_landscape":"repeat(1, 1fr)"}},{"id":"app_hero__left","name":"app_hero__left","settings":{"_display":"flex","_direction":"column","_rowGap":"28","_alignItems":"flex-start"}},{"id":"app_hero__badge","name":"app_hero__badge","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"8","_background":{"color":{"hex":"#ffffff"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#2dc88c"}},"_padding":{"top":"8","bottom":"8","left":"16","right":"16"},"_width":"max-content"},"modified":1773390761,"user_id":1},{"id":"app_hero__badge-prefix","name":"app_hero__badge-prefix","settings":{"_typography":{"font-family":"monospace","font-size":"13","font-weight":"700","color":{"hex":"#2dc88c"}}}},{"id":"app_hero__badge-text","name":"app_hero__badge-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"500","color":{"hex":"#3d5a52"}}}},{"id":"app_hero__heading-wrap","name":"app_hero__heading-wrap","settings":{"_display":"flex","_direction":"column","_rowGap":"0"}},{"id":"app_hero__h1","name":"app_hero__h1","settings":{"_typography":{"font-family":"Inter","font-size":"82","font-weight":"900","line-height":"1.0"},"_typography:tablet_portrait":{"font-size":"60"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"38"}}},{"id":"app_hero__h1--dark","name":"app_hero__h1--dark","settings":{"_typography":{"color":{"hex":"#0f1c18"}}}},{"id":"app_hero__h1--gradient","name":"app_hero__h1--gradient","settings":{"_cssCustom":".app_hero__h1--gradient span { background: linear-gradient(90deg, #2dc88c 0%, #1ab8d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; position: relative; } .app_hero__h1--gradient::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #2dc88c 0%, #1ab8d4 100%); border-radius: 2px; opacity: 0.5; }"},"modified":1773390761,"user_id":1},{"id":"app_hero__body","name":"app_hero__body","settings":{"_typography":{"font-family":"Inter","font-size":"18","font-weight":"400","line-height":"1.7","color":{"hex":"#4b6058"}},"_typography:mobile_landscape":{"font-size":"16"}}},{"id":"app_hero__buttons","name":"app_hero__buttons","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"20","_direction:mobile_portrait":"column","_rowGap":"12","_alignItems:mobile_portrait":"flex-start"}},{"id":"app_hero__btn","name":"app_global__btn","settings":{"_padding":{"top":"18","bottom":"18","left":"32","right":"32"},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}},"_typography":{"font-family":"Inter","font-size":"16","font-weight":"700"},"_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"8","blur":"28"}}},"modified":1773483218,"user_id":1},{"id":"app_hero__btn--ghost","name":"app_hero__btn--ghost","settings":{"_background":{"color":{"hex":"transparent"}},"_padding":{"top":"18","bottom":"18","left":"4","right":"4"},"_typography":{"font-family":"Inter","font-size":"16","font-weight":"600","color":{"hex":"#0f1c18"}},"_typography:hover":{"color":{"raw":"#2dc88c"}}}},{"id":"app_hero__trust-bar","name":"app_hero__trust-bar","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"24","_flexWrap":"wrap","_rowGap":"8"}},{"id":"app_hero__trust-item","name":"app_hero__trust-item","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"7"}},{"id":"app_hero__trust-text","name":"app_hero__trust-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b8078"}}}},{"id":"app_hero__right","name":"app_hero__right","settings":{"_position":"relative","_display":"flex","_direction":"column","_rowGap":"0"}},{"id":"app_hero__code-window","name":"app_hero__code-window","settings":{"_background":{"color":{"hex":"#161e1b"}},"_border":{"radius":{"top":"16","right":"16","bottom":"16","left":"16"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#ffffff","rgb":"rgba(255,255,255,0.08)"}},"_boxShadow":{"values":{"offsetX":"0","offsetY":"24","blur":"64","spread":"0"},"color":{"hex":"#000000","rgb":"rgba(0,0,0,0.28)"}},"_overflow":"hidden","_cssCustom":".app_hero__code-window { animation: app-hero-float 4s ease-in-out infinite; } @keyframes app-hero-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }"}},{"id":"app_hero__code-titlebar","name":"app_hero__code-titlebar","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_justifyContent":"space-between","_padding":{"top":"14","bottom":"14","left":"18","right":"18"},"_background":{"color":{"hex":"#1a2420"}},"_border":{"width":{"bottom":"1"},"style":"solid","color":{"hex":"#ffffff","rgb":"rgba(255,255,255,0.07)"}}}},{"id":"app_hero__code-titlebar-left","name":"app_hero__code-titlebar-left","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"8"}},{"id":"app_hero__code-filename","name":"app_hero__code-filename","settings":{"_typography":{"font-family":"monospace","font-size":"13","font-weight":"500","color":{"hex":"#9ab4ac"}},"_margin":{"left":"8"}}},{"id":"app_hero__code-lang","name":"app_hero__code-lang","settings":{"_typography":{"font-family":"monospace","font-size":"11","font-weight":"600","letter-spacing":"0.08em","color":{"hex":"#5a7570"}}}},{"id":"app_hero__code-body","name":"app_hero__code-body","settings":{"_padding":{"top":"24","bottom":"24","left":"24","right":"24"}}},{"id":"app_hero__code-element","name":"app_hero__code-element","settings":{"_cssCustom":".app_hero__code-pre { margin: 0; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 14px; line-height: 1.8; color: #c8d8d2; white-space: pre; overflow-x: auto; } .app_hero__code--keyword { color: #2dc88c; font-weight: 600; } .app_hero__code--var { color: #82d9ff; } .app_hero__code--fn { color: #ffd97d; } .app_hero__code--str { color: #ff9e7a; } .app_hero__code--comment { color: #4d6e65; font-style: italic; }"}},{"id":"app_hero__deploy-badge","name":"app_hero__deploy-badge","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"10","_background":{"color":{"hex":"#ffffff"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#e2ebe7"}},"_padding":{"top":"10","bottom":"10","left":"18","right":"18"},"_boxShadow":{"values":{"offsetX":"0","offsetY":"4","blur":"20","spread":"0"},"color":{"hex":"#000000","rgb":"rgba(0,0,0,0.10)"}},"_position":"absolute","_bottom":"-16","_right":"0","_zIndex":"10","_cssCustom":".app_hero__deploy-badge { animation: app-hero-badge-in 0.7s ease 0.4s both; } @keyframes app-hero-badge-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }"}},{"id":"app_hero__deploy-text","name":"app_hero__deploy-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"700","color":{"hex":"#0f1c18"}}}},{"id":"lanrmm","name":"app_hero__traffic-dot--red-icon","settings":{"iconColor":{"raw":"#EE5C55"},"iconSize":"13"}},{"id":"zzysqo","name":"app_hero__traffic-dot--yellow-icon","settings":{"iconSize":"13","iconColor":{"raw":"#F8BD45"}}},{"id":"sszzsi","name":"app_hero__traffic-dot--green-icon","settings":{"iconSize":"13","iconColor":{"raw":"#5dc942"}}},{"id":"yjdfmy","name":"app_hero__trust-dot_icon","settings":{"iconSize":"8","iconColor":{"raw":"#2dc88c"}},"modified":1773394305,"user_id":1},{"id":"fsebdo","name":"app_btn--green","settings":{"_boxShadow:hover":{"values":{"offsetY":"8","blur":"28","offsetX":"0"},"color":{"raw":"#25b07c"}},"_background":{"color":{"raw":"#2dc88c"}},"_typography":{"color":{"raw":"#ffffff"}},"_transform:hover":{"translateY":"-2px"},"_transformOrigin:hover":"transform 0.25s ease"},"modified":1773483218,"user_id":1}]}

Similar components

Profile Picture
Akshay Joshi

Product Hunt – Hero section

Section containing a centered layout with a headline, CTA, and email signup form.
View now
Copy now
{"id":6852,"name":"ph-hero-section-2","title":"PH Hero Section","date":"2026-03-14 17:20:13","date_formatted":"March 14, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/ph-hero-section-2\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"9e2e93","name":"section","parent":0,"children":["5f249a"],"settings":{"_cssGlobalClasses":["hunt__section"]},"label":"PH Hero Section"},{"id":"5f249a","name":"container","parent":"9e2e93","children":["ff8e6f","bab1bf","d9f8dd","98f1b0","5859d8"],"settings":{"_cssGlobalClasses":["hunt__inner"]},"label":"Inner Container"},{"id":"ff8e6f","name":"block","parent":"5f249a","children":["2a53f3","39a389","e844c7"],"settings":{"_cssGlobalClasses":["hunt__badge","hunt__anim-fadein-down","hunt__anim-delay-0"],"_cssTransition":"ease .3s"},"label":"Announcement Badge"},{"id":"2a53f3","name":"icon","parent":"ff8e6f","children":[],"settings":{"icon":{"library":"fontawesomeRegular","icon":"far fa-star"},"_cssGlobalClasses":["hunt__badge-icon"]},"label":"Star Icon","themeStyles":[]},{"id":"39a389","name":"text-basic","parent":"ff8e6f","children":[],"settings":{"text":"We're live on Product Hunt \u2014 Vote for us!","tag":"span","_cssGlobalClasses":["hunt__badge-text"]},"label":"Badge Text"},{"id":"e844c7","name":"icon","parent":"ff8e6f","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-arrow-right"},"_cssGlobalClasses":["hunt__badge-arrow"]},"label":"Badge Arrow","themeStyles":[]},{"id":"bab1bf","name":"heading","parent":"5f249a","children":[],"settings":{"text":"The launch page that gets you to #1 on Product Hunt","tag":"h1","_cssGlobalClasses":["hunt__heading","hunt__anim-fadein-up","hunt__anim-delay-150"]},"label":"Main Heading"},{"id":"d9f8dd","name":"text-basic","parent":"5f249a","children":[],"settings":{"_cssGlobalClasses":["hunt__subtext","hunt__anim-fadein-up","hunt__anim-delay-250"],"text":"Referral waitlist, countdown timer, demo embed, and auto-switching voting CTA. Everything founders need in one page.","tag":"p"},"label":"Subtext"},{"id":"98f1b0","name":"form","parent":"5f249a","children":[],"settings":{"_cssGlobalClasses":["hunt__form-row","hunt__anim-fadein-up","hunt__anim-delay-350"],"_cssTransition":"ease .3s","fields":[{"id":"673c40","type":"email","label":"","placeholder":"Enter your email","required":"1","width":"80"}],"submitButton":{"text":"Join the Waitlist","style":"primary"},"actions":["email"]},"label":"Email Form","themeStyles":[]},{"id":"5859d8","name":"block","parent":"5f249a","children":["9eaee8","444f23"],"settings":{"_cssGlobalClasses":["hunt__proof-row","hunt__anim-fadein-up","hunt__anim-delay-450"]},"label":"Social Proof"},{"id":"9eaee8","name":"block","parent":"5859d8","children":["251475","fdcdd7","77ae4a","9ed64c"],"settings":{"_cssGlobalClasses":["hunt__avatars"]},"label":"Avatars"},{"id":"251475","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"A","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#a78bfa"}}},"label":"Avatar A"},{"id":"fdcdd7","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"B","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#FF6154"}}},"label":"Avatar B"},{"id":"77ae4a","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"C","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#34d399"}}},"label":"Avatar C"},{"id":"9ed64c","name":"text-basic","parent":"9eaee8","children":[],"settings":{"text":"D","tag":"span","_cssGlobalClasses":["hunt__avatar"],"_background":{"color":{"hex":"#818cf8"}}},"label":"Avatar D"},{"id":"444f23","name":"text-basic","parent":"5859d8","children":[],"settings":{"text":"2,400+ founders already joined","tag":"span","_cssGlobalClasses":["hunt__proof-text"]},"label":"Proof Text"}],"templateType":"section","global_classes":[{"id":"hunt__section","name":"hunt__section","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"100","bottom":"100","left":"24","right":"24"},"_padding:mobile_landscape":{"top":"60","bottom":"60"}},"modified":1773493462,"user_id":1},{"id":"hunt__inner","name":"hunt__inner","settings":{"_display":"flex","_direction":"column","_alignItems":"center","_rowGap":"28","_widthMax":"100%","_width":"1280","_textAlign":"center"},"modified":1773479545,"user_id":1},{"id":"hunt__badge","name":"hunt__badge","settings":{"_display":"inline-flex","_direction":"row","_alignItems":"center","_columnGap":"8","_background":{"color":{"hex":"#FF6154"}},"_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"}},"_padding":{"top":"12","bottom":"12","left":"22","right":"22"},"_transition":"all 0.2s ease","_background:hover":{"color":{"hex":"#e84f42"}},"_transform:hover":"translateY(-2px)","_boxShadow:hover":{"values":{"offsetX":"0","offsetY":"8","blur":"20","spread":"0"},"color":{"hex":"#FF6154","rgb":"rgba(255,97,84,0.35)"}},"_width":"max-content"},"modified":1773429916,"user_id":1},{"id":"hunt__badge-icon","name":"hunt__badge-icon","settings":{"_typography":{"font-size":"14","color":{"hex":"#ffffff"}}}},{"id":"hunt__badge-text","name":"hunt__badge-text","settings":{"_typography":{"font-family":"Inter","font-size":"15","font-weight":"600","color":{"hex":"#ffffff"}}}},{"id":"hunt__badge-arrow","name":"hunt__badge-arrow","settings":{"_typography":{"font-size":"12","color":{"hex":"#ffffff"}}}},{"id":"hunt__heading","name":"hunt__h1","settings":{"_typography":{"font-family":"Inter","font-size":"72","font-weight":"900","line-height":"1.1","text-align":"center","color":{"hex":"#1a1a2e"}},"_typography:tablet_portrait":{"font-size":"52"},"_typography:mobile_landscape":{"font-size":"38"},"_typography:mobile_portrait":{"font-size":"30"},"_width":"800","_widthMax":"100%","_cssCustom":".hunt__h1 .hunt-rank {\n color: #5B4FE8;\n font-weight: 900;\n}\n\n.hunt__h1 .hunt-brand {\n background: linear-gradient(135deg, #FF6154 0%, #ff9a3c 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: inline-block;\n font-weight: 900;\n}"},"modified":1773508629,"user_id":1},{"id":"hunt__subtext","name":"hunt__subtext","settings":{"_typography":{"font-family":"Inter","font-size":"18","font-weight":"400","line-height":"1.75","text-align":"center","color":{"hex":"#6b7280"}},"_widthMax":"580","_typography:mobile_landscape":{"font-size":"16"}}},{"id":"hunt__form-row","name":"hunt__form-row","settings":{"_display":"flex","_direction":"row","_alignItems":"stretch","_transition":"border-color 0.2s ease","_direction:mobile_portrait":"column","_width":"600","_widthMax":"100%","submitButtonWidth":"20","submitButtonBackgroundColor":{"raw":"#5B4FE8"},"submitButtonTypography":{"color":{"raw":"#fff"},"line-height":"1.8"},"submitButtonBorder":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"}},"fieldMargin":{"right":"20","bottom":"0"},"fieldBorder":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"},"width":{"top":"1","bottom":"1","right":"1","left":"1"},"style":"solid"},"_overflow":"hidden"},"modified":1773486337,"user_id":1},{"id":"hunt__proof-row","name":"hunt__proof-row","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_columnGap":"12","_justifyContent":"center"}},{"id":"hunt__avatars","name":"hunt__avatars","settings":{"_display":"flex","_direction":"row","_alignItems":"center","_cssCustom":".hunt__avatars .hunt__avatar + .hunt__avatar { margin-left: -10px; }","_width":"max-content"}},{"id":"hunt__avatar","name":"hunt__avatar","settings":{"_width":"36","_height":"36","_border":{"radius":{"top":"999","right":"999","bottom":"999","left":"999"},"width":{"top":"2","right":"2","bottom":"2","left":"2"},"style":"solid","color":{"hex":"#ffffff"}},"_display":"flex","_alignItems":"center","_justifyContent":"center","_typography":{"font-family":"Inter","font-size":"12","font-weight":"800","color":{"hex":"#ffffff"}}}},{"id":"hunt__proof-text","name":"hunt__proof-text","settings":{"_typography":{"font-family":"Inter","font-size":"14","font-weight":"400","color":{"hex":"#6b7280"}}}},{"id":"hunt__anim-fadein-down","name":"hunt__anim-fadein-down","settings":{"_interactions":[{"id":"6bb309","trigger":"enterView","action":"startAnimation","animationType":"fadeInDown","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__anim-fadein-up","name":"hunt__anim-fadein-up","settings":{"_interactions":[{"id":"192518","trigger":"enterView","action":"startAnimation","animationType":"fadeInUp","animationDuration":"0.6s","animationDelay":"0s","target":"self","runOnce":true}]}},{"id":"hunt__anim-delay-0","name":"hunt__anim-delay-0","settings":{"_cssCustom":".hunt__anim-delay-0 { animation-delay: 0s !important; }"}},{"id":"hunt__anim-delay-150","name":"hunt__anim-delay-150","settings":{"_cssCustom":".hunt__anim-delay-150 { animation-delay: 0.15s !important; }"}},{"id":"hunt__anim-delay-250","name":"hunt__anim-delay-250","settings":{"_cssCustom":".hunt__anim-delay-250 { animation-delay: 0.25s !important; }"}},{"id":"hunt__anim-delay-350","name":"hunt__anim-delay-350","settings":{"_cssCustom":".hunt__anim-delay-350 { animation-delay: 0.35s !important; }"}},{"id":"hunt__anim-delay-450","name":"hunt__anim-delay-450","settings":{"_cssCustom":".hunt__anim-delay-450 { animation-delay: 0.45s !important; }"}}]}
Profile Picture
Akshay Joshi

Horizontal Scroll Section

Horizontal Scroll Section with Large Typography
View now
Copy now
{"id":6639,"name":"horizontal-scroll-section","title":"Horizontal Scroll Section","date":"2026-02-27 16:29:55","date_formatted":"February 27, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/horizontal-scroll-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"28d958","name":"section","parent":0,"children":["8cebab","78819a"],"settings":{"_cssGlobalClasses":["bjujmn","gpxpfl"]},"label":"Horizontal Scroll Section"},{"id":"8cebab","name":"container","parent":"28d958","children":["61c168"],"settings":{"_cssGlobalClasses":["iqzvlt","rdhsix"]}},{"id":"61c168","name":"slider-nested","parent":"8cebab","children":["b770ab","48f144","a667af"],"settings":{"_cssGlobalClasses":["zubgon","xjrggh"],"height":"100vh","type":"fade","speed":"400"}},{"id":"b770ab","name":"block","parent":"61c168","children":["786fac","47444c"],"settings":{"_background":{"image":{"id":6421,"filename":"64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/64e31f2ece4592ec1e01d62d_1665158307-studio-rhe-hero-1024x608.webp"},"position":"center center","size":"cover","repeat":"no-repeat"},"_cssGlobalClasses":["vgtbro","cnodjs"]},"label":"Slide 1"},{"id":"786fac","name":"text-basic","parent":"b770ab","children":[],"settings":{"text":"Orange fruit beer combines the freshness of oranges with the smoothness of beer, making it a flavorful and refreshing beverage choice, especially in warm weather.","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}}}},{"id":"47444c","name":"heading","parent":"b770ab","children":[],"settings":{"text":"Popular in wheat beers","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2"}},{"id":"48f144","name":"block","parent":"61c168","children":["1241bb","57435b"],"settings":{"_background":{"image":{"id":5998,"filename":"2151059680.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/2151059680.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/2151059680-683x1024.webp"}},"_cssGlobalClasses":["vgtbro","cnodjs"]},"label":"Slide 2"},{"id":"1241bb","name":"text-basic","parent":"48f144","children":[],"settings":{"text":"Enjoyed for its smooth and refreshing flavor Often paired with light foods like salads, seafood, and snacks","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}}}},{"id":"57435b","name":"heading","parent":"48f144","children":[],"settings":{"text":"Alcohol content: Usually low to moderate","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2"}},{"id":"a667af","name":"block","parent":"61c168","children":["c215c5","2f8e2e"],"settings":{"_cssGlobalClasses":["vgtbro","cnodjs"],"_direction":"row","_alignItems":"center"},"label":"Slide 3"},{"id":"c215c5","name":"block","parent":"a667af","children":["cb9914","6d4b9d"],"settings":{"_columnGap":"20","_rowGap":"20"}},{"id":"cb9914","name":"text-basic","parent":"c215c5","children":[],"settings":{"text":"Orange adds a citrus flavor that makes the beer refreshing. It balances bitterness from hops with natural sweetness and acidity.","_cssGlobalClasses":["whmvzp","kggfcm","ukckli"],"_typography":{"color":{"hex":"#000000","id":"ymdprl","name":"Color #2"}}}},{"id":"6d4b9d","name":"heading","parent":"c215c5","children":[],"settings":{"text":"Enjoyed for its refreshing flavor","_cssGlobalClasses":["xxlgvw","toegdg"],"tag":"h2","_typography":{"color":{"hex":"#000000","id":"ymdprl","name":"Color #2"}}}},{"id":"2f8e2e","name":"block","parent":"a667af","children":["12f3f7"],"settings":{"_cssGlobalClasses":["dkdmcr"]}},{"id":"12f3f7","name":"block","parent":"2f8e2e","children":["414717","e8e894"],"settings":{"_cssGlobalClasses":["smvlsp"]}},{"id":"414717","name":"image","parent":"12f3f7","children":[],"settings":{"image":{"id":5995,"filename":"324.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/324.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/324.webp"},"_cssGlobalClasses":["crquae"]}},{"id":"e8e894","name":"image","parent":"12f3f7","children":[],"settings":{"image":{"id":6019,"filename":"maximalist-interior-design-scaled.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/maximalist-interior-design-scaled.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/maximalist-interior-design-740x1024.webp"},"_cssGlobalClasses":["crquae"]}},{"id":"78819a","name":"code","parent":"28d958","children":[],"settings":{"executeCode":true,"cssCode":"\/* 1. Force the slides into a horizontal line *\/\n.animated_horizontal-scroll-slider .splide__list {\n display: flex !important;\n flex-direction: row !important;\n flex-wrap: nowrap !important;\n \/* We remove max-content and use a calculation for safety *\/\n width: auto !important; \n \/* Critical: Stop Splide from trying to 'fade' or stack slides *\/\n transform-style: flat !important;\n}\n\n\/* 2. Force every slide to be visible and positioned correctly *\/\n.animated_horizontal-scroll-slide {\n width: 100vw !important;\n flex: 0 0 100vw !important; \n max-width: 100vw !important;\n \/* FIX: Override Splide Fade transform *\/\n transform: none !important; \n opacity: 1 !important;\n visibility: visible !important;\n position: relative !important;\n left: auto !important;\n top: auto !important;\n}\n\n\/* 3. Layout Setup *\/\n.animated_horizontal-scroll-section {\n height: 400vh !important;\n overflow: visible !important;\n}\n\n.animated_horizontal-scroll-container {\n position: sticky;\n top: 0;\n height: 100vh;\n width: 100%;\n overflow: hidden !important;\n}","javascriptCode":"document.addEventListener(\"DOMContentLoaded\", function () {\n const section = document.querySelector(\".animated_horizontal-scroll-section\");\n const list = document.querySelector(\".animated_horizontal-scroll-slider .splide__list\");\n const slides = document.querySelectorAll(\".animated_horizontal-scroll-slide\");\n\n if (!section || !list || slides.length === 0) return;\n\n function sync() {\n const rect = section.getBoundingClientRect();\n const windowHeight = window.innerHeight;\n\n \/\/ Exit if not visible\n if (rect.bottom windowHeight) return;\n\n const totalScrollable = rect.height - windowHeight;\n if (totalScrollable {\n sync();\n ticking = false;\n });\n ticking = true;\n }\n }\n\n window.addEventListener(\"scroll\", onScroll, { passive: true });\n window.addEventListener(\"resize\", sync);\n window.addEventListener(\"load\", sync);\n\n sync();\n});"}}],"templateType":"section","global_classes":[{"id":"gpxpfl","name":"animated_horizontal-scroll-section","settings":{"_width":"100%","_position":"relative"}},{"id":"rdhsix","name":"animated_horizontal-scroll-container","settings":{"_width":"100%","_position":"sticky","_top":"0"}},{"id":"xjrggh","name":"animated_horizontal-scroll-slider","settings":{"_width":"100%","_widthMax":"100%"},"modified":1771599000,"user_id":1},{"id":"cnodjs","name":"animated_horizontal-scroll-slide","settings":{"_alignItems":"flex-start","_justifyContent":"space-around","_padding":{"top":"7%","bottom":"7%","right":"7%","left":"7%"},"_columnGap:tablet_portrait":"20","_rowGap:tablet_portrait":"20"}},{"id":"kggfcm","name":"animated2__text--big","settings":{"_typography":{"font-size":"28","text-align":"left","line-height":"1.3"},"_typography:tablet_portrait":{"font-size":"26"},"_typography:mobile_landscape":{"font-size":"24"},"_typography:mobile_portrait":{"font-size":"23"}}},{"id":"toegdg","name":"animated2__h2--big","settings":{"_typography":{"font-size":"100","font-family":"Autour One","color":{"hex":"#ffffff","id":"csrxpa","name":"Color #1"}},"_typography:tablet_portrait":{"font-size":"65"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"36"}},"modified":1772209646,"user_id":1},{"id":"dkdmcr","name":"animated_horizontal-scroll-slide-content","settings":{"_direction":"column","_columnGap":"20","_rowGap":"20"},"modified":1772010300,"user_id":1},{"id":"smvlsp","name":"animated_horizontal-scroll-slide-img--block","settings":{"_direction":"row","_columnGap":"20","_rowGap":"20","_padding":{"left":"40"}},"modified":1772205129,"user_id":1},{"id":"crquae","name":"animated_horizontal-scroll-slide--content-img","settings":{"_widthMax":"250px","_width":"100%","_objectFit":"cover"}},{"id":"ukckli","name":"animated2__width--m","settings":{"_widthMax":"50%","_widthMax:mobile_landscape":"70%","_widthMax:mobile_portrait":"100%"}}]}
Profile Picture
Akshay Joshi

Dual Vertical Opposite Scroll

Two-Column Section with Opposing Vertical Scroll (Image + Content)
View now
Copy now
{"id":6638,"name":"dual-vertical-opposite-scroll","title":"Dual Vertical Opposite Scroll","date":"2026-02-27 16:29:38","date_formatted":"February 27, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/dual-vertical-opposite-scroll\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"aafd17","name":"section","parent":0,"children":["70565a","d2693a"],"settings":{"_cssGlobalClasses":["extmnc"]},"label":"Dual Vertical Opposite Scroll"},{"id":"70565a","name":"container","parent":"aafd17","children":["d66aab","19ff40"],"settings":{"_cssGlobalClasses":["jjznfa"]}},{"id":"d66aab","name":"block","parent":"70565a","children":["626822","cf899c","4fa8f8"],"settings":{"_cssGlobalClasses":["gfogtv"]}},{"id":"626822","name":"block","parent":"d66aab","children":["cabac9","7d66a7"],"settings":{"_background":{"image":{"id":6347,"filename":"5d0de26dd79cca5d2a950bae_img-bg-1.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de26dd79cca5d2a950bae_img-bg-1.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de26dd79cca5d2a950bae_img-bg-1.webp"},"position":"center center","repeat":"no-repeat","size":"cover"},"_cssGlobalClasses":["flujgi"]}},{"id":"cabac9","name":"heading","parent":"626822","children":[],"settings":{"text":"Fruit beer","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"7d66a7","name":"heading","parent":"626822","children":[],"settings":{"text":"It gives the beer a fresh, sweet, and tangy taste along with a fruity aroma.","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"cf899c","name":"block","parent":"d66aab","children":["a66b4f"],"settings":{"_cssGlobalClasses":["flujgi"],"_gradient":[],"_alignItems":"center","_background":{"color":{"hex":"#576d25"}}}},{"id":"a66b4f","name":"image","parent":"cf899c","children":[],"settings":{"image":{"id":6627,"filename":"Bottle-back.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/Bottle-back.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/Bottle-back-259x1024.webp"},"_cssGlobalClasses":["itiwec"]}},{"id":"4fa8f8","name":"block","parent":"d66aab","children":["b9df91","95a783"],"settings":{"_background":{"image":{"id":6344,"filename":"5d0de4c341baf21c3809bb5a_img-bg-3.webp","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de4c341baf21c3809bb5a_img-bg-3.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de4c341baf21c3809bb5a_img-bg-3.webp"},"position":"center center","size":"cover","repeat":"no-repeat"},"_cssGlobalClasses":["flujgi"]}},{"id":"b9df91","name":"heading","parent":"4fa8f8","children":[],"settings":{"text":"pleasant orange aroma","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"95a783","name":"heading","parent":"4fa8f8","children":[],"settings":{"text":"A gentle blend of fresh orange a whole malt crisp lager","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"19ff40","name":"block","parent":"70565a","children":["189725","3f7f28","112dee"],"settings":{"_cssGlobalClasses":["oxkpjw"]}},{"id":"189725","name":"block","parent":"19ff40","children":["adfbf5"],"settings":{"_cssGlobalClasses":["helajc"],"_gradient":[],"_background":{"color":{"hex":"#504f54"}},"_alignItems":"center"}},{"id":"adfbf5","name":"image","parent":"189725","children":[],"settings":{"image":{"id":6363,"filename":"5d0de789ac109e6b2cbe7097_lime.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime-259x1024.webp"},"_cssGlobalClasses":["itiwec"]},"themeStyles":[]},{"id":"3f7f28","name":"block","parent":"19ff40","children":["28494f","cf58a8"],"settings":{"_cssGlobalClasses":["helajc"],"_background":{"image":{"id":6356,"filename":"5d0de36841baf24bec09ba66_img-bg-2.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de36841baf24bec09ba66_img-bg-2.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de36841baf24bec09ba66_img-bg-2-720x1024.webp"}}}},{"id":"28494f","name":"heading","parent":"3f7f28","children":[],"settings":{"text":"Taste","tag":"custom","customTag":"span","_cssGlobalClasses":["mdbmnt"]},"label":"small "},{"id":"cf58a8","name":"heading","parent":"3f7f28","children":[],"settings":{"text":"Taste: Sweet\u2013tangy, citrusy, and mildly bitter","_cssGlobalClasses":["dmshir"]},"label":"Big Heading"},{"id":"112dee","name":"block","parent":"19ff40","children":["834d41"],"settings":{"_cssGlobalClasses":["helajc"],"_gradient":[],"_alignItems":"center","_background":{"color":{"hex":"#d86b10"}}}},{"id":"834d41","name":"image","parent":"112dee","children":[],"settings":{"image":{"id":6363,"filename":"5d0de789ac109e6b2cbe7097_lime.webp","size":"large","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime.webp","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2026\/02\/5d0de789ac109e6b2cbe7097_lime-259x1024.webp"},"_cssGlobalClasses":["itiwec"]},"themeStyles":[]},{"id":"d2693a","name":"code","parent":"aafd17","children":[],"settings":{"executeCode":true,"cssCode":".animated__dual-scroll-section {\n height: 400vh; \/* Increase this to make the scroll feel slower\/smoother *\/\n position: relative;\n}\n\n.animated__dual-scroll-container {\n display: flex;\n position: sticky;\n top: 0;\n height: 100vh;\n overflow: hidden;\n width: 100%;\n}\n\n.animated__dual-scroll-left-parent,\n.animated__dual-scroll-right-parent {\n flex: 1;\n height: fit-content; \/* Allows the content to be longer than the screen *\/\n display: flex;\n flex-direction: column;\n}\n\n\/* Optional: Add some spacing or styling to the items *\/\n.animated__dual-scroll-left-child,\n.animated__dual-scroll-right-child {\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid rgba(0,0,0,0.1); \/* To see the boundaries *\/\n}\n\n@media (max-width: 991px) {\n \/* Disable the scroll trap *\/\n .animated__dual-scroll-section {\n height: auto !important; \n }\n\n .animated__dual-scroll-container {\n position: relative !important;\n height: auto !important;\n flex-direction: row; \/* Keeps them next to each other *\/\n overflow: visible !important;\n }\n\n \/* Reset positions so items aren't flying off-screen *\/\n .animated__dual-scroll-left-parent,\n .animated__dual-scroll-right-parent {\n transform: none !important;\n height: auto !important;\n }\n\n .animated__dual-scroll-left-child,\n .animated__dual-scroll-right-child {\n height: auto !important;\n padding: 40px 20px;\n opacity: 1 !important; \/* Ensure they are visible *\/\n transform: scale(1) !important;\n filter: none !important;\n }\n}","javascriptCode":"const section = document.querySelector('.animated__dual-scroll-section');\nconst leftCol = document.querySelector('.animated__dual-scroll-left-parent');\nconst rightCol = document.querySelector('.animated__dual-scroll-right-parent');\nconst leftChildren = document.querySelectorAll('.animated__dual-scroll-left-child');\nconst rightChildren = document.querySelectorAll('.animated__dual-scroll-right-child');\nconst allChildren = [...leftChildren, ...rightChildren];\n\nconst ACTIVE_THRESHOLD = 0.2;\n\nfunction handleDualScroll() {\n if (!section || !leftCol || !rightCol) return;\n\n const windowHeight = window.innerHeight;\n const rect = section.getBoundingClientRect();\n\n if (window.innerWidth > 991 && rect.top 0) {\n const scrollRange = rect.height - windowHeight;\n if (scrollRange {\n const { top, height } = child.getBoundingClientRect();\n const childCenter = top + height \/ 2;\n\n child.classList.toggle(\n 'is-active',\n Math.abs(childCenter - viewportCenter) child.classList.remove('is-active'));\n }\n}\n\nlet ticking = false;\n\nfunction onScroll() {\n if (!ticking) {\n requestAnimationFrame(() => {\n handleDualScroll();\n ticking = false;\n });\n ticking = true;\n }\n}\n\nwindow.addEventListener('scroll', onScroll, { passive: true });\nwindow.addEventListener('resize', handleDualScroll);\nhandleDualScroll();"}}],"templateType":"section","global_classes":[{"id":"extmnc","name":"animated__dual-scroll-section","settings":{"_width":"100%","_height":"200vh"}},{"id":"jjznfa","name":"animated__dual-scroll-container","settings":{"_direction":"row","_width":"100%","_position":"sticky","_direction:tablet_portrait":"column"}},{"id":"gfogtv","name":"animated__dual-scroll-left-parent","settings":{"_width":"50%","_width:tablet_portrait":"100%"}},{"id":"oxkpjw","name":"animated__dual-scroll-right-parent","settings":{"_width":"50%","_width:tablet_portrait":"100%"}},{"id":"flujgi","name":"animated__dual-scroll-left-child","settings":{"_heightMin":"100vh","_gradient":{"applyTo":"overlay"},"_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_justifyContent":"center","_heightMin:mobile_landscape":"70vh","_alignItems":"flex-start"}},{"id":"helajc","name":"animated__dual-scroll-right-child","settings":{"_heightMin":"100vh","_justifyContent":"center","_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_gradient":[],"_heightMin:mobile_landscape":"70vh","_alignItems":"flex-start"}},{"id":"mdbmnt","name":"animated2__sub-heading","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-family":"Exo 2","font-size":"28"},"_typography:mobile_portrait":{"font-size":"22"},"_typography:mobile_landscape":{"font-size":"26"}},"modified":1772105946,"user_id":1},{"id":"dmshir","name":"animated2__h2","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"58","font-family":"Autour One","line-height":"1.2"},"_typography:tablet_portrait":{"font-size":"45"},"_typography:mobile_landscape":{"font-size":"38"},"_typography:mobile_portrait":{"font-size":"34"}}},{"id":"itiwec","name":"animated__dual-scroll-child--large-heading_img","settings":{"_interactions":[{"id":"dfcqao","trigger":"enterView","action":"startAnimation","animationType":"zoomIn"}],"_zIndex":"99","_objectFit":"cover","_heightMax":"592","_widthMax":"150"}}]}

Categories

Hero Sections

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue