Hero Parallaxx

This bootstrap css example is contributed by java stories story, on 17-Sep-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author java stories story

406

v.5.3

Fork Fullscreen

<div class="text-center p-5 position-relative">
      <span class="text-uppercase text-whitefw-bold"
        >Kesegaran dalam Setiap Tegukan</span>
      <h1 class="mb-4 mt-2 fw-bold">Nikmati kopi dengan Varian Rasa Lezat</h1>
      <div class="d-flex justify-content-center flex-wrap gap-2">
        <a href="#produk" class="btn btn-warning btn-lg rounded-pill px-5 me-2"
          >Lihat Menu</a
        >
        <a
          href="#contact"
          class="btn btn-outline-warning btn-lg rounded-pill px-5 pt-2"
          >Hubungi Kami</a
        >
      </div>
    </div>
  </div>

<section class="100vh" style="min-height: 100vh"></section>
  
  <script src="https://cdn.jsdelivr.net/npm/parallaxx-js/dist/parallax.js"></script>
</body>

More Examples

Animated hero section

Author:
Anonymous

1 year ago

5.6k

v.5.3
Gradient Hero Section
A visually stunning hero section with a gradient background and a call-to-action button.

Author:
Prajwal Hallale

1 year ago

3.9k

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

2 weeks ago

168

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

2 months ago

481

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

1 year ago

3.2k

v.4.6
Hero section with an image

Author:
Ankit khedkar

1 year ago

9.4k

v.5.3
Hero Section with Animations
Interactive hero section with animated elements, key statistics, and modern styling

Author:
Isaac Winslow

10 months ago

5.3k

v.5.3
Simple hero section

Author:
Mateo Rojas

9 months ago

5.3k

v.5.3
Clean hero section with image

Author:
Prajwal Hallale

1 year ago

2.4k

v.5.3
HTML and CSS for Hero Section
Explanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image

Author:
zobaidul kaziex

1 year ago

2.2k

v.4.6
Simple hero
Hero section with a linear gradient

Author:
Moana silva

1 year ago

1.7k

v.4.6
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

1 year ago

2.4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent