{"id":189,"name":"hero-section","title":"Hero Section","date":"2025-04-14 07:53:35","date_formatted":"April 14, 2025","author":{"name":"admin","avatar":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=60&d=mm&r=g","url":"http:\/\/board.local"},"permalink":"https:\/\/board.local\/template\/hero-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"3a6af2","name":"section","parent":0,"children":["73a7ea"],"settings":{"_cssGlobalClasses":["ergbtp"],"_padding:mobile_portrait":{"left":"0","right":"0"}},"label":"Content Section"},{"id":"73a7ea","name":"container","parent":"3a6af2","children":["bd870e","890619"],"settings":{"_cssGlobalClasses":["oookpc"],"_padding:mobile_portrait":{"left":"3rem","right":"3rem","top":"3rem"}}},{"id":"bd870e","name":"block","parent":"73a7ea","children":["8ddd7b","83d7a3","kepchl"],"settings":{"_cssGlobalClasses":["wcigeu"]},"label":"Content"},{"id":"8ddd7b","name":"heading","parent":"bd870e","children":[],"settings":{"text":"What I do for my customers","tag":"h1","_cssGlobalClasses":["xtfraf"]},"label":"Heading"},{"id":"83d7a3","name":"text-basic","parent":"bd870e","children":[],"settings":{"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat fringilla lorem sed bibendum.","tag":"p","_cssGlobalClasses":["ohburj"]},"label":"Text-basic"},{"id":"890619","name":"block","parent":"73a7ea","children":["220a8f","c63dda","82f577"],"settings":{"_cssGlobalClasses":["lfjpby"],"tag":"ul"},"label":"List Grid"},{"id":"220a8f","name":"block","parent":"890619","children":["aee72a","b407ac","98e4aa"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"aee72a","name":"heading","parent":"220a8f","children":[],"settings":{"text":"UI\/UX Design","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"b407ac","name":"icon","parent":"220a8f","children":[],"settings":{"icon":{"library":"svg","svg":{"id":215,"filename":"ux-design-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/ux-design-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"98e4aa","name":"text-basic","parent":"220a8f","children":[],"settings":{"text":"Websites, application or other design related tasks. I love tackling digital problems.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"c63dda","name":"block","parent":"890619","children":["339ffd","4eeff5","78beda"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"339ffd","name":"heading","parent":"c63dda","children":[],"settings":{"text":"Motion Graphics","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"4eeff5","name":"icon","parent":"c63dda","children":[],"settings":{"icon":{"library":"svg","svg":{"id":216,"filename":"motion-graphics-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/motion-graphics-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"78beda","name":"text-basic","parent":"c63dda","children":[],"settings":{"text":"Every interaction you apply to your brand makes you stronger and more priority.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"82f577","name":"block","parent":"890619","children":["906b0e","b38c45","7f3d4d"],"settings":{"tag":"li","_cssGlobalClasses":["qdzcfz"]},"label":"Card"},{"id":"906b0e","name":"heading","parent":"82f577","children":[],"settings":{"text":"Branding","_cssGlobalClasses":["lb4w0j"]},"label":"Heading"},{"id":"b38c45","name":"icon","parent":"82f577","children":[],"settings":{"icon":{"library":"svg","svg":{"id":217,"filename":"branding-icon.svg","url":"https:\/\/board.local\/wp-content\/uploads\/2025\/04\/branding-icon.svg"}},"_cssGlobalClasses":["55dqs9"]},"label":"Icon","themeStyles":[]},{"id":"7f3d4d","name":"text-basic","parent":"82f577","children":[],"settings":{"text":"Positioning the brand first. I create visual identity across platforms.\n\n","tag":"p","_cssGlobalClasses":["9dsnvk"]},"label":"Text"},{"id":"kepchl","name":"button","parent":"bd870e","children":[],"settings":{"text":"connect with me","style":"primary","_cssGlobalClasses":["uvkehi"],"link":{"type":"external","url":"#"}}}],"templateType":"section","global_classes":[{"id":"ergbtp","name":"content-box","settings":{"_overflow":"hidden","_background:tablet_portrait":{"color":{"raw":"var(--neutral-ultra-light)"}}},"_exists":false},{"id":"oookpc","name":"content-box__container","settings":{"_display":"grid","_gridTemplateColumns:tablet_portrait":"var(--grid-1)","_gridGap:tablet_portrait":"var(--grid-gap)","_background":{"color":{"raw":"#f0fefa"}},"_height":"45rem","_alignContentGrid":"center","_alignItemsGrid":"stretch","_gridTemplateColumns":"repeat(12, 1fr);","_height:tablet_portrait":"100%","_padding":{"left":"5rem","right":"5rem","top":"5rem","bottom":"5rem"}},"_exists":false},{"id":"wcigeu","name":"content-box__content","settings":{"_gridItemColumnSpan":"1 \/ 9","_gridItemRowSpan":"1","_padding":{"bottom":"6rem","right":"calc(10rem * 3)","top":"6rem"},"_position":"relative","_justifyContent":"center","_gridItemColumnSpan:tablet_portrait":"1","_gridItemRowSpan:tablet_portrait":"1","_padding:tablet_portrait":{"right":"unset","top":"0"},"_padding:mobile_portrait":{"top":"0"},"_padding:mobile_landscape":{"top":"0"},"_rowGap":"3rem"},"_exists":false,"modified":1744617510,"user_id":1},{"id":"xtfraf","name":"content-box__heading","settings":{"_typography":{"font-weight":"600","letter-spacing":"-.025em"}},"_exists":false},{"id":"ohburj","name":"content-box__text","settings":[],"_exists":false},{"id":"lfjpby","name":"content-box-grid-ul","settings":{"_gridItemRowSpan":"1","_gridItemColumnSpan":"6 \/ -1","_display":"grid","_gridTemplateRows":"repeat(4, 1fr);","_gridGap":"3rem","_position":"relative","_gridItemColumnSpan:tablet_portrait":"1","_gridItemRowSpan:tablet_portrait":"unset","_gridTemplateColumns:mobile_landscape":"var(--grid-1)","_gridTemplateRows:mobile_landscape":"unset","_gridTemplateColumns":"repeat(2, 1fr);","_cssCustom":".content-box-grid-ul{\nlist-style: none;\npadding-left: 0;\nlist-style-type: none;\nmargin-left: 0em;\nmargin-right: 0;\n}"},"_exists":false,"modified":1744627295,"user_id":1},{"id":"qdzcfz","name":"content-box-card","settings":{"_padding":{"top":"3rem","right":"2rem","bottom":"3rem","left":"2rem"},"_rowGap":"calc(3rem \/ 2)","_cssCustom":"@media (min-width:767px) {\n\n.content-box-card:nth-child(1) {\n\t grid-row: 2 \/ 4;\n}\n\n.content-box-card:nth-child(2), .content-box-card:nth-child(3) {\n\tgrid-column: 2 \/ 3;\n grid-row: span 2;\n}\n \n}\n\n.content-box-card{\n box-shadow:24px 24px 40px -12px rgba(28, 44, 64, .08);\n}","_background":{"color":{"raw":"#fff"}}},"modified":1729870684,"user_id":7,"_exists":false},{"id":"lb4w0j","name":"content-box-card__heading","settings":{"_typography":{"font-weight":"600"}},"_exists":false},{"id":"55dqs9","name":"content-box-card__icon","settings":{"_order":"-1"},"_exists":false},{"id":"9dsnvk","name":"content-box-card__text","settings":[],"_exists":false},{"id":"uvkehi","name":"content-box__button","settings":{"_padding":{"top":"1.3rem","bottom":"1.3rem","right":"2rem","left":"2rem"},"_typography":{"color":{"hex":"#ffffff"},"font-size":"1.5rem","text-transform":"uppercase","font-weight":"600"},"_background":{"color":{"hex":"#5e3bee"}},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}}},"modified":1744629077,"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"}}]}