→ Anonymous
→ Liberation war Archive WDD

Liberation war Archive WDD

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

Tags: Footer Header

Author Anonymous

v.4.6

Fork Fullscreen

<header>
        
        <div class="navber">
            <div class="container-fluid">
                <nav class="navbar navbar-expand-lg">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="index.html"><span>Liberation War Archive</span></a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav ms-auto gap-2">
                                <li class="nav-item">
                                    <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="interviews.html">Interviews</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="documents.html">Documents</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="photographs.html">Photographs</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="contact.html">Contact Us</a>
                                </li>

</ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

<section class="slider_section ">
            <div class="container ">
                <div class="row">
                    <div class="col-md-6 ">
                        <div class="detail-box">
                            <h1>
                                Liberation War Archive of <span class="text-danger">Bangla</span><span
                                    class="text-success">desh</span></h1>
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, natus error, quia
                                sit necessitatibus rerum fuga placeat omnis quam nulla odit est ipsum sint inventore
                                facere sequi illo velit officia asperiores! Nisi ab nesciunt magnam sapiente esse
                                corporis vitae aspernatur debitis aperiam quidem, sint fugiat sequi ipsum iusto eos
                                suscipit saepe! Excepturi asperiores nulla aspernatur qui! Quam qui dicta, odit
                                quia, non, veritatis sint eaque omnis cupiditate enim illo temporibus. Aut odio
                                minus repellat placeat mollitia minima earum ut, est aperiam labore quos libero
                                omnis fugit ullam tempora exercitationem tenetur impedit ratione obcaecati modi
                                delectus! Placeat, laudantium! Quos, magni saepe.
                            </p>

</div>
                    </div>
                    <div class="col-md-6">
                        <div class="img-box">
                            <img src="assets/images/victory.png" class="img-fluid w-100" alt="victory">
                        </div>
                    </div>
                </div>
            </div>
        </section>

</header>

<section class="document_section2">
        <div class="container my-5">
            <h2 class="section-title" style="text-align:center">Featured Documents</h2>

<div class="row">

<div class="col-md-3 mb-4">
                    <div class="card">
                        <img src="https://liberationwar.org/wp-content/uploads/2021/03/IMG-20210321-WA0007-1024x885.jpg"
                            class="card-img-top" height="260" alt="Important Document">
                        <div class="card-body text-start">
                            <h5 class="card-title">Historical Documents</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis esse
                                ea.
                                Iste, sapiente ex.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

<div class="col-md-3 mb-4">
                    <div class="card">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQp4anN5AsC79gO-upPnuVarG5tgH3yYgN5WQ&s"
                            class="card-img-top" height="260" alt="Interviews">
                        <div class="card-body">
                            <h5 class="card-title">Survivor Interviews</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, soluta
                                totam
                                voluptates quidem magnam!</p>
                            <a href="#" class="btn btn-primary">Listen Now</a>
                        </div>
                    </div>
                </div>

<div class="col-md-3 mb-4">
                    <div class="card">
                        <img src="https://thediplomat.com/wp-content/uploads/2021/03/sizes/td-story-s-2/thediplomat-2021-03-19-11.jpg"
                            class="card-img-top" height="260" alt="Photographs">
                        <div class="card-body">
                            <h5 class="card-title">Iconic Photographs</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt officiis,
                                harum vel architecto fugit perferendis?</p>
                            <a href="#" class="btn btn-primary">See Gallery</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="card">
                        <img src="https://thediplomat.com/wp-content/uploads/2021/03/sizes/td-story-s-2/thediplomat-2021-03-19-11.jpg"
                            class="card-img-top" height="260" alt="Photographs">
                        <div class="card-body">
                            <h5 class="card-title">Iconic Photographs</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt officiis,
                                harum vel architecto fugit perferendis?</p>
                            <a href="#" class="btn btn-primary">See Gallery</a>
                        </div>
                    </div>
                </div>

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

<section class="document_section2">
        <div class="container my-5">
            <h2 class="section-title " style="text-align: center;"> Interviews</h2>

