Hero banner. A self-contained content block where the image remains inside the content container, while the background color extends to both edges of the viewport on screens wider than 1280px, creating a structured yet visually expansive presentation.
<div class="hero">
</div>
Add text below the image in the same section
<div class="hero">
<img src="hero.webp" alt="Hero banner">
<div class="hero-caption">
Lorem ipsum and what ever you want
</div>
</div>
Full-bleed hero banner. A self-contained content block where the image stretches edge to edge across the full viewport width. Commonly used for impactful opening visuals that immediately grab attention.
<div class="herofull">
</div>
:::carousel
:::
###  About the Project
[Text](<https://address.com>){.btn-green}
Embed external content effortlessly with the
tag. For the best form experience, simply copy and paste a form embed code from Google Sheets or Tally.so. We recommend Tally because their free tier offers exceptional styling and customization.
<iframe src="<https://tally.so/embed/FORM_ID>" width="100%" height="500" frameborder="0"></iframe>
When writing a Markdown document, always wrap HTML tags like
in backticks (`) to display them as text. Otherwise, Markdown will execute the code and embed the element directly into your page.