change themes
This commit is contained in:
parent
37cd68f170
commit
4289f1d576
|
|
@ -6,15 +6,29 @@
|
|||
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5E244E;
|
||||
--secondary:#8B3A74;
|
||||
--light:#f8f4f7;
|
||||
/* Premium Modern Automotive Palette */
|
||||
--primary: #3E51B8; /* Tech Blue */
|
||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
||||
--accent-dark: #753939; /* Muted Crimson */
|
||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
||||
|
||||
/* Semantic Adjustments */
|
||||
--text-main: #1E293B; /* Slate dark grey */
|
||||
--text-muted: #64748B; /* Neutral gray */
|
||||
--card-border: rgba(62, 81, 184, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hero-about{
|
||||
min-height:60vh;
|
||||
background:
|
||||
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
|
||||
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');
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
|
|
@ -34,21 +48,21 @@
|
|||
background:#fff;
|
||||
border-radius:20px;
|
||||
padding:35px 25px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.05);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.04);
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
border: 1px solid #efeff4;
|
||||
border: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.about-box:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width:75px;
|
||||
height:75px;
|
||||
background:var(--primary);
|
||||
background: var(--primary);
|
||||
color:#fff;
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
|
|
@ -60,8 +74,9 @@
|
|||
}
|
||||
|
||||
.about-box:hover .icon-circle {
|
||||
background: var(--secondary);
|
||||
transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
transform: rotateY(180deg);
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
|
|
@ -73,41 +88,36 @@
|
|||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
|
||||
.fade-up-init {
|
||||
transform: translateY(40px);
|
||||
}
|
||||
|
||||
/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
|
||||
.slide-left-init {
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
|
||||
.slide-right-init {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
|
||||
.zoom-in-init {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
/* Active Class (Scroll කරද්දී apply වේ) */
|
||||
.animate-item.animated {
|
||||
opacity: 1;
|
||||
transform: translate(0) scale(1);
|
||||
}
|
||||
|
||||
/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
|
||||
/* Automotive Theme Glow Pulse Button */
|
||||
@keyframes pulse-btn {
|
||||
0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
|
||||
70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
|
||||
0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
|
||||
70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
background: var(--primary);
|
||||
background: var(--primary-light);
|
||||
color: #fff !important;
|
||||
padding: 14px 35px;
|
||||
border-radius: 50px;
|
||||
|
|
@ -118,8 +128,21 @@
|
|||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
background: var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
|
||||
}
|
||||
|
||||
.btn-view-courses {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-view-courses:hover {
|
||||
background: var(--secondary);
|
||||
color: #fff;
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -140,14 +163,12 @@
|
|||
<section class="py-5 overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
<!-- වමේ සිට දකුණට පැමිණේ -->
|
||||
<div class="col-md-6 animate-item slide-left-init">
|
||||
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
|
||||
class="img-fluid rounded shadow-lg"
|
||||
alt="About Image">
|
||||
</div>
|
||||
|
||||
<!-- දකුණේ සිට වමට පැමිණේ -->
|
||||
<div class="col-md-6 animate-item slide-right-init">
|
||||
<h2 class="fw-bold mb-3">Who We Are</h2>
|
||||
<p class="text-muted fs-5">
|
||||
|
|
@ -159,7 +180,7 @@
|
|||
We focus on building skilled professionals who are ready for
|
||||
the global automotive industry.
|
||||
</p>
|
||||
<a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
|
||||
<a href="{{ route('courses') }}" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
|
||||
View Courses
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -177,7 +198,6 @@
|
|||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- කාඩ් එකින් එක Zoom-in වේ -->
|
||||
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
|
|
@ -245,7 +265,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
|
||||
threshold: 0.15
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
|
|
|
|||
|
|
@ -6,19 +6,29 @@
|
|||
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5E244E;
|
||||
--secondary:#8B3A74;
|
||||
--light:#f8f4f7;
|
||||
/* Premium Modern Automotive Palette */
|
||||
--primary: #3E51B8; /* Tech Blue */
|
||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
||||
--accent-dark: #753939; /* Muted Crimson */
|
||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
||||
|
||||
/* Semantic Adjustments */
|
||||
--text-main: #1E293B; /* Slate dark grey */
|
||||
--text-muted: #64748B; /* Neutral gray */
|
||||
--card-border: rgba(62, 81, 184, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hero-contact{
|
||||
min-height:50vh;
|
||||
background:
|
||||
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
|
||||
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');
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
|
|
@ -33,37 +43,39 @@ body {
|
|||
background:#fff;
|
||||
border-radius:20px;
|
||||
padding:35px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.05);
|
||||
border: 1px solid #efeff4;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.04);
|
||||
border: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.form-control{
|
||||
border-radius:10px;
|
||||
padding:12px;
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid #cbd5e1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn-contact{
|
||||
background:var(--primary);
|
||||
background: var(--primary);
|
||||
color:#fff;
|
||||
border-radius:10px;
|
||||
padding:12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
|
||||
}
|
||||
|
||||
.btn-contact:hover{
|
||||
background:var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color:#fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
|
||||
box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
.info-card{
|
||||
|
|
@ -72,19 +84,23 @@ body {
|
|||
padding:20px;
|
||||
text-align:center;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.04);
|
||||
border: 1px solid #efeff4;
|
||||
border: 1px solid var(--card-border);
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.info-card:hover{
|
||||
transform:translateY(-5px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 10px 25px rgba(62, 81, 184, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.info-card i {
|
||||
color: var(--primary) !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card:hover i {
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
|
|
@ -96,17 +112,14 @@ body {
|
|||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
|
||||
.fade-up-init {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
|
||||
.slide-left-init {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
|
||||
.fade-in-init {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
|
@ -123,7 +136,7 @@ body {
|
|||
<div class="container">
|
||||
<div class="animate-item animated fade-up-init">
|
||||
<h1 class="fw-bold display-4">Contact Us</h1>
|
||||
<p class="fs-5">We are here to help you. Reach us anytime.</p>
|
||||
<p class="fs-5 text-white-50">We are here to help you. Reach us anytime.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -138,9 +151,7 @@ body {
|
|||
<div class="col-md-6 animate-item slide-left-init">
|
||||
<div class="contact-box">
|
||||
|
||||
<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
|
||||
|
||||
|
||||
<h3 class="mb-4 fw-bold" style="color: var(--text-main);">Send Message</h3>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
|
|
@ -148,27 +159,26 @@ body {
|
|||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<form action="{{ route('contact.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Name</label>
|
||||
<label class="form-label fw-semibold text-secondary-emphasis">Name</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Email</label>
|
||||
<label class="form-label fw-semibold text-secondary-emphasis">Email</label>
|
||||
<input type="email" name="email" class="form-control" placeholder="Your Email" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Subject</label>
|
||||
<label class="form-label fw-semibold text-secondary-emphasis">Subject</label>
|
||||
<input type="text" name="subject" class="form-control" placeholder="Subject" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Message</label>
|
||||
<label class="form-label fw-semibold text-secondary-emphasis">Message</label>
|
||||
<textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
|
||||
</div>
|
||||
|
||||
|
|
@ -181,7 +191,7 @@ Send Message
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Info Cards -->
|
||||
<div class="col-md-6 animate-item fade-in-init">
|
||||
|
||||
<div class="info-card mb-3">
|
||||
|
|
@ -216,38 +226,18 @@ Send Message
|
|||
</section>
|
||||
|
||||
<!-- MAP -->
|
||||
<section class="pb-5">
|
||||
<div class="container">
|
||||
|
||||
<!-- <iframe
|
||||
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=place_id:ChIJXdB3Sy_84joRYNze2w86UjQ"
|
||||
width="100%"
|
||||
height="300"
|
||||
style="border:0;border-radius:15px;"
|
||||
allowfullscreen=""
|
||||
loading="lazy">
|
||||
</iframe> -->
|
||||
|
||||
<section class="pb-5">
|
||||
<div class="container animate-item fade-up-init">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
|
||||
width="100%"
|
||||
height="300"
|
||||
style="border:0;border-radius:15px;"
|
||||
allowfullscreen=""
|
||||
loading="lazy">
|
||||
</iframe>
|
||||
<!-- <section class="pb-5">
|
||||
<div class="container animate-item fade-up-init">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
|
||||
width="100%"
|
||||
height="350"
|
||||
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
|
||||
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.04); border: 1px solid var(--card-border);"
|
||||
allowfullscreen=""
|
||||
loading="lazy">
|
||||
</iframe>
|
||||
</div>
|
||||
</section> -->
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
|
@ -267,5 +257,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
|
||||
|
||||
|
||||
@endsection
|
||||
|
|
@ -1,60 +1,77 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('title','Our Courses')
|
||||
@section('title', 'Our Courses')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5E244E;
|
||||
--secondary:#8B3A74;
|
||||
--light:#f8f4f7;
|
||||
--card-border: #efeff4;
|
||||
--text-muted: #6a6f73;
|
||||
--success-green: #1f8a4c;
|
||||
:root {
|
||||
/* Premium Modern Automotive Palette (Updated based on your custom inputs) */
|
||||
--primary: #3E51B8; /* Tech Blue / Main Brand Color */
|
||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
||||
--accent-dark: #753939; /* Muted Crimson */
|
||||
--accent-light: rgba(227, 100, 20, 0.1); /* Soft Amber/Orange tint for badges */
|
||||
--accent-orange: #e36414; /* Warning/Industrial Orange */
|
||||
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
|
||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
||||
|
||||
/* Semantic Adjustments */
|
||||
--text-main: #1E293B; /* Slate dark grey */
|
||||
--text-muted: #64748B; /* Neutral gray */
|
||||
--card-border: rgba(62, 81, 184, 0.1);
|
||||
--shadow-color: rgba(15, 44, 89, 0.05);
|
||||
--success-green: #10B981; /* Modern emerald green */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text-main);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* ===== Hero Section ===== */
|
||||
.hero {
|
||||
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
|
||||
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-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
color: #ffffff;
|
||||
padding: 120px 0;
|
||||
padding: 130px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1{
|
||||
font-size:50px;
|
||||
font-weight:700;
|
||||
.hero h1 {
|
||||
font-size: 55px;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 2px 15px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.hero p{
|
||||
max-width:700px;
|
||||
margin:auto;
|
||||
font-size:18px;
|
||||
.hero p {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
font-size: 19px;
|
||||
color: #F1F5F9;
|
||||
}
|
||||
|
||||
/* --- Search Box Styling --- */
|
||||
/* --- Premium Search Box Styling --- */
|
||||
.search-box {
|
||||
max-width: 500px;
|
||||
margin: 30px auto 0 auto;
|
||||
max-width: 550px;
|
||||
margin: 35px auto 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 100px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 15px 25px;
|
||||
padding: 16px 28px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
|
|
@ -62,92 +79,111 @@ body {
|
|||
}
|
||||
|
||||
.search-box button {
|
||||
background: var(--primary);
|
||||
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 25px;
|
||||
padding: 0 30px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.search-box button:hover {
|
||||
background: var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
}
|
||||
|
||||
/* ===== HIGHLY SATISFYING HORIZONTAL COURSE CARDS ===== */
|
||||
.course-card {
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: none;
|
||||
scale: .99;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
}
|
||||
|
||||
.course-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.15);
|
||||
border-color: var(--primary-light);
|
||||
}
|
||||
|
||||
.course-image-wrapper {
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.course-card img {
|
||||
height: 200px;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
/* border-radius: 14px; */
|
||||
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.course-card:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.course-card .card-body {
|
||||
padding: 24px;
|
||||
padding: 32px 32px 32px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.course-card .card-body {
|
||||
padding: 0 24px 24px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
font-size: 23px;
|
||||
font-weight: 750;
|
||||
line-height: 1.3;
|
||||
color: #1c1d1f;
|
||||
color: var(--primary);
|
||||
margin-bottom: 8px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.course-card:hover .course-title {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.course-author {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-light);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.course-short-desc {
|
||||
font-size: 14px;
|
||||
color: #4f5357;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
font-size: 14.5px;
|
||||
color: #556575;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.course-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.badge-bestseller {
|
||||
background-color: #ece3f1;
|
||||
color: var(--primary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 10.5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 30px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2);
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
color: #b4690e;
|
||||
color: #f39c12;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
|
|
@ -157,20 +193,21 @@ body {
|
|||
|
||||
.rating-count {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.course-features {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 13px;
|
||||
gap: 20px;
|
||||
font-size: 13.5px;
|
||||
color: var(--success-green);
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.course-features span i {
|
||||
margin-right: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.course-footer {
|
||||
|
|
@ -178,116 +215,134 @@ body {
|
|||
}
|
||||
|
||||
.read-btn {
|
||||
background: var(--primary);
|
||||
background: var(--primary-light);
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
padding: 13px 28px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
transition: 0.2s;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
border: 2px solid transparent;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
|
||||
}
|
||||
|
||||
.read-btn:hover {
|
||||
background: var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
/* --- Modernized Why Study With Us Section --- */
|
||||
.features-section {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 24px;
|
||||
padding: 60px 40px;
|
||||
margin-bottom: 60px;
|
||||
background-color: var(--bg-light);
|
||||
border-radius: 32px;
|
||||
padding: 80px 40px;
|
||||
margin-bottom: 40px;
|
||||
background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.features-section h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #1c1d1f;
|
||||
margin-bottom: 40px;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: var(--primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 4px;
|
||||
width: 65px;
|
||||
background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-yellow) 100%);
|
||||
margin: 0 auto 45px auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
background: #fff;
|
||||
padding: 30px 24px;
|
||||
border-radius: 16px;
|
||||
padding: 40px 28px;
|
||||
border-radius: 24px;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #efeff4;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
border: 1px solid var(--card-border);
|
||||
text-align: left;
|
||||
box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
|
||||
}
|
||||
|
||||
.feature-icon-wrapper {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #ece3f1;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
background-color: rgba(62, 81, 184, 0.08);
|
||||
color: var(--primary);
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
transition: transform 0.5s ease;
|
||||
font-size: 24px;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
|
||||
.feature-box:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
|
||||
border-color: rgba(188, 26, 26, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.feature-box:hover .feature-icon-wrapper i {
|
||||
transform: rotate(360deg);
|
||||
.feature-box:hover .feature-icon-wrapper {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
|
||||
color: #fff;
|
||||
transform: rotateY(180deg);
|
||||
box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
|
||||
}
|
||||
|
||||
.feature-icon-wrapper i {
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.feature-box:hover .feature-icon-wrapper i {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.feature-box h5 {
|
||||
font-size: 18px;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: #1c1d1f;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-box p {
|
||||
font-size: 14px;
|
||||
font-size: 14.5px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#noResults {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Custom Pure CSS Animations (Scroll Animations)
|
||||
======================================================== */
|
||||
/* .animate-on-scroll {
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transition: all 0.8s ease-out;
|
||||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.fade-up-init {
|
||||
transform: translateY(30px);
|
||||
transform: translateY(40px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.animated {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
} */
|
||||
}
|
||||
</style>
|
||||
|
||||
{{-- Hero --}}
|
||||
|
|
@ -406,7 +461,7 @@ $courses=[
|
|||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h4 class="course-title">{{ $course['title'] }}</h4>
|
||||
<div class="course-author">{{ $course['author'] }}</div>
|
||||
<div class="course-author"><i class="fa-solid fa-user-gear me-1"></i> {{ $course['author'] }}</div>
|
||||
|
||||
<p class="course-short-desc">{{ $course['desc'] }}</p>
|
||||
|
||||
|
|
@ -443,6 +498,7 @@ $courses=[
|
|||
<div class="container">
|
||||
<div class="features-section text-center animate-on-scroll fade-up-init">
|
||||
<h2>Why Study With Us?</h2>
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.navbar {
|
||||
background: #1D2861;
|
||||
background: #3E51B8;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
color: #FFEA85;
|
||||
color: #f4f4f8;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.site-footer {
|
||||
background: #1D2861;
|
||||
background: #182EA4;
|
||||
color: #ffffff;
|
||||
padding: 60px 0 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,74 +5,88 @@
|
|||
@section('content')
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5E244E;
|
||||
--secondary:#8B3A74;
|
||||
--light:#f8f4f7;
|
||||
:root {
|
||||
/* Premium Modern Automotive Palette matched from previous page */
|
||||
--primary: #3E51B8; /* Tech Blue */
|
||||
--primary-light: #0a67df; /* Vibrant Electric Blue */
|
||||
--secondary: #BC1A1A; /* Deep Racing Red */
|
||||
--secondary-hover: #822424; /* Dark Burnt Red */
|
||||
--accent-dark: #753939; /* Muted Crimson */
|
||||
--accent-orange: #e36414; /* Warning/Industrial Orange */
|
||||
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
|
||||
--bg-light: #F8FAFC; /* Soft slate light gray */
|
||||
|
||||
/* Semantic Adjustments */
|
||||
--text-main: #1E293B; /* Slate dark grey */
|
||||
--text-muted: #64748B; /* Neutral gray */
|
||||
--card-border: rgba(62, 81, 184, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hero{
|
||||
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
|
||||
.hero {
|
||||
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(117, 57, 57, 0.8)),
|
||||
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
color:#fff;
|
||||
padding:80px 0;
|
||||
text-align:center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.portal-card{
|
||||
border:none;
|
||||
border-radius:15px;
|
||||
transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
||||
border: 1px solid #efeff4;
|
||||
.portal-card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.04);
|
||||
border: 1px solid var(--card-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.portal-card:hover{
|
||||
transform:translateY(-8px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
|
||||
.portal-card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: #5f3131;
|
||||
box-shadow: 0 15px 30px rgba(62, 81, 184, 0.12);
|
||||
}
|
||||
|
||||
.portal-icon{
|
||||
width:70px;
|
||||
height:70px;
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:28px;
|
||||
margin:auto;
|
||||
.portal-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: #4361ba;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
margin: auto;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.portal-card:hover .portal-icon {
|
||||
background: var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
.btn-portal{
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:12px 35px;
|
||||
.btn-portal {
|
||||
background: var(--primary-light);
|
||||
color: #fff;
|
||||
padding: 12px 35px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-portal:hover{
|
||||
background:#8B3A74;
|
||||
color:#fff;
|
||||
.btn-portal:hover {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color: #fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
|
|
@ -81,8 +95,6 @@ body {
|
|||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.modal.fade .modal-dialog {
|
||||
transform: scale(0.85);
|
||||
transition: transform 0.3s ease-out;
|
||||
|
|
@ -131,14 +143,14 @@ body {
|
|||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.input-group:focus-within .input-group-text {
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
border-color: var(--primary-light);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
|
|
@ -170,17 +182,17 @@ body {
|
|||
border: none;
|
||||
font-weight: 600;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
|
||||
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-modal-login:hover {
|
||||
background: var(--secondary);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color: #fff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
|
||||
box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
|
|
@ -236,7 +248,6 @@ body {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-4 animate-item fade-in-init">
|
||||
<div class="col-md-4">
|
||||
<div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
|
||||
|
|
@ -304,11 +315,11 @@ body {
|
|||
<!-- QUICK LINKS -->
|
||||
<section class="py-5 bg-light overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()">
|
||||
<div class="text-center mb-5 animate-item fade-up-init">
|
||||
<h2 class="fw-bold">Quick Links</h2>
|
||||
</div>
|
||||
|
||||
<div class="row text-center animate-item slide-right-init" onclick="studentlogin()">
|
||||
<div class="row text-center animate-item slide-right-init">
|
||||
<div class="col-md-3 mb-3">
|
||||
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
|
||||
</div>
|
||||
|
|
@ -409,6 +420,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
|
|
@ -14,23 +14,23 @@
|
|||
<style>
|
||||
:root {
|
||||
/* Modern, Sleek Automotive Palette */
|
||||
--primary: #0F2C59; /* Deep Navy (Professional, Academic, Trustworthy) */
|
||||
--secondary: #E36414; /* Electric Industrial Orange (Perfect automotive accent, highly visible) */
|
||||
--secondary-hover: #C5530E; /* Deeper burnt orange for polished hover effects */
|
||||
--accent-light: #E6FFFA; /* Ice Blue/Teal Mint tint for readable overlay text */
|
||||
--accent-blue: #3085C3; /* Premium Tech Blue for badges and active states */
|
||||
--bg-light: #F4F6F9; /* Soft slate light gray to prevent pure-white eyesore */
|
||||
--primary: #0F2C59; /* Deep Navy */
|
||||
--secondary: #E36414; /* Electric Industrial Orange */
|
||||
--secondary-hover: #C5530E; /* Deeper burnt orange */
|
||||
--accent-light: #E6FFFA;
|
||||
--accent-blue: #3085C3; /* Premium Tech Blue */
|
||||
--bg-light: #F4F6F9; /* Soft slate light gray */
|
||||
|
||||
/* Semantic Adjustments */
|
||||
--text-main: #1E293B; /* Slate dark grey (much easier to read than bright blue) */
|
||||
--text-muted: #64748B; /* Neutral gray for subtitles */
|
||||
--text-main: #1E293B;
|
||||
--text-muted: #64748B;
|
||||
--card-border: rgba(15, 44, 89, 0.08);
|
||||
--shadow-color: rgba(15, 44, 89, 0.06);
|
||||
}
|
||||
|
||||
/* ===== Global Improvements ===== */
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif; /* Cleaner modern font stack */
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
color: var(--text-main);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -47,13 +47,13 @@ body {
|
|||
|
||||
/* ===== Premium Theme Buttons ===== */
|
||||
.btn-theme {
|
||||
background: #3B4E73;
|
||||
background: #305CB1;
|
||||
color: #fff;
|
||||
border: 2px solid #FFF;
|
||||
padding: 14px 35px;
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.btn-theme:hover {
|
||||
|
|
@ -101,7 +101,6 @@ body {
|
|||
/* ===== Hero Section ===== */
|
||||
.hero {
|
||||
height: 650px;
|
||||
/* Deep blue to slate blue gradient for rich tech aesthetic */
|
||||
background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
|
@ -130,51 +129,52 @@ body {
|
|||
color: #E2E8F0;
|
||||
}
|
||||
|
||||
/* ===== Academic Courses Section ===== */
|
||||
/* ===== NEW & IMPROVED COURSES CARD DESIGN ===== */
|
||||
.courses-section {
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.course-card {
|
||||
border: 1px solid var(--card-border);
|
||||
/* border-radius: 16px; */
|
||||
/* border-radius: 12px !important; */
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
box-shadow: 0 8px 30px var(--shadow-color);
|
||||
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
}
|
||||
|
||||
.course-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 16px 40px rgba(15, 44, 89, 0.12);
|
||||
border-color: rgba(48, 133, 195, 0.3);
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 15px 35px rgba(15, 44, 89, 0.12);
|
||||
border-color: rgba(48, 133, 195, 0.25);
|
||||
}
|
||||
|
||||
.course-image-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.course-card img {
|
||||
height: 220px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.course-card:hover img {
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.badge-floating {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
background: #BC1A1A;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
padding: 6px 14px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 30px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -184,20 +184,29 @@ body {
|
|||
|
||||
.course-card .card-body {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.course-card:hover .course-title {
|
||||
color: #914040;
|
||||
}
|
||||
|
||||
.course-author {
|
||||
font-size: 14px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
color: var(--accent-blue);
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
|
@ -207,14 +216,14 @@ body {
|
|||
font-size: 14px;
|
||||
color: #556575;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.course-features-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.feature-pill {
|
||||
|
|
@ -222,20 +231,24 @@ body {
|
|||
color: var(--accent-blue);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.course-footer {
|
||||
margin-top: auto; /* Pushes the footer area to the exact bottom of the card */
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(15, 44, 89, 0.08);
|
||||
}
|
||||
|
||||
.course-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(15, 44, 89, 0.08);
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
|
|
@ -250,12 +263,12 @@ body {
|
|||
}
|
||||
|
||||
.read-btn {
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
border: 2px solid var(--primary);
|
||||
padding: 12px 24px;
|
||||
background: #3E51B8;
|
||||
color: white;
|
||||
/* border: 2px solid var(--primary); */
|
||||
padding: 10px 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
|
|
@ -264,8 +277,8 @@ body {
|
|||
}
|
||||
|
||||
.course-card:hover .read-btn {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
background: #0a67df;
|
||||
border-color: #0a67df;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -276,18 +289,11 @@ body {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(rgba(81, 78, 117, 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(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-position: center;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
/* .why-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(rgba(207, 226, 255, 0.88), rgba(0, 9, 15, 0.75)), url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80')
|
||||
|
||||
z-index: 1;
|
||||
} */
|
||||
|
||||
.why-content-wrapper {
|
||||
position: relative;
|
||||
|
|
@ -358,7 +364,7 @@ body {
|
|||
<p class="mb-4">Driving Innovation Through Education, Research & Technology</p>
|
||||
|
||||
<div class="d-flex flex-wrap justify-content-center gap-3" >
|
||||
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;">
|
||||
<a href="{{ Route::has('apply') ? route('apply') : '#' }}" class="btn btn-theme" style="background: #822424;border: 2px solid #FFF;">
|
||||
<i class="fa-solid fa-user-plus me-2" ></i>Apply Now
|
||||
</a>
|
||||
<a href="/courses" class="btn btn-outline-theme">
|
||||
|
|
@ -372,13 +378,13 @@ body {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{{-- ===================== COURSES SECTION ===================== --}}
|
||||
{{-- ===================== IMPROVED COURSES SECTION ===================== --}}
|
||||
<section class="section courses-section" aria-labelledby="courses-heading">
|
||||
<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">Our Top Courses</h2>
|
||||
<h2 id="courses-heading" class="display-5 mb-2" style="font-weight: normal;">Our Top Courses</h2>
|
||||
<p class="text-muted fs-5">Explore our professional, industry-recognized automotive engineering curriculums.</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -416,14 +422,15 @@ body {
|
|||
|
||||
<div class="row g-4 mb-5">
|
||||
@foreach($courses as $key => $course)
|
||||
<div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
|
||||
<div class="card course-card h-100">
|
||||
<div class="col-lg-4 col-md-6 d-flex align-items-stretch animate-on-scroll fade-up-init" style="transition-delay: {{ $key * 100 }}ms;">
|
||||
<div class="card course-card w-100 d-flex flex-column">
|
||||
|
||||
<div class="course-image-wrapper">
|
||||
<span class="badge-floating">{{ $course['badge'] }}</span>
|
||||
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
|
||||
<div class="card-body">
|
||||
<h4 class="course-title">{{ $course['title'] }}</h4>
|
||||
<div class="course-author">
|
||||
<i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
|
||||
|
|
@ -434,9 +441,9 @@ body {
|
|||
<span class="feature-pill"><i class="fas fa-tools"></i> Practical Labs</span>
|
||||
<span class="feature-pill"><i class="fas fa-certificate"></i> Accredited</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements -->
|
||||
<div class="course-footer">
|
||||
<div class="course-meta-row">
|
||||
<span class="rating-star">
|
||||
<i class="fas fa-star me-1"></i>{{ $course['rating'] }}
|
||||
|
|
@ -447,6 +454,7 @@ body {
|
|||
<a href="/courses" class="read-btn">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
|
@ -461,48 +469,8 @@ body {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{{-- ===================== WHY CHOOSE US ===================== --}}
|
||||
<!-- <section class="section why-section text-white" aria-labelledby="why-us-heading">
|
||||
<div class="why-overlay"></div>
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100">
|
||||
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1600&q=80"
|
||||
alt="Background Lab" class="w-100 h-100" style="object-fit: cover; opacity: 0.15;">
|
||||
</div>
|
||||
|
||||
<div class="container why-content-wrapper">
|
||||
<div class="text-center mb-5 animate-on-scroll fade-up-init">
|
||||
<h2 id="why-us-heading" class="display-5 text-white mb-0">Why Choose Us?</h2>
|
||||
<div class="section-divider"></div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100">
|
||||
<div class="icon-box"><i class="fa-solid fa-flask-vial fs-4"></i></div>
|
||||
<h4 class="text-white fs-5 mb-2">Modern Laboratories</h4>
|
||||
<p class="text-white-50 small mb-0">State-of-the-art facilities equipped with latest industrial testing tools.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100">
|
||||
<div class="icon-box"><i class="fa-solid fa-graduation-cap fs-4"></i></div>
|
||||
<h4 class="text-white fs-5 mb-2">Qualified Lecturers</h4>
|
||||
<p class="text-white-50 small mb-0">Learn directly from veteran automotive engineers and researchers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100">
|
||||
<div class="icon-box"><i class="fa-solid fa-car fs-4"></i></div>
|
||||
<h4 class="text-white fs-5 mb-2">Hands-on Training</h4>
|
||||
<p class="text-white-50 small mb-0">Gain real-world diagnostics experience inside our dedicated workshop floors.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<section class="section why-section text-white position-relative overflow-hidden" aria-labelledby="why-us-heading" style="background-attachment: fixed;">
|
||||
<div class="why-overlay"></div>
|
||||
<div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 0;">
|
||||
|
|
@ -513,11 +481,9 @@ body {
|
|||
<div class="container why-content-wrapper position-relative" style="z-index: 2;">
|
||||
<div class="text-center mb-5 animate-on-scroll fade-up-init">
|
||||
<h2 id="why-us-heading" class="display-5 text-white mb-0 fw-bold" style="letter-spacing: -0.02em;">Why Choose Us?</h2>
|
||||
<!-- <div class="section-divider" style="transform: scaleX(1.2);"></div> -->
|
||||
</div>
|
||||
|
||||
<div class="row g-4 justify-content-center animate-on-scroll fade-up-init">
|
||||
{{-- Modern Laboratories --}}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
|
||||
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
|
||||
|
|
@ -528,7 +494,6 @@ body {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Qualified Lecturers --}}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
|
||||
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
|
||||
|
|
@ -539,7 +504,6 @@ body {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Hands-on Training --}}
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="custom-feature-card h-100 d-flex flex-column align-items-center text-center p-4" style="border-radius: 20px; transition: all 0.4s ease;">
|
||||
<div class="icon-box d-flex align-items-center justify-content-center" style="box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 16px;">
|
||||
|
|
|
|||
Loading…
Reference in New Issue