→ Ad Apon7
→ Personal Biography section

Personal Biography section

This bootstrap css example is contributed by Ad Apon7, on 15-May-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Hero

Author Ad Apon7

771

v.5.3

Fork Fullscreen

<section class="py-5 bg-deep-dark font-inter">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            
            <div class="col-md-5">
                <div class="p-1">
                    <img class="img-fluid rounded-2 bio-img w-100 shadow-lg" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimg.freepik.com%2Fpremium-photo%2Fportrait-young-professional-man-smiling_604472-8539.jpg&f=1&nofb=1&ipt=3a701de082ea34783773f1be8abe4a75c34d5c4fa86464267328c54ad21ec2cd" alt="Biography">
                </div>
            </div>
            
            <div class="col-md-6 offset-md-1">
                <div>
                    <span class="text-danger small fw-bold text-uppercase tracking-widest d-block mb-3">
                        My Journey
                    </span>
                    <h2 class="display-5 fw-bold text-white mb-4">
                        About Me
                    </h2>
                    <p class="text-white fs-5 fw-normal lh-base mb-4 opacity-90">
                        I am a frontend developer focused on crafting clean, high-performance, and user-centric web applications. I bridge the gap between design concepts and scalable code.
                    </p>
                    <p class="text-secondary lh-lg mb-5">
                        My workflow is rooted in code cleanliness and layout fidelity. I treat interfaces as living systems—ensuring robust state management, semantic structure, and seamless responsiveness across all screen sizes.
                    </p>
                    
                    <div class="row g-4 pt-4 border-top border-secondary border-opacity-10">
                        <div class="col-6">
                            <div class="text-white-50 small mb-1">Experience</div>
                            <div class="h4 fw-bold text-white mb-0">02+ Years</div>
                        </div>
                        <div class="col-6">
                            <div class="text-white-50 small mb-1">Status</div>
                            <div class="h4 fw-bold text-white mb-0">Available</div>
                        </div>
                    </div>
                </div>
            </div>

</div>
    </div>
</section>

More Examples

Personal Portfolio About Section

Author:
Creative Araf

3 months ago

472

v.5.3
Personal Biography section
idem

Author:
Anonymous

5 months ago

586

v.5.3
Gradient Hero Section with Pulsing Button

Author:
Ranadhir Debnath

1 year ago

1.8k

v.5.3
Basic hero
Hero section with background image

Author:
Prajwal Hallale

2 years ago

5.3k

v.4.6
Simple hero
Hero section with a linear gradient

Author:
Moana silva

2 years ago

3.8k

v.4.6
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

2 months ago

600

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

2 years ago

4.1k

v.4.6
portfoilo page

Author:
Ad Apon7

5 months ago

407

v.5.3
Clean hero section with image
tugas

Author:
Anonymous

1 year ago

1.7k

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

6k

v.5.3
portfoilo page

Author:
Ad Apon7

5 months ago

883

v.5.3
Hero Parallaxx

Author:
java stories story

1 year ago

3.2k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent