change themes 0720

This commit is contained in:
imadhigp 2026-07-20 17:02:26 +05:30
parent 4289f1d576
commit 2e799d798a
7 changed files with 135 additions and 101 deletions

View File

@ -28,8 +28,7 @@ body {
.hero-about{ .hero-about{
min-height:60vh; min-height:60vh;
background: background:
linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)), linear-gradient(rgba(163, 177, 251, 0.26), rgb(50, 31, 31)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;

View File

@ -1,24 +1,30 @@
@extends('layouts.app') @extends('layouts.app')
@section('title','Apply Now') @section('title', 'Apply Now')
@section('content') @section('content')
<style> <style>
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
background: #f5f5f5; background: #F8FAFC;
color: #1E293B;
} }
:root { :root {
--primary: #5E244E; /* Premium Modern Automotive Palette */
--secondary: #8B3A74; --primary: #3E51B8; /* Tech Blue */
--light: #F8F4F7; --primary-dark: #001395; /* Deep Accent Blue */
--secondary: #6a2525; /* Muted Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
--bg-light: #F8FAFC; /* Clean grey background */
--card-border: rgba(62, 81, 184, 0.12);
} }
.hero { .hero {
height: 220px; height: 240px;
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)), background: linear-gradient(rgba(0, 19, 149, 0.75), rgba(106, 37, 37, 0.85)),
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;
background-position: center; background-position: center;
@ -26,115 +32,139 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
text-align: center;
} }
.hero h1 { .hero h1 {
font-size: 32px; font-size: 36px;
font-weight: bold; font-weight: 800;
margin: 0; margin: 0;
letter-spacing: -0.5px;
} }
.apply-area { .apply-area {
margin-top: -40px; margin-top: -50px;
margin-bottom: 40px; margin-bottom: 50px;
} }
.form-container-sm { .form-container-sm {
max-width: 820px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
} }
.form-card { .form-card {
background: white; background: white;
border-radius: 10px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,.08); border: 1px solid var(--card-border);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
} }
.form-header { .form-header {
background: var(--primary); background: linear-gradient(135deg, #0028FFBA 0%, #343030fa 100%);
color: white; color: white;
padding: 15px 25px; padding: 25px 30px;
border-bottom: 3px solid var(--accent-yellow);
} }
.form-header h2 { .form-header h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: 22px;
font-weight: bold; font-weight: 700;
} }
.section-title { .section-title {
background: #735D6D; background: var(--secondary);
color: white; color: white;
padding: 8px 12px; padding: 10px 16px;
margin-top: 22px; margin-top: 30px;
margin-bottom: 15px; margin-bottom: 20px;
font-size: 14px; font-size: 14px;
border-radius: 5px; border-radius: 6px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
} }
.form-label { .form-label {
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
margin-bottom: 4px; margin-bottom: 6px;
color: #000;
} }
.form-control, .form-control,
.form-select { .form-select {
border-radius: 5px; border: 1px solid #cbd5e1;
padding: 6px 10px; border-radius: 8px;
font-size: 13px; padding: 10px 14px;
font-size: 14px;
transition: all 0.2s ease;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(62, 81, 184, 0.15);
outline: 0;
} }
.required { .required {
color: red; color: var(--secondary-hover);
font-weight: bold;
} }
.submit-btn { .submit-btn {
background: var(--primary); background: var(--primary);
color: white; color: white;
border: none; border: none;
padding: 8px 20px; padding: 14px 30px;
font-size: 15px; font-size: 16px;
font-weight: bold; font-weight: 700;
border-radius: 30px; border-radius: 8px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
transition: 0.3s ease; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
} }
.submit-btn:hover { .submit-btn:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: translateY(-1px); color: var(--accent-yellow);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
} }
.mb-3-custom { .mb-3-custom {
margin-bottom: 0.75rem !important; margin-bottom: 1.25rem !important;
}
.form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
} }
</style> </style>
<div class="hero"> <div class="hero">
<div class="text-center"> <div class="text-center px-3">
<h1>Course Enrolment Form</h1> <h1>Course Enrolment Form</h1>
<p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p> <p class="lead mb-0 mt-2 fw-semibold" style="font-size: 15px; opacity: 0.95; color: var(--accent-yellow);">
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-container-sm">
<div class="form-card"> <div class="form-card">
<div class="form-header"> <div class="form-header">
<h2> <h2>
<i class="fa-solid fa-file-circle-check me-2"></i> <i class="fa-solid fa-file-circle-check me-2"></i>
Course Enrolment Form New Student Registration
</h2> </h2>
</div> </div>
<div class="p-4"> <div class="p-4 p-md-5">
<form action="#" method="POST" enctype="multipart/form-data"> <form action="#" method="POST" enctype="multipart/form-data">
@csrf @csrf
@ -146,32 +176,32 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <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" placeholder="Enter your first name" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <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" placeholder="Enter your last name" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">NIC / Passport</label> <label class="form-label">NIC / Passport Number</label>
<input type="text" name="nic" class="form-control"> <input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
</div> </div>
<div class="col-md-6 mb-3-custom"> <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" placeholder="e.g. Sri Lankan">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Address <span class="required">*</span></label> <label class="form-label">Residential Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" required> <input type="text" name="address" class="form-control" placeholder="Street address" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">District / City / State <span class="required">*</span></label> <label class="form-label">District / City / State <span class="required">*</span></label>
<input type="text" name="state" class="form-control" required> <input type="text" name="state" class="form-control" placeholder="City or region" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -198,17 +228,17 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <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="tel" name="mobile" class="form-control" required> <input type="tel" name="mobile" class="form-control" placeholder="Primary phone number" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Alternative Contact Number</label> <label class="form-label">Alternative Contact Number</label>
<input type="tel" name="mobile2" class="form-control"> <input type="tel" name="mobile2" class="form-control" placeholder="Backup phone number">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<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" placeholder="name@example.com" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -216,7 +246,7 @@
<select name="preferred_contact_method" class="form-select"> <select name="preferred_contact_method" class="form-select">
<option selected disabled>Select Your Option</option> <option selected disabled>Select Your Option</option>
<option value="email">Email</option> <option value="email">Email</option>
<option value="phone">Phone</option> <option value="phone">Phone Call</option>
<option value="sms">SMS</option> <option value="sms">SMS</option>
</select> </select>
</div> </div>
@ -224,12 +254,12 @@
{{-- EDUCATION --}} {{-- EDUCATION --}}
<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> Academic Qualifications
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Still at school?</label> <label class="form-label">Are you currently a school student?</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>
<option value="Yes">Yes</option> <option value="Yes">Yes</option>
@ -255,7 +285,7 @@
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<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" placeholder="Enter School Name"> <input type="text" name="school_name" class="form-control" placeholder="Enter last attended school name">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -266,10 +296,10 @@
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<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 Final Examination</option>
<option value="G.C.E. O/L">G.C.E. O/L</option> <option value="G.C.E. O/L">G.C.E. O/L</option>
<option value="G.C.E. A/L">G.C.E. A/L</option> <option value="G.C.E. A/L">G.C.E. A/L</option>
<option value="NVQ">NVQ</option> <option value="NVQ">NVQ Standards</option>
<option value="Certificate">Certificate</option> <option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option> <option value="Diploma">Diploma</option>
<option value="Degree">Degree</option> <option value="Degree">Degree</option>
@ -278,17 +308,17 @@
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Subjects</label> <label class="form-label">Core Subjects</label>
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science"> <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
</div> </div>
<div class="col-12 mb-3-custom"> <div class="col-12 mb-3-custom">
<label class="form-label">Grades / Results</label> <label class="form-label">Grades / Academic Results Summary</label>
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea> <textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
</div> </div>
<div class="col-12 mb-3-custom"> <div class="col-12 mb-3-custom">
<label class="form-label">Educational Certificates</label> <label class="form-label">Upload Educational Certificates (Multiple Allowed)</label>
<input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple> <input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
</div> </div>
</div> </div>
@ -301,24 +331,24 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <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_name" class="form-control" required> <input type="text" name="emergency_contact_name" class="form-control" placeholder="Full name of guardian/relative" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <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_relationship" class="form-control" required> <input type="text" name="emergency_contact_relationship" class="form-control" placeholder="e.g. Father, Mother, Spouse" required>
</div> </div>
</div> </div>
{{-- TERMS AND CONDITIONS --}} {{-- TERMS AND CONDITIONS --}}
<div class="form-check mb-3 mt-2"> <div class="form-check mb-4 mt-3">
<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" for="terms" style="font-size: 13px;"> <label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
I agree to the terms and conditions <span class="required">*</span> I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
</label> </label>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button type="submit" class="submit-btn">Submit Application</button> <button type="submit" class="submit-btn">Submit Application</button>
</div> </div>

