Note: This code is for practice and educational purposes only.
At First Create Folder namde with(
css(style.css)
and js(script.js)).
Create File named:
- index.html
- about.html
- contact.html
- faq.html
Home Page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TTC - 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>
<!-- navbar start here -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand m-0 p-0" href="index.html">
<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="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end here -->
<!-- banner start here -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="3000">
<img src="image/banner1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="image/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="image/banner3.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 end here -->
<!-- band details start here -->
<section class="container mt-5">
<h2 class="text-center"><span class="border-bottom border-4 border-dark">Band Details</span></h2>
<div class="row">
<div class="col-md-4">
<div>
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" alt="" class="img-fluid img-thumbnail">
</div>
</div>
<div class="col-md-8">
<div>
<h3>Dhaka Technical Teachers Training Institute, Dhaka.</h3>
<p class="text-just">Bangladesh is a small country with a large population of 160 million. This
provides a huge
potential for further economic development, but progress is hindered by three main factors: Poor
infrastructure, Lack of quality training and the Lack of Skilled workforces. Lack of skills
reflect in the countries high rate of unemployment and it also cause underemployment. Bangladesh
has more than 10 million migrant workers, but most of them are low skilled, making money in low
paid jobs. Bureau of Manpower, Employment & Training (BMET) operates 104 Technical Training
Centre (TTC), 6 Institutes of Marine Technologies which have a focus on skills training.
Moreover, TTCs will be established in every Upazila (subdistrict) in the near future.
TVET teachers are the prime movers of skills training. To be able to produce trainees equipped
with technical skills that could meet the skills requirements, there is a need to improve and
enhance the pedagogical and technical skills of TVET teachers. With the view of updating the
knowledge and skills of TVET teachers in Bangladesh, Dhaka Technical Teachers' Training
Institute (DTTTI) Can play a vital role. For this reason the Ministry of Expatriates' Welfare
and Overseas Employment established Dhaka Technical Teachers' Training Institute (DTTTI) with
the assistance of Islamic Development Bank (IsDB).</p>
</div>
</div>
</div>
</section>
<!-- band details end here -->
<!-- members profile start here -->
<section class="container mt-5">
<h2 class="text-center"><span class="border-bottom border-4 border-dark">Members Profile</span></h2>
<div class="row">
<div class="col-md-3">
<div class="card">
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/member1.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/member2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="image/member3.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
</div>
</section>
<!-- members profile end here -->
<!-- fan's feedback start here -->
<section class="container mt-5">
<h2 class="text-center mb-3"><span class="border-bottom border-4 border-dark">Fan's Feedback</span></h2>
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-5">
<div>
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" alt="" class="img-fluid rounded-circle">
</div>
</div>
<div class="col-md-7">
<div>
<h5>Md. Sakawat Ali</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, architecto.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-5">
<div>
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" alt="" class="img-fluid rounded-circle">
</div>
</div>
<div class="col-md-7">
<div>
<h5>Md. Sakawat Ali</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, architecto.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-5">
<div>
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" alt="" class="img-fluid rounded-circle">
</div>
</div>
<div class="col-md-7">
<div>
<h5>Md. Sakawat Ali</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, architecto.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fan's feedback end here -->
<!-- gallery start here -->
<section class="container mt-5">
<h2 class="text-center mb-3"><span class="border-bottom border-4 border-dark">Gallery</span></h2>
<div class="row g-2">
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-4">
<div>
<img src="image/banner1.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- gallery end here -->
<!-- footer start here -->
<footer class="bg-info mt-4 text-center">
<p>© Copyright Restricted!</p>
<p id="dateTime"></p>
</footer>
<!-- footer end here -->
<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 Page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TTC - About Us</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>
<!-- navbar start here -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand m-0 p-0" href="index.html">
<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 active" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end here -->
<!-- staff profile start here -->
<section class="container mt-5">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">Staff Profile</span></h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="image/member3.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/member1.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="image/member2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dr Engr Md Sakawat Ali</h5>
<p class="card-text">Principal, DTTTI.</p>
<a href="#" class="btn btn-primary">See Details..</a>
</div>
</div>
</div>
</div>
</section>
<!-- staff profile end here -->
<!-- about company start here -->
<section class="container mt-5">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">About Company</span></h2>
<div class="row">
<div class="col-md-4">
<div>
<img src="image/Dr-Engr-Md-Sakawat-Ali.jpg" alt="" class="img-fluid img-thumbnail">
</div>
</div>
<div class="col-md-8">
<div>
<h3>Dhaka Technical Teachers Training Institute, Dhaka.</h3>
<p class="text-just">Bangladesh is a small country with a large population of 160 million. This
provides a huge
potential for further economic development, but progress is hindered by three main factors: Poor
infrastructure, Lack of quality training and the Lack of Skilled workforces. Lack of skills
reflect in the countries high rate of unemployment and it also cause underemployment. Bangladesh
has more than 10 million migrant workers, but most of them are low skilled, making money in low
paid jobs. Bureau of Manpower, Employment & Training (BMET) operates 104 Technical Training
Centre (TTC), 6 Institutes of Marine Technologies which have a focus on skills training.
Moreover, TTCs will be established in every Upazila (subdistrict) in the near future.
TVET teachers are the prime movers of skills training. To be able to produce trainees equipped
with technical skills that could meet the skills requirements, there is a need to improve and
enhance the pedagogical and technical skills of TVET teachers. With the view of updating the
knowledge and skills of TVET teachers in Bangladesh, Dhaka Technical Teachers' Training
Institute (DTTTI) Can play a vital role. For this reason the Ministry of Expatriates' Welfare
and Overseas Employment established Dhaka Technical Teachers' Training Institute (DTTTI) with
the assistance of Islamic Development Bank (IsDB).</p>
</div>
</div>
</div>
</section>
<!-- about company end here -->
<!-- footer start here -->
<footer class="bg-info mt-4 text-center">
<p>© Copyright Restricted!</p>
<p id="dateTime"></p>
</footer>
<!-- footer end here -->
<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 Page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TTC - Contact</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>
<!-- navbar start here -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand m-0 p-0" href="index.html">
<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="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end here -->
<!-- contact start here -->
<section class="container mt-5">
<div class="row">
<div class="col-md-6">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">Contact Us</span></h2>
<form action="" method="get" onsubmit="alert('Submitted Successfully.')">
<div class="mb-3">
<label for="address" class="form-label">Address</label>
<textarea name="address" class="form-control" id="address" required></textarea>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input inputmode="numeric" pattern="[0-9]{11}" class="form-control" id="phone" required>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-info">Submit</button>
</div>
</form>
</div>
<div class="col-md-6">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">Direct Address</span></h2>
<p><b>Address:</b> Mirpur, Dhaka</p>
<p><b>Email:</b> dttti@gmail.com</p>
<p><b>Phone no:</b> 0154545455</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3651.110664812648!2d90.34817957400064!3d23.77907327865087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c1380651b5ef%3A0xe41f7a237faaaf2d!2z4Kai4Ka-4KaV4Ka-IOCmn-Cnh-CmleCmqOCmv-CmleCmvuCmsiDgpp_gpr_gpprgpr7gprDgp43gprgg4Kaf4KeN4Kaw4KeH4Kao4Ka_4KaCIOCmh-CmqOCmuOCnjeCmn-Cmv-Cmn-Cmv-CmieCmny3gpqHgpr_gpp_gpr_gpp_gpr8!5e0!3m2!1sbn!2sbd!4v1768738630137!5m2!1sbn!2sbd"
width="600" height="250" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>
<!-- contact end here -->
<!-- footer start here -->
<footer class="bg-info mt-4 text-center">
<p>© Copyright Restricted!</p>
<p id="dateTime"></p>
</footer>
<!-- footer end here -->
<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> FAQ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TTC - FAQ</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>
<!-- navbar start here -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand m-0 p-0" href="index.html">
<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="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navbar end here -->
<!-- faq start here -->
<section class="container mt-5">
<div class="row">
<div class="col-md-6">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">FAQ</span></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">
Question - 01
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Answer - 01</div>
</div>
</div>
<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">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion
body. Let’s imagine this being filled with some actual content.</div>
</div>
</div>
<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">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this
would look in a real-world application.</div>
</div>
</div>
<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">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this
would look in a real-world application.</div>
</div>
</div>
<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">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion
body. Nothing more exciting happening here in terms of content, but just filling up the
space to make it look, at least at first glance, a bit more representative of how this
would look in a real-world application.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h2 class="text-center mb-4"><span class="border-bottom border-4 border-dark">Band Members</span></h2>
<ul class="list-member">
<li>MR. ABCD</li>
<li>MR. ABCD</li>
<li>MR. ABCD</li>
<li>MR. ABCD</li>
<li>MR. ABCD</li>
</ul>
</div>
</div>
</section>
<!-- faq end here -->
<!-- footer start here -->
<footer class="bg-info mt-4 text-center">
<p>© Copyright Restricted!</p>
<p id="dateTime"></p>
</footer>
<!-- footer end here -->
<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> JS:
function updateDateTime() {
const now = new Date();
const currentDateTime = now.toLocaleString();
document.getElementById('dateTime').textContent = currentDateTime;
}
updateDateTime();
setInterval(updateDateTime, 1000); CSS:
.nav-item{
transition: 1s ease;
border-radius: 10px;
padding: 0px 10px;
margin: 0px 5px;
font-size: 18px;
}
.nav-item:hover{
background-color: brown;
}
.text-just{
text-align: justify;
}
.list-member{
list-style: none;
}
.list-member li{
background-color: brown;
margin-bottom: 5px;
padding: 10px;
text-align: center;
font-size: 20px;
color: #fff;
border: 2px solid black;
border-radius: 10px;
}
.list-member li:hover{
background-color: black;
color: red;
}
