239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!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">
|
|
|
|
<div class="bg-white p-4 rounded-xl shadow-sm mb-4">
|
|
<div class="row g-3">
|
|
<div class="col-sm-6 col-md-3">
|
|
<select class="form-select">
|
|
<option>Select Country</option>
|
|
<option>USA</option>
|
|
<option>UK</option>
|
|
<option>India</option>
|
|
<option>Australia</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-3">
|
|
<select class="form-select">
|
|
<option>Select Study Level</option>
|
|
<option>Undergraduate</option>
|
|
<option>Postgraduate</option>
|
|
<option>Diploma</option>
|
|
<option>Certificate</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-3">
|
|
<select class="form-select">
|
|
<option>Select Course</option>
|
|
<option>Business</option>
|
|
<option>Design</option>
|
|
<option>Marketing</option>
|
|
<option>Finance</option>
|
|
<option>Animation</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-md-3 d-grid">
|
|
<button class="btn btn-primary-custom">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container my-4">
|
|
<div class="card border-0 shadow rounded-4 overflow-hidden">
|
|
|
|
|
|
<div class="bg-dark text-white p-3">
|
|
<h6 class="mb-0 fw-semibold">
|
|
(STEM) Bachelor of Architecture (BArch)
|
|
</h6>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<div class="row g-4 align-items-center">
|
|
|
|
<div class="col-md-4 text-center">
|
|
<img src="./asstes/image/image.png" class="img-fluid mb-2" style="max-height:70px"
|
|
alt="Marywood University">
|
|
|
|
<div class="fw-semibold">
|
|
Marywood University
|
|
<span class="text-danger">(USA)</span>
|
|
</div>
|
|
|
|
<div class="small text-muted mt-1">
|
|
Code: BArch • Bachelor • N/A
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
|
<span class="fw-semibold">IELTS</span>
|
|
<span class="badge bg-dark">5.5 (5.5)</span>
|
|
</div>
|
|
|
|
<div
|
|
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
|
<span class="fw-semibold">PTE</span>
|
|
<span class="badge bg-dark">48 (48)</span>
|
|
</div>
|
|
|
|
<div
|
|
class="d-flex justify-content-between align-items-center bg-light rounded-pill px-3 py-2">
|
|
<span class="fw-semibold">Duolingo</span>
|
|
<span class="badge bg-dark">90 Overall</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="border rounded-3 p-3 bg-light">
|
|
<div class="small text-muted">Annual Fee</div>
|
|
<div class="fw-bold fs-5">$41,370</div>
|
|
|
|
<hr class="my-2">
|
|
|
|
<div class="small text-muted">Scholarship</div>
|
|
<div class="fw-semibold text-success">
|
|
Up to $23,000
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-light px-4 py-3 d-flex flex-wrap align-items-center justify-content-between">
|
|
<div>
|
|
<span class="fw-semibold me-2">Intake:</span>
|
|
<span class="badge bg-primary me-1 p-2">January</span>
|
|
<span class="badge bg-primary p-2">January</span>
|
|
</div>
|
|
|
|
<button class="btn btn-dark btn-sm px-4 rounded-pill">
|
|
View Details
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</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>
|
|
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> |