View File

@ -28,8 +28,7 @@ body {
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)), linear-gradient(rgba(227, 227, 227, 0.19), rgba(117, 57, 57, 0.8)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;

View File

@ -33,8 +33,7 @@ body {
/* ===== Hero Section ===== */ /* ===== Hero Section ===== */
.hero { .hero {
background-image: linear-gradient(rgba(10, 103, 223, 0.9), rgba(117, 57, 57, 0.85)), background-image: linear-gradient(rgba(207, 220, 238, 0.9), rgba(35, 29, 29, 0.85)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -79,7 +78,7 @@ body {
} }
.search-box button { .search-box button {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); background: linear-gradient(135deg, #3B43B6 0%, var(--secondary-hover) 100%);
color: #fff; color: #fff;
border: none; border: none;
padding: 0 30px; padding: 0 30px;
@ -139,7 +138,7 @@ body {
font-size: 23px; font-size: 23px;
font-weight: 750; font-weight: 750;
line-height: 1.3; line-height: 1.3;
color: var(--primary); color:#1A4E7B;
margin-bottom: 8px; margin-bottom: 8px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
@ -215,7 +214,7 @@ body {
} }
.read-btn { .read-btn {
background: var(--primary-light); background: #822424;
color: #fff; color: #fff;
padding: 13px 28px; padding: 13px 28px;
font-weight: 600; font-weight: 600;
@ -248,7 +247,7 @@ body {
.features-section h2 { .features-section h2 {
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
color: var(--primary); color: #304599;
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -494,11 +493,14 @@ $courses=[
</section> </section>
{{-- Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5 why-study-section>
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init"> <div class="features-section text-center animate-on-scroll fade-up-init" style="background-image: linear-gradient(rgba(141, 189, 255, 0.37), rgba(84, 60, 60, 0.69)), url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80');
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="section-divider"></div> <!-- <div class="section-divider"></div> -->
<div class="row g-4"> <div class="row g-4">
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">

View File

@ -52,7 +52,8 @@
} }
.site-footer { .site-footer {
background: #182EA4; background:#253EB3;
/* background: #182EA4; */
color: #ffffff; color: #ffffff;
padding: 60px 0 30px; padding: 60px 0 30px;
} }

View File

@ -28,8 +28,9 @@ body {
} }
.hero { .hero {
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(117, 57, 57, 0.8)), background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg'); 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;
@ -55,8 +56,8 @@ body {
.portal-icon { .portal-icon {
width: 70px; width: 70px;
height: 70px; height: 70px;
background: #4361ba; background: #822a32;
color: #fff; color: #ffed8b;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -263,7 +263,8 @@ body {
} }
.read-btn { .read-btn {
background: #3E51B8; background:#822424;
/* background: #3E51B8; */
color: white; color: white;
/* border: 2px solid var(--primary); */ /* border: 2px solid var(--primary); */
padding: 10px 20px; padding: 10px 20px;
@ -277,8 +278,8 @@ body {
} }
.course-card:hover .read-btn { .course-card:hover .read-btn {
background: #0a67df; background: #822424;
border-color: #0a67df; border-color: #e3eb73;
color: #fff; color: #fff;
} }
@ -289,7 +290,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(rgba(117, 57, 57, 0.94), rgba(0, 9, 15, 0.88)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80'); background: linear-gradient(rgba(122, 123, 177, 0.9), rgba(0, 9, 15, 0.31)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
z-index: 1; z-index: 1;
@ -318,14 +319,15 @@ body {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.custom-feature-card:hover { .custom-feature-card:hover
{
transform: translateY(-5px); transform: translateY(-5px);
background: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2);
} }
.icon-box { .icon-box {
background: rgba(255, 255, 255, 0.1); background: #6a2525;
color: #FFE618; color: #FFE618;
width: 60px; width: 60px;
height: 60px; height: 60px;
@ -338,8 +340,8 @@ body {
} }
.custom-feature-card:hover .icon-box { .custom-feature-card:hover .icon-box {
background: white; background: #6a2525;
color: #FFE618; color: #faf9f5;
} }
/* ===== Animations ===== */ /* ===== Animations ===== */
@ -383,8 +385,8 @@ body {
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-on-scroll fade-up-init"> <div class="text-center mb-5 animate-on-scroll fade-up-init">
<span class="text-uppercase fw-bold small d-block mb-2" style="color: var(--secondary); letter-spacing: 0.1em;">Academic Programs</span> <span class="text-uppercase fw-bold small d-block mb-2" style="color: #822424; letter-spacing: 0.1em;">Academic Programs</span>
<h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal;">Our Top Courses</h2> <h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal; color:#001395;">Our Top Courses</h2>
<p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p> <p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
</div> </div>
@ -461,7 +463,7 @@ body {
</div> </div>
<div class="text-center animate-on-scroll fade-up-init"> <div class="text-center animate-on-scroll fade-up-init">
<a href="/courses" class="btn btn-theme"> <a href="/courses" class="btn btn-theme" style="background:#822424;">
View All Courses <i class="fa-solid fa-arrow-right ms-2"></i> View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
</a> </a>
</div> </div>