Back

Alternating Experiences App Screenshot Previews Award Showcase Grid Bonus Content Grid Course Card Grid Course Offer Cards Custom Section Benefits Dual Product Cards Filterable Portfolio Offer Image Grid Partners & Clients Portfolio Reveal Grid Quality Asym Images Service Icon Grid Specialty Icon Grid STEM Learning Previews Template Showcase Grid Webinar Grid

App Download CTA CTA Profile Card CTA Stats & Image Newsletter CTA Logos Plan CTA Testimonial Product CTA Interactive Profile CTA Background

App Features Centered App Features Mobile Feature Image Toggle Feature Large Image

App Onboarding Steps Event Timeline Step Image Cards Story Mission Banners

Basic Testimonial Grid Simple Testimonial Testimonial Cards Stats Testimonial Slider

Centered Video Show Video Feature Highlights Video Fullwidth Overlay Video Gallery Video Testimonial Video with Sidebar

Challenge Icon Cards Dual Problem Cards Multi-Format Problems Problem Before/After Problem Image Stack Tabbed Problem Explore

Classic Accordion Colored Block FAQ Formal List FAQ Grid Toggle FAQ Interactive List FAQ Sidebar Intro FAQ

Course Product Page Webinar Product Booking

Footer Sitemap Simple Footer Social

Founder's Perspective Guiding Core Values Our Journey Timeline Our Working Philosophy The Evolution Story

Global Scale Stats Impact Highlights Key Metrics Showcase Milestone Cards Progress Report List Statistic Box Grid

Hero BG Pattern Card Hero Centered Media Hero Feature Cards Hero Full BG Image Hero Split BG Image Hero Split Overlay

Medical Team Grid Team Leadership Grid

Navbar Announce User Navbar Mega Menu Navbar Prev/Next Nav Navbar Top Bar Links Navbar with Search Standard Navbar

Pricing Compare Table Pricing Toggle Cards

#Video Fullwidth Overlay

video

Features a full-width video or image background with an overlaid text message and a prominent call-to-action.

EXCLUSIVE PREMIERE

Discover Our Latest Innovation

Watch our new video to see how we're changing the game and pioneering the future.

Watch Now

<section class="relative my-8 lg:my-16 overflow-hidden">
    
    <div class="absolute inset-0 w-full h-full">
        <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" class="w-full h-full object-cover">
        
        
        <div class="absolute inset-0 bg-black opacity-60"></div> 
    </div>

<div class="relative container mx-auto px-6 lg:px-16 py-24 lg:py-48 text-center text-white z-10 flex flex-col items-center">
        <div class="mb-4 max-w-max rounded-lg bg-blue-600/90 px-4 py-2">
            <p class="text-sm font-bold uppercase tracking-wider">EXCLUSIVE PREMIERE</p>
        </div>
        <h1 class="text-4xl lg:text-7xl font-bold mb-6">
            Discover Our Latest Innovation
        </h1>
        <p class="text-xl lg:text-3xl mb-10 max-w-3xl mx-auto opacity-90">
            Watch our new video to see how we're changing the game and pioneering the future.
        </p>
        <a href="#" class="group bg-white hover:bg-blue-50 text-blue-600 text-xl rounded-lg px-10 h-16 py-4 flex items-center justify-center w-full sm:w-auto max-w-xs mx-auto font-semibold transition-colors duration-300 shadow-lg hover:shadow-xl">
            <i class="fas fa-play mr-3 transition-transform duration-300 group-hover:scale-110"></i> Watch Now
        </a>
    </div>
</section>

<section class="relative my-8 lg:my-16 overflow-hidden">
    <!-- Background Video/Image -->
    <div class="absolute inset-0 w-full h-full">
        <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" class="w-full h-full object-cover">
        <!-- Or for an actual video background -->
        <!-- 
        <video autoplay muted loop class="w-full h-full object-cover">
            <source src="your-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        -->
        <div class="absolute inset-0 bg-black opacity-60"></div> <!-- Dark overlay -->
    </div>

    <!-- Content Overlay -->
    <div class="relative container mx-auto px-6 lg:px-16 py-24 lg:py-48 text-center text-white z-10 flex flex-col items-center">
        <div class="mb-4 max-w-max rounded-lg bg-blue-600/90 px-4 py-2">
            <p class="text-sm font-bold uppercase tracking-wider">EXCLUSIVE PREMIERE</p>
        </div>
        <h1 class="text-4xl lg:text-7xl font-bold mb-6">
            Discover Our Latest Innovation
        </h1>
        <p class="text-xl lg:text-3xl mb-10 max-w-3xl mx-auto opacity-90">
            Watch our new video to see how we're changing the game and pioneering the future.
        </p>
        <a href="#" class="group bg-white hover:bg-blue-50 text-blue-600 text-xl rounded-lg px-10 h-16 py-4 flex items-center justify-center w-full sm:w-auto max-w-xs mx-auto font-semibold transition-colors duration-300 shadow-lg hover:shadow-xl">
            <i class="fas fa-play mr-3 transition-transform duration-300 group-hover:scale-110"></i> Watch Now
        </a>
    </div>
