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>Newspotal-Home</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="category.html" data-bs-toggle="dropdown"
aria-expanded="true">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="category.html"> Category Section</a></li>
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- Breaking News start -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="images/banner1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/banner2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/banner3.png" 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>
<!-- Breaking News end -->
<!-- Lead new and four news start -->
<div class="container mt-4 ">
<div class="row my-5">
<div class="col-md-4 ">
<div class="card">
<img src="images/news1.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">IRAN PRESIDENT DEATH</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium itaque
quia quas! Excepturi repellat, ipsum dicta modi ea quas consequuntur</p>
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="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. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Animi suscipit nam, labore assumenda blanditiis ex perspiciatis non veritatis
quaerat iste.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="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. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Animi suscipit nam, labore assumenda blanditiis ex perspiciatis non veritatis
quaerat iste.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="images/news3.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="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. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Animi suscipit nam, labore assumenda blanditiis ex perspiciatis non veritatis
quaerat iste.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Lead new and four news end -->
<!-- Latest News start -->
<div class="container">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Latest News</span></h2>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="images/news1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
</div>
</div>
<!-- Latest News end -->
<!-- National News start -->
<div class="container my-4">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">National News</span></h2>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
</div>
</div>
<!-- Latest News end -->
<!-- Education News start -->
<div class="container my-5">
<h2 class="text-center"><span class="border-bottom border-4 border-danger"> Education News </span></h2>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="images/news3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae!</p>
<a href="#" class="btn btn-primary">More details</a>
</div>
</div>
</div>
</div>
</div>
<!-- Education News end -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</body>
</html>
about.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newspotal-about</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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 active" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="category.html"> Category Section</a></li>
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- breadcrumb start -->
<div class="container">
<div class="row">
<nav 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">About</li>
</ol>
</nav>
</div>
</div>
<!-- breadcrumb end -->
<!-- Editor Speechstart -->
<div class="container my-4">
<div class="row align-items-center">
<div class="col-md-4">
<img src="images/aditor.png" alt="" class="img-fluid ">
</div>
<div class="col-md-8">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Editor Speech</span></h2>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo rem, quidem magni
explicabo similique amet blanditiis molestias culpa ut debitis dolor ea, dolore delectus eaque
aperiam unde. Maxime minima atque voluptates magni sunt. Totam laboriosam eos at obcaecati
reprehenderit voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
aperiam accusantium, libero nobis sapiente cumque architecto molestias! Enim, illo voluptates.</p>
</div>
</div>
</div>
<!-- Editor Speech end -->
<!-- advertisement Policy -->
<div class="container">
<div class="row my-5">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Advertisement Policy</span></h2>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ut repudiandae delectus obcaecati
explicabo magni adipisci assumenda ad fuga, reprehenderit error voluptatibus quaerat temporibus nobis!
Enim rerum earum repellat eveniet! Commodi placeat amet rem sit corrupti non distinctio voluptas nobis
exercitationem suscipit ut quibusdam, esse error labore velit nam officia iusto deleniti pariatur
accusamus! Ratione assumenda nam facere laudantium recusandae.</p>
</div>
</div>
<!-- advertisement Policy end -->
<!-- News Policy -->
<div class="container">
<div class="row my-5">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">News Policy</span></h2>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores ut repudiandae delectus obcaecati
explicabo magni adipisci assumenda ad fuga, reprehenderit error voluptatibus quaerat temporibus nobis!
Enim rerum earum repellat eveniet! Commodi placeat amet rem sit corrupti non distinctio voluptas nobis
exercitationem suscipit ut quibusdam, esse error labore velit nam officia iusto deleniti pariatur
accusamus! Ratione assumenda nam facere laudantium recusandae.</p>
</div>
</div>
<!-- News Policy end -->
<!-- Administrative Staff start -->
<div class="container">
<div class="row mt-4">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-danger">Administrative Staff</span></h2>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Managing Director</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Managing Director</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Managing Director</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Managing Director</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
</div>
</div>
<!-- Administrative Staff end -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="" class="img-fluid w-25">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam
ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</body>
</html>
author.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newspotal-Home</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="category.html" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- breadcrumb start -->
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="about.html">About</a></li>
<li class="breadcrumb-item"><a href="category.html">Category</a></li>
<li class="breadcrumb-item active" aria-current="page">Author</li>
</ol>
</nav>
</div>
</div>
<!-- breadcrumb end -->
<!-- Editor Speechstart -->
<div class="container my-4">
<div class="row align-items-center">
<div class="col-md-4">
<img src="images/aditor.png" alt="" class="img-fluid ">
</div>
<div class="col-md-8">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Editor Speech</span></h2>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo rem, quidem magni
explicabo similique amet blanditiis molestias culpa ut debitis dolor ea, dolore delectus eaque
aperiam unde. Maxime minima atque voluptates magni sunt. Totam laboriosam eos at obcaecati
reprehenderit voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
aperiam accusantium, libero nobis sapiente cumque architecto molestias! Enim, illo voluptates.</p>
</div>
</div>
</div>
<!-- Editor Speech end -->
<!-- Senior Repoter start -->
<div class="container">
<div class="row mt-4">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-danger">Senior Repoter</span></h2>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Senior Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Senior Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Senior Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">Senior Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
</div>
</div>
<!-- Senior Repoter end -->
<!--General Repoter start -->
<div class="container">
<div class="row mt-4">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-danger">General Repoter</span></h2>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">General Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">General Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">General Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/aditor.png" class="card-img-top" alt="..." class="img-fluid">
<div class="card-body">
<h5 class="card-title">Md Reza</h5>
<p class="card-text">General Repoter</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius ad quo autem quis suscipit
iusto, dolore ipsam beatae facilis numquam?</p>
</div>
</div>
</div>
</div>
</div>
<!-- General Repoter Staff end -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="" class="img-fluid w-25">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</body>
</html>
category.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newspotal-Home</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="category.html" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="category.html"> Category Section</a></li>
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- breadcrumb start -->
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="about.html">About</a></li>
<li class="breadcrumb-item active" aria-current="page">Category</li>
</ol>
</nav>
</div>
</div>
<!-- breadcrumb end -->
<!-- Category News start -->
<div class="container my-4">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Category News</span></h2>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam, corrupti!</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Totam, nesciunt!</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Quis, nemo.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Quibusdam, perspiciatis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Category News end -->
<!-- Advertisement start -->
<div class="container">
<div class="row mt-5 ">
<div class="col-md-6 ">
<img src="images/advertize.png" alt="">
<img src="images/advertisement.png" alt="">
</div>
<div class="col-md-6">
<img src="images/advertize.png" alt="">
<img src="images/advertisement.png" alt="">
</div>
</div>
</div>
<!-- Advertisement end -->
<!-- Category News start -->
<div class="container my-4">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Category News</span></h2>
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quibusdam, corrupti!</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Totam, nesciunt!</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Quis, nemo.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="images/news2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit
similique voluptatibus autem optio, iusto numquam repellat accusamus fugiat quis itaque!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt sequi dolores eum unde
explicabo? Natus asperiores pariatur itaque atque quae! Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Quibusdam, perspiciatis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Category News end -->
<!-- pagination start -->
<div class="container">
<div class="row">
<nav aria-label="Page navigation example">
<ul class="pagination">
<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>
<!-- pagination end -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="" class="img-fluid w-25">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</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>Newspotal-Home</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="category.html" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- breadcrumb start -->
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="about.html">About</a></li>
<li class="breadcrumb-item"><a href="category.html">Category</a></li>
<li class="breadcrumb-item"><a href="author.html">Author</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
</div>
</div>
<!-- breadcrumb end -->
<!-- contact information start -->
<div class="container">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Contact Information</span></h2>
<div class="row">
<div class="col-md-5 mx-auto mt-4">
<table class="table table-bordered shadow-sm">
<tr>
<th scope="row">Address</th>
<td>Mirpur -10 ,dhaka -1207</td>
</tr>
<tr>
<th scope="row">Phone</th>
<td><a href="#">0175225222</a></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><a href="#">dtti@gamil.com</a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- contact information end -->
<!-- form Section start -->
<div class="container mt-3">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Form</span></h2>
<div class="row">
<div class="col-md-5 mt-4 mx-auto">
<form onsubmit="alert('Submit Sucessfully')">
<div class="mb-3">
<label for="n" class="form-label">Name</label>
<input type="text" class="form-control" id="n">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="p" class="form-label">Mobile</label>
<input type="tel" class="form-control" id="p">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
<!-- form Section end -->
<!-- Google Map -->
<div class="container my-4">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Google Map</span></h2>
<div class="col-md-8 mx-auto">
<div class="div my-4 ">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.110526978074!2d90.34817957522299!3d23.77907818767503!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c1380651b5ef%3A0xe41f7a237faaaf2d!2sDhaka%20Technical%20Teachers%20Training%20Institute-DTTTI!5e0!3m2!1sen!2sbd!4v1772688541579!5m2!1sen!2sbd" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<!-- Google Map -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="" class="img-fluid w-25">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</body>
</html>
login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Newspotal-Home</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 top 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 " aria-current="page" href="#">news@gmail.com</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">017254852</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LinkedIN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- header top end -->
<!-- navbar start -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""
class="img-fluid w-25 rounded-circle"></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="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="category.html" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">National Politics</a></li>
<li><a class="dropdown-item" href="#">Sports</a></li>
<li><a class="dropdown-item" href="#">Education</a></li>
<li><a class="dropdown-item" href="#">Entertainment etc.</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="author.html">Author</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
<!-- breadcrumb start -->
<div class="container">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item"><a href="about.html">About</a></li>
<li class="breadcrumb-item"><a href="category.html">Category</a></li>
<li class="breadcrumb-item"><a href="author.html">Author</a></li>
<li class="breadcrumb-item"><a href="contact.html">Contact</a></li>
<li class="breadcrumb-item active" aria-current="page">Login</li>
</ol>
</nav>
</div>
</div>
<!-- breadcrumb end -->
<!-- form Section start -->
<div class="container mt-3">
<h2 class="text-center"><span class="border-bottom border-4 border-danger">Login</span></h2>
<div class="row">
<div class="col-md-5 mt-4 mx-auto">
<form onsubmit="alert('Submit Sucessfully')">
<div class="mb-3">
<label for="n" class="form-label">User Name</label>
<input type="text" class="form-control" id="n">
</div>
<div class="mb-3">
<label for="pa" class="form-label">Password</label>
<input type="password" class="form-control" id="pa">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!-- form Section end -->
<!-- big footer and footer start -->
<div class="container-fluid mt-4 px-3">
<footer class="py-5">
<div class="row">
<div class="col-6 col-md-4 mb-3">
<h5><img src="images/logo.png" alt="" class="img-fluid w-25">Newspaper</h5>
<ul class="nav flex-column">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam ullam
iste magnam velit. Laboriosam perferendis nostrum in reprehenderit, culpa veniam.</p>
</ul>
</div>
<div class="col-6 col-md-3 mb-3">
<h5>Communication US</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a href="in" class="nav-link p-0 text-body-secondary">0172546632</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link p-0 text-body-secondary">news@gmail.com</a>
</li>
<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>
</ul>
</div>
<div class="col-md-4 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 border-4">
<p>© 2025 Company, Inc. All rights reserved.</p>
<p id="datetime-display"></p>
</div>
</footer>
</div>
<!-- big footer and footer end -->
<script src="js/script.js"></script>
<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>
</body>
</html>
script.js
function displayDateTime() {
const currentDateTime = new Date();
const formattedDateTime = currentDateTime.toLocaleString();
const datetimeDisplayElement = document.getElementById('datetime-display');
if (datetimeDisplayElement) {
datetimeDisplayElement.textContent = formattedDateTime;
}
}
displayDateTime();
setInterval(displayDateTime, 1000);
style.css
.nav-item{
transition: .5s ease;
border-radius: 5px;
margin: 5px;
}
.nav-item:hover{
background-color: brown;
} 