From 22bc7ec6c27d7146327eb79cce74200c1f13f21b Mon Sep 17 00:00:00 2001 From: RoshanPaudel Date: Tue, 3 Feb 2026 13:36:39 +0545 Subject: [PATCH] course finder and course detail page create --- asstes/css/style.css | 193 +++++++++++++++++++++++-- course-detail.html | 330 +++++++++++++++++++++++++++++++++++++++++++ coursefinder.html | 157 +++++++++++++++++++- 3 files changed, 661 insertions(+), 19 deletions(-) create mode 100644 course-detail.html diff --git a/asstes/css/style.css b/asstes/css/style.css index faa3e03..020b8c0 100644 --- a/asstes/css/style.css +++ b/asstes/css/style.css @@ -1,10 +1,151 @@ :root { --primary-color: #16a34a; --primary-hover: #15803d; + --primary: #6f5bf3; + --gray: #e5e7eb; + --text: #111827; } + + + + body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + background: #f9fafb; + display: flex; + justify-content: center; + padding: 40px; background-color: #f3f4f6; + + } + + .card { + background: #fff; + width: 100%; + /* max-width: 900px; */ + border-radius: 24px; + padding: 40px; + box-shadow: 0 10px 30px rgba(0, 0, 0, .08); + margin-bottom: 40px; + } +.card.card1{ + padding: 0px; +} + h1 { + text-align: center; + margin-bottom: 8px; + } + + .subtitle { + text-align: center; + color: #555; + margin-bottom: 40px; + } + + .stepper { + display: flex; + align-items: center; + margin-bottom: 40px; + } + + .step { + display: flex; + align-items: center; + flex: 1; + } + + .circle { + width: 20px; + height: 20px; + border-radius: 5px; + border: 2px solid var(--gray); + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + background: #fff; + color: #999; + font-size: 13px; + transition: all .3s ease; + } + + .circle.active, + .circle.completed { + border-color: var(--primary); + background: var(--primary); + color: #fff; + } + + .line { + height: 4px; + flex: 1; + background: var(--gray); + /* margin: 0 8px; */ + /* border-radius: 2px; */ + overflow: hidden; + } + + .line-fill { + height: 100%; + width: 0%; + background: var(--primary); + transition: width .4s ease; + } + + .question { + font-size: 18px; + margin-bottom: 16px; + } + + select { + width: 100%; + padding: 14px; + border-radius: 12px; + border: 1px solid #d1d5db; + font-size: 16px; + background-position: right 16px center; + } + + select { + width: 100%; + padding: 14px 48px 14px 14px; + border-radius: 12px; + border: 1px solid #d1d5db; + font-size: 16px; + + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 16px center; + background-size: 14px; + } + + .actions { + display: flex; + justify-content: flex-end; + margin-top: 40px; + } + + button { + padding: 14px 28px; + border-radius: 999px; + border: none; + font-size: 14px; + font-weight: 600; + letter-spacing: .2em; + cursor: not-allowed; + background: #c7c3fa; + color: #fff; + transition: background .3s ease; + } + + button.enabled { + background: var(--primary); + cursor: pointer; } /* Primary buttons */ @@ -13,22 +154,23 @@ color: #ffffff; border: none; } -.tab-link { - text-decoration: none; - color: #6c757d; - border-radius: 0.375rem 0.375rem 0 0; - cursor: pointer; -} -.tab-link:hover { - color: inherit; - /* background: transparent; */ -} + .tab-link { + text-decoration: none; + color: #6c757d; + border-radius: 0.375rem 0.375rem 0 0; + cursor: pointer; + } -.tab-active { - background-color: var(--primary-color); - color: #fff !important; -} + .tab-link:hover { + color: inherit; + /* background: transparent; */ + } + + .tab-active { + background-color: var(--primary-color); + color: #fff !important; + } .btn-primary-custom:hover { background-color: var(--primary-hover); @@ -64,4 +206,27 @@ .rounded-xl { border-radius: 0.75rem; + } + + select:focus, + .form-select:focus, + input:focus, + textarea:focus { + outline: none; + /* removes default blue border */ + box-shadow: none; + /* removes focus shadow */ + border-color: #ced4da; + /* optional: reset to normal border color */ + } + + .list { + display: flex; + list-style: none; + } + + @media(max-width:576px) { + .intake { + margin-bottom: 12px; + } } \ No newline at end of file diff --git a/course-detail.html b/course-detail.html new file mode 100644 index 0000000..4f04e88 --- /dev/null +++ b/course-detail.html @@ -0,0 +1,330 @@ + + + + + + Course Finder + + + + + + + + +
+
+ +
+

+ Find the Right Course for Your Future +

+

+ Find and compare international courses that match your academic goals. +

+ +
+ +
+ + +
+ + +
+

+ Bachelor of Information Technology (BIT) +

+

+ Full-time · Undergraduate · STEM Program +

+
+ + +
+
+ + +
+ University Logo + +
+ XYZ University + (Australia) +
+ +
    +
  • Course Code: BIT
    • +
  • Level: Bachelor
    • +
  • Duration: 3 Years
    • +
  • Intake: Feb / July
    • +
+
+ + +
+
English Requirements
+ +
+
+ IELTS + 6.0 (5.5) +
+ +
+ PTE + 50 Overall +
+ +
+ Duolingo + 95 Overall +
+
+
+ + +
+
+
Annual Tuition Fee
+
$32,000
+ +
+ +
Scholarship Available
+
+ Up to $10,000 +
+
+
+ +
+
+ + +
+
+ Career Outcomes: + Software Developer + IT Analyst + System Engineer +
+ + +
+ +
+ + +
+
Course Description
+ +

+ The Bachelor of Information Technology (BIT) 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. +

+ +

+ 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. +

+ +

+ 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. +

+
+ +
+ + + + + +
+
+ + + + + + + + \ No newline at end of file diff --git a/coursefinder.html b/coursefinder.html index f4f128b..757ddae 100644 --- a/coursefinder.html +++ b/coursefinder.html @@ -26,6 +26,23 @@
+
+

Find The Right Design Course For You

+

Answer a few questions to get personalized recommendations

+ +
+ +
+ + + +
+ +
+
@@ -71,7 +88,7 @@
-
+
@@ -92,9 +109,25 @@ (USA)
-
- Code: BArch • Bachelor • N/A +
+
    +
  • + Code: BArch + +
    • +
  • + Level: Bachelor + +
    • +
  • + Duration: N/A + +
    • +
+ +
+
@@ -136,13 +169,13 @@
-
+
Intake: January January
-
@@ -210,6 +243,120 @@
+ +