Homepage Page: i. Header Top Section (Email, Phone Number, Login) ii. Navigation Section with Logo, Home, About, Courses, Faculty, Notice, Admission, Contact, Login. iii. Hero Banner Section (Full wide, Add minimum three images with sliding/carousel) iv. Welcome & About TTC Brief Section. v. Principal's Message Section. vi. Key Statistics Section (using JS counters). vii. Big Footer Section with Quick Links. viii. Footer Bottom Section (Copyright).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Training Center (TTC) - Official Website</title>
<!-- Bootstrap 5.3 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
/* CSS Variables for TTC Theme */
:root {
--ttc-primary: #004a99;
--ttc-secondary: #ffcc00;
}
/* 2. Navigation with Mouse Hover Effect */
.hover-nav .nav-link {
transition: all 0.3s ease;
position: relative;
padding: 1rem 1.2rem !important;
}
@media (min-width: 992px) {
.hover-nav .nav-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: 0;
left: 0;
background-color: var(--ttc-secondary);
transition: width 0.3s ease;
}
.hover-nav .nav-link:hover::after {
width: 100%;
}
.hover-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--ttc-secondary) !important;
}
}
.hero-img {
height: 600px;
object-fit: cover;
filter: brightness(0.6);
}
.counter-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
border-radius: 15px;
padding: 2rem;
transition: transform 0.3s;
}
.counter-box:hover {
transform: translateY(-10px);
}
.principal-img {
border: 8px solid #f8f9fa;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Responsive Fixes */
@media (max-width: 768px) {
.hero-img {
height: 400px;
}
.display-4 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container py-4">
<!-- i. Header Top Section -->
<div class="bg-dark text-white py-2 small border-bottom border-primary border-3">
<div class="container d-flex flex-wrap justify-content-between align-items-center">
<div class="d-flex gap-3 align-items-center">
<span><i class="bi bi-envelope-fill text-warning me-1"></i> adm-info@ttc.edu.bd</span>
<span class="d-none d-md-inline text-secondary">|</span>
<span><i class="bi bi-telephone-fill text-warning me-1"></i> +880 1700-000000</span>
<span class="d-none d-lg-inline text-secondary">|</span>
<!-- 7. Current Date & Time -->
<span id="dateTimeDisplay" class="d-none d-lg-inline fw-bold text-info border-start ps-3 border-secondary"></span>
</div>
<div>
<a href="#loginModal" data-bs-toggle="modal" class="btn btn-warning btn-sm fw-bold rounded-pill px-3">
<i class="bi bi-person-lock me-1"></i> Staff Login
</a>
</div>
</div>
</div>
<!-- ii. Navigation Section (Full wide menu with hover effect) -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top shadow-sm py-0" style="background-color: var(--ttc-primary);">
<div class="container">
<a class="navbar-brand d-flex align-items-center py-2" href="index.html">
<i class="bi bi-gear-wide-connected fs-1 me-2 text-warning"></i>
<div class="lh-1">
<h4 class="mb-0 fw-bold">TTC MAIN</h4>
<span class="small opacity-75">Technical Training Center</span>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto text-uppercase fw-bold hover-nav">
<!-- 9. Internal Pages Linking -->
<li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" 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="faculty.html">Faculty</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 text-warning">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- iii. Hero Banner Section (Sliding/Carousel) -->
<section id="heroSlider" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1600" class="w-100 hero-img" alt="TTC Campus">
<div class="carousel-caption d-none d-md-block text-start mb-5 pb-5">
<h1 class="display-3 fw-bolder text-warning">Building Smart Citizens</h1>
<p class="fs-4">State-of-the-art engineering labs and workshops for hands-on learning.</p>
<a href="#" class="btn btn-warning btn-lg rounded-pill px-5 fw-bold">Apply Now</a>
</div>
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQC7nqDTqR4IVjIE86EXSWcdOd_ZfUtIpcvWKaBJslbtZi7CF7wQ_tbej4&s=10" class="w-100 hero-img" alt="Workshop">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-3 fw-bolder">Technical Excellence</h1>
<p class="fs-4">Certified by National Technical Education Board with Global Standards.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1600" class="w-100 hero-img" alt="Computer Lab">
<div class="carousel-caption d-none d-md-block text-end mb-5 pb-5 text-info">
<h1 class="display-3 fw-bolder text-white">IT Revolution</h1>
<p class="fs-4 text-white">Deep dive into Robotics, AI, and Software Engineering.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroSlider" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroSlider" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</section>
<!-- iv. Welcome & About TTC Brief -->
<section class="py-5 bg-white">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-lg-6">
<h6 class="text-primary fw-bold text-uppercase">Welcome to TTC</h6>
<h2 class="display-5 fw-bold mb-4">Shaping Tomorrow's Workforce</h2>
<p class="text-muted fs-5 mb-4">The Technical Training Center (TTC) is a premier government-registered institution dedicated to providing quality vocational training to help bridge the skill gap in the industry.</p>
<div class="row g-4">
<div class="col-6">
<div class="d-flex align-items-center">
<i class="bi bi-patch-check-fill text-success fs-3 me-2"></i>
<span class="fw-bold">ISO Certified</span>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center">
<i class="bi bi-patch-check-fill text-success fs-3 me-2"></i>
<span class="fw-bold">Modern Equipment</span>
</div>
</div>
</div>
<button class="btn btn-primary mt-5 px-4 py-2 rounded-pill">Explore History</button>
</div>
<div class="col-lg-6">
<img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=600" class="img-fluid rounded-5 shadow" alt="TTC Building">
</div>
</div>
</div>
</section>
<!-- v. Principal's Message Section -->
<section class="py-5 bg-light">
<div class="container shadow-lg rounded-5 bg-white p-5 position-relative overflow-hidden">
<div class="position-absolute opacity-10" style="right: -50px; bottom: -50px; font-size: 20rem;">
<i class="bi bi-chat-quote"></i>
</div>
<div class="row align-items-center">
<div class="col-md-4 text-center">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=250" class="rounded-5 principal-img mb-3 w-100" alt="Principal">
<h5 class="fw-bold mb-0">Engr. S.M. Rahman</h5>
<p class="text-primary">Principal, TTC</p>
</div>
<div class="col-md-8 px-md-5">
<i class="bi bi-quote fs-1 text-warning"></i>
<h3 class="fw-bold text-uppercase">Principal's Address</h3>
<p class="text-muted fa-italic fs-5">"Education is not just learning facts, but training the mind to think. At TTC, we focus on empowering our trainees with practical skills that directly translate into successful careers. Our alumni are currently working in top sectors both locally and abroad. Welcome to a journey of skill and success."</p>
</div>
</div>
</div>
</section>
<!-- vi. Key Statistics Section (JS Counters) -->
<section class="py-5" style="background: linear-gradient(rgba(0,74,153,0.9), rgba(0,74,153,0.9)), url('https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1600') center/cover;">
<div class="container text-white py-4">
<div class="row g-4 text-center">
<div class="col-md-3">
<div class="counter-box">
<i class="bi bi-people fs-1 text-warning mb-3 d-block"></i>
<h2 class="fw-bold display-5 counter" data-target="5000">0</h2>
<span class="text-uppercase small">Total Graduates</span>
</div>
</div>
<div class="col-md-3">
<div class="counter-box">
<i class="bi bi-book fs-1 text-warning mb-3 d-block"></i>
<h2 class="fw-bold display-5 counter" data-target="24">0</h2>
<span class="text-uppercase small">Available Courses</span>
</div>
</div>
<div class="col-md-3">
<div class="counter-box">
<i class="bi bi-person-workspace fs-1 text-warning mb-3 d-block"></i>
<h2 class="fw-bold display-5 counter" data-target="150">0</h2>
<span class="text-uppercase small">Senior Faculty</span>
</div>
</div>
<div class="col-md-3">
<div class="counter-box">
<i class="bi bi-geo fs-1 text-warning mb-3 d-block"></i>
<h2 class="fw-bold display-5 counter" data-target="12">0</h2>
<span class="text-uppercase small">Campuses</span>
</div>
</div>
</div>
</div>
</section>
<br>
<!-- vii. Big Footer Section -->
<footer class="bg-dark text-white pt-5 pb-3">
<div class="container">
<div class="row g-5">
<div class="col-lg-4">
<h4 class="fw-bold text-warning mb-4"><i class="bi bi-gear-fill me-2"></i>TTC BD</h4>
<p class="text-secondary small">Providing professional technical education since 1990. We are committed to creating a skilled workforce for the nation's industrial development.</p>
<div class="d-flex gap-3 mt-4">
<a href="#" class="btn btn-outline-light rounded-circle"><i class="bi bi-facebook"></i></a>
<a href="#" class="btn btn-outline-light rounded-circle"><i class="bi bi-youtube"></i></a>
<a href="#" class="btn btn-outline-light rounded-circle"><i class="bi bi-linkedin"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-4">
<h6 class="fw-bold mb-4">Quick Links</h6>
<ul class="list-unstyled text-secondary small lh-lg">
<li><a href="#" class="text-decoration-none text-secondary hover-link">Notice Board</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Academic Calendar</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Course Catalog</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Tenders</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4">
<h6 class="fw-bold mb-4">Admissions</h6>
<ul class="list-unstyled text-secondary small lh-lg">
<li><a href="#" class="text-decoration-none text-secondary hover-link">Online Apply</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Results</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Scholarships</a></li>
<li><a href="#" class="text-decoration-none text-secondary hover-link">Rules & Regs</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4">
<h6 class="fw-bold mb-4">Official Contact</h6>
<ul class="list-unstyled text-secondary small lh-lg">
<li><i class="bi bi-geo-alt-fill text-warning me-2"></i> 12/B Skill Road, Industrial Area, Dhaka.</li>
<li><i class="bi bi-telephone-fill text-warning me-2"></i> Tel: 02-999999</li>
<li><i class="bi bi-printer-fill text-warning me-2"></i> Fax: 02-888888</li>
</ul>
</div>
</div>
<!-- viii. Footer Bottom Section -->
<div class="border-top border-secondary mt-5 pt-3 text-center">
<p class="mb-0 small text-secondary">© <span id="currentYear"></span> Technical Training Center. All rights reserved. Developed by IT Department.</p>
</div>
</div>
</footer>
</div>
<!-- Login Form Modal -->
<div class="modal fade" id="loginModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-4 border-0 shadow">
<div class="modal-header border-0 bg-primary text-white rounded-top-4">
<h5 class="modal-title fw-bold">System Login</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-4">
<form id="ttcLoginForm">
<div class="mb-3">
<label class="form-label small fw-bold">User Name</label>
<input type="text" class="form-control rounded-pill border-2" required>
</div>
<div class="mb-4">
<label class="form-label small fw-bold">Password</label>
<input type="password" class="form-control rounded-pill border-2" required>
</div>
<button type="submit" class="btn btn-primary w-100 rounded-pill py-2 fw-bold shadow">LOGIN</button>
</form>
</div>
</div>
</div>
</div>
<!-- 3. Confirmation Popup (Modal) -->
<div class="modal fade" id="confirmLoginModal" tabindex="-1">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content shadow-lg border-0 rounded-4">
<div class="modal-body text-center p-4">
<i class="bi bi-check-circle-fill text-success fs-1 mb-3 d-block"></i>
<h5 class="fw-bold">Login Submitted!</h5>
<p class="small text-muted">A verification request has been sent to your supervisor.</p>
<button class="btn btn-dark w-100 rounded-pill btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 7. Current Date & Time / Year logic
function updateDateTime() {
const now = new Date();
const options = {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
};
document.getElementById('dateTimeDisplay').textContent = now.toLocaleDateString('en-US', options);
document.getElementById('currentYear').textContent = now.getFullYear();
}
setInterval(updateDateTime, 1000);
updateDateTime();
// vi. JS Counters Animation
const counters = document.querySelectorAll('.counter');
const countSpeed = 200;
const startCounters = () => {
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / countSpeed;
if (count < target) {
counter.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 1);
} else {
counter.innerText = target + "+";
}
};
updateCount();
});
};
// Trigger counters when section is in view
const statSection = document.querySelector('.counter').closest('section');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) startCounters();
}, {
threshold: 0.5
});
observer.observe(statSection);
// 3. Login Submission Popup logic
document.getElementById('ttcLoginForm').addEventListener('submit', function(e) {
e.preventDefault();
// Hide Login Modal first
bootstrap.Modal.getInstance(document.getElementById('loginModal')).hide();
// Show Confirmation Modal
const confirmModal = new bootstrap.Modal(document.getElementById('confirmLoginModal'));
confirmModal.show();
});
</script>
</body>
</html>