RoshanPaudel/coursefinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

course finder and course detail page create

Browse Source
This commit is contained in:
RoshanPaudel
2026-02-03 13:36:39 +05:45
parent d9f5894252
commit 22bc7ec6c2
3 changed files with 661 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
course-detail.html Normal file
View File

@@ -0,0 +1,330 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Course Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./asstes/css/style.css">
</head>
<body>
<section class="container py-4 py-lg-5">
<div class="row g-4">
<!-- COURSE FINDER TITLE -->
<div class="mb-4 text-center">
<h3 class="fw-bold mb-2">
Find the Right Course for Your Future
</h3>
<p class="text-muted mb-0">
Find and compare international courses that match your academic goals.
</p>
</div>
<div class="col-lg-9">
<!-- BIT COURSE DETAIL CARD -->
<div class="card border-0 shadow rounded-4 overflow-hidden mb-4">
<!-- HEADER -->
<div class="bg-dark text-white p-4">
<h4 class="mb-1 fw-bold">
Bachelor of Information Technology (BIT)
</h4>
<p class="mb-0 small text-light">
Full-time · Undergraduate · STEM Program
</p>
</div>
<!-- BODY -->
<div class="p-4">
<div class="row g-4 align-items-center">
<!-- UNIVERSITY INFO -->
<div class="col-md-4 text-center">
<img src="./asstes/image/image.png" class="img-fluid mb-3" style="max-height:70px"
alt="University Logo">
<h6 class="fw-semibold mb-1">
XYZ University
<span class="text-danger">(Australia)</span>
</h6>
<ul class="list-unstyled small bg-light rounded-3 p-3 mt-3">
<li><strong>Course Code:</strong> BIT</li>
<li><strong>Level:</strong> Bachelor</li>
<li><strong>Duration:</strong> 3 Years</li>
<li><strong>Intake:</strong> Feb / July</li>
</ul>
</div>
<!-- ENGLISH REQUIREMENTS -->
<div class="col-md-4">
<h6 class="fw-semibold mb-3">English Requirements</h6>
<div class="d-grid gap-2">
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
<span>IELTS</span>
<span class="badge bg-dark">6.0 (5.5)</span>
</div>
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
<span>PTE</span>
<span class="badge bg-dark">50 Overall</span>
</div>
<div class="d-flex justify-content-between bg-light rounded-pill px-3 py-2">
<span>Duolingo</span>
<span class="badge bg-dark">95 Overall</span>
</div>
</div>
</div>
<!-- FEES -->
<div class="col-md-4">
<div class="border rounded-3 p-3 bg-light">
<div class="small text-muted">Annual Tuition Fee</div>
<div class="fw-bold fs-5">$32,000</div>
<hr class="my-2">
<div class="small text-muted">Scholarship Available</div>
<div class="fw-semibold text-success">
Up to $10,000
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="bg-light px-4 py-3 d-flex justify-content-between align-items-center">
<div>
<span class="fw-semibold me-2">Career Outcomes:</span>
<span class="badge bg-primary p-2 me-1">Software Developer</span>
<span class="badge bg-primary p-2 me-1">IT Analyst</span>
<span class="badge bg-primary p-2">System Engineer</span>
</div>
<button class="btn btn-dark px-4">
Apply Now
</button>
</div>
</div>
<!-- COURSE DESCRIPTION -->
<div class="card border-0 shadow rounded-4 p-4">
<h5 class="fw-bold mb-3">Course Description</h5>
<p class="text-muted">
The <strong>Bachelor of Information Technology (BIT)</strong> is designed to equip
students with strong theoretical knowledge and practical skills in modern
information technology systems. The program focuses on software development,
database systems, networking, cybersecurity, and cloud computing.
</p>
<p class="text-muted">
Throughout the course, students gain hands-on experience using industry-standard
tools and technologies while working on real-world projects. The curriculum is
aligned with current industry demands, ensuring graduates are job-ready and capable
of adapting to rapidly evolving IT environments.
</p>
<p class="text-muted mb-0">
Graduates of the BIT program can pursue careers as software developers, systems
analysts, network engineers, cybersecurity specialists, and IT consultants, or
continue their studies at the postgraduate level.
</p>
</div>
</div>
<aside class="col-lg-3">
<div class="sticky-box d-flex flex-column gap-4">
<div class="bg-white rounded-xl shadow-sm p-3">
<div class="d-flex border-bottom tab-nav">
<a href="javascript:void(0)"
class="tab-link flex-fill text-center py-2 fw-semibold tab-active"
onclick="showTab('exclusive', this)">Exclusive Courses</a>
<a href="javascript:void(0)"
class="tab-link flex-fill text-center py-2 fw-semibold text-secondary"
onclick="showTab('top', this)">Top Colleges</a>
</div>
<div id="exclusive" class="mt-3">
<ul class="list-group list-group-flush small">
<li class="list-group-item">MBA in Defence</li>
<li class="list-group-item">PG Diploma in Branch Banking</li>
<li class="list-group-item">Global Finance and Accounting</li>
<li class="list-group-item">Career courses in 2D & 3D Animation</li>
<li class="list-group-item">IFBI PGDBO</li>
<li class="list-group-item">Courses Programs - IFBI</li>
<li class="list-group-item">Alpha Courses</li>
<li class="list-group-item">Nutrition Courses</li>
<li class="list-group-item">IFBI Media</li>
<li class="list-group-item text-center bg-light fw-medium">See All</li>
</ul>
</div>
<div id="top" class="mt-3 d-none">
<ul class="list-group list-group-flush small">
<li class="list-group-item">Top College 1</li>
<li class="list-group-item">Top College 2</li>
<li class="list-group-item">Top College 3</li>
<li class="list-group-item">Top College 4</li>
<li class="list-group-item">Top College 5</li>
</ul>
</div>
</div>
<div class="bg-primary bg-opacity-10 rounded-xl shadow-sm p-3">
<h6 class="text-center fw-semibold mb-3">Get Your Free Counselling!</h6>
<form class="d-grid gap-2">
<input type="text" class="form-control" placeholder="Full Name" required>
<input type="tel" class="form-control" placeholder="Phone" required>
<input type="email" class="form-control" placeholder="Email" required>
<textarea class="form-control" rows="3" placeholder="Message"></textarea>
<button class="btn btn-primary-custom fw-semibold">Submit</button>
</form>
</div>
</div>
</aside>
</div>
</section>
<script>
const steps = [
{ q: 'How proficient are you with visual design?', options: ['Beginner', 'Intermediate', 'Advanced'] },
{ q: 'Do you have UX research experience?', options: ['None', 'Some', 'A lot'] },
{ q: 'What is your career goal?', options: ['Student', 'Career switcher', 'Professional upskilling'] },
{ q: 'Preferred learning format?', options: ['Online', 'Hybrid', 'In-person'] },
{ q: 'How soon do you want to start?', options: ['Immediately', '1–3 months', 'Later'] },
{ q: 'What is your budget range?', options: ['Free', '$$', '$$$'] }
];
const stepper = document.getElementById('stepper');
const question = document.getElementById('question');
const select = document.getElementById('select');
const button = document.getElementById('next');
let current = 0;
const answers = [];
function renderStepper() {
stepper.innerHTML = '';
steps.forEach((_, i) => {
const step = document.createElement('div');
step.className = 'step';
const circle = document.createElement('div');
circle.className = 'circle';
circle.textContent = i + 1;
if (i === current) circle.classList.add('active');
if (i < current) circle.classList.add('completed');
step.appendChild(circle);
if (i < steps.length - 1) {
const line = document.createElement('div');
line.className = 'line';
const fill = document.createElement('div');
fill.className = 'line-fill';
// ✅ Animate fill correctly
fill.style.width = i < current ? '100%' : '0%';
line.appendChild(fill);
step.appendChild(line);
}
stepper.appendChild(step);
});
}
function renderStep() {
renderStepper();
question.textContent = steps[current].q;
select.innerHTML = '<option value="">– Select –</option>';
steps[current].options.forEach(opt => {
const o = document.createElement('option');
o.value = opt;
o.textContent = opt;
select.appendChild(o);
});
// ✅ SEARCH on last (6th) question
button.textContent =
current === steps.length - 1 ? 'SEARCH' : 'NEXT';
button.disabled = true;
button.classList.remove('enabled');
}
select.addEventListener('change', () => {
if (select.value) {
button.disabled = false;
button.classList.add('enabled');
}
});
button.addEventListener('click', () => {
if (!select.value) return;
answers[current] = select.value;
// 🔍 Final search action
if (current === steps.length - 1) {
alert('Searching courses with:\n' + JSON.stringify(answers, null, 2));
return;
}
current++;
renderStep();
});
renderStep();
</script>
<script>
function showTab(tabId, element) {
// Hide all tab content
document.getElementById('exclusive').classList.add('d-none');
document.getElementById('top').classList.add('d-none');
// Show selected tab content
document.getElementById(tabId).classList.remove('d-none');
// Remove active class from all tabs
const tabs = document.querySelectorAll('.tab-link');
tabs.forEach(tab => {
tab.classList.remove('tab-active');
tab.classList.add('text-secondary');
});
// Add active class to clicked tab
element.classList.add('tab-active');
element.classList.remove('text-secondary');
}
</script>
</body>
</html>