Skip to main content

Hero

The Hero template: Engaging top section with a striking message and visuals to leave a lasting impression on visitors.

Simple Hero​

Indulge in the finest cuisine, a sensory delight awaits.Reserve your table now.

Get ready to embark on a culinary journey like no other! Our menu is thoughtfully curated to tantalize the taste buds of the most discerning food enthusiasts. From mouthwatering classics to daring and innovative creations, our dishes cater to a diverse palette of flavors. Savor the rich textures, vibrant aromas, and exquisite combinations that will leave you craving for more.
Each plate is crafted with passion and precision, ensuring an unforgettable dining experience for every guest. Come and discover a symphony of tastes that will delight and surprise you, all under one roof!
Make a reservationCheck the menu
Rib eye

Appetizers

Entrance

Main menu

Soups

Salad

Dessert

Drinks

Wines

View code
<header class="flex flex-wrap bg-red-50/20">
  <div class="flex flex-col flex-wrap w-full bg-white md:w-7/12">
    <nav class="navbar !bg-transparent !shadow-none">
      <div class="logo">
        <a href="#!">Not Idea Restaurant</a>
      </div>
      <ul class="menu">
        <li><a href="#!" class="nav-link is-active">Home</a></li>
        <li><a href="#!" class="nav-link">Menu</a></li>
        <li><a href="#!" class="nav-link">Reservations</a></li>
      </ul>
      <span class="burger-menu">
        <span></span>
        <span></span>
        <span></span>
      </span>
    </nav>
    <div class="p-10 my-auto">
      <h1 class="mb-8 text-6xl font-normal">
        Indulge in the finest cuisine, a <span class="font-bold text-red-500">sensory delight awaits</span>.
        <strong>Reserve your table now</strong>.
      </h1>
      <h6 class="mb-5">
        Get ready to embark on a culinary journey like no other! Our menu is thoughtfully curated to tantalize the taste buds of the most
        discerning food enthusiasts. From mouthwatering classics to daring and innovative creations, our dishes cater to a diverse palette
        of flavors. Savor the rich textures, vibrant aromas, and exquisite combinations that will leave you craving for more.
      </h6>
      <h6 class="mb-10">
        Each plate is crafted with passion and precision, ensuring an unforgettable dining experience for every guest. Come and discover a
        symphony of tastes that will delight and surprise you, all under one roof!
      </h6>
      <div class="flex flex-wrap gap-8">
        <a href="#!" class="button button-danger-rounded">Make a reservation</a>
        <a href="#!" class="button button-danger-rounded-outline">Check the menu</a>
      </div>
    </div>
  </div>
  <div class="relative object-cover object-center w-full md:w-5/12">
    <img src="../../assets/images/rib-eye-1.jpeg" alt="Rib eye" class="w-full h-full" />
  </div>
  <div class="flex flex-wrap w-full gap-5 p-8 md:justify-between bg-slate-800">
    <h4><a href="#!" class="link is-danger">Appetizers</a></h4>
    <h4><a href="#!" class="link is-danger">Entrance</a></h4>
    <h4><a href="#!" class="link is-danger">Main menu</a></h4>
    <h4><a href="#!" class="link is-danger">Soups</a></h4>
    <h4><a href="#!" class="link is-danger">Salad</a></h4>
    <h4><a href="#!" class="link is-danger">Dessert</a></h4>
    <h4><a href="#!" class="link is-danger">Drinks</a></h4>
    <h4><a href="#!" class="link is-danger">Wines</a></h4>
  </div>
</header>

Hero E-commerce​

Find everything you want in 1 place

Discover the ultimate convenience of an ecommerce website that lets you find everything you want in one place. From fashion to electronics, home essentials to entertainment, our curated selection caters to your every need. Say goodbye to endless searches and enjoy the ease of shopping all your favorite products in a single destination. Shop smarter, faster, and hassle-free with our one-stop online emporium.

10K

Products

20K

Sells

5K

Customers

View code
<header class="flex flex-wrap bg-red-50/20">
  <nav class="navbar !bg-transparent !shadow-none">
    <div class="logo">
      <a href="#!">Not Idea E-commerce</a>
    </div>
    <ul class="menu">
      <li><a href="#!" class="nav-link is-active">Home</a></li>
      <li class="has-submenu">
        <a href="#!" class="nav-link">Shop</a>
        <ul class="submenu">
          <li><a href="#!" class="nav-link">Accessories</a></li>
          <li><a href="#!" class="nav-link">Shoes</a></li>
          <li><a href="#!" class="nav-link">Clothes</a></li>
          <li><a href="#!" class="nav-link">Jewerly</a></li>
        </ul>
      </li>
      <li><a href="#!" class="nav-link">Blog</a></li>
      <li><a href="#!" class="nav-link">Contact</a></li>
    </ul>
    <span class="burger-menu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </nav>
  <div class="flex flex-col items-center justify-center w-full h-[60vh] md:h-[75vh] p-8 md:p-10 bg-slate-200">
    <div class="w-full text-center sm:w-10/12 md:w-8/12 lg:w-7/12">
      <h1 class="mb-8 font-normal">Find everything you want in <span class="font-bold text-red-500">1 place</span></h1>
      <h2 class="mb-10 text-lg font-medium">
        Discover the ultimate convenience of an ecommerce website that lets you find everything you want in one place. From fashion to
        electronics, home essentials to entertainment, our curated selection caters to your every need. Say goodbye to endless searches
        and enjoy the ease of shopping all your favorite products in a single destination. Shop smarter, faster, and hassle-free with our
        one-stop online emporium.
      </h2>
      <div class="field has-button">
        <div class="input-float-button">
          <input type="text" placeholder="Search: Clothes, Shoes, Accessories, Jewerly, etc..." class="input is-large is-full-rounded" />
          <button type="button" className="button button-primary-rounded"> Search </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid w-11/12 grid-cols-1 gap-8 mx-auto -mt-16 text-center sm:w-10/12 md:w-8/12 sm:grid-cols-2 md:grid-cols-3">
    <div class="card">
      <div class="card-content">
        <h4 class="text-4xl card-title">10K</h4>
        <p>Products</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h4 class="text-4xl card-title">20K</h4>
        <p>Sells</p>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h4 class="text-4xl card-title">5K</h4>
        <p>Customers</p>
      </div>
    </div>
  </div>
</header>