course finder page create
This commit is contained in:
239
coursefinder.html
Normal file
239
coursefinder.html
Normal file
@@ -0,0 +1,239 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user