→ sajid taz
→ Home Page of portfolio (WDD)

Home Page of portfolio (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: Footer Header Card Carousel

Author sajid taz

212

v.4.6

Fork Fullscreen

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container justify-content-between">
            <a class="navbar-brand fw-bold" href="#">It's Sajid</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" href="index.html">Home</a>
                    <a class="nav-link" href="about.html">About</a>
                    <a class="nav-link" href="portfolio.html">Portfolio</a>
                    <a class="nav-link" href="service.html">Services</a>
                    <a class="nav-link" href="contact.html">Contact</a>
                </div>
            </div>
        </div>
    </nav>

<section id="banner">
        <div id="portfolioCarousel" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">
                <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#portfolioCarousel" data-bs-slide-to="2"></button>
            </div>

<div class="carousel-inner">
                
                <div class="carousel-item active">
                    <img src="https://www.azza-cs.co.uk/images/wdd.png" class="d-block w-100" alt="Portfolio Banner 1">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="fw-bold">Welcome to My Portfolio</h2>
                        <p class="lead">Showcasing my projects and skills</p>
                    </div>
                </div>

<div class="carousel-item">
                    <img src="https://media.licdn.com/dms/image/v2/D5612AQGX9HeAOkdH8A/article-cover_image-shrink_600_2000/article-cover_image-shrink_600_2000/0/1690090465883?e=2147483647&v=beta&t=cis6mDJBx8QVaODFp3OtuPGBatCTG-v4GKjHLZ97uXY"
                        class="d-block w-100" alt="Portfolio Banner 2">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="fw-bold">Frontend Development</h2>
                        <p class="lead">Clean, responsive, and user‑focused design</p>
                    </div>
                </div>

<div class="carousel-item">
                    <img src="https://thumbs.dreamstime.com/b/creative-solutions-word-abstract-wood-type-vintage-letterpress-cup-coffee-101823628.jpg"
                        class="d-block w-100" alt="Portfolio Banner 3">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="fw-bold">Creative Solutions</h2>
                        <p class="lead">From design fidelity to scalable code</p>
                    </div>
                </div>
            </div>

<button class="carousel-control-prev" type="button" data-bs-target="#portfolioCarousel"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#portfolioCarousel"
                data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
        </div>
    </section>

<section class="py-5 bg-dark text-white">
        <div class="container">
            <h2 class="display-6 fw-bold text-center mb-5">About Me</h2>
            <div class="row align-items-center justify-content-center g-5">

<div class="col-md-5 text-center">
                    <p class="fs-5 opacity-75 mb-3">
                        I’m a frontend developer passionate about building clean, responsive, and user‑focused web
                        applications.
                    </p>
                    <p class="text-secondary lh-lg mb-4">
                        My workflow blends design fidelity with scalable code, ensuring seamless experiences across all
                        devices.
                    </p>

<div class="row g-4 pt-4 border-top border-secondary border-opacity-25">
                        <div class="col-6 text-center">
                            <div class="text-white-50 small mb-1">Experience</div>
                            <div class="h4 fw-bold mb-0">1 Year</div>
                        </div>
                        <div class="col-6 text-center">
                            <div class="text-white-50 small mb-1">Status</div>
                            <div class="h4 fw-bold mb-0">Available</div>
                        </div>
                    </div>
                </div>

<div class="col-md-5 text-center">
                    <img class="img-fluid rounded-3 shadow-lg" src="https://static.vecteezy.com/system/resources/previews/052/651/087/non_2x/friendly-3d-character-in-a-suit-png.png" alt="Biography">
                </div>

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

<section class="py-5 bg-dark text-white text-center">
        <div class="container">
            <h2 class="display-5 fw-bold mb-4">Mission & Vision</h2>
            <p class="lead text-secondary mb-5">
                My career focus is to learn modern technology, build creative projects, and become a skilled developer.
            </p>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="p-4 border rounded-4 bg-white text-dark h-100">
                        <div class="fs-1 mb-3">🎯</div>
                        <h3 class="fw-bold text-primary">My Mission</h3>
                        <p class="text-muted mt-3">
                            To improve my programming, web development, and problem-solving skills while creating modern
                            digital projects.
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-4 border rounded-4 bg-white text-dark h-100">
                        <div class="fs-1 mb-3">🚀</div>
                        <h3 class="fw-bold text-success">My Vision</h3>
                        <p class="text-muted mt-3">
                            To become a successful software developer who inspires others through technology,
                            creativity, and innovation.
                        </p>
                    </div>
                </div>
            </div>
            <div class="mt-5">
                <a href="#" class="btn btn-primary px-4 py-2">Learn More</a>
            </div>
        </div>
    </section>

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

<h2 class="display-6 fw-bold mb-5">Our Services</h2>

<div class="row g-4">
                
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-primary mb-3"><i class="bi bi-laptop"></i></div>
                        <h5 class="fw-semibold">Responsive Design</h5>
                        <p class="text-muted mt-3">Fully responsive layouts optimized for every device and screen size.
                        </p>
                    </div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-success mb-3"><i class="bi bi-grid-1x2"></i></div>
                        <h5 class="fw-semibold">Modern Layout</h5>
                        <p class="text-muted mt-3">Minimal and clean design structure focused on better user experience.
                        </p>
                    </div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-warning mb-3"><i class="bi bi-graph-up-arrow"></i></div>
                        <h5 class="fw-semibold">Data Analytics</h5>
                        <p class="text-muted mt-3">Smart analytics and performance tools to grow your business faster.
                        </p>
                    </div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-danger mb-3"><i class="bi bi-lightning"></i></div>
                        <h5 class="fw-semibold">UI/UX Design</h5>
                        <p class="text-muted mt-3">Optimized workflow and lightning fast loading performance.</p>
                    </div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-info mb-3"><i class="bi bi-shield-check"></i></div>
                        <h5 class="fw-semibold">AI & ML Solutions</h5>
                        <p class="text-muted mt-3">Cutting‑edge AI models for predictive analytics, automation, and NLP.
                        </p>
                    </div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="card border-0 shadow-sm h-100 p-4 bg-light text-dark">
                        <div class="fs-1 text-dark mb-3"><i class="bi bi-headset"></i></div>
                        <h5 class="fw-semibold">24/7 Support</h5>
                        <p class="text-muted mt-3">Professional support team ready to assist you anytime.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-5 bg-dark text-white text-center">
        <div class="container">
            <h2 class="display-6 fw-bold mb-4">Client Feedback</h2>
            <p class="text-secondary mb-5">What our partners and clients say about our collaboration.</p>

<div class="row g-4">
                
                <div class="col-lg-4">
                    <div class="card h-100 shadow-sm p-4 bg-light text-dark">
                        <p class="text-muted mb-4">"The project was delivered ahead of schedule with exceptional
                            attention to detail."</p>
                        <h6 class="fw-bold mb-0">Alex Johnson</h6>
                        <small class="text-muted">Tech Lead, InnovateCo</small>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 shadow-sm p-4 bg-light text-dark">
                        <p class="text-muted mb-4">"Highly impressed with the security protocols and privacy measures
                            integrated."</p>
                        <h6 class="fw-bold mb-0">Sarah Williams</h6>
                        <small class="text-muted">Product Manager</small>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100 shadow-sm p-4 bg-light text-dark">
                        <p class="text-muted mb-4">"The communication was seamless throughout the development process."
                        </p>
                        <h6 class="fw-bold mb-0">Michael Chen</h6>
                        <small class="text-muted">Founder, StartupX</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="row mb-5">
                <div class="col-lg-4 col-md-6">
                    <h5 class="mb-4">About Us</h5>
                    <p>We are dedicated to providing innovative solutions that help businesses grow and succeed in the
                        digital age.</p>
                </div>

<div class="col-lg-2 col-md-6">
                    <h5 class="mb-4">Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html" class="footer-link">Home</a></li>
                        <li><a href="about.html" class="footer-link">About</a></li>
                        <li><a href="service.html" class="footer-link">Services</a></li>
                        <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
                        <li><a href="contact.html" class="footer-link">Contact</a></li>
                    </ul>
                </div>

<div class="col-lg-2 col-md-6">
                    <h5 class="mb-4">Services</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="footer-link">Web Design</a></li>
                        <li><a href="#" class="footer-link">Development</a></li>
                        <li><a href="#" class="footer-link">Data Analytics</a></li>
                        <li><a href="#" class="footer-link">UI UX Design</a></li>
                        <li><a href="#" class="footer-link">ML / DL & NLP</a></li>
                    </ul>
                </div>

<div class="col-lg-4 col-md-6">
                    <h5 class="mb-4">Contact Info</h5>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-map-marker-alt me-2"></i> House: 20, Block J, South Banasree, Khilgaon,
                            Dhaka</li>
                        <li><i class="fas fa-phone me-2"></i> +01670000000</li>
                        <li><i class="fas fa-envelope me-2"></i> <a href="mailto:contact@example.com"
                                class="footer-link">contact@example.com</a></li>
                    </ul>
                </div>
            </div>

<div class="mb-4">
                <h5 class="mb-3">Current Time</h5>
                <div class="p-2 bg-light border rounded small text-dark d-inline-block" id="simple-timer">
                    Loading...
                </div>
            </div>

<hr class="w-50 border-secondary mb-4 mx-auto">

</div>
    </footer>

More Examples

Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

3 months ago

646

v.5.3
Agriculture Website for Live project_WDD

Author:
Anonymous

6 days ago

76

v.4.6
Liberation war Archive WDD

Author:
Anonymous

6 days ago

59

v.4.6
Hero slider

Author:
Juan Antonio González Hernández

3 months ago

1.4k

v.5.3
Elon Musk
nav and footer

Author:
RAHAT RAHMAN OFICIAL

1 month ago

260

v.4.6
3213
gg

Author:
L-1485

3 months ago

229

v.4.6
User Profile Card with Bootstrap
How to Use: Replace Image URL: Update the src attribute of the img tag to the actual URL of the user’s image. Update Text: Change the text inside the h5 and p elements to reflect the user’s actual name and biography

Author:
zobaidul kaziex

1 year ago

3.3k

v.4.6
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Talha Abdullah Bangyal

1 year ago

3.6k

v.5.3
Training & Certifications Section

Author:
Shahriar Noyon

1 month ago

218

v.4.6
Our Clients

Author:
Gana JNsksk

1 month ago

496

v.4.6
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

1 year ago

3.3k

v.4.6
Personal Biography Section

Author:
Shahriar Noyon

1 month ago

278

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent