→ Anonymous
→ Clean hero section with image

Clean hero section with image

Forked from> @prajwal/clean-hero-section-with-image

tugas

This bootstrap css example is contributed by Anonymous, on 30-Jul-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Anonymous

1.8k

v.5.3

Fork Fullscreen

<div class="row">
        <div class="col-md-6 pt-3">
            <small class="text-uppercase" style="color: #9B5DE5;">Welcome to Our Journey</small>
            <h1 class="h2 mb-4" style="font-weight: 600;">About Our <span style="color: #9B5DE5;">Company</span></h1>
            <p class="text-secondary" style="line-height: 2;">Embark on a journey with us as we strive to redefine excellence and innovation in every step. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellat iure laboriosam cum voluptatum, nam minima deserunt aut? Distinctio voluptatibus dolor quaerat quo omnis illo sequi at velit, odit quod!</p>

</div>
        <div class="col-md-6 text-center">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <img src="https://images.pexels.com/photos/3184433/pexels-photo-3184433.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" class="w-100 rounded" alt="">
                </div>
                <div class="col-md-6 mb-3">
                    <img src="https://images.pexels.com/photos/3184431/pexels-photo-3184431.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" class="w-100 rounded" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

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

2 years ago

4.2k

v.4.6
aboutContwnt

Author:
Sahin Miah

5 months ago

870

v.4.6
Hero section with an image

Author:
Ankit khedkar

2 years ago

16k

v.5.3
Elon Musk 2
hero to last home

Author:
RAHAT RAHMAN OFICIAL

5 months ago

640

v.4.6
Animated hero section

Author:
Anonymous

2 years ago

8.4k

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

Author:
Prajwal Hallale

2 years ago

6.1k

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

4 months ago

435

v.5.3
client feedback

Author:
Huryra

3 months ago

208

v.4.6
Simple hero section

Author:
Mateo Rojas

1 year ago

8.1k

v.5.3
slider

Author:
Ad Apon7

6 months ago

1k

v.5.3
Personal Biography section

Author:
Ad Apon7

5 months ago

801

v.5.3
Home Page

Author:
Md. Hasibur Rahman

4 months ago

288

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent