→ sajid taz
→ About Page for WDD

About Page for WDD

This bootstrap css example is contributed by sajid taz, on 12-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author sajid taz

346

v.4.6

Fork Fullscreen

<div class="col-lg-5 text-center">
                    <img src="assets/img/download.jfif" alt="Md. Sajid" class="img-fluid rounded-3 shadow-lg">
                </div>

<div class="col-lg-7">

<span class="text-primary fw-semibold text-uppercase">
                        Personal Biography
                    </span>

<h2 class="display-5 fw-bold mt-2 mb-4">
                        Hi, I'm Md. Sajid
                    </h2>

<p class="lead text-light">
                        A passionate Frontend Developer and Data Analyst dedicated to
                        building responsive websites and transforming raw data into
                        meaningful insights.
                    </p>

<p class="text-secondary">
                        I have experience working with HTML, CSS, Bootstrap,
                        JavaScript, Python, SQL, Excel, Power BI, and data
                        visualization tools. My goal is to create user-friendly
                        digital solutions that combine attractive design with
                        data-driven decision-making.
                    </p>

<p class="text-secondary">
                        Beyond coding and analytics, I enjoy learning new
                        technologies, solving real-world problems, and continuously
                        improving my skills to deliver high-quality solutions for
                        clients and organizations.
                    </p>

<div class="row mt-4 g-3">

<div class="col-sm-4">
                            <div class="p-3 bg-secondary bg-opacity-25 rounded text-center">
                                <h4 class="fw-bold mb-1">1+</h4>
                                <small>Years Learning</small>
                            </div>
                        </div>

<div class="col-sm-4">
                            <div class="p-3 bg-secondary bg-opacity-25 rounded text-center">
                                <h4 class="fw-bold mb-1">10+</h4>
                                <small>Projects Completed</small>
                            </div>
                        </div>

<div class="col-sm-4">
                            <div class="p-3 bg-secondary bg-opacity-25 rounded text-center">
                                <h4 class="fw-bold mb-1">Available</h4>
                                <small>For Freelance Work</small>
                            </div>
                        </div>

</div>

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

<section class="py-5 bg-dark text-white">
        <div class="container">

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Trusted By</h2>
                <p class="text-secondary">Organizations and businesses I've worked with</p>
            </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 bg-light text-dark text-center p-4 h-100 shadow-sm">
                        <i class="bi bi-building fs-1 text-primary"></i>
                        <h6 class="mt-3 fw-semibold">TechVision Ltd</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 bg-light text-dark text-center p-4 h-100 shadow-sm">
                        <i class="bi bi-hospital fs-1 text-danger"></i>
                        <h6 class="mt-3 fw-semibold">MediCare Hospital</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card border-0 bg-light text-dark text-center p-4 h-100 shadow-sm">
                        <i class="bi bi-shop fs-1 text-warning"></i>
                        <h6 class="mt-3 fw-semibold">GreenMart</h6>
                    </div>
                </div>

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

<div class="text-center mb-5">
                <h2 class="display-6 fw-bold">Skills & Expertise</h2>
                <p class="text-secondary">
                    Technologies and tools I use to build modern digital experiences
                </p>
            </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>CSS / Bootstrap</span>
                            <span>85%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-info" style="width:85%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>JavaScript</span>
                            <span>65%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-warning" style="width:65%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Python</span>
                            <span>80%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-danger" style="width:80%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Data Analytics</span>
                            <span>85%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-success" style="width:85%"></div>
                        </div>
                    </div>
                </div>

<div class="col-md-6">
                    <div class="p-4 bg-light text-dark rounded shadow-sm">
                        <div class="d-flex justify-content-between">
                            <span>Power BI</span>
                            <span>80%</span>
                        </div>
                        <div class="progress mt-2">
                            <div class="progress-bar bg-dark" style="width:80%"></div>
                        </div>
                    </div>
                </div>

</div>

</div>
    </section>

More Examples

Portfolio Full Website

Author:
Zahid Hasan Riyad

1 month ago

278

v.5.3
Personal Biography Section

Author:
Shahriar Noyon

3 months ago

554

v.4.6
Services part

Author:
istiakahmedchowdhury10

1 month ago

100

v.4.6
Work Experience Section

Author:
Tanvir fahad

4 months ago

483

v.4.6
final about me section
do not copy

Author:
Fitar Ahmed

4 months ago

286

v.4.6
featured product

Author:
Juan Antonio González Hernández

6 months ago

722

v.4.6
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

2 months ago

212

v.5.3
Our Existing Clients Section

Author:
Shahriar Noyon

3 months ago

780

v.4.6
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

2 years ago

2.1k

v.4.6
existing client section
do noy copy

Author:
Fitar Ahmed

4 months ago

335

v.4.6
E- Commarce full website

Author:
Zahid Hasan Riyad

1 month ago

267

v.5.3
Service Section

Author:
Shahriar Noyon

3 months ago

608

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent