→ lamiajahan
→ portfolio

portfolio

This bootstrap css example is contributed by lamiajahan, on 24-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Footer Banner Navbar

Author lamiajahan

126

v.4.6

Fork Fullscreen

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">Its Tithy</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav m-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="portfolio.html">portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="service.html">Service</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>   
    </div>
  </div>
</nav>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<div class="col-lg-7 ps-lg-5">
                    <h6 class="text-primary fw-bold text-uppercase mb-2">Identification</h6>
                    <h2 class="display-6 fw-bold mb-4">Personal Details</h2>

<div class="row">
                        
                        <div class="col-md-6">
                            <div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-person-fill"></i>
                                </div>
                                <div>
                                    <p>Name</p>
                                    <P>Lamia Jahan</P>
                                </div>
                            </div>

<div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-envelope-at-fill"></i>
                                </div>
                                <div>
                                    <p class="info-label">Email</p>
                                    <p class="info-value">lamiajahan@example.com</p>
                                </div>
                            </div>

<div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-geo-alt-fill"></i>
                                </div>
                                <div>
                                    <p class="info-label">Location</p>
                                    <p class="info-value">Dhaka,Bangladesh</p>
                                </div>
                            </div>
                        </div>

<div class="col-md-6">
                            <div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-calendar-check-fill"></i>
                                </div>
                                <div>
                                    <p class="info-label">Availability</p>
                                    <p class="info-value">Full-time / Freelance</p>
                                </div>
                            </div>
                            <div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-translate"></i>
                                </div>
                                <div>
                                    <p class="info-label">Languages</p>
                                    <p class="info-value">English, Bengali</p>
                                </div>
                            </div>

<div class="info-list-item">
                                <div class="info-icon">
                                    <i class="bi bi-globe"></i>
                                </div>
                                <div>
                                    <p class="info-label">Website</p>
                                    <p class="info-value">www.creative it.com</p>
                                </div>
                            </div>
                        </div>
                    </div>

</div>
            </div>
        </div>
    </section>
    
      
    <section>
        <div class="text-center mt-5">
            <h2>My Education information</h2>
            <div class="education-part">
                <div class="card" style="width: 18rem;">
                    <img src="image/images DU.png" class="card-img-top" alt="images DU">
                    <div class="card-body">
                        <h3>BSc</h3>
                        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets.</p>
                    </div>
                </div>
                <div class="card" style="width: 18rem;">
                    <img src="image/dcgpsc.jpg" class="card-img-top" alt="dcgpsc">
                    <div class="card-body">
                        <h3>Higher Secondary</h3>
                        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets.</p>
                    </div>
                </div>
                <div class="card" style="width: 18rem;">
                    <img src="image/মীরপুর_বাংলা_স্কুল_এন্ড_কলেজের_লোগো.png" class="card-img-top" alt="মীরপুর_বাংলা_স্কুল_এন্ড_কলেজের_লোগো">
                    <div class="card-body">
                        <h3>Secondary School</h3>
                        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets.</p>
                    </div>
                </div>
            </div>
    </section>
    
      
    <section>
        <div class="text-center mt-5 bg-primary-subtle">
            <h2>My special skill</h2>
            <br>
            <div class="row">
                <div class="col-sm-6 mb-3 mb-sm-0">
                    <div class="card bg-warning">
                        <div class="card-body">
                            <h5 class="card-title">HTML</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card bg-danger">
                        <div class="card-body">
                            <h5 class="card-title">CSS</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 mb-3 mb-sm-0">
                    <div class="card bg-danger-subtle">
                        <div class="card-body">
                            <h5 class="card-title">JavaScript</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>

</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card bg-warning-subtle">
                        <div class="card-body">
                            <h5 class="card-title">C+</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>

</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 mb-3 mb-sm-0">
                    <div class="card bg-info">
                        <div class="card-body">
                            <h5 class="card-title">C++</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>

</div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card bg-primary-subtle">
                        <div class="card-body">
                            <h5 class="card-title">Python</h5>
                            <p class="card-text">With supporting text below as a natural lead-in to additional content.
                            </p>