</section>

EXCLUSIVE PREMIERE

Discover Our Latest Innovation

Watch our new video to see how we're changing the game and pioneering the future.

Watch Now

<section layout="relative overflow:hidden" space="m-y:large tw-lg:m-y:big-3x">
    
    <div layout="absolute inset:none" space="w:[100%] h:[100%]">
        <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" layout="object:cover" space="w:[100%] h:[100%]">
        
        
        <div layout="absolute inset:none" visual="bg:black opacity:60"></div> 
    </div>

<div layout="relative container flex col items:center" space="m-x:auto p-x:medium-3x tw-lg:p-x:big-3x p-y:giant tw-lg:p-y:vast-3x" visual="text:center text:white" class="z-10">
        <div space="m-b:medium max-w:[max-content] p-x:medium p-y:small" visual="rounded:medium" class="bg-blue-600/90">
            <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">EXCLUSIVE PREMIERE</p>
        </div>
        <h1 space="m-b:medium-3x" visual="text-size:giant tw-lg:text-size:giga font:tw-bold">
            Discover Our Latest Innovation
        </h1>
        <p space="m-b:large-3x max-w:[3xl] m-x:auto" visual="text-size:big tw-lg:text-size:grand opacity:90">
            Watch our new video to see how we're changing the game and pioneering the future.
        </p>
        <a href="#" layout="flex items:center justify:center" space="p-x:large-3x h:big-3x p-y:medium w:[100%] tw-sm:w:auto max-w:[xs] m-x:auto" visual="bg:white hover:bg:blue-50 text:blue-600 text-size:big rounded:medium font:tw-semibold transition:colors duration:slow shadow:big hover:shadow:giant" class="group">
            <i space="m-r:small-3x" visual="transition:transform duration:slow" class="fas fa-play group-hover:scale-110"></i> Watch Now
        </a>
    </div>
</section>

<section layout="relative overflow:hidden" space="m-y:large tw-lg:m-y:big-3x">
    <!-- Background Video/Image -->
    <div layout="absolute inset:none" space="w:[100%] h:[100%]">
        <img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" layout="object:cover" space="w:[100%] h:[100%]">
        <!-- Or for an actual video background -->
        <!-- 
        <video autoplay muted loop layout="object:cover" space="w:[100%] h:[100%]">
            <source src="your-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        -->
        <div layout="absolute inset:none" visual="bg:black opacity:60"></div> <!-- Dark overlay -->
    </div>

    <!-- Content Overlay -->
    <div layout="relative container flex col items:center" space="m-x:auto p-x:medium-3x tw-lg:p-x:big-3x p-y:giant tw-lg:p-y:vast-3x" visual="text:center text:white" class="z-10">
        <div space="m-b:medium max-w:[max-content] p-x:medium p-y:small" visual="rounded:medium" class="bg-blue-600/90">
            <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">EXCLUSIVE PREMIERE</p>
        </div>
        <h1 space="m-b:medium-3x" visual="text-size:giant tw-lg:text-size:giga font:tw-bold">
            Discover Our Latest Innovation
        </h1>
        <p space="m-b:large-3x max-w:[3xl] m-x:auto" visual="text-size:big tw-lg:text-size:grand opacity:90">
            Watch our new video to see how we're changing the game and pioneering the future.
        </p>
        <a href="#" layout="flex items:center justify:center" space="p-x:large-3x h:big-3x p-y:medium w:[100%] tw-sm:w:auto max-w:[xs] m-x:auto" visual="bg:white hover:bg:blue-50 text:blue-600 text-size:big rounded:medium font:tw-semibold transition:colors duration:slow shadow:big hover:shadow:giant" class="group">
            <i space="m-r:small-3x" visual="transition:transform duration:slow" class="fas fa-play group-hover:scale-110"></i> Watch Now
        </a>
    </div>
</section>