<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Technical Training Center (TTC)</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container">
<!-- Header Top Section -->
<header class="bg-dark text-white py-2 border-bottom border-secondary">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
<div class="d-flex gap-3 small">
<span><i class="bi bi-envelope-fill text-primary me-1"></i> info@ttc-edu.gov.bd</span>
<span><i class="bi bi-telephone-fill text-primary me-1"></i> +880 01758484392</span>
</div>
<div class="d-flex align-items-center gap-3 mt-2 mt-md-0">
<span id="currentDateTime" class="small border-end pe-3 me-2"></span>
<a href="login.html" class="text-white text-decoration-none small"><i class="bi bi-person-circle me-1"></i> Login</a>
</div>
</div>
</header>
<!-- Navigation Section -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm py-3">
<div class="container">
<a class="navbar-brand fw-bold text-primary fs-3" href="index.html">
<i class="bi bi-mortarboard-fill me-2"></i>NJTC
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
<li class="nav-item"><a class="nav-link" 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"><a class="nav-link" href="courses.html">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="teacher.html">Teacher</a></li>
<li class="nav-item"><a class="nav-link" href="notice.html">Notice</a></li>
<li class="nav-item"><a class="nav-link" href="admission.html">Admission</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item ms-lg-3"><a class="btn btn-primary rounded-pill px-4" href="login.html">Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- //------------------------------------------------------------------------------------------------------------------------------// -->
<!-- Breadcrumb Section -->
<section class="bg-light py-4 border-bottom">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="home.html" class="text-decoration-none">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">About Us</li>
</ol>
</nav>
</div>
</section>
<!-- Background & History Section -->
<section class="py-5">
<div class="container py-3">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<h6 class="text-primary fw-bold text-uppercase">Who We Are</h6>
<h2 class="display-5 fw-bold mb-4">Our Background & History</h2>
<p class="lead text-muted">It is a long established fact that a reader will be distra</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived </p>
</div>
<div class="col-lg-5">
<div class="position-relative">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc83DY6y2ciw-GWrW4VX9G8tLqvobEJXqZD3jCfrSSGf-cIZmqDGwwy1iz&s=10" class="img-fluid rounded-4 shadow-lg" alt="History Image">
<div class="position-absolute bottom-0 start-0 bg-primary text-white p-4 rounded-end m-3 shadow">
<h4 class="fw-bold mb-0">28+ Years</h4>
<small>Of Educational Excellence</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Mission and Vision Section -->
<section class="py-5 bg-light">
<div class="container py-4">
<div class="row g-4">
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm rounded-4">
<div class="card-body p-5">
<div class="icon-box mb-4 bg-primary bg-opacity-10 d-inline-block p-3 rounded-circle">
<i class="bi bi-rocket-takeoff fs-1 text-primary"></i>
</div>
<h3 class="fw-bold">Our Mission</h3>
<p class="text-secondary">To provide world-class technical education through hands-on training, industry partnerships, and a commitment to excellence, ensuring our graduates are ready for the global workforce.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 border-0 shadow-sm rounded-4">
<div class="card-body p-5">
<div class="icon-box mb-4 bg-success bg-opacity-10 d-inline-block p-3 rounded-circle">
<i class="bi bi-eye fs-1 text-success"></i>
</div>
<h3 class="fw-bold">Our Vision</h3>
<p class="text-secondary">To become a center of excellence in technical vocational education and training (TVET) and act as a catalyst for the socio-economic development of the nation.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Core Values Section -->
<section class="py-5">
<div class="container py-4">
<div class="text-center mb-5">
<h2 class="fw-bold">Our Core Values</h2>
<div class="mx-auto bg-primary" style="height: 3px; width: 60px;"></div>
</div>
<div class="row g-4 text-center">
<div class="col-md-3">
<div class="p-3">
<i class="bi bi-shield-check text-primary fs-1"></i>
<h5 class="mt-3 fw-bold">Integrity</h5>
<p class="small text-muted">We uphold the highest ethical standards in all our programs.</p>
</div>
</div>
<div class="col-md-3">
<div class="p-3">
<i class="bi bi-gear-wide-connected text-primary fs-1"></i>
<h5 class="mt-3 fw-bold">Innovation</h5>
<p class="small text-muted">Embracing new technologies to stay ahead in training.</p>
</div>
</div>
<div class="col-md-3">
<div class="p-3">
<i class="bi bi-people text-primary fs-1"></i>
<h5 class="mt-3 fw-bold">Collaboration</h5>
<p class="small text-muted">Working together with industries for better placement.</p>
</div>
</div>
<div class="col-md-3">
<div class="p-3">
<i class="bi bi-award text-primary fs-1"></i>
<h5 class="mt-3 fw-bold">Excellence</h5>
<p class="small text-muted">Striving for the best quality in every workshop session.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Campus Image Gallery (Carousel) -->
<section class="py-5 bg-dark">
<div class="container py-4">
<div class="text-center mb-5">
<h2 class="fw-bold text-white">Campus Life Gallery</h2>
<p class="text-white-50">A glimpse into our state-of-the-art facilities</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<div id="galleryCarousel" class="carousel slide rounded-4 overflow-hidden shadow-lg" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://media.istockphoto.com/id/1412454825/photo/university-students-walking-outside-on-campus.jpg?s=612x612&w=0&k=20&c=UbcKVse1IAXvKn0nab2uEJ3FS-VpJAeDbGwUEGY9My0=" class="d-block w-100" alt="Main Building">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75">
<h5>Our Main Campus Building</h5>
</div>
</div>
<div class="carousel-item">
<img src="https://media.istockphoto.com/id/1779070756/photo/two-university-students-walk-down-campus-stairs.jpg?s=612x612&w=0&k=20&c=N7d2_6_aoPReJd9b6fUMG9xWwEj-yX9UG-qjdcIxws0=" class="d-block w-100" alt="Robotics Lab">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75">
<h5>Advanced Engineering Workshop</h5>
</div>
</div>
<div class="carousel-item">
<img src="https://media.istockphoto.com/id/2122148349/photo/writing-an-exam-at-the-university.jpg?s=612x612&w=0&k=20&c=LgVzLcd_cxNDQrolZFFqg7AIQnTd_xBrvdWfr-eVoK8=" class="d-block w-100" alt="Library">
<div class="carousel-caption d-none d-md-block bg-dark bg-opacity-75">
<h5>Modern Technical Library</h5>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
</div>
</div>
</section>
<br>
<!-- Big Footer Section -->
<footer class="bg-dark text-white pt-5 pb-4">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<h4 class="fw-bold text-primary mb-4">Edu.......</h4>
<p class="text-secondary">Providing quality technical education to empower individuals and serve the community since 1995.</p>
<div class="d-flex gap-3 fs-5 mt-4">
<a href="#" class="text-white"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-white"><i class="bi bi-youtube"></i></a>
<a href="#" class="text-white"><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="col-lg-2 offset-lg-1">
<h5 class="fw-bold mb-4">Quick Links</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="home.html" class="text-secondary text-decoration-none hover-link">Home</a></li>
<li class="mb-2"><a href="about.html" class="text-secondary text-decoration-none hover-link">About Us</a></li>
<li class="mb-2"><a href="courses.html" class="text-secondary text-decoration-none hover-link">All Courses</a></li>
<li class="mb-2"><a href="admission.html" class="text-secondary text-decoration-none hover-link">Admission</a></li>
</ul>
</div>
<div class="col-lg-2">
<h5 class="fw-bold mb-4">Information</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="notice.html" class="text-secondary text-decoration-none hover-link">Latest Notice</a></li>
<li class="mb-2"><a href="faculty.html" class="text-secondary text-decoration-none hover-link">Faculty List</a></li>
<li class="mb-2"><a href="contact.html" class="text-secondary text-decoration-none hover-link">Contact Us</a></li>
</ul>
</div>
<div class="col-lg-3">
<h5 class="fw-bold mb-4">Contact Detail</h5>
<p class="text-secondary mb-2"><i class="bi bi-geo-alt-fill text-primary me-2"></i>Education Road, Lalmonirhat</p>
<p class="text-secondary mb-2"><i class="bi bi-telephone-fill text-primary me-2"></i> +88 01758484392</p>
<p class="text-secondary"><i class="bi bi-envelope-fill text-primary me-2"></i> info@ttc.edu.bd</p>
</div>
</div>
</div>
</footer>
<!-- Footer Bottom Section -->
<div class="bg-black text-white-50 py-3 border-top border-secondary">
<div class="container text-center text-md-start d-md-flex justify-content-between">
<p class="small mb-0"> 2024 Technical Training Center (TTC). All rights reserved.</p>
<p class="small mb-0">Developed by Student Project</p>
</div>
</div>
<style>
/* Styling for the about page components */
.breadcrumb-item+.breadcrumb-item::before {
content: ">";
}
.carousel-item img {
height: 500px;
object-fit: cover;
}
.icon-box i {
transition: transform 0.3s ease;
}
.card:hover .icon-box i {
transform: scale(1.2);
}
</style>
<script src="js.js"></script>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>