</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
     
        <section>
            <div class="certificate-part text-center mt-5 bg-success-subtle">
                <h1>Training and Certifications</h1>
                <br>
                <div class="certificate-card">
                    <div class="card" style="width: 18rem;">
                        <div class="card-body bg-danger-subtle">
                            <h5 class="card-title">Creative it</h5>
                            <h6 class="card-subtitle mb-2 text-body-secondary">Graphics desing</h6>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card’s content.</p>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">
                                My certificate
                            </button>
                            
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">Certificate</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <img src="image/certificate.jpg" width="300"
                                                alt="">

</div>

</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                        <div class="card-body bg-info">
                            <h5 class="card-title">Creative it</h5>
                            <h6 class="card-subtitle mb-2 text-body-secondary">Web developing</h6>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card’s content.</p>

</div>

</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card" style="width: 18rem;">
                        <div class="card-body bg-info-subtle">
                            <h5 class="card-title">Creative it</h5>
                            <h6 class="card-subtitle mb-2 text-body-secondary">UI/UX</h6>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card’s content.</p>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#exampleModal">
                                My certificate
                            </button>
                            
                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                                aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h1 class="modal-title fs-5" id="exampleModalLabel">certificate</h1>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <img src="image/certificate.jpg" width="300" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

</div>

</div>
        </section>

<section>
            <div class="text-center mt-5">
                <h1>Working Experiences</h1>
                <div class="working-part mt-5">
                    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Senoir Software Engineer</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Tech Solutions Inc. | Full-time</h6>
    <p class="card-text">
        <ul>
            <li>Developed over 20+ responsive websites using Bootstrap and JavaScript.</li>
            <li>Improved website loading speeds by 40% across client portfolios.</li>
            <li>Collaborated with UI/UX designers to translate Figma files into code</li>
            </ul>
    </p>

</div>
</div>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Junior Merchandiser</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Creative Web Agency | Contract</h6>
    <p class="card-text">
        <ul>
            <li>Lead a team of 5 developers to build scalable SaaS applications</li>
            <li>Reduced server costs by 30% through optimized cloud architecture</li>
            <li>Mentored junior staff and implemented CI/CD pipelines</li>
        </ul>
    </p>
  </div>
</div>
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Junior Developer</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Startup Hub | Internship</h6>
    <p class="card-text">
        <ul>
            <li>Assisted in the maintenance of legacy PHP applications</li>
            <li>Debugged front-end issues and performed cross-browser testing</li>
        </ul>
    </p>
  </div>
</div>

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

<footer class="bg-dark text-light py-5 my-5">
    <div class="container">
        <div class="row g-4">
            
            <div class="col-lg-4 col-md-6">
                <h5 class="mb-4">About Us</h5>
                <p class="mb-4">We are dedicated to providing innovative solutions that help businesses grow and succeed
                    in the digital age.</p>
                <div class="social-links">
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon bg-info"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon bg-danger"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Quick Links</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Home</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">About</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Services</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Portfolio</a></li>
                    <li class="mb-2"><a href="#" 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 class="mb-2"><a href="#" class="footer-link">Web Design</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Development</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Marketing</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Consulting</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Analytics</a></li>
                </ul>
            </div>

<div class="col-lg-4 col-md-6">
                <h5 class="mb-4">Contact Info</h5>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        123 Business Street, New York, NY 10001
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+1234567890" class="footer-link">+1 (234) 567-890</a>
                    </li>
                    <li class="mb-3">
                        <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="row mt-5">
            <div class="col-12">
                <hr class="mb-4">
                <div class="text-center">
                    <p class="mb-0">&copy; 2024 Your Company. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

More Examples

E-Commerce index

Author:
Creative Araf

2 months ago

243

v.5.3
Personal Portfolio Index

Author:
Creative Araf

2 months ago

213

v.5.3
Restaurant About Page

Author:
Creative Araf

1 month ago

121

v.5.3
Restaurant Menu Page

Author:
Creative Araf

1 month ago

115

v.5.3
E-com Cart Page

Author:
Creative Araf

1 month ago

79

v.5.3
Coffee website
coffee website

Author:
Faysal

1 month ago

131

v.4.6
home page

Author:
lamiajahan

1 month ago

115

v.4.6
about page

Author:
lamiajahan

1 month ago

122

v.4.6
service

Author:
lamiajahan

1 month ago

121

v.4.6
contact

Author:
lamiajahan

1 month ago

97

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

320

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

207

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent