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
#Hero Split BG Image
heroFeatures a visually striking split background, often combining a color block with an image, for a modern hero.
Heat Transfer
New Cool Friend
Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
Assume I'm Right.
<section id="ivz29x" class="relative container mx-auto mb-16">
<div id="i4vabr" class="w-full h-full grid grid-rows-5 absolute top-0 left-0">
<div id="i94quk" class="row-span-4 bg-blue-600 sm:rounded-xl"></div>
</div>
<div id="iqzvzf" class="pt-32 lg:pt-16 px-6 lg:px-16">
<div id="i50kvv" class="max-w-screen-lg mx-auto flex flex-col items-center text-white sticky">
<h1 id="ikqu22" class="text-4xl lg:text-7xl font-bold text-center mb-4 lg:mb-8">
Heat Transfer<br>New Cool Friend
</h1>
<p id="iqco7v" class="lg:text-4xl mb-8 lg:mb-16 text-center font-semibold text-black max-w-3xl text-2xl">
Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
Assume I'm Right.<br>
</p>
<img id="ib5vuf"
src="https://placehold.co/1000x700"
class="w-full rounded-lg">
</div>
</div>
</section>
Heat Transfer
New Cool Friend
Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
Assume I'm Right.
<section id="ivz29x" layout="relative container" space="m-x:auto m-b:big-3x">
<div id="i4vabr" layout="grid grid-rows:5 absolute top:none left:none" space="w:[100%] h:[100%]">
<div id="i94quk" layout="row-span:4" visual="bg:blue-600 tw-sm:rounded:medium"></div>
</div>
<div id="iqzvzf" space="p-t:giant-3x tw-lg:p-t:big-3x p-x:medium-3x tw-lg:p-x:big-3x">
<div id="i50kvv" layout="flex col items:center sticky" space="max-w:[screen-lg] m-x:auto" visual="text:white">
<h1 id="ikqu22" space="m-b:medium tw-lg:m-b:large" visual="text-size:giant tw-lg:text-size:giga font:tw-bold text:center">
Heat Transfer<br>New Cool Friend
</h1>
<p id="iqco7v" space="m-b:large tw-lg:m-b:big-3x max-w:[3xl]" visual="tw-lg:text-size:giant text:center font:tw-semibold text:black text-size:huge">
Trust Me, I am Mechanical Engineer Student Too. To Save Time, Let's
Assume I'm Right.<br>
</p>
<img id="ib5vuf"
src="https://placehold.co/1000x700"
space="w:[100%]" visual="rounded:medium">
</div>
</div>
</section>