<div class="row">

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

<section class="text-center my-5">
        <div class="container">
            <h2 class="my-5">Photographs from the Liberation War of Bangladesh</h2>

</div>

</div>
    </section>

<section class="info_section ">
        <div class="container">
            <h4>
                Contact Us
            </h4>
            <div class="row">
                <div class="col-lg-10 mx-auto">
                    <div class="info_items">
                        <div class="row">
                            <div class="col-md-4">
                                <a href="">
                                    <div class="item ">
                                        <div class="img-box ">
                                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                                        </div>
                                        <p>
                                            Send Documents to Contribute
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="">
                                    <div class="item ">
                                        <div class="img-box ">
                                            <i class="fa fa-phone" aria-hidden="true"></i>
                                        </div>
                                        <p>
                                            +880 123456789
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="">
                                    <div class="item ">
                                        <div class="img-box">
                                            <i class="fa fa-envelope" aria-hidden="true"></i>
                                        </div>
                                        <p>
                                            liberation_archive@gmail.com
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </section>

<section class="interview_section my-5">
        <div class="container py-5">
            <h2 class="text-center pb-4">Recorded Interviews of Liberation War Heroes</h2>
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://www.liberationwarmuseumbd.org/public/images/873070.jpg" class="card-img-top"
                            height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Treaty of Peace and Independence (1971)</h5>
                            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum aliquam
                                laudantium dolores! Libero amet sit cumque iure in quibusdam minus.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal1">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>

<div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://www.tbsnews.net/sites/default/files/styles/big_2/public/images/2023/03/26/bangabandhu_international_press_conference.jpg"
                            class="card-img-top" height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Bangladesh Declaration of Independence (1971)</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus rerum
                                qui
                                consectetur quasi dignissimos. Voluptate tempora doloremque nobis.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal2">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://www.tbsnews.net/sites/default/files/styles/big_3/public/images/2021/10/19/rim1971024w00023-17-bangladesh.jpg"
                            class="card-img-top" height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Official Correspondence Between India and Bangladesh</h5>
                            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae
                                perspiciatis qui sunt ad dignissimos maiores rerum? Modi natus aperiam temporibus.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal3">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bioModal2" tabindex="-1" aria-labelledby="bioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bioModalLabel">Interview Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Bangladesh Declaration of Independence (1971)</h4>
                    <p><strong>Published:</strong>26 March 1971</p>
                    <p><strong>Details:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati,
                        atque quo? Aspernatur dolor nobis, consectetur odio eum dolorem reprehenderit ea impedit
                        voluptate vero alias, molestias hic maxime ut sed quasi doloribus qui magni deleniti? Corporis
                        eius qui laboriosam obcaecati quibusdam?</p>

</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bioModal3" tabindex="-1" aria-labelledby="bioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bioModalLabel">Interview Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Official Correspondence Between India and Bangladesh (1971)</h4>
                    <p><strong>Published:</strong>November 1971</p>
                    <p><strong>Biography:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati,
                        atque quo? Aspernatur dolor nobis, consectetur odio eum dolorem reprehenderit ea impedit
                        voluptate vero alias, molestias hic maxime ut sed quasi doloribus qui magni deleniti? Corporis
                        eius qui laboriosam obcaecati quibusdam?</p>
                    <audio controls>
                        <source src="assets/audio/audio.mp3" type="audio/mpeg">
                    </audio>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<h2 class="text-center">Categorization of Documents</h2>
    <div class="container my-5">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
                    role="tab" aria-controls="home" aria-selected="true">Type</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button"
                    role="tab" aria-controls="profile" aria-selected="false">Date</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
                    role="tab" aria-controls="contact" aria-selected="false">Relevance</button>
            </li>
        </ul>

