<!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>
How to use this component
Add it to your project in three steps
Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.
The TTC About Full Page block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.
Accessibility checklist
Ship it accessible by default
Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
Give every image an alt attribute (empty alt="" if it's decorative).
Label icon-only buttons with aria-label and keep focus outlines visible.
Maintain a contrast ratio of at least 4.5:1 for body text against its background.
Test the component with Tab / Shift+Tab and Enter — every interactive element should be reachable.
Step-by-step customisation
Make it match your brand
Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.
This component is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.
If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.
Detailed Technical Breakdown
Detailed Technical Breakdown: TTC About Full Page
Browser compatibility & standards
The TTC About Full Page component is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this component to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.
Performance impact
Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap component is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.
Utility classes used
The component leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire component by overriding a handful of CSS variables at the :root level — no Sass recompile required.
Exact customisation steps
Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the component sits on the Bootstrap grid.
Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.
Technical & Performance Integration Guide
Technical & Performance Integration Guide — TTC About Full Page (full-page template)
When and why to use this full-page template
A full-page template stitches together every block on this site into one deployable document: navigation, hero, feature grid, social proof, call to action and footer. Because it is a complete page, the integration rules shift from "drop this in" to "own the whole document head".
Accessibility & ARIA attributes
Exactly one <h1>, one <header>, one <main>, one <footer> per document. Add a skip link (<a class="visually-hidden-focusable" href="#main">Skip to content</a>) as the first focusable element so keyboard users can bypass the navigation. Set the correct lang attribute on <html> — screen readers use it to pick the right pronunciation engine, which matters when you mix Bangla and English content.
Performance notes for this pattern
Load Bootstrap CSS in the head and the JS bundle just before </body>. Inline the handful of critical CSS rules the hero needs and let everything else arrive normally. Lazy-load every image below the fold, preload the hero image and the primary webfont, and self-host fonts with font-display: swap if you want to remove a third-party connection entirely. A page built this way typically lands in the 90s on mobile Lighthouse without further tuning.
Three customisation tricks
Keep one and only one navbar and one footer — duplicated landmarks confuse both crawlers and screen readers.
Give every section an id and link the navbar anchors to them for instant on-page navigation.
Add Organization and WebSite JSON-LD once in the head so the whole template ships search-ready.
Mistakes to avoid
Copying two heroes into the same document, leaving two <h1> elements.
Forgetting the responsive viewport meta tag, which makes the entire mobile layout render at desktop width.