HERO

Hero section.

The hero section is the first section that appears on the screen when a user visits a website. It is used to grab the user's attention and make a good first impression. A hero section typically includes a headline, a subheadline, and a call-to-action button.

Class names

Start with hero, then add modifiers when needed.

Class name Description
hero-section Normal hero section
left-hero Left hero content
right-hero Right hero content

Hero section

The default NodexUI Hero with responsive

Hero title

We use the latest technologies to create the best user experience. Use NodexUI for your next project and see the difference.

Code
<!-- Hero section -->
<div class="hero-section">
<div class="left-hero">
<p class="font-5 hero-text">Build a beautiful UI design with NodexUI</p>
<p>We use the latest technologies to create the best user experience. Use NodexUI for your next project and see the difference.</p>
<button class="btn bg-blue-100 radius"><a class="text-black" target="_blank" href="#">Get Started</a></button>
</div>
<div class="right-hero">
<img class="hero-img radius" src="https://i.pinimg.com/1200x/4c/aa/f9/4caaf99d85ff6e09bb0a24eae2e67b9f.jpg" alt="">
</div>
</div>
Copied to Clipboard


Have any isuuse or bugs in components?

You can report to NodexUI team. Also you want any Changes in components, You can also contact us.