<div class="tab-content mt-3" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="container text-center">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="container text-center">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="container text-center">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card" style="width: 18rem;">
                                <img src="..." class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <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>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="container my-5">
        <h2 class="text-center py-4">Detailed View of Documents</h2>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5>Detailed View: Historical Document</h5>
                    </div>
                    <div class="card-body">
                        <div class="document-details">
                            <div class="document-detail-title">Treaty of Peace and Independence (1971)</div>
                            <div class="document-description">
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, illo. Vel expedita
                                    voluptatem itaque numquam obcaecati ab dolorum dicta voluptates ullam modi incidunt
                                    unde porro, explicabo libero soluta quis at!
                                </p>
                            </div>
                            <div>
                                <strong>Publication Date:k</strong> December 16, 1971
                            </div>
                            <div>
                                <strong>Source:</strong> National Archives of Bangladesh
                            </div>
                            <a href="#" class="btn btn-success mt-3">Download Document</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <h5>Detailed View: Historical Document</h5>
                    </div>
                    <div class="card-body">
                        <div class="document-details">
                            <div class="document-detail-title">Operation Jackpot (1971)</div>
                            <div class="document-description">
                                <p>
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, corrupti ut
                                    officiis, repellat laboriosam inventore accusamus, provident aperiam incidunt
                                    aliquid recusandae labore perferendis similique nobis est delectus..
                                </p>
                            </div>
                            <div>
                                <strong>Publication Date:</strong> December 16, 1971
                            </div>
                            <div>
                                <strong>Source:</strong> National Archives of Bangladesh
                            </div>
                            <a href="#" class="btn btn-success mt-3">Download Document</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<section class="interview_section my-5">
        <div class="container py-5">
            <h2 class="text-center pb-4">Recorded Interviews of Liberation War Heroes</h2>
            <div class="row justify-content-center">
                <div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://d2u0ktu8omkpf6.cloudfront.net/a6108b8e9990de6c702352c9cbd3494ad7037106368b19f8.jpeg"
                            class="card-img-top" height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Sheikh Mujibur Rahman</h5>
                            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum aliquam
                                laudantium dolores! Libero amet sit cumque iure in quibusdam minus.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal1">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>

<div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://naripokkho.org.bd/wp-content/uploads/2022/11/JEM.jpg" class="card-img-top"
                            height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Jahanara Imam</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus rerum
                                qui
                                consectetur quasi dignissimos. Voluptate tempora doloremque nobis.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal2">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow">
                        <img src="https://www.tbsnews.net/sites/default/files/styles/big_2/public/images/2022/05/19/085152untitled-1.jpg"
                            class="card-img-top" height="200" alt="Profile Image">
                        <div class="card-body text-center">
                            <h5 class="card-title">Abdul Ghaffar Choudhury</h5>
                            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae
                                perspiciatis qui sunt ad dignissimos maiores rerum? Modi natus aperiam temporibus.</p>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#bioModal3">
                                View Details
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="modal fade" id="bioModal1" tabindex="-1" aria-labelledby="bioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bioModalLabel">Interview Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Sheikh Mujibur Rahman</h4>
                    <p><strong>Role:</strong> Leader of Bangladesh Liberation War</p>
                    <p><strong>Biography:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati,
                        atque quo? Aspernatur dolor nobis, consectetur odio eum dolorem reprehenderit ea impedit
                        voluptate vero alias, molestias hic maxime ut sed quasi doloribus qui magni deleniti? Corporis
                        eius qui laboriosam obcaecati quibusdam?</p>
                    <audio controls>
                        <source src="assets/audio/audio.mp3" type="audio/mpeg">
                    </audio>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bioModal2" tabindex="-1" aria-labelledby="bioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bioModalLabel">Interview Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Jahanara Imam</h4>
                    <p><strong>Role:</strong>Writer and Activist</p>
                    <p><strong>Biography:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati,
                        atque quo? Aspernatur dolor nobis, consectetur odio eum dolorem reprehenderit ea impedit
                        voluptate vero alias, molestias hic maxime ut sed quasi doloribus qui magni deleniti? Corporis
                        eius qui laboriosam obcaecati quibusdam?</p>
                    <audio controls>
                        <source src="assets/audio/audio.mp3" type="audio/mpeg">
                    </audio>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bioModal3" tabindex="-1" aria-labelledby="bioModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bioModalLabel">Interview Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>Abdul Ghaffar Choudhury</h4>
                    <p><strong>Role:</strong>Poet and Freedom Fighter</p>
                    <p><strong>Biography:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati,
                        atque quo? Aspernatur dolor nobis, consectetur odio eum dolorem reprehenderit ea impedit
                        voluptate vero alias, molestias hic maxime ut sed quasi doloribus qui magni deleniti? Corporis
                        eius qui laboriosam obcaecati quibusdam?</p>
                    <audio controls>
                        <source src="assets/audio/audio.mp3" type="audio/mpeg">
                    </audio>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<section class="photographs_section my-5">
        <div class="container">
            <div class="heading text-center pt-5 pb-4">
                <h2 class="fw-bold fs-1 text-uppercase">Photographs from the Liberation War of Bangladesh</h2>
            </div>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-all-tab" data-bs-toggle="pill" data-bs-target="#pills-all"
                        type="button" role="tab" aria-controls="pills-all" aria-selected="true">All</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-theme-tab" data-bs-toggle="pill" data-bs-target="#pills-theme"
                        type="button" role="tab" aria-controls="pills-theme" aria-selected="false">Event</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-event-tab" data-bs-toggle="pill" data-bs-target="#pills-event"
                        type="button" role="tab" aria-controls="pills-event" aria-selected="false">Location</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-location-tab" data-bs-toggle="pill"
                        data-bs-target="#pills-location" type="button" role="tab" aria-controls="pills-location"
                        aria-selected="false">Theme</button>
                </li>

