4th commit
This commit is contained in:
parent
1aab6e147e
commit
5568997226
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
height: 350px;
|
height: 220px; /* Hero එකේ උස තවත් අඩු කළා */
|
||||||
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
|
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
|
||||||
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
|
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
@ -29,51 +29,63 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: 55px;
|
font-size: 32px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.apply-area {
|
.apply-area {
|
||||||
margin-top: -70px;
|
margin-top: -40px;
|
||||||
margin-bottom: 70px;
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-container-sm {
|
||||||
|
max-width: 820px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-card {
|
.form-card {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 15px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 20px 50px rgba(0,0,0,.15);
|
box-shadow: 0 10px 30px rgba(0,0,0,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-header {
|
.form-header {
|
||||||
background: #887582;
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 25px 40px;
|
padding: 15px 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-header h2 {
|
.form-header h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
background: #887582;
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 14px 20px;
|
padding: 8px 12px;
|
||||||
margin-top: 40px;
|
margin-top: 22px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 15px;
|
||||||
font-size: 20px;
|
font-size: 14px;
|
||||||
border-radius: 8px;
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control,
|
.form-control,
|
||||||
.form-select {
|
.form-select {
|
||||||
border-radius: 8px;
|
border-radius: 5px;
|
||||||
padding: 12px;
|
padding: 6px 10px;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.required {
|
.required {
|
||||||
|
|
@ -84,23 +96,36 @@
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 12px 30px;
|
padding: 8px 20px;
|
||||||
font-size: 18px;
|
font-size: 15px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
/* border-radius: 8px; */
|
border-radius: 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover {
|
||||||
|
background: var(--secondary);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mb-3-custom {
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="hero">
|
<div class="hero">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h1>Course Enrolment Form</h1>
|
<h1>Course Enrolment Form</h1>
|
||||||
<p class="lead">Automobile Engineering Academy</p>
|
<p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container apply-area">
|
<div class="container apply-area">
|
||||||
|
|
||||||
|
<div class="form-container-sm">
|
||||||
<div class="form-card">
|
<div class="form-card">
|
||||||
<div class="form-header">
|
<div class="form-header">
|
||||||
<h2>
|
<h2>
|
||||||
|
|
@ -109,47 +134,47 @@
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-5">
|
<div class="p-4">
|
||||||
<form action="#" method="POST" enctype="multipart/form-data">
|
<form action="#" method="POST" enctype="multipart/form-data">
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
|
{{-- STUDENT INFORMATION --}}
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<i class="fa-solid fa-user me-2"></i> Student Information
|
<i class="fa-solid fa-user me-2"></i> Student Information
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">First Name <span class="required">*</span></label>
|
<label class="form-label">First Name <span class="required">*</span></label>
|
||||||
<input type="text" name="first_name" class="form-control" required>
|
<input type="text" name="first_name" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Last Name <span class="required">*</span></label>
|
<label class="form-label">Last Name <span class="required">*</span></label>
|
||||||
<input type="text" name="last_name" class="form-control" required>
|
<input type="text" name="last_name" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">NIC / Passport</label>
|
<label class="form-label">NIC / Passport</label>
|
||||||
<input type="text" name="nic" class="form-control">
|
<input type="text" name="nic" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Nationality</label>
|
<label class="form-label">Nationality</label>
|
||||||
<input type="text" name="nationality" class="form-control">
|
<input type="text" name="nationality" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Address <span class="required">*</span></label>
|
<label class="form-label">Address <span class="required">*</span></label>
|
||||||
<input type="text" name="address" class="form-control" required>
|
<input type="text" name="address" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
<label class="form-label">District / City / State <span class="required">*</span></label>
|
||||||
<label class="form-label">First Name <span class="required">*</span></label>
|
<input type="text" name="state" class="form-control" required>
|
||||||
<input type="text" name="State" class="form-control" required>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Gender</label>
|
<label class="form-label">Gender</label>
|
||||||
<select name="gender" class="form-select">
|
<select name="gender" class="form-select">
|
||||||
<option selected disabled>Select Gender</option>
|
<option selected disabled>Select Gender</option>
|
||||||
|
|
@ -159,79 +184,51 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Date of Birth</label>
|
<label class="form-label">Date of Birth</label>
|
||||||
<input type="date" name="dob" class="form-control">
|
<input type="date" name="dob" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{-- CONTACT INFORMATION --}}
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<i class="fa-solid fa-envelope me-2"></i> Contact Information
|
<i class="fa-solid fa-envelope me-2"></i> Contact Information
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Contact Number <span class="required">*</span></label>
|
<label class="form-label">Contact Number <span class="required">*</span></label>
|
||||||
<input type="mobile" name="mobile" class="form-control" required>
|
<input type="tel" name="mobile" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Alternative Contact Number<span class="required">*</span></label>
|
<label class="form-label">Alternative Contact Number</label>
|
||||||
<input type="mobile2" name="mobile2" class="form-control" required>
|
<input type="tel" name="mobile2" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Email Address <span class="required">*</span></label>
|
<label class="form-label">Email Address <span class="required">*</span></label>
|
||||||
<input type="email" name="email" class="form-control" required>
|
<input type="email" name="email" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
<label class="form-label">Preferred Contact Method</label>
|
||||||
<label class="form-label">Preferred contact method </label>
|
<select name="preferred_contact_method" class="form-select">
|
||||||
<select name="gender" class="form-select">
|
|
||||||
<option selected disabled>Select Your Option</option>
|
<option selected disabled>Select Your Option</option>
|
||||||
<option value="Male">Email</option>
|
<option value="email">Email</option>
|
||||||
<option value="Female">Phone</option>
|
<option value="phone">Phone</option>
|
||||||
<option value="Female">Sms</option>
|
<option value="sms">SMS</option>
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="section-title">
|
{{-- EDUCATION --}}
|
||||||
<i class="fa-solid fa-language me-2"></i> Language and Diversity
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">English <span class="required">*</span></label>
|
|
||||||
<input type="text" name="Language_Diversity" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section-title">
|
|
||||||
<i class="fa-solid fa-wheelchair me-2"></i> Disability
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Disability <span class="required">*</span></label>
|
|
||||||
<input type="text" name="Disability" class="form-control" required>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<i class="fa-solid fa-graduation-cap me-2"></i> Education
|
<i class="fa-solid fa-graduation-cap me-2"></i> Education
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb-3-custom">
|
||||||
<!-- Still at School -->
|
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Still at school?</label>
|
<label class="form-label">Still at school?</label>
|
||||||
<select name="still_at_school" class="form-select">
|
<select name="still_at_school" class="form-select">
|
||||||
<option selected disabled>Select Your Option</option>
|
<option selected disabled>Select Your Option</option>
|
||||||
|
|
@ -240,8 +237,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Highest Qualification -->
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Highest Educational Qualification</label>
|
<label class="form-label">Highest Educational Qualification</label>
|
||||||
<select name="highest_qualification" class="form-select">
|
<select name="highest_qualification" class="form-select">
|
||||||
<option selected disabled>Select Qualification</option>
|
<option selected disabled>Select Qualification</option>
|
||||||
|
|
@ -257,22 +253,17 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- School / College -->
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">School / College Name</label>
|
<label class="form-label">School / College Name</label>
|
||||||
<input type="text" name="school_name" class="form-control"
|
<input type="text" name="school_name" class="form-control" placeholder="Enter School Name">
|
||||||
placeholder="Enter School / College Name">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Year Completed -->
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Year Completed</label>
|
<label class="form-label">Year Completed</label>
|
||||||
<input type="number" name="year_completed" class="form-control"
|
<input type="number" name="year_completed" class="form-control" min="1980" max="2100" placeholder="e.g. 2025">
|
||||||
min="1980" max="2100" placeholder="e.g. 2025">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Examination Passed -->
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Examination Passed</label>
|
<label class="form-label">Examination Passed</label>
|
||||||
<select name="exam_passed" class="form-select">
|
<select name="exam_passed" class="form-select">
|
||||||
<option selected disabled>Select Examination</option>
|
<option selected disabled>Select Examination</option>
|
||||||
|
|
@ -286,66 +277,48 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Subjects -->
|
<div class="col-md-6 mb-3-custom">
|
||||||
<div class="col-md-6 mb-4">
|
|
||||||
<label class="form-label">Subjects</label>
|
<label class="form-label">Subjects</label>
|
||||||
<input type="text" name="subjects" class="form-control"
|
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
|
||||||
placeholder="e.g. Mathematics, Science, English">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Grades / Results -->
|
<div class="col-12 mb-3-custom">
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label class="form-label">Grades / Results</label>
|
<label class="form-label">Grades / Results</label>
|
||||||
<textarea name="grades_results" class="form-control" rows="3"
|
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
|
||||||
placeholder="Enter your grades or examination results"></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Certificate Upload -->
|
<div class="col-12 mb-3-custom">
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label class="form-label">Educational Certificates</label>
|
<label class="form-label">Educational Certificates</label>
|
||||||
<input type="file" name="certificates[]" class="form-control"
|
<input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
|
||||||
accept=".pdf,.jpg,.jpeg,.png" multiple>
|
</div>
|
||||||
<small class="text-muted">
|
|
||||||
Upload O/L, A/L, NVQ, Diploma or other educational certificates.
|
|
||||||
</small>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
{{-- EMERGENCY CONTACTS --}}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<div class="section-title">
|
|
||||||
<i class="fa-solid fa-graduation-cap me-2"></i> Qualifications
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
|
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
|
<i class="fa-solid fa-phone-flip me-2"></i> Emergency Contacts
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Emergency Contact Name <span class="required">*</span></label>
|
<label class="form-label">Emergency Contact Name <span class="required">*</span></label>
|
||||||
<input type="text" name="Emergency_Contact" class="form-control" required>
|
<input type="text" name="emergency_contact_name" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-3-custom">
|
||||||
<label class="form-label">Relationship <span class="required">*</span></label>
|
<label class="form-label">Relationship <span class="required">*</span></label>
|
||||||
<input type="text" name="Emergency_Contact" class="form-control" required>
|
<input type="text" name="emergency_contact_relationship" class="form-control" required>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
{{-- TERMS AND CONDITIONS --}}
|
||||||
|
<div class="form-check mb-3 mt-2">
|
||||||
|
|
||||||
<div class="form-check mb-4">
|
|
||||||
<input class="form-check-input" type="checkbox" id="terms" required>
|
<input class="form-check-input" type="checkbox" id="terms" required>
|
||||||
<label class="form-check-label" href="#terms">
|
<label class="form-check-label" for="terms" style="font-size: 13px;">
|
||||||
I agree to the terms and conditions <span class="required">*</span>
|
I agree to the terms and conditions <span class="required">*</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-3">
|
||||||
<button type="submit" class="submit-btn">Submit Application</button>
|
<button type="submit" class="submit-btn">Submit Application</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -353,5 +326,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -9,6 +9,9 @@
|
||||||
--primary:#5E244E;
|
--primary:#5E244E;
|
||||||
--secondary:#8B3A74;
|
--secondary:#8B3A74;
|
||||||
--light:#f8f4f7;
|
--light:#f8f4f7;
|
||||||
|
--card-border: #efeff4;
|
||||||
|
--text-muted: #6a6f73;
|
||||||
|
--success-green: #1f8a4c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
|
|
@ -40,9 +43,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||||
/* border-radius: 30px; */
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
border-radius: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-box input {
|
.search-box input {
|
||||||
|
|
@ -68,40 +71,130 @@
|
||||||
background: var(--secondary);
|
background: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Udemy Style Course Card --- */
|
||||||
|
|
||||||
.course-card {
|
.course-card {
|
||||||
border:none;
|
border: 1px solid var(--card-border);
|
||||||
border-radius:15px;
|
border-radius: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition:.4s;
|
background: #fff;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card:hover {
|
.course-card:hover {
|
||||||
transform:translateY(-8px);
|
transform: translateY(-5px);
|
||||||
box-shadow:0 15px 35px rgba(0,0,0,.15);
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-image-wrapper {
|
||||||
|
padding: 16px 16px 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card img {
|
.course-card img {
|
||||||
height:230px;
|
height: 190px;
|
||||||
|
width: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
border-radius: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-course{
|
.course-card .card-body {
|
||||||
background:#887582;
|
padding: 20px 24px 24px 24px;
|
||||||
color:#fff;
|
display: flex;
|
||||||
padding:8px 15px;
|
flex-direction: column;
|
||||||
border-radius:30px;
|
}
|
||||||
|
|
||||||
|
.course-title {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #1c1d1f;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-author {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-short-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4f5357;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-bestseller {
|
||||||
|
background-color: #ece3f1;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-star {
|
||||||
|
color: #b4690e;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-count {
|
||||||
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight:30px;
|
}
|
||||||
|
|
||||||
|
.course-features {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--success-green);
|
||||||
|
margin-bottom: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-features span i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-footer {
|
||||||
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-btn {
|
.read-btn {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
/* border-radius:30px; */
|
padding: 12px 20px;
|
||||||
padding:10px 25px;
|
font-weight: 600;
|
||||||
font-weight: 40px;
|
border-radius: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: 0.2s;
|
||||||
|
border: none;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-btn:hover {
|
.read-btn:hover {
|
||||||
|
|
@ -109,14 +202,64 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-box{
|
/* --- Modernized Why Study With Us Section --- */
|
||||||
background:#fff;
|
.features-section {
|
||||||
border-radius:15px;
|
background-color: #f8f9fa;
|
||||||
padding:25px;
|
border-radius: 24px;
|
||||||
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
padding: 60px 40px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-section h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1c1d1f;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-box {
|
||||||
|
background: #fff;
|
||||||
|
padding: 30px 24px;
|
||||||
|
border-radius: 16px;
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #efeff4;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-box:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-icon-wrapper {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #ece3f1;
|
||||||
|
color: var(--primary);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 22px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-box h5 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1c1d1f;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-box p {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* No results message styling */
|
|
||||||
#noResults {
|
#noResults {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -153,42 +296,66 @@ $courses=[
|
||||||
'title'=>'Diploma in Automotive Engineering',
|
'title'=>'Diploma in Automotive Engineering',
|
||||||
'duration'=>'2 Years',
|
'duration'=>'2 Years',
|
||||||
'level'=>'Diploma',
|
'level'=>'Diploma',
|
||||||
'description'=>'Learn engine systems, diagnostics, vehicle maintenance, workshop practices and modern automotive technologies.',
|
'author'=>'Automotive Engineering Dept.',
|
||||||
|
'desc'=>'Master engine diagnostics, modern hybrid vehicle maintenance, and advanced automotive electrical systems with hands-on labs.',
|
||||||
|
'students'=>'1,240 students enrolled',
|
||||||
|
'rating'=>'4.9',
|
||||||
|
'badge'=>'Popular'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
|
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
|
||||||
'title'=>'Mechanical Systems Technology',
|
'title'=>'Mechanical Systems Technology',
|
||||||
'duration'=>'18 Months',
|
'duration'=>'18 Months',
|
||||||
'level'=>'Certificate',
|
'level'=>'Certificate',
|
||||||
'description'=>'Study suspension, steering, transmission, braking systems and practical repair techniques.',
|
'author'=>'Tech & Service Campus',
|
||||||
|
'desc'=>'Comprehensive training on vehicle suspension, transmissions, steering, braking mechanisms, and professional repair workshop skills.',
|
||||||
|
'students'=>'850 students enrolled',
|
||||||
|
'rating'=>'4.7',
|
||||||
|
'badge'=>'Bestseller'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
|
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
|
||||||
'title'=>'Electric Vehicle Technology',
|
'title'=>'Electric Vehicle Technology',
|
||||||
'duration'=>'1 Year',
|
'duration'=>'1 Year',
|
||||||
'level'=>'Advanced',
|
'level'=>'Advanced',
|
||||||
'description'=>'Explore EV batteries, charging infrastructure, electric drivetrains and smart mobility systems.',
|
'author'=>'EV Research Institute',
|
||||||
|
'desc'=>'Dive into the future of mobility. Learn about smart EV battery packs, fast charging infrastructures, and high-voltage safety.',
|
||||||
|
'students'=>'640 students enrolled',
|
||||||
|
'rating'=>'4.8',
|
||||||
|
'badge'=>'New'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image'=>'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=900&q=80',
|
'image'=>'https://images.unsplash.com/photo-1616788494707-ec28f08d05a1?auto=format&fit=crop&w=900&q=80',
|
||||||
'title'=>'Hybrid Vehicle Maintenance',
|
'title'=>'Advanced EFI Engine Tuning & Diagnostic',
|
||||||
'duration'=>'10 Months',
|
'duration'=>'6 Months',
|
||||||
'level'=>'Professional',
|
'level'=>'Expert',
|
||||||
'description'=>'Learn hybrid engine operation, diagnostics and maintenance procedures.',
|
'author'=>'Performance Tuning Lab',
|
||||||
|
'desc'=>'Learn professional ECU remapping, electronic fuel injection (EFI) tuning, sensor calibration, and master high-end oscilloscope diagnostics.',
|
||||||
|
'students'=>'420 students enrolled',
|
||||||
|
'rating'=>'4.9',
|
||||||
|
'badge'=>'Hot & New'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image'=>'https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=900&q=80',
|
'image'=>'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80',
|
||||||
'title'=>'Auto Electrical Systems',
|
'title'=>'Hybrid & Plug-in Hybrid Masterclass',
|
||||||
'duration'=>'8 Months',
|
'duration'=>'8 Months',
|
||||||
'level'=>'Certificate',
|
'level'=>'Professional',
|
||||||
'description'=>'Understand vehicle wiring, sensors, ECU systems and electronic diagnostics.',
|
'author'=>'Automotive Engineering Dept.',
|
||||||
|
'desc'=>'Specialized training in Toyota/Honda Hybrid Synergy Drive systems, inverter repairs, planetary gearboxes, and live diagnostic scanner masterclass.',
|
||||||
|
'students'=>'980 students enrolled',
|
||||||
|
'rating'=>'4.8',
|
||||||
|
'badge'=>'Top Rated'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
|
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
|
||||||
'title'=>'Automobile Service Technician',
|
'title'=>'Automotive Body Electronics & Comfort Systems',
|
||||||
'duration'=>'1 Year',
|
'duration'=>'1 Year',
|
||||||
'level'=>'NVQ',
|
'level'=>'Diploma',
|
||||||
'description'=>'Hands-on training in servicing, repairing and maintaining modern vehicles.',
|
'author'=>'Tech & Service Campus',
|
||||||
|
'desc'=>'Covering modern CAN-bus/LIN-bus communication networks, SRS airbag systems, ABS/ESP braking electronics, and smart climate control.',
|
||||||
|
'students'=>'510 students enrolled',
|
||||||
|
'rating'=>'4.6',
|
||||||
|
'badge'=>'Trending'
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
@endphp
|
@endphp
|
||||||
|
|
@ -204,23 +371,31 @@ $courses=[
|
||||||
@foreach($courses as $course)
|
@foreach($courses as $course)
|
||||||
<div class="col-lg-4 col-md-6 course-item">
|
<div class="col-lg-4 col-md-6 course-item">
|
||||||
<div class="card course-card h-100">
|
<div class="card course-card h-100">
|
||||||
|
<div class="course-image-wrapper">
|
||||||
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
|
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
|
||||||
<div class="card-body">
|
|
||||||
<span class="badge-course course-level">
|
|
||||||
{{ $course['level'] }}
|
|
||||||
</span>
|
|
||||||
<h4 class="mt-3 fw-bold course-title">
|
|
||||||
{{ $course['title'] }}
|
|
||||||
</h4>
|
|
||||||
<p class="text-muted course-desc">
|
|
||||||
{{ $course['description'] }}
|
|
||||||
</p>
|
|
||||||
<hr>
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<span><b>Duration</b></span>
|
|
||||||
<span>{{ $course['duration'] }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<a href="/apply" class="btn read-btn w-100 mt-4">Apply Course</a>
|
<div class="card-body">
|
||||||
|
<h4 class="course-title">{{ $course['title'] }}</h4>
|
||||||
|
<div class="course-author">{{ $course['author'] }}</div>
|
||||||
|
|
||||||
|
<p class="course-short-desc">{{ $course['desc'] }}</p>
|
||||||
|
|
||||||
|
<div class="course-meta-row">
|
||||||
|
<span class="badge-bestseller">{{ $course['badge'] }}</span>
|
||||||
|
<span class="rating-star">
|
||||||
|
<i class="fas fa-star"></i> {{ $course['rating'] }}
|
||||||
|
</span>
|
||||||
|
<span class="rating-count">({{ $course['students'] }})</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="course-features">
|
||||||
|
<span><i class="fas fa-tools"></i> Practical Labs</span>
|
||||||
|
<span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="course-footer">
|
||||||
|
<a href="/apply" class="read-btn">View & Apply Course</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -230,28 +405,58 @@ $courses=[
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{{-- Modernized Why Study With Us Section --}}
|
||||||
<section class="pb-5">
|
<section class="pb-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="info-box text-center">
|
<div class="features-section text-center">
|
||||||
<h2 class="mb-3">Why Study With Us?</h2>
|
<h2>Why Study With Us?</h2>
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
<div class="row g-4">
|
||||||
<h3>✔</h3>
|
<!-- Feature 1 -->
|
||||||
<p>Experienced Lecturers</p>
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="feature-box">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
|
<i class="fas fa-chalkboard-teacher"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-3">
|
<h5>Experienced Lecturers</h5>
|
||||||
<h3>✔</h3>
|
<p>Learn from certified automotive industry experts and senior engineers.</p>
|
||||||
<p>Modern Workshops</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<h3>✔</h3>
|
|
||||||
<p>Industry Certification</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3">
|
|
||||||
<h3>✔</h3>
|
|
||||||
<p>Career Guidance</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 2 -->
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="feature-box">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
|
<i class="fas fa-cogs"></i>
|
||||||
|
</div>
|
||||||
|
<h5>Modern Workshops</h5>
|
||||||
|
<p>Get hands-on experience with latest diagnostic tools and hybrid lab setups.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 3 -->
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="feature-box">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
|
<i class="fas fa-award"></i>
|
||||||
|
</div>
|
||||||
|
<h5>Industry Certification</h5>
|
||||||
|
<p>Earn internationally recognized qualifications to boost your career global scale.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature 4 -->
|
||||||
|
<div class="col-xl-3 col-md-6">
|
||||||
|
<div class="feature-box">
|
||||||
|
<div class="feature-icon-wrapper">
|
||||||
|
<i class="fas fa-briefcase"></i>
|
||||||
|
</div>
|
||||||
|
<h5>Career Guidance</h5>
|
||||||
|
<p>Free job placement support, resume building, and interview preparation workshops.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -264,11 +469,9 @@ document.getElementById('courseSearch').addEventListener('keyup', function() {
|
||||||
|
|
||||||
courseItems.forEach(function(item) {
|
courseItems.forEach(function(item) {
|
||||||
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
||||||
let level = item.querySelector('.course-level').textContent.toLowerCase();
|
let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
|
||||||
let desc = item.querySelector('.course-desc').textContent.toLowerCase();
|
|
||||||
|
|
||||||
|
if (title.includes(filter) || desc.includes(filter)) {
|
||||||
if (title.includes(filter) || level.includes(filter) || desc.includes(filter)) {
|
|
||||||
item.style.setProperty('display', '', 'important');
|
item.style.setProperty('display', '', 'important');
|
||||||
hasResults = true;
|
hasResults = true;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -276,7 +479,6 @@ document.getElementById('courseSearch').addEventListener('keyup', function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
let noResultsMsg = document.getElementById('noResults');
|
let noResultsMsg = document.getElementById('noResults');
|
||||||
if (hasResults) {
|
if (hasResults) {
|
||||||
noResultsMsg.classList.add('d-none');
|
noResultsMsg.classList.add('d-none');
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,8 @@
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', sans-serif;
|
font-family: 'Segoe UI', sans-serif;
|
||||||
background: #f5f7fb;
|
background: #f5f7fb;
|
||||||
padding-top: 80px;
|
/* 80px තිබුණු එක 56px කළා, එවිට අනවශ්ය space එක ඉවත් වේ */
|
||||||
|
padding-top: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
|
|
@ -36,11 +38,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: white !important;
|
color: rgba(255, 255, 255, 0.85) !important;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
transition: 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
/* දැනට ඉන්න පිටුව හෝ hover වන විට පැහැදිලිව පෙනීමට */
|
||||||
|
.nav-link:hover,
|
||||||
|
.nav-link.active-page {
|
||||||
color: #ffc107 !important;
|
color: #ffc107 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,13 +159,13 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg">
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand" href="/">
|
<a class="navbar-brand" href="/">
|
||||||
<i class="fa-solid fa-car-side"></i> AutoEdu
|
<i class="fa-solid fa-car-side"></i> AutoEdu
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<button class="navbar-toggler bg-light"
|
<button class="navbar-toggler"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#menu"
|
data-bs-target="#menu"
|
||||||
|
|
@ -173,19 +178,19 @@
|
||||||
<div class="collapse navbar-collapse" id="menu">
|
<div class="collapse navbar-collapse" id="menu">
|
||||||
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/">Home</a>
|
<a class="nav-link {{ request()->is('/') ? 'active-page' : '' }}" href="/">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/courses">Courses</a>
|
<a class="nav-link {{ request()->is('courses*') ? 'active-page' : '' }}" href="/courses">Courses</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/students">Student</a>
|
<a class="nav-link {{ request()->is('students*') ? 'active-page' : '' }}" href="/students">Student</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/abouts">About Us</a>
|
<a class="nav-link {{ request()->is('abouts*') ? 'active-page' : '' }}" href="/abouts">About Us</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/contact">Contact</a>
|
<a class="nav-link {{ request()->is('contact*') ? 'active-page' : '' }}" href="/contact">Contact</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav-item ms-lg-3 mt-3 mt-lg-0">
|
<li class="nav-item ms-lg-3 mt-3 mt-lg-0">
|
||||||
|
|
@ -204,7 +209,8 @@
|
||||||
<span class="user-profile-name">{{ $displayName }}</span>
|
<span class="user-profile-name">{{ $displayName }}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul class="dropdown-menu dropdown-menu-end shadow animate slideIn" aria-labelledby="userMenu">
|
{{-- Dropdown responsive alignment එක හැදුවා --}}
|
||||||
|
<ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
|
||||||
<li>
|
<li>
|
||||||
<a class="dropdown-item" href="/profile">
|
<a class="dropdown-item" href="/profile">
|
||||||
<i class="fa-solid fa-user me-2"></i> Profile
|
<i class="fa-solid fa-user me-2"></i> Profile
|
||||||
|
|
@ -220,8 +226,8 @@
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="d-flex gap-2">
|
<div class="d-flex gap-2">
|
||||||
<a href="/signin" class="btn btn-outline-light">Sign In</a>
|
<a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
|
||||||
<a href="/signup" class="btn btn-warning">Register</a>
|
<a href="/signup" class="btn btn-warning btn-sm px-3">Register</a>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -247,10 +253,10 @@
|
||||||
<nav aria-label="Footer quick links">
|
<nav aria-label="Footer quick links">
|
||||||
<ul class="list-unstyled footer-links">
|
<ul class="list-unstyled footer-links">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="{{ Route::has('courses') ? route('courses') : '/courses' }}">Courses</a></li>
|
<li><a href="/courses">Courses</a></li>
|
||||||
<li><a href="{{ Route::has('research') ? route('research') : '/students' }}">Students</a></li>
|
<li><a href="/students">Students</a></li>
|
||||||
<li><a href="{{ Route::has('faculty') ? route('faculty') : '/abouts' }}">Abouts</a></li>
|
<li><a href="/abouts">About Us</a></li>
|
||||||
<li><a href="{{ Route::has('contact') ? route('contact') : '/contact' }}">Contact</a></li>
|
<li><a href="/contact">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -305,7 +311,6 @@ function submitLogout() {
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
alert('Logged out successfully!');
|
alert('Logged out successfully!');
|
||||||
|
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
} else {
|
} else {
|
||||||
alert('Logout failed. Please try again.');
|
alert('Logout failed. Please try again.');
|
||||||
|
|
@ -316,20 +321,6 @@ function submitLogout() {
|
||||||
alert('Server side error occurred during logout.');
|
alert('Server side error occurred during logout.');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleUserDropdown(event) {
|
|
||||||
event.stopPropagation();
|
|
||||||
const dropdown = document.getElementById('userDropdownContent');
|
|
||||||
if (dropdown) {
|
|
||||||
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('click', function () {
|
|
||||||
const dropdown = document.getElementById('userDropdownContent');
|
|
||||||
if (dropdown) { dropdown.style.display = 'none'; }
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -6,231 +6,241 @@
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background: #f5f7fb;
|
background: #f5f7fb;
|
||||||
font-family: 'Arial', Helvetica, sans-serif;
|
font-family: 'Segoe UI', Arial, sans-serif;
|
||||||
}
|
scale: 0.92;
|
||||||
|
|
||||||
* {
|
|
||||||
font-family: 'Arial';
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* LEFT PANEL (If active) */
|
||||||
.left-panel {
|
.left-panel {
|
||||||
min-height: 100vh;
|
background: #5E244E;
|
||||||
background: #f8f9fa;
|
color: white;
|
||||||
}
|
|
||||||
|
|
||||||
.right-panel {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* RIGHT PANEL */
|
||||||
|
.right-panel {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* REGISTRATION BOX */
|
||||||
.box {
|
.box {
|
||||||
width: 50%;
|
width: 100%;
|
||||||
max-width: 520px;
|
max-width: 500px;
|
||||||
background: #fff;
|
background: #ffffff;
|
||||||
padding: 40px;
|
padding: 45px;
|
||||||
/* border-radius: 15px; */
|
border-radius: 18px;
|
||||||
box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
|
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TITLE */
|
||||||
|
.headline {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #222;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MODERN INPUT WITH FLOATING LABELS */
|
||||||
|
.input-container {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container input {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
padding: 15px 0 5px 0;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid #ddd;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #334155;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container label {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 0;
|
||||||
|
color: #744a68;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input Focus States */
|
||||||
|
.input-container input:focus {
|
||||||
|
border-bottom-color: #744a68;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label Floating Effect */
|
||||||
|
.input-container input:focus + label,
|
||||||
|
.input-container input:not(:placeholder-shown) + label {
|
||||||
|
top: -10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #744a68;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CHECKBOX STYLE */
|
||||||
|
.form-check-input:checked {
|
||||||
|
background-color: #5E244E;
|
||||||
|
border-color: #5E244E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BUTTON */
|
||||||
|
.btn-primary {
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: #5E244E;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
transition: background 0.2s ease-in-out, transform 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover, .btn-primary:focus {
|
||||||
|
background: #4a1c3e;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* BOTTOM TEXT */
|
||||||
|
.dontacc {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dontacc p {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dontacc a {
|
||||||
|
color: #744a68;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dontacc a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #5E244E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:991px) {
|
||||||
|
.right-panel {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headline {
|
.headline {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
color: #5E244E;
|
color: #5E244E;
|
||||||
font-weight: 700;
|
font-weight: bold;
|
||||||
font-family: Arial;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .headline {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-weight: 700;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
font-size: 22px;
|
|
||||||
font-family: arial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container input {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 2px solid #744a68;
|
|
||||||
padding: 12px 0 12px 5px;
|
|
||||||
outline: none;
|
|
||||||
background: transparent;
|
|
||||||
font-family: 'Arial';
|
|
||||||
font-size: 22px;
|
|
||||||
font-family: arial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container label {
|
|
||||||
position: absolute;
|
|
||||||
left: 5px;
|
|
||||||
top: 12px;
|
|
||||||
color: #744a68;
|
|
||||||
transition: .3s ease all;
|
|
||||||
pointer-events: none;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0 4px;
|
|
||||||
font-size: 22px;
|
|
||||||
font-family: arial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container input:focus {
|
|
||||||
border-color: #744a68;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: arial;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Reliable floating label mechanism via :placeholder-shown */
|
|
||||||
.input-container input:focus + label,
|
|
||||||
.input-container input:not(:placeholder-shown) + label {
|
|
||||||
top: -12px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #744a68;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
background:#5E244E;
|
|
||||||
border: none;
|
|
||||||
margin-bottom:10px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dontacc {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
font-size: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dontacc a {
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #5E244E;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: arial;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: 991px) {
|
|
||||||
.left-panel {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
margin: 20px;
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@endpush
|
@endpush
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row min-vh-100">
|
||||||
|
|
||||||
<!-- <div class="col-lg-6 d-none d-lg-flex justify-content-center align-items-center left-panel">
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
|
|
||||||
<img src="{{ asset('images/login-banner.png') }}"
|
|
||||||
class="img-fluid mb-4"
|
|
||||||
style="max-width:450px;"
|
|
||||||
alt="Academy">
|
|
||||||
|
|
||||||
<h2 class="fw-bold">
|
|
||||||
Automobile Engineering Academy
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<p class="text-muted">
|
|
||||||
Create your student account to apply for courses and manage your enrolment.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<div class="col-lg-6 right-panel">
|
|
||||||
|
|
||||||
|
<div class="col-md-8 col-lg-5 mx-auto right-panel">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
|
<h2 class="headline">Student Registration</h2>
|
||||||
|
|
||||||
<h2 class="headline">
|
<form method="POST" action="{{ url('/signuppage') }}">
|
||||||
Student Registration
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<form method="POST" action="/signuppage">
|
|
||||||
@csrf
|
@csrf
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" name="first_name" placeholder=" " required>
|
<input type="text" name="first_name" value="{{ old('first_name') }}" placeholder=" " required autocomplete="given-name">
|
||||||
<label>First Name</label>
|
<label>First Name</label>
|
||||||
|
@error('first_name')
|
||||||
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" name="last_name" placeholder=" " required>
|
<input type="text" name="last_name" value="{{ old('last_name') }}" placeholder=" " required autocomplete="family-name">
|
||||||
<label>Last Name</label>
|
<label>Last Name</label>
|
||||||
|
@error('last_name')
|
||||||
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="email" name="email" placeholder=" " required>
|
<input type="email" name="email" value="{{ old('email') }}" placeholder=" " required autocomplete="email">
|
||||||
<label>Email Address</label>
|
<label>Email Address</label>
|
||||||
|
@error('email')
|
||||||
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" name="phone" placeholder=" " required>
|
<input type="text" name="phone" value="{{ old('phone') }}" placeholder=" " required autocomplete="tel">
|
||||||
<label>Mobile Number</label>
|
<label>Mobile Number</label>
|
||||||
|
@error('phone')
|
||||||
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="password" name="password" placeholder=" " required>
|
<input type="password" name="password" placeholder=" " required autocomplete="new-password">
|
||||||
<label>Password</label>
|
<label>Password</label>
|
||||||
|
@error('password')
|
||||||
|
<span class="d-block text-danger mt-1 small">{{ $message }}</span>
|
||||||
|
@enderror
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="password" name="password_confirmation" placeholder=" " required>
|
<input type="password" name="password_confirmation" placeholder=" " required autocomplete="new-password">
|
||||||
<label>Confirm Password</label>
|
<label>Confirm Password</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-check mb-4" style="gap: 5px; padding-bottom: 21px;">
|
<div class="form-check mb-4 d-flex align-items-center gap-2">
|
||||||
<input class="form-check-input" type="checkbox" id="agree" required>
|
<input class="form-check-input" type="checkbox" id="agree" required>
|
||||||
<label class="form-check-label" for="agree">
|
<label class="form-check-label" for="agree">
|
||||||
I agree to the Terms & Conditions
|
I agree to the Terms & Conditions
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">
|
<button type="submit" class="btn btn-primary mb-4">
|
||||||
Create Account
|
Create Account
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="dontacc">
|
<div class="dontacc">
|
||||||
<p class="mt-4 mb-1" >Already have an account?</p>
|
<p class="mb-1">Already have an account? <a href="{{ url('/signin') }}" class="ms-1">Sign In</a></p>
|
||||||
<a href="{{ url('/signin') }}">
|
|
||||||
Sign In
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -17,7 +17,7 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
background-size:cover;
|
background-size:cover;
|
||||||
background-position:center;
|
background-position:center;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
padding:120px 0;
|
padding:80px 0;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,8 +48,9 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
.btn-portal{
|
.btn-portal{
|
||||||
background:#5E244E;
|
background:#5E244E;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
|
|
||||||
padding:10px 30px;
|
padding:10px 30px;
|
||||||
|
border: none;
|
||||||
|
transition: 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-portal:hover{
|
.btn-portal:hover{
|
||||||
|
|
@ -58,27 +59,36 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
background-color: #f8fafc;
|
background: transparent;
|
||||||
border-bottom: 1px solid #e2e8f0;
|
border-bottom: none;
|
||||||
border-top-left-radius: 12px;
|
padding: 25px 25px 10px;
|
||||||
border-top-right-radius: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-title {
|
.modal-title {
|
||||||
color: #8B3A74;
|
color: var(--primary);
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
align-item:center;
|
font-size: 1.35rem;
|
||||||
margin-left: 134px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 10px 25px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.input-group-text {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
border-color: #cbd5e1;
|
||||||
|
color: #64748b;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.form-label {
|
.form-label {
|
||||||
color: #475569;
|
color: #475569;
|
||||||
|
|
@ -88,28 +98,67 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
border: 1px solid #cbd5e1;
|
border: 1px solid #cbd5e1;
|
||||||
|
padding: 0.65rem 0.75rem;
|
||||||
padding: 0.6rem 0.75rem;
|
font-size: 0.95rem;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.form-control:focus {
|
.form-control:focus {
|
||||||
border-color: #a5b4fc;
|
border-color: var(--secondary);
|
||||||
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
|
box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
background-color: #f8fafc;
|
|
||||||
border-top: 1px solid #e2e8f0;
|
|
||||||
border-bottom-left-radius: 12px;
|
|
||||||
border-bottom-right-radius: 12px;
|
|
||||||
|
|
||||||
|
.input-group:focus-within .input-group-text {
|
||||||
|
border-color: var(--secondary);
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
background: transparent;
|
||||||
|
border-top: none;
|
||||||
|
padding: 0 25px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-modal-cancel {
|
||||||
|
background: transparent;
|
||||||
|
border: 1.5px solid #cbd5e1;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 10px 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-modal-cancel:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #334155;
|
||||||
|
border-color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-modal-login {
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 10px 0;
|
||||||
|
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
|
||||||
|
transition: all 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-modal-login:hover {
|
||||||
|
background: var(--secondary);
|
||||||
|
color: #fff;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Hero -->
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="fw-bold">Student Portal</h1>
|
<h1 class="fw-bold">Student Portal</h1>
|
||||||
|
|
@ -121,21 +170,11 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||||
Student Login
|
Student Login
|
||||||
</button>
|
</button>
|
||||||
<script>
|
|
||||||
function studentlogin() {
|
|
||||||
|
|
||||||
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
|
|
||||||
myModal.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Features -->
|
|
||||||
<section class="py-5">
|
<section class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="text-center mb-5">
|
<div class="text-center mb-5">
|
||||||
<h2>Student Services</h2>
|
<h2>Student Services</h2>
|
||||||
<p class="text-muted">
|
<p class="text-muted">
|
||||||
|
|
@ -144,16 +183,13 @@ function studentlogin() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
|
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card portal-card h-100 text-center p-4">
|
<div class="card portal-card h-100 text-center p-4">
|
||||||
<div class="portal-icon">
|
<div class="portal-icon">
|
||||||
<i class="fa-solid fa-book"></i>
|
<i class="fa-solid fa-book"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">My Courses</h4>
|
<h4 class="mt-4">My Courses</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">View enrolled courses and learning materials.</p>
|
||||||
View enrolled courses and learning materials.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -163,9 +199,7 @@ View enrolled courses and learning materials.
|
||||||
<i class="fa-solid fa-calendar-days"></i>
|
<i class="fa-solid fa-calendar-days"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">Class Timetable</h4>
|
<h4 class="mt-4">Class Timetable</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">Check your weekly lecture schedule.</p>
|
||||||
Check your weekly lecture schedule.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -175,9 +209,7 @@ Check your weekly lecture schedule.
|
||||||
<i class="fa-solid fa-file-lines"></i>
|
<i class="fa-solid fa-file-lines"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">Assignments</h4>
|
<h4 class="mt-4">Assignments</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">Submit assignments and download resources.</p>
|
||||||
Submit assignments and download resources.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -187,9 +219,7 @@ Submit assignments and download resources.
|
||||||
<i class="fa-solid fa-square-poll-vertical"></i>
|
<i class="fa-solid fa-square-poll-vertical"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">Exam Results</h4>
|
<h4 class="mt-4">Exam Results</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">View semester and final examination results.</p>
|
||||||
View semester and final examination results.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -199,9 +229,7 @@ View semester and final examination results.
|
||||||
<i class="fa-solid fa-credit-card"></i>
|
<i class="fa-solid fa-credit-card"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">Fee Payments</h4>
|
<h4 class="mt-4">Fee Payments</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">Pay course fees and download payment receipts.</p>
|
||||||
Pay course fees and download payment receipts.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -211,117 +239,99 @@ Pay course fees and download payment receipts.
|
||||||
<i class="fa-solid fa-user"></i>
|
<i class="fa-solid fa-user"></i>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="mt-4">Student Profile</h4>
|
<h4 class="mt-4">Student Profile</h4>
|
||||||
<p class="text-muted">
|
<p class="text-muted">Update your personal information securely.</p>
|
||||||
Update your personal information securely.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Quick Links -->
|
|
||||||
<section class="py-5 bg-light">
|
<section class="py-5 bg-light">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<div class="text-center mb-5">
|
<div class="text-center mb-5">
|
||||||
<h2>Quick Links</h2>
|
<h2>Quick Links</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row text-center">
|
<div class="row text-center">
|
||||||
|
|
||||||
<div class="col-md-3 mb-3">
|
<div class="col-md-3 mb-3">
|
||||||
<a href="#" class="btn btn-outline-dark w-100">
|
<a href="#" class="btn btn-outline-dark w-100">Academic Calendar</a>
|
||||||
Academic Calendar
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-3 mb-3">
|
<div class="col-md-3 mb-3">
|
||||||
<a href="#" class="btn btn-outline-dark w-100">
|
<a href="#" class="btn btn-outline-dark w-100">Student Handbook</a>
|
||||||
Student Handbook
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-3 mb-3">
|
<div class="col-md-3 mb-3">
|
||||||
<a href="#" class="btn btn-outline-dark w-100">
|
<a href="#" class="btn btn-outline-dark w-100">Examination Notices</a>
|
||||||
Examination Notices
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-3 mb-3">
|
<div class="col-md-3 mb-3">
|
||||||
<a href="#" class="btn btn-outline-dark w-100">
|
<a href="#" class="btn btn-outline-dark w-100">Contact Support</a>
|
||||||
Contact Support
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- CTA -->
|
|
||||||
<section class="py-5">
|
<section class="py-5">
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
|
|
||||||
<h2>Ready to Access Your Student Account?</h2>
|
<h2>Ready to Access Your Student Account?</h2>
|
||||||
|
<p class="text-muted">Log in to manage your academic activities and stay updated.</p>
|
||||||
<p class="text-muted">
|
|
||||||
Log in to manage your academic activities and stay updated.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||||
Student Login
|
Student Login
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Student Login Modal -->
|
|
||||||
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
|
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header d-flex align-items-center justify-content-between">
|
||||||
<h5 class="modal-title" id="studentLoginModalLabel">Student Portal Login</h5>
|
<h5 class="modal-title w-100 text-center" id="studentLoginModalLabel">
|
||||||
|
<i class="fa-solid fa-lock-open me-2" style="font-size: 20px; color: var(--secondary);"></i>
|
||||||
|
Student Portal Login
|
||||||
|
</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<form action="#" method="POST" id="studentLoginForm">
|
<form action="#" method="POST" id="studentLoginForm">
|
||||||
<!-- Laravel use karanawa nam meka active karanna -->
|
@csrf
|
||||||
<!-- @csrf -->
|
|
||||||
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<!-- Username Field -->
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="username" class="form-label">Username / Student ID</label>
|
<label for="username" class="form-label">Username / Student ID</label>
|
||||||
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your username" required>
|
<div class="input-group">
|
||||||
|
<span class="input-group-text"><i class="fa-solid fa-user-graduate"></i></span>
|
||||||
|
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your student ID" required>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Password Field -->
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="password" class="form-label">Password</label>
|
<label for="password" class="form-label">Password</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text"><i class="fa-solid fa-key"></i></span>
|
||||||
<input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required>
|
<input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- PIN Field -->
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label for="pin" class="form-label">Security PIN</label>
|
<label for="pin" class="form-label">Security PIN</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-text"><i class="fa-solid fa-shield-halved"></i></span>
|
||||||
<input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
|
<input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer d-flex gap-2 justify-content-center">
|
||||||
<button type="button" class="btn btn-portal" data-bs-dismiss="modal" style="background-color:gray; width:230px" >Cancel</button>
|
<button type="button" class="btn btn-modal-cancel " data-bs-dismiss="modal">Cancel</button>
|
||||||
<button type="submit" class="btn btn-portal" style=" width:230px">Login</button>
|
<button type="submit" class="btn btn-modal-login ">Login</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function studentlogin() {
|
||||||
|
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
|
||||||
|
myModal.show();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
@push('styles')
|
@push('styles')
|
||||||
<link rel="preload" as="image"
|
<link rel="preload" as="image"
|
||||||
href="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80"
|
href="https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80"
|
||||||
fetchpriority="high">
|
fetchpriority="high">
|
||||||
<link rel="stylesheet" href="{{ asset('css/pages/home.css') }}">
|
<link rel="stylesheet" href="{{ asset('css/pages/home.css') }}">
|
||||||
@endpush
|
@endpush
|
||||||
|
|
@ -12,23 +12,38 @@
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
--primary:#5E244E;
|
--primary:#5E244E;
|
||||||
--secondary:#8B3A74;
|
--secondary:#8B3A74;
|
||||||
--light:#F8F4F7;
|
--light:#F8F4F7;
|
||||||
--dark:#2F1027;
|
--dark:#2F1027;
|
||||||
--gold:#FFC107;
|
--gold:#FFC107;
|
||||||
|
--card-border: #efeff4;
|
||||||
|
--text-muted: #6a6f73;
|
||||||
|
--success-green: #1f8a4c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== Font & Base ===== */
|
||||||
|
body{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section{
|
||||||
|
padding:90px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title, h2, h3, h4, h5, h6{
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-weight:700;
|
||||||
|
color:#5E244E;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Buttons ===== */
|
||||||
.btn-theme{
|
.btn-theme{
|
||||||
background:#5E244E;
|
background:#5E244E;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
border:2px solid #5E244E;
|
border:2px solid #5E244E;
|
||||||
padding:12px 32px;
|
padding:14px 35px;
|
||||||
border-radius:40px;
|
border-radius:40px;
|
||||||
font-weight:600;
|
font-weight:600;
|
||||||
transition:.3s;
|
transition:.3s;
|
||||||
|
|
@ -72,35 +87,15 @@
|
||||||
color:#000;
|
color:#000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== Hero ===== */
|
||||||
|
|
||||||
|
|
||||||
/* ===== Font ===== */
|
|
||||||
body{
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .hero{
|
|
||||||
height:650px;
|
|
||||||
background:
|
|
||||||
linear-gradient(rgba(30,10,25,.65),rgba(30,10,25,.65)),
|
|
||||||
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80'); */
|
|
||||||
/* background-size:cover;
|
|
||||||
background-position:center;
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
height:650px;
|
height:650px;
|
||||||
background:
|
background: linear-gradient(rgba(0, 0, 0, 0.65),rgba(30,10,25,.65)),
|
||||||
linear-gradient(rgba(30,10,25,.65),rgba(30,10,25,.65)),
|
|
||||||
url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
|
url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.hero-content{
|
.hero-content{
|
||||||
height:100%;
|
height:100%;
|
||||||
display:flex;
|
display:flex;
|
||||||
|
|
@ -114,83 +109,140 @@ background-position: center;
|
||||||
.hero h1{
|
.hero h1{
|
||||||
font-size:60px;
|
font-size:60px;
|
||||||
font-weight:700;
|
font-weight:700;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
margin-top: 75px;
|
margin-top: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero p{
|
.hero p{
|
||||||
font-size:22px;
|
font-size:22px;
|
||||||
max-width:700px;
|
max-width:700px;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-theme{
|
.course-card {
|
||||||
background:#5E244E;
|
border: 1px solid var(--card-border);
|
||||||
color:#fff;
|
border-radius: 20px;
|
||||||
border:none;
|
|
||||||
padding:14px 35px;
|
|
||||||
border-radius:40px;
|
|
||||||
transition:.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-theme:hover{
|
|
||||||
background:#8B3A74;
|
|
||||||
color:#fff;
|
|
||||||
transform:translateY(-3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section{
|
|
||||||
padding:90px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6{
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-weight:700;
|
|
||||||
color:#5E244E;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card{
|
|
||||||
border:none;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius:18px;
|
background: #fff;
|
||||||
transition:.4s;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card img{
|
.course-card:hover {
|
||||||
transition:.5s;
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover{
|
.course-image-wrapper {
|
||||||
transform:translateY(-10px);
|
padding: 16px 16px 0 16px;
|
||||||
box-shadow:0 20px 45px rgba(0,0,0,.15);
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover img{
|
.course-card img {
|
||||||
transform:scale(1.08);
|
height: 190px;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 14px;
|
||||||
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body h4{
|
.course-card:hover img {
|
||||||
color:#5E244E;
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-card .card-body {
|
||||||
|
padding: 20px 24px 24px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left; /* Left alignment for Udemy Style */
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-title {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #1c1d1f;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-author {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-short-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4f5357;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-meta-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-bestseller {
|
||||||
|
background-color: #ece3f1;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-star {
|
||||||
|
color: #b4690e;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-count {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-features {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--success-green);
|
||||||
|
margin-bottom: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-features span i {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-footer {
|
||||||
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-btn {
|
.read-btn {
|
||||||
background:#5E244E;
|
background: var(--primary);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius:30px;
|
|
||||||
padding: 10px 25px;
|
padding: 10px 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 15px;
|
||||||
|
transition: 0.2s;
|
||||||
border: none;
|
border: none;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-btn:hover {
|
.read-btn:hover {
|
||||||
background:#8B3A74;
|
background: var(--secondary);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== Why Choose Us ===== */
|
||||||
.why-section {
|
.why-section {
|
||||||
background: #F8F4F7;
|
background: #F8F4F7;
|
||||||
}
|
}
|
||||||
|
|
@ -203,73 +255,32 @@ h6{
|
||||||
.why-section i {
|
.why-section i {
|
||||||
color: #5E244E;
|
color: #5E244E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cta{
|
|
||||||
background:#5E244E;
|
|
||||||
color:#fff;
|
|
||||||
border-radius:20px;
|
|
||||||
padding:80px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta p{
|
|
||||||
color:#ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta .btn{
|
|
||||||
background:#FFC107;
|
|
||||||
color:#000;
|
|
||||||
border:none;
|
|
||||||
border-radius:40px;
|
|
||||||
padding:14px 35px;
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta .btn:hover{
|
|
||||||
background:#ffcd39;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{-- ===================== HERO ===================== --}}
|
{{-- ===================== HERO ===================== --}}
|
||||||
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
|
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content text-center">
|
<div class="hero-content text-center">
|
||||||
|
<h1 class="display-4 fw-bold">
|
||||||
<h1 class="display-4 fw-bold" style"font-weight: 700;">
|
|
||||||
Automobile Engineering Academy
|
Automobile Engineering Academy
|
||||||
</h1>
|
</h1>
|
||||||
|
<p>
|
||||||
Driving Innovation Through Education, Research & Technology
|
Driving Innovation Through Education, Research & Technology
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="d-flex flex-wrap justify-content-center gap-3">
|
<div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
|
||||||
|
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
|
||||||
<a href="{{ Route::has('apply') ? route('apply') : '#' }}"
|
<i class="fa-solid fa-user-plus me-2"></i> Apply Now
|
||||||
class="btn btn-theme">
|
|
||||||
<i class="fa-solid fa-user-plus me-2"></i>
|
|
||||||
Apply Now
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="/courses"
|
<a href="/courses" class="btn btn-outline-theme">
|
||||||
class="btn btn-outline-theme">
|
<i class="fa-solid fa-book-open me-2"></i> Explore Courses
|
||||||
<i class="fa-solid fa-book-open me-2"></i>
|
|
||||||
Explore Courses
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- <a href="/contact"
|
|
||||||
class="btn btn-outline-light-custom">
|
|
||||||
<i class="fa-solid fa-phone me-2"></i>
|
|
||||||
Contact Admissions
|
|
||||||
</a> -->
|
|
||||||
<a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
|
<a href="mailto:imadhigp@gmail.com" class="btn btn-outline-light-custom">
|
||||||
<i class="fa-solid fa-phone me-2"></i>
|
<i class="fa-solid fa-phone me-2"></i> Contact Admissions
|
||||||
Contact Admissions
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -289,63 +300,76 @@ h6{
|
||||||
$courses = [
|
$courses = [
|
||||||
[
|
[
|
||||||
'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80',
|
'image' => 'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=800&q=80',
|
||||||
'title' => 'Automotive Engineering course',
|
'title' => 'Automotive Engineering Course',
|
||||||
'desc' => 'Learn vehicle design, engine technology, diagnostics and manufacturing.',
|
'desc' => 'Learn vehicle design, engine technology, diagnostics and manufacturing.',
|
||||||
|
'author' => 'Automotive Engineering Dept.',
|
||||||
|
'rating' => '4.9',
|
||||||
|
'students' => '1.2k students',
|
||||||
|
'badge' => 'Popular'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80',
|
'image' => 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80',
|
||||||
'title' => 'Mechanical Systems course',
|
'title' => 'Mechanical Systems Course',
|
||||||
'desc' => 'Study transmission systems, suspension, braking and vehicle maintenance.',
|
'desc' => 'Study transmission systems, suspension, braking and vehicle maintenance.',
|
||||||
|
'author' => 'Tech & Service Campus',
|
||||||
|
'rating' => '4.7',
|
||||||
|
'students' => '850 students',
|
||||||
|
'badge' => 'Bestseller'
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80',
|
'image' => 'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=800&q=80',
|
||||||
'title' => 'Electric Vehicle Technology course',
|
'title' => 'Electric Vehicle Technology Course',
|
||||||
'desc' => 'Master EV batteries, powertrains, charging systems and smart mobility.',
|
'desc' => 'Master EV batteries, powertrains, charging systems and smart mobility.',
|
||||||
|
'author' => 'EV Research Institute',
|
||||||
|
'rating' => '4.8',
|
||||||
|
'students' => '640 students',
|
||||||
|
'badge' => 'New'
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="row g-4">
|
<div class="row g-4 mb-5">
|
||||||
@foreach($courses as $course)
|
@foreach($courses as $course)
|
||||||
<div class="col-lg-4 col-md-6" padding-bottom:10px>
|
<div class="col-lg-4 col-md-6">
|
||||||
<div class="card shadow-sm border-0 h-100">
|
<div class="card course-card h-100">
|
||||||
|
|
||||||
<img src="{{ $course['image'] }}"
|
<div class="course-image-wrapper">
|
||||||
class="card-img-top"
|
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy" decoding="async">
|
||||||
alt="{{ $course['title'] }}"
|
|
||||||
width="800"
|
|
||||||
height="230"
|
|
||||||
loading="lazy"
|
|
||||||
decoding="async"
|
|
||||||
style="height:230px; object-fit:cover;">
|
|
||||||
|
|
||||||
<div class="card-body text-center">
|
|
||||||
<h4 class="fw-bold">
|
|
||||||
{{ $course['title'] }}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<p class="text-muted">
|
|
||||||
{{ $course['desc'] }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<a href="/courses" class="btn read-btn">
|
|
||||||
View Course
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="course-title">{{ $course['title'] }}</h4>
|
||||||
|
<div class="course-author">{{ $course['author'] }}</div>
|
||||||
|
|
||||||
|
<p class="course-short-desc">{{ $course['desc'] }}</p>
|
||||||
|
|
||||||
|
<div class="course-meta-row">
|
||||||
|
<span class="badge-bestseller">{{ $course['badge'] }}</span>
|
||||||
|
<span class="rating-star">
|
||||||
|
<i class="fas fa-star"></i> {{ $course['rating'] }}
|
||||||
|
</span>
|
||||||
|
<span class="rating-count">({{ $course['students'] }})</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="course-features">
|
||||||
|
<span><i class="fas fa-tools"></i> Practical Labs</span>
|
||||||
|
<span><i class="fas fa-certificate"></i> Verified Course</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="course-footer">
|
||||||
|
<a href="/courses" class="read-btn">View Course</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content: center; width: 100%; ">
|
|
||||||
<!-- <div style="display: flex; justify-content: flex-end; width: 100%; "> -->
|
|
||||||
<a href="/courses" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
|
|
||||||
View all courses
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
|
||||||
|
View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -359,7 +383,7 @@ h6{
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
|
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
|
||||||
alt="Automotive Engineering Lab"
|
alt="Automotive Engineering Lab"
|
||||||
class="img-fluid rounded shadow"
|
class="img-fluid rounded shadow-sm"
|
||||||
width="900"
|
width="900"
|
||||||
height="600"
|
height="600"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
|
|
@ -373,24 +397,19 @@ h6{
|
||||||
|
|
||||||
<ul class="list-unstyled">
|
<ul class="list-unstyled">
|
||||||
<li class="mb-3">
|
<li class="mb-3">
|
||||||
<i class="fa-solid fa-check text-success me-2"></i>
|
<i class="fa-solid fa-check text-success me-2"></i> Modern Laboratories
|
||||||
Modern Laboratories
|
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-3">
|
<li class="mb-3">
|
||||||
<i class="fa-solid fa-check text-success me-2"></i>
|
<i class="fa-solid fa-check text-success me-2"></i> Industry Qualified Lecturers
|
||||||
Industry Qualified Lecturers
|
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-3">
|
<li class="mb-3">
|
||||||
<i class="fa-solid fa-check text-success me-2"></i>
|
<i class="fa-solid fa-check text-success me-2"></i> Hands-on Vehicle Training
|
||||||
Hands-on Vehicle Training
|
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-3">
|
<li class="mb-3">
|
||||||
<i class="fa-solid fa-check text-success me-2"></i>
|
<i class="fa-solid fa-check text-success me-2"></i> Hybrid & Electric Vehicle Research Center
|
||||||
Hybrid & Electric Vehicle Research Center
|
|
||||||
</li>
|
</li>
|
||||||
<li class="mb-3">
|
<li class="mb-3">
|
||||||
<i class="fa-solid fa-check text-success me-2"></i>
|
<i class="fa-solid fa-check text-success me-2"></i> Internship Opportunities
|
||||||
Internship Opportunities
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -405,23 +424,14 @@ h6{
|
||||||
<h2 class="fw-bold mb-3">
|
<h2 class="fw-bold mb-3">
|
||||||
Join the Future of Automotive Engineering
|
Join the Future of Automotive Engineering
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p class="text-muted mb-4">
|
<p class="text-muted mb-4">
|
||||||
Shape the future with innovation, technology and practical learning.
|
Shape the future with innovation, technology and practical learning.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a href="{{ Route::has('apply') ? route('apply') : '#' }}"
|
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme">
|
||||||
class="btn btn-theme">
|
<i class="fa-solid fa-user-plus me-2"></i> Apply Now
|
||||||
<i class="fa-solid fa-user-plus me-2"></i>
|
|
||||||
Apply Now
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- <a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-primary btn-lg">
|
|
||||||
Apply Now
|
|
||||||
</a> -->
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue