Note: This code is for practice and educational purposes only.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<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="service.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation start -->
<!-- Banner section start -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000">
<img src="image/banner 03.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="image/Banner 01.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="image/banner 02.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Banner section End -->
<!-- Service Section start -->
<h2 class="text-center my-3">Service Here</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"><i class="bi bi-filetype-html"></i>Software development</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" >
<div class="card-body">
<h5 class="card-title"><i class="bi bi-facebook"></i></i>Software development</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" >
<div class="card-body">
<h5 class="card-title"><i class="bi bi-facebook"></i></i>Software development</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>
<!-- Service Section start -->
<!-- featured projects start here -->
<h2 class="text-center my-3">Featured Projects</span></h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image/feature 01.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project - 01</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">More info</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/Feature02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project - 02</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">More info</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/Feature02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project - 03</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">More info</a>
</div>
</div>
</div>
</div>
</div>
<!-- featured projects end here -->
<!-- clients review start here -->
<h2 class="text-center my-3">Clients Reviews</span></h2>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Mr. ABCD</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>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Mr. WXYZ</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>
</div>
</div>
</div>
</div>
</div>
<!-- clients review end here -->
<!-- technology stack start here -->
<h2 class="text-center my-3"><span class="border-bottom border-4 border-info">Technology Stact</span></h2>
<div class="container">
<div class="d-flex justify-content-around">
<div>
<img src="image/React.png" alt="" class="w-75 rounded-circle">
</div>
<div>
<img src="image/larabel logo.jpg" alt="" class="w-75 rounded-circle">
</div>
<div>
<img src="image/js code.png" alt="" class="w-75 rounded-circle">
</div>
</div>
</div>
<!-- technology stack end here -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
about-us.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<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="service.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation start -->
<!-- Breadcrumb Start Here -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="service.html">Service</a></li>
<li class="breadcrumb-item"><a href="project.html">Project</a></li>
<li class="breadcrumb-item"><a href="project-details.html">Project-Details</a></li>
<li class="breadcrumb-item"><a href="about-us.html">About Us</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact </li>
</ol>
</nav>
<!-- Breadcrumb Start Here -->
<!-- company overview -->
<div class="container">
<div class="row align-items-center">
<div class="col-md-4">
<img src="image/service 02.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-8">
<div>
<h2 class=" fs-5 my-3">Our Mission</span></h2>
<p class="text-justify">
A company mission statement is a concise, actionable declaration defining an organization’s
purpose, what it does, who it serves, and its core values. It acts as a guide for daily
decision-making, setting strategic goals and motivating employees. Effective missions are
usually 1–2 sentences, bridging present operations with long-term goals
</p>
</div>
<div>
<h2 class=" fs-5 my-3">Our Mission</span></h2>
<p class="text-justify">
A company mission statement is a concise, actionable declaration defining an organization’s
purpose, what it does, who it serves, and its core values. It acts as a guide for daily
decision-making, setting strategic goals and motivating employees. Effective missions are
usually 1–2 sentences, bridging present operations with long-term goals
</div>
<div>
<h2 class=" fs-5 my-3">Our Mission</span></h2>
<p class="text-justify">
A company mission statement is a concise, actionable declaration defining an organization’s
purpose, what it does, who it serves, and its core values. It acts as a guide for daily
decision-making, setting strategic goals and motivating employees. Effective missions are
usually 1–2 sentences, bridging present operations with long-term goals
</p>
</div>
</div>
</div>
</div>
<!-- company overview -->
<!-- team member section -->
<h2 class="text-center my-3">Team Member</span></h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="image/Service section 01.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">abdul Gofur</h5>
<p class="card-text">Manager</p>
<ul class="list-group list-group-horizontal justify-content-center">
<div>
<a href="#" class="me-2">LinkedIn</a>
<a href="#" class="me-2">Twitter</a>
</div>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/service 03.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Abdullah al-Helal</h5>
<p class="card-text">Engineer</p>
<ul class="list-group list-group-horizontal justify-content-center">
<div>
<a href="#" class="me-2">LinkedIn</a>
<a href="#" class="me-2">Twitter</a>
</div>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/service 02.jpg" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Sajib khan</h5>
<p class="card-text">Assistant Manager</p>
<ul class="list-group list-group-horizontal justify-content-center">
<div>
<a href="#" class="me-2">LinkedIn</a>
<a href="#" class="me-2">Twitter</a>
</div>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/service 02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lamiya aktar Rova</h5>
<p class="card-text">Cleaneer</p>
<ul class="list-group list-group-horizontal justify-content-center">
<div>
<a href="#" class="me-2">LinkedIn</a>
<a href="#" class="me-2">Twitter</a>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- team member section -->
<!-- Career Opportunities -->
<div class="container py-5">
<div class="row justify-content-center">
<table class="table table-hover w-75">
<thead>
<tr>
<th scope="col">SL Number </th>
<th scope="col">Position Name</th>
<th scope="col">Action Now</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hardware Engneer </td>
<td>
<a href="#" class="btn btn-primary">Apply Now</a>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>office Assistant</td>
<td>
<a href="#" class="btn btn-primary">Apply Now</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Career Opportunities -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
contact.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<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="service.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation start -->
<!-- Breadcrumb Start Here -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="service.html">Service</a></li>
<li class="breadcrumb-item"><a href="project.html">Project</a></li>
<li class="breadcrumb-item"><a href="project-details.html">Project-Details</a></li>
<li class="breadcrumb-item"><a href="about-us.html">About Us</a></li>
<li class="breadcrumb-item"><a href="contract.html">Contact </a></li>
</ol>
</nav>
<!-- Breadcrumb Start Here -->
<!-- contact section start -->
<div class="container">
<div class="row justify-content-center">
<h2 class="fs-4 text-center">Contact Form</h2>
<form class="w-50" onsubmit="alert('Form Submited successfully')">
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="Text" class="form-control" id="name" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="subject" class="form-label">Mobile NO </label>
<input type="Text" class="form-control" id="subject" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Your Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="row py-5">
<h2 class="fs-4 text-center">Google Maps</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29064.830980154737!2d88.95840437183463!3d24.41245868528057!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39fc11714a398415%3A0x4b786d401795f55b!2sNatore!5e0!3m2!1sen!2sbd!4v1772611966264!5m2!1sen!2sbd" width="100" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<div class="row">
<h2 class="fs-4 text-center">Contact Information</h2>
<ul class="list-group ">
<li class="list-group-item d-flex align-items-center">
<h3>Address:</h3>
<span> Salgariya Talbagan road pabna sodor Pabna</span>
</li>
<li class="list-group-item d-flex align-items-center">
<h3>Phone:</h3>
<a href="tel:+880258051151">01738242082</a>
</li>
<li class="list-group-item d-flex align-items-center">
<h3>Email:</h3>
<a href=>abdullahalhelal@gmail.com</a>
</li>
</ul>
</div>
</div>
<!-- contact section End -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
project-details.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.html">Home</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="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" active href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation start -->
<!-- Breadcrumb Start Here -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="service.html">Service</a></li>
<li class="breadcrumb-item"><a href="project-details.html">Project-Details</a></li>
<li class="breadcrumb-item active" aria-current="page">About Us</li>
</ol>
</nav>
<!-- Breadcrumb Start Here -->
<!-- project details section start -->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="overflow-hidden">
<img src="image/client02.jpg" alt="project image 01" class="img-fluid img-zoom">
</div>
</div>
<div class="col-md-7">
<h2>Project Information</h2>
<p>This Project run on December it include software hardware other apps</p>
<p>Client name: <a href="">Ptsc</a></p>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Civil</li>
<li class="list-group-item">Electrical</li>
<li class="">Mechnical</li>
</ul>
</div>
</div>
</div>
<!-- project details section End -->
<!-- featured projects start here -->
<h2 class="text-center my-3">Related Projects</span></h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image/feature 01.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Bangladesh</h5>
<p class="card-text">It is our homeland</p>
<a href="#" class="btn btn-primary">Visit</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/client pic.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Bangladesh</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">More info</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/client02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project - 03</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">More info</a>
</div>
</div>
</div>
</div>
</div>
<!-- featured projects end here -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
project.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<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="service.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation start -->
<!-- Breadcrumb Start Here -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="service.html">Service</a></li>
<li class="breadcrumb-item active" aria-current="page">Project</li>
</ol>
</nav>
<!-- Breadcrumb Start Here -->
<!-- project categories and section start -->
<div class="container py-5">
<div class="row">
<div class="col-md-3">
<h2 class="text-center fs-5 my-3">Project Categories Filter </h2>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Filter
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="list-group">
<li class="list-group-item">Web Apps</li>
<li class="list-group-item">Mobile App</li>
<li class="list-group-item">Ui/UX</li>
</ul>
<!-- Project Section Card -->
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image/service 02.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Software</h5>
<p class="card-text">Sofware very important of All Country??</p>
<a href="/project-details.html" class="btn btn-primary">r u Agree Now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/service 03.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Electronics All Device </h5>
<p class="card-text">Mobile Electronic Other's</p>
<a href="/project-details.html" class="btn btn-primary">U R Rich man</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/service 03.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hardware</h5>
<p class="card-text">Ram, Rom Monitor keyboard Etc</p>
<a target="_blank" href="/project-details.html" class="btn btn-primary">Go
Need Anything</a>
</div>
</div>
</div>
</div>
<div class="row my-3 ">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- project categories and section end -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
service.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Software-development</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<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 mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">abdullahhelal@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">01738242082</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebok</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">X</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">youtube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</div>
</div>
</nav>
<!-- header end -->
<!-- navigation start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" class="w-25">
</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 mx-auto mb-2 mb-lg-0">
<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" active href="service.html">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project.html">Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-details.html">Project-Details
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contract.html">Contact
</a>
</li>
</div>
</div>
</nav>
<!-- navigation end -->
<!-- Breadcrumb Start Here -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Service</li>
</ol>
</nav>
<!-- Breadcrumb Start Here -->
<!-- service section start here -->
<h2 class="text-center my-3">Service List</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Software Development
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>Farmer apps </li>
<li>Bangladesh Appss </li>
<li>Books Apps </li>
<li>Other's </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
App Development
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>Farmer apps </li>
<li>Bangladesh Appss </li>
<li>Books Apps </li>
<li>Other's </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Website Development
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>Farmer apps </li>
<li>Bangladesh Appss </li>
<li>Books Apps </li>
<li>Other's </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- service section end here -->
<!-- service details start here -->
<h2 class="text-center my-3">Service Details</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false"
aria-controls="flush-collapseFour">
Software Development
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Bangladesh, to the east of India on the Bay of Bengal, is a South Asian country marked
by lush greenery and many waterways. Its Padma (Ganges), Meghna and Jamuna rivers create
fertile plains, and travel by boat is common. On the southern coast, the Sundarbans, an
enormous mangrove forest shared with Eastern India, is home to the royal Bengal tiger.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false"
aria-controls="flush-collapseFive">
App Development
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Bangladesh, to the east of India on the Bay of Bengal, is a
South Asian country marked by lush greenery and many waterways. Its Padma (Ganges),
Meghna and Jamuna rivers create fertile plains, and travel by boat is common. On the
southern coast, the Sundarbans, an enormous mangrove forest shared with Eastern India,
is home to the royal Bengal tiger.
.</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false"
aria-controls="flush-collapseSix">
Website Development
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Bangladesh, to the east of India on the Bay of Bengal, is a
South Asian country marked by lush greenery and many waterways. Its Padma (Ganges),
Meghna and Jamuna rivers create fertile plains, and travel by boat is common. On the
southern coast, the Sundarbans, an enormous mangrove forest shared with Eastern India,
is home to the royal Bengal tiger.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- service details end here -->
<!-- footer big footer start -->
<div class="container">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-2 mb-3">
<h5>company info </h5>
<p>A company is a legal entity formed by individuals or groups to engage in business, acting as
separate "artificial person" distinct from its owners.
</p>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>quick link </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Home</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Features</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Pricing</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Social Media </h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">Facebook </a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">instragram</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">whatapps</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of what's new and exciting from us.</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="email" class="form-control" placeholder="Email address" />
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p>: <span id="datetime-display"></span></p>
<ul class="list-unstyled d-flex">
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a>
</li>
<li class="ms-3">
<a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24"
height="24" aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></a>
</li>
</ul>
</div>
</footer>
<!-- footer big footer end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
script.js
// Function to fetch and display the current date and time
function displayDateTime() {
// Create a new Date object to get the current moment
const currentDateTime = new Date();
// Format the date and time into a human-readable string
// You can customize the formatting using methods like toLocaleString(), toDateString(), etc.
const formattedDateTime = currentDateTime.toLocaleString(); // e.g., "3/3/2026, 9:15:20 PM"
// Update the content of the HTML element
const displayElement = document.getElementById('datetime-display');
if (displayElement) {
displayElement.textContent = formattedDateTime;
}
// Optional: Update the 'datetime' attribute of a <time> tag for machine readability
const timeElement = document.getElementById('current-time-element');
if (timeElement) {
timeElement.setAttribute('datetime', currentDateTime.toISOString());
timeElement.textContent = formattedDateTime;
}
}
// Call the function once to display the time immediately when the page loads
displayDateTime();
// Update the display every second (1000 milliseconds)
setInterval(displayDateTime, 1000);
style.css
.nav-item{
border-radius: 10px;
transition: .5s ease;
}
.nav-item:hover{
background-color: bisque;
margin: 0px 10px;
}
.img-zoom{
transition: all .5s ease-in-out;
}
.img-zoom:hover{
transform: scale(1.2);
}