</ul>

<div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://live.staticflickr.com/4663/38560277340_1b53c3b1f5.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery10">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://live.staticflickr.com/4663/38560277340_1b53c3b1f5.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery11">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://live.staticflickr.com/4663/38560277340_1b53c3b1f5.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery12">
                                </div>
                            </div>
                        </div>

<div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://liberationwar.org/wp-content/uploads/2021/03/IMG-20210321-WA0023-1024x703.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery17">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://liberationwar.org/wp-content/uploads/2021/03/IMG-20210321-WA0023-1024x703.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery18">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://liberationwar.org/wp-content/uploads/2021/03/IMG-20210321-WA0023-1024x703.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery19">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-12 py-2">
                            <div class="card border-0">
                                <div class="card-body p-0">
                                    <img src="https://liberationwar.org/wp-content/uploads/2021/03/IMG-20210321-WA0023-1024x703.jpg"
                                        class="w-100 rounded img-fluid" alt="gallery20">
                                </div>
                            </div>
                        </div>

</div>
                </div>

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

<footer class="footer_section">
        <div class="container">
            <p>
                &copy; <span id="date"></span> All Rights Reserved By
                <a href="https://www.facebook.com/" class="text-info" target="_blank">Mehedi Alam</a>
            </p>
        </div>
    </footer>

<script src="vendor/bootstrap-5.3.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    </>
    <script src="assets/js/script.js"></script>

More Examples

Home Page of portfolio (WDD)

Author:
sajid taz

17 hours ago

168

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

13 hours ago

35

v.4.6
Elon Musk
nav and footer

Author:
RAHAT RAHMAN OFICIAL

4 weeks ago

254

v.4.6
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

5k

v.5.3
main html and js section keep nav and footer
do not copy

Author:
Fitar Ahmed

4 weeks ago

190

v.4.6
Footer

Author:
Tanvir fahad

4 weeks ago

289

v.4.6
Footer with social media icons

Author:
Omar Khaled

1 year ago

8.5k

v.5.3
page Title
goribera toder jonno kosto kore bana lam nsda exam er jonno

Author:
Ad Apon7

1 month ago

240

v.5.3
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
navber_and_footer_complate

Author:
Sahin Miah

4 weeks ago

217

v.4.6
about section bootstrap
about section rro

Author:
RAHAT RAHMAN OFICIAL

4 weeks ago

224

v.4.6
e mask 3
portfolio

Author:
RAHAT RAHMAN OFICIAL

4 weeks ago

206

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent