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{
min-height:60vh;
background:
linear-gradient(rgba(62, 81, 184, 0.85), rgba(117, 57, 57, 0.8)),
url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
linear-gradient(rgba(163, 177, 251, 0.26), rgb(50, 31, 31)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
background-size:cover;
background-position:center;
display:flex;

View File

@ -1,24 +1,30 @@
@extends('layouts.app')
@section('title','Apply Now')
@section('title', 'Apply Now')
@section('content')
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: #f5f5f5;
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
background: #F8FAFC;
color: #1E293B;
}
:root {
--primary: #5E244E;
--secondary: #8B3A74;
--light: #F8F4F7;
/* Premium Modern Automotive Palette */
--primary: #3E51B8; /* Tech Blue */
--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 {
height: 220px;
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
height: 240px;
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');
background-size: cover;
background-position: center;
@ -26,115 +32,139 @@
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 32px;
font-weight: bold;
font-size: 36px;
font-weight: 800;
margin: 0;
letter-spacing: -0.5px;
}
.apply-area {
margin-top: -40px;
margin-bottom: 40px;
margin-top: -50px;
margin-bottom: 50px;
}
.form-container-sm {
max-width: 820px;
max-width: 850px;
margin: 0 auto;
}
.form-card {
background: white;
border-radius: 10px;
border-radius: 16px;
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 {
background: var(--primary);
background: linear-gradient(135deg, #0028FFBA 0%, #343030fa 100%);
color: white;
padding: 15px 25px;
padding: 25px 30px;
border-bottom: 3px solid var(--accent-yellow);
}
.form-header h2 {
margin: 0;
font-size: 20px;
font-weight: bold;
font-size: 22px;
font-weight: 700;
}
.section-title {
background: #735D6D;
background: var(--secondary);
color: white;
padding: 8px 12px;
margin-top: 22px;
margin-bottom: 15px;
padding: 10px 16px;
margin-top: 30px;
margin-bottom: 20px;
font-size: 14px;
border-radius: 5px;
border-radius: 6px;
font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
}
.form-label {
font-weight: 600;
font-size: 13px;
margin-bottom: 4px;
margin-bottom: 6px;
color: #000;
}
.form-control,
.form-select {
border-radius: 5px;
padding: 6px 10px;
font-size: 13px;
border: 1px solid #cbd5e1;
border-radius: 8px;
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 {
color: red;
color: var(--secondary-hover);
font-weight: bold;
}
.submit-btn {
background: var(--primary);
color: white;
border: none;
padding: 8px 20px;
font-size: 15px;
font-weight: bold;
border-radius: 30px;
padding: 14px 30px;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
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 {
background: var(--secondary);
transform: translateY(-1px);
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: var(--accent-yellow);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
}
.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>
<div class="hero">
<div class="text-center">
<div class="text-center px-3">
<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 class="container apply-area">
<div class="form-container-sm">
<div class="form-card">
<div class="form-header">
<h2>
<i class="fa-solid fa-file-circle-check me-2"></i>
Course Enrolment Form
New Student Registration
</h2>
</div>
<div class="p-4">
<div class="p-4 p-md-5">
<form action="#" method="POST" enctype="multipart/form-data">
@csrf
@ -146,32 +176,32 @@
<div class="row">
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<label class="form-label">NIC / Passport</label>
<input type="text" name="nic" class="form-control">
<label class="form-label">NIC / Passport Number</label>
<input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
</div>
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<label class="form-label">Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" required>
<label class="form-label">Residential Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" placeholder="Street address" required>
</div>
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
@ -198,17 +228,17 @@
<div class="row">
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
@ -216,7 +246,7 @@
<select name="preferred_contact_method" class="form-select">
<option selected disabled>Select Your Option</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="phone">Phone Call</option>
<option value="sms">SMS</option>
</select>
</div>
@ -224,12 +254,12 @@
{{-- EDUCATION --}}
<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 class="row">
<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">
<option selected disabled>Select Your Option</option>
<option value="Yes">Yes</option>
@ -255,7 +285,7 @@
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
@ -266,10 +296,10 @@
<div class="col-md-6 mb-3-custom">
<label class="form-label">Examination Passed</label>
<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. 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="Diploma">Diploma</option>
<option value="Degree">Degree</option>
@ -278,17 +308,17 @@
</div>
<div class="col-md-6 mb-3-custom">
<label class="form-label">Subjects</label>
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science">
<label class="form-label">Core Subjects</label>
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
</div>
<div class="col-12 mb-3-custom">
<label class="form-label">Grades / Results</label>
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea>
<label class="form-label">Grades / Academic Results Summary</label>
<textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
</div>
<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>
</div>
</div>
@ -301,24 +331,24 @@
<div class="row">
<div class="col-md-6 mb-3-custom">
<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 class="col-md-6 mb-3-custom">
<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>
{{-- 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>
<label class="form-check-label" for="terms" style="font-size: 13px;">
I agree to the terms and conditions <span class="required">*</span>
<label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
</label>
</div>
<div class="mt-3">
<div class="mt-4">
<button type="submit" class="submit-btn">Submit Application</button>
</div>

View File

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

View File

@ -33,8 +33,7 @@ body {
/* ===== Hero Section ===== */
.hero {
background-image: linear-gradient(rgba(10, 103, 223, 0.9), rgba(117, 57, 57, 0.85)),
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
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');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@ -79,7 +78,7 @@ body {
}
.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;
border: none;
padding: 0 30px;
@ -139,7 +138,7 @@ body {
font-size: 23px;
font-weight: 750;
line-height: 1.3;
color: var(--primary);
color:#1A4E7B;
margin-bottom: 8px;
transition: color 0.3s ease;
}
@ -215,7 +214,7 @@ body {
}
.read-btn {
background: var(--primary-light);
background: #822424;
color: #fff;
padding: 13px 28px;
font-weight: 600;
@ -248,7 +247,7 @@ body {
.features-section h2 {
font-size: 36px;
font-weight: 800;
color: var(--primary);
color: #304599;
margin-bottom: 12px;
}
@ -494,11 +493,14 @@ $courses=[
</section>
{{-- Why Study With Us Section --}}
<section class="pb-5">
<section class="pb-5 why-study-section>
<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>
<div class="section-divider"></div>
<!-- <div class="section-divider"></div> -->
<div class="row g-4">
<div class="col-xl-3 col-md-6">

View File

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

View File

@ -28,8 +28,9 @@ body {
}
.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');
background-size: cover;
background-position: center;
color: #fff;
@ -55,8 +56,8 @@ body {
.portal-icon {
width: 70px;
height: 70px;
background: #4361ba;
color: #fff;
background: #822a32;
color: #ffed8b;
border-radius: 50%;
display: flex;
align-items: center;

View File

@ -263,7 +263,8 @@ body {
}
.read-btn {
background: #3E51B8;
background:#822424;
/* background: #3E51B8; */
color: white;
/* border: 2px solid var(--primary); */
padding: 10px 20px;
@ -277,8 +278,8 @@ body {
}
.course-card:hover .read-btn {
background: #0a67df;
border-color: #0a67df;
background: #822424;
border-color: #e3eb73;
color: #fff;
}
@ -289,7 +290,7 @@ body {
left: 0;
width: 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-size: cover;
z-index: 1;
@ -318,15 +319,16 @@ body {
transition: all 0.3s ease;
}
.custom-feature-card:hover {
.custom-feature-card:hover
{
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.2);
}
.icon-box {
background: rgba(255, 255, 255, 0.1);
color: #FFE618;
background: #6a2525;
color: #FFE618;
width: 60px;
height: 60px;
border-radius: 12px;
@ -338,8 +340,8 @@ body {
}
.custom-feature-card:hover .icon-box {
background: white;
color: #FFE618;
background: #6a2525;
color: #faf9f5;
}
/* ===== Animations ===== */
@ -383,8 +385,8 @@ body {
<div class="container">
<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>
<h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal;">Our Top Courses</h2>
<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; color:#001395;">Our Top Courses</h2>
<p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
</div>
@ -461,7 +463,7 @@ body {
</div>
<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>
</a>
</div>