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.