7/9 push home
This commit is contained in:
parent
3350b90866
commit
33ce7a4ca4
|
|
@ -30,75 +30,140 @@
|
|||
margin-bottom:40px;
|
||||
}
|
||||
|
||||
.about-box{
|
||||
.about-box {
|
||||
background:#fff;
|
||||
border-radius:15px;
|
||||
padding:25px;
|
||||
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
||||
transition:.3s;
|
||||
border-radius:20px;
|
||||
padding:35px 25px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.05);
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
border: 1px solid #efeff4;
|
||||
}
|
||||
|
||||
.about-box:hover{
|
||||
transform:translateY(-6px);
|
||||
.about-box:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.icon-circle{
|
||||
width:70px;
|
||||
height:70px;
|
||||
.icon-circle {
|
||||
width:75px;
|
||||
height:75px;
|
||||
background:var(--primary);
|
||||
color:#fff;
|
||||
border-radius:50%;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-size:26px;
|
||||
font-size:28px;
|
||||
margin:auto;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.about-box:hover .icon-circle {
|
||||
background: var(--secondary);
|
||||
transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Advanced CSS Scroll Animations
|
||||
======================================================== */
|
||||
.animate-item {
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
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 බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
|
||||
@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); }
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
background: var(--primary);
|
||||
color: #fff !important;
|
||||
padding: 14px 35px;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
animation: pulse-btn 2s infinite;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
background: var(--secondary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero-about">
|
||||
<div class="container">
|
||||
<h1 class="fw-bold">About Our Institute</h1>
|
||||
<p class="mt-3">
|
||||
We are committed to delivering high-quality automotive education
|
||||
with practical training and industry-focused learning.
|
||||
</p>
|
||||
<div class="animate-item animated fade-up-init">
|
||||
<h1 class="fw-bold display-4">About Our Institute</h1>
|
||||
<p class="mt-3 lead" style="max-width: 700px; margin: auto;">
|
||||
We are committed to delivering high-quality automotive education
|
||||
with practical training and industry-focused learning.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT CONTENT -->
|
||||
<section class="py-5">
|
||||
<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="row align-items-center">
|
||||
|
||||
<div class="col-md-6">
|
||||
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
|
||||
class="img-fluid rounded shadow"
|
||||
alt="About Image">
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h2>Who We Are</h2>
|
||||
<p class="text-muted">
|
||||
Our institute specializes in automotive engineering education,
|
||||
offering hands-on training in modern vehicle technologies,
|
||||
mechanical systems, and electric vehicles.
|
||||
</p>
|
||||
|
||||
<p class="text-muted">
|
||||
We focus on building skilled professionals who are ready for
|
||||
the global automotive industry.
|
||||
</p>
|
||||
|
||||
<a href="{{ route('courses') }}" class="btn btn-dark mt-3">
|
||||
View Courses
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</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">
|
||||
Our institute specializes in automotive engineering education,
|
||||
offering hands-on training in modern vehicle technologies,
|
||||
mechanical systems, and electric vehicles.
|
||||
</p>
|
||||
<p class="text-muted mb-4">
|
||||
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">
|
||||
View Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -106,71 +171,85 @@
|
|||
<section class="py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>Why Choose Us</h2>
|
||||
<div class="section-title animate-item fade-up-init">
|
||||
<h2 class="fw-bold">Why Choose Us</h2>
|
||||
<p class="text-muted">We provide the best learning experience</p>
|
||||
</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">
|
||||
<i class="fa-solid fa-chalkboard-user"></i>
|
||||
</div>
|
||||
<h4 class="mt-4 fw-bold">Expert Lecturers</h4>
|
||||
<p class="text-muted mb-0">
|
||||
Experienced industry professionals guiding your learning journey.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
<i class="fa-solid fa-chalkboard-user"></i>
|
||||
</div>
|
||||
<h4 class="mt-3">Expert Lecturers</h4>
|
||||
<p class="text-muted">
|
||||
Experienced industry professionals guiding your learning journey.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
</div>
|
||||
<h4 class="mt-3">Practical Training</h4>
|
||||
<p class="text-muted">
|
||||
Hands-on workshop experience with real vehicles and tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
<i class="fa-solid fa-certificate"></i>
|
||||
</div>
|
||||
<h4 class="mt-3">Certified Courses</h4>
|
||||
<p class="text-muted">
|
||||
Industry-recognized certifications to boost your career.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
</div>
|
||||
<h4 class="mt-4 fw-bold">Practical Training</h4>
|
||||
<p class="text-muted mb-0">
|
||||
Hands-on workshop experience with real vehicles and tools.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
|
||||
<div class="about-box text-center">
|
||||
<div class="icon-circle">
|
||||
<i class="fa-solid fa-certificate"></i>
|
||||
</div>
|
||||
<h4 class="mt-4 fw-bold">Certified Courses</h4>
|
||||
<p class="text-muted mb-0">
|
||||
Industry-recognized certifications to boost your career.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-5 text-center">
|
||||
<div class="container">
|
||||
|
||||
<h2>Start Your Automotive Career Today</h2>
|
||||
<p class="text-muted">
|
||||
Join our institute and become a skilled automotive professional.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<div style="display: flex; justify-content:center; width: 100%; ">
|
||||
<a href="/apply" 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">
|
||||
Apply Courses
|
||||
</a>
|
||||
|
||||
<section class="py-5 text-center bg-white overflow-hidden">
|
||||
<div class="container py-4 animate-item fade-up-init">
|
||||
<h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
|
||||
<p class="text-muted fs-5 mb-5">
|
||||
Join our institute and become a skilled automotive professional.
|
||||
</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/apply" class="cta-btn shadow">
|
||||
Apply Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const animatedElements = document.querySelectorAll('.animate-item');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
--light:#f8f4f7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hero-contact{
|
||||
min-height:50vh;
|
||||
background:
|
||||
|
|
@ -27,26 +31,39 @@
|
|||
|
||||
.contact-box{
|
||||
background:#fff;
|
||||
border-radius:15px;
|
||||
padding:25px;
|
||||
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
||||
border-radius:20px;
|
||||
padding:35px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,.05);
|
||||
border: 1px solid #efeff4;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
border-radius:10px;
|
||||
padding:12px;
|
||||
border: 1px solid #ced4da;
|
||||
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);
|
||||
}
|
||||
|
||||
.btn-contact{
|
||||
background:var(--primary);
|
||||
color:#fff;
|
||||
/* border-radius:30px; */
|
||||
padding:10px 30px;
|
||||
border-radius:10px;
|
||||
padding:12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-contact:hover{
|
||||
background:var(--secondary);
|
||||
color:#fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
|
||||
}
|
||||
|
||||
.info-card{
|
||||
|
|
@ -54,56 +71,96 @@
|
|||
border-radius:15px;
|
||||
padding:20px;
|
||||
text-align:center;
|
||||
box-shadow:0 5px 15px rgba(0,0,0,.08);
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,.04);
|
||||
border: 1px solid #efeff4;
|
||||
transition:.3s;
|
||||
}
|
||||
|
||||
.info-card:hover{
|
||||
transform:translateY(-5px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
|
||||
}
|
||||
|
||||
/* Icons වල පාට වෙනස් කිරීම */
|
||||
.info-card i {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Custom CSS Scroll Animations
|
||||
======================================================== */
|
||||
.animate-item {
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
/* 1. පල්ලෙහා ඉඳන් උඩට (Hero & Map) */
|
||||
.fade-up-init {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
/* 2. වමේ ඉඳන් දකුණට (Form එක සඳහා) */
|
||||
.slide-left-init {
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
|
||||
/* 3. එකපාර (Fade In) මතු වෙන්න (Info Cards සඳහා) */
|
||||
.fade-in-init {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Active Class */
|
||||
.animate-item.animated {
|
||||
opacity: 1;
|
||||
transform: translate(0) scale(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero-contact">
|
||||
<div class="container">
|
||||
<h1 class="fw-bold">Contact Us</h1>
|
||||
<p>We are here to help you. Reach us anytime.</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTIONs-->
|
||||
<section class="py-5">
|
||||
<!-- CONTACT SECTION -->
|
||||
<section class="py-5 overflow-hidden">
|
||||
<div class="container">
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="col-md-6">
|
||||
<!-- Contact Form (Slide Left) -->
|
||||
<div class="col-md-6 animate-item slide-left-init">
|
||||
<div class="contact-box">
|
||||
|
||||
<h3 class="mb-4">Send Message</h3>
|
||||
<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
|
||||
|
||||
<form action="#" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="Your Name">
|
||||
<label class="form-label fw-semibold">Name</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" class="form-control" placeholder="Your Email">
|
||||
<label class="form-label fw-semibold">Email</label>
|
||||
<input type="email" name="email" class="form-control" placeholder="Your Email" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Subject</label>
|
||||
<input type="text" name="subject" class="form-control" placeholder="Subject">
|
||||
<label class="form-label fw-semibold">Subject</label>
|
||||
<input type="text" name="subject" class="form-control" placeholder="Subject" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Message</label>
|
||||
<textarea name="message" rows="5" class="form-control" placeholder="Your Message"></textarea>
|
||||
<label class="form-label fw-semibold">Message</label>
|
||||
<textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-contact w-100">
|
||||
|
|
@ -115,31 +172,31 @@ Send Message
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="col-md-6">
|
||||
<!-- Contact Info (සියල්ල එකපාර Fade In වේ) -->
|
||||
<div class="col-md-6 animate-item fade-in-init">
|
||||
|
||||
<div class="info-card mb-3">
|
||||
<i class="fa-solid fa-location-dot fa-2x text-primary"></i>
|
||||
<h5 class="mt-2">Address</h5>
|
||||
<p>No 12, Colombo Road, Sri Lanka</p>
|
||||
<i class="fa-solid fa-location-dot fa-2x"></i>
|
||||
<h5 class="mt-3 fw-bold">Address</h5>
|
||||
<p class="text-muted mb-0">No 12, Colombo Road, Sri Lanka</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card mb-3">
|
||||
<i class="fa-solid fa-phone fa-2x text-success"></i>
|
||||
<h5 class="mt-2">Phone</h5>
|
||||
<p>+94 77 123 4567</p>
|
||||
<i class="fa-solid fa-phone fa-2x"></i>
|
||||
<h5 class="mt-3 fw-bold">Phone</h5>
|
||||
<p class="text-muted mb-0">+94 77 123 4567</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card mb-3">
|
||||
<i class="fa-solid fa-envelope fa-2x text-danger"></i>
|
||||
<h5 class="mt-2">Email</h5>
|
||||
<p>info@automotiveacademy.lk</p>
|
||||
<i class="fa-solid fa-envelope fa-2x"></i>
|
||||
<h5 class="mt-3 fw-bold">Email</h5>
|
||||
<p class="text-muted mb-0">info@automotiveacademy.lk</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<i class="fa-solid fa-clock fa-2x text-warning"></i>
|
||||
<h5 class="mt-2">Working Hours</h5>
|
||||
<p>Mon - Fri: 8.00 AM - 5.00 PM</p>
|
||||
<i class="fa-solid fa-clock fa-2x"></i>
|
||||
<h5 class="mt-3 fw-bold">Working Hours</h5>
|
||||
<p class="text-muted mb-0">Mon - Fri: 8.00 AM - 5.00 PM</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -150,7 +207,7 @@ Send Message
|
|||
</section>
|
||||
|
||||
<!-- MAP -->
|
||||
<section class="pb-5">
|
||||
<section class="pb-5">
|
||||
<div class="container">
|
||||
|
||||
<!-- <iframe
|
||||
|
|
@ -170,9 +227,36 @@ Send Message
|
|||
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);"
|
||||
allowfullscreen=""
|
||||
loading="lazy">
|
||||
</iframe>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const animatedElements = document.querySelectorAll('.animate-item');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.10
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
|
@ -14,6 +14,10 @@
|
|||
--success-green: #1f8a4c;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
|
||||
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
|
||||
|
|
@ -217,12 +221,6 @@
|
|||
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;
|
||||
|
|
@ -234,6 +232,23 @@
|
|||
justify-content: center;
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
transition: transform 0.5s ease; /* Icon එක කැරකෙන්න transition එකක් දුන්නා */
|
||||
}
|
||||
|
||||
/* Card එක උඩට mouse එක ගෙනිච්චම වෙන වෙනස්කම් */
|
||||
.feature-box:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Card එක hover කරද්දී Icon එක අංශක 360ක් රොටේට් වෙන කොටස */
|
||||
.feature-box:hover .feature-icon-wrapper i {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.feature-icon-wrapper i {
|
||||
transition: transform 0.5s ease; /* Smooth rotate වෙන්න */
|
||||
}
|
||||
|
||||
.feature-box h5 {
|
||||
|
|
@ -256,25 +271,44 @@
|
|||
color: #666;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Custom Pure CSS Animations (Scroll Animations)
|
||||
======================================================== */
|
||||
/* .animate-on-scroll {
|
||||
opacity: 0;
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.fade-up-init {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.animated {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
} */
|
||||
</style>
|
||||
|
||||
{{-- Hero --}}
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Our Courses</h1>
|
||||
<p>
|
||||
Build your future in the automotive industry through practical
|
||||
training and internationally recognized learning experiences.
|
||||
</p>
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
id="courseSearch"
|
||||
placeholder="Search Courses by title, level or description..."
|
||||
>
|
||||
<button type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<div class="animate-on-scroll animated fade-up-init">
|
||||
<h1>Our Courses</h1>
|
||||
<p>
|
||||
Build your future in the automotive industry through practical
|
||||
training and internationally recognized learning experiences.
|
||||
</p>
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
id="courseSearch"
|
||||
placeholder="Search Courses by title, level or description..."
|
||||
>
|
||||
<button type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -358,8 +392,8 @@ $courses=[
|
|||
</div>
|
||||
|
||||
<div class="row g-4" id="courseContainer">
|
||||
@foreach($courses as $course)
|
||||
<div class="col-12 course-item">
|
||||
@foreach($courses as $index => $course)
|
||||
<div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;">
|
||||
<div class="card course-card h-100">
|
||||
<div class="row g-0 align-items-center">
|
||||
|
||||
|
|
@ -404,10 +438,10 @@ $courses=[
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Modernized Why Study With Us Section --}}
|
||||
{{-- Why Study With Us Section --}}
|
||||
<section class="pb-5">
|
||||
<div class="container">
|
||||
<div class="features-section text-center">
|
||||
<div class="features-section text-center animate-on-scroll fade-up-init">
|
||||
<h2>Why Study With Us?</h2>
|
||||
|
||||
<div class="row g-4">
|
||||
|
|
@ -457,29 +491,49 @@ $courses=[
|
|||
</section>
|
||||
|
||||
<script>
|
||||
document.getElementById('courseSearch').addEventListener('keyup', function() {
|
||||
let filter = this.value.toLowerCase();
|
||||
let courseItems = document.querySelectorAll('.course-item');
|
||||
let hasResults = false;
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// === 1. Course Search Feature ===
|
||||
document.getElementById('courseSearch').addEventListener('keyup', function() {
|
||||
let filter = this.value.toLowerCase();
|
||||
let courseItems = document.querySelectorAll('.course-item');
|
||||
let hasResults = false;
|
||||
|
||||
courseItems.forEach(function(item) {
|
||||
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
||||
let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
|
||||
courseItems.forEach(function(item) {
|
||||
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
||||
let desc = item.querySelector('.course-short-desc').textContent.toLowerCase();
|
||||
|
||||
if (title.includes(filter) || desc.includes(filter)) {
|
||||
item.style.setProperty('display', '', 'important');
|
||||
hasResults = true;
|
||||
if (title.includes(filter) || desc.includes(filter)) {
|
||||
item.style.setProperty('display', '', 'important');
|
||||
hasResults = true;
|
||||
item.classList.add('animated');
|
||||
} else {
|
||||
item.style.setProperty('display', 'none', 'important');
|
||||
}
|
||||
});
|
||||
|
||||
let noResultsMsg = document.getElementById('noResults');
|
||||
if (hasResults) {
|
||||
noResultsMsg.classList.add('d-none');
|
||||
} else {
|
||||
item.style.setProperty('display', 'none', 'important');
|
||||
noResultsMsg.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
let noResultsMsg = document.getElementById('noResults');
|
||||
if (hasResults) {
|
||||
noResultsMsg.classList.add('d-none');
|
||||
} else {
|
||||
noResultsMsg.classList.remove('d-none');
|
||||
}
|
||||
// === 2. Pure Intersection Observer Scroll Animation ===
|
||||
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.10
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
--light:#f8f4f7;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hero{
|
||||
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
|
||||
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||
|
|
@ -24,12 +28,15 @@
|
|||
.portal-card{
|
||||
border:none;
|
||||
border-radius:15px;
|
||||
transition:.3s;
|
||||
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:hover{
|
||||
transform:translateY(-8px);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
|
||||
}
|
||||
|
||||
.portal-icon{
|
||||
|
|
@ -43,28 +50,46 @@
|
|||
justify-content:center;
|
||||
font-size:28px;
|
||||
margin:auto;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.portal-card:hover .portal-icon {
|
||||
background: var(--secondary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-portal{
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:10px 30px;
|
||||
padding:12px 35px;
|
||||
border: none;
|
||||
transition: 0.2s ease;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-portal:hover{
|
||||
background:#8B3A74;
|
||||
color:#fff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.modal-content {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Modal එක Open වෙද්දී Zoom-In වෙන්න */
|
||||
.modal.fade .modal-dialog {
|
||||
transform: scale(0.85);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
.modal.show .modal-dialog {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
|
|
@ -81,7 +106,6 @@
|
|||
padding: 10px 25px 20px;
|
||||
}
|
||||
|
||||
|
||||
.input-group-text {
|
||||
background-color: #f8fafc;
|
||||
border-color: #cbd5e1;
|
||||
|
|
@ -111,7 +135,6 @@
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
.input-group:focus-within .input-group-text {
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
|
|
@ -122,7 +145,6 @@
|
|||
border-top: none;
|
||||
padding: 0 25px 30px;
|
||||
}
|
||||
|
||||
|
||||
.btn-modal-cancel {
|
||||
background: transparent;
|
||||
|
|
@ -132,6 +154,7 @@
|
|||
padding: 10px 0;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-modal-cancel:hover {
|
||||
|
|
@ -149,6 +172,7 @@
|
|||
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-modal-login:hover {
|
||||
|
|
@ -157,39 +181,69 @@
|
|||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Custom CSS Scroll Animations
|
||||
======================================================== */
|
||||
.animate-item {
|
||||
opacity: 0;
|
||||
will-change: transform, opacity;
|
||||
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.fade-up-init {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in-init {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.slide-right-init {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.animate-item.animated {
|
||||
opacity: 1;
|
||||
transform: translate(0) scale(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1 class="fw-bold">Student Portal</h1>
|
||||
<p class="mt-3">
|
||||
Access your courses, timetable, assignments, examination results,
|
||||
payments and profile from one place.
|
||||
</p>
|
||||
<div class="animate-item animated fade-up-init">
|
||||
<h1 class="fw-bold display-5">Student Portal</h1>
|
||||
<p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
|
||||
Access your courses, timetable, assignments, examination results,
|
||||
payments and profile from one place.
|
||||
</p>
|
||||
|
||||
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||
Student Login
|
||||
</button>
|
||||
<button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
|
||||
Student Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-5">
|
||||
<!-- SERVICES SECTION -->
|
||||
<section class="py-5 overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2>Student Services</h2>
|
||||
<div class="text-center mb-5 animate-item fade-up-init">
|
||||
<h2 class="fw-bold">Student Services</h2>
|
||||
<p class="text-muted">
|
||||
Everything you need during your academic journey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- සේවා කාඩ් සියල්ල එකපාර ලස්සනට Fade-in වේ -->
|
||||
<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">
|
||||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-book"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">My Courses</h4>
|
||||
<p class="text-muted">View enrolled courses and learning materials.</p>
|
||||
<h4 class="mt-4 fw-bold">My Courses</h4>
|
||||
<p class="text-muted mb-0">View enrolled courses and learning materials.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -198,8 +252,8 @@
|
|||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-calendar-days"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">Class Timetable</h4>
|
||||
<p class="text-muted">Check your weekly lecture schedule.</p>
|
||||
<h4 class="mt-4 fw-bold">Class Timetable</h4>
|
||||
<p class="text-muted mb-0">Check your weekly lecture schedule.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -208,8 +262,8 @@
|
|||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-file-lines"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">Assignments</h4>
|
||||
<p class="text-muted">Submit assignments and download resources.</p>
|
||||
<h4 class="mt-4 fw-bold">Assignments</h4>
|
||||
<p class="text-muted mb-0">Submit assignments and download resources.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -218,8 +272,8 @@
|
|||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-square-poll-vertical"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">Exam Results</h4>
|
||||
<p class="text-muted">View semester and final examination results.</p>
|
||||
<h4 class="mt-4 fw-bold">Exam Results</h4>
|
||||
<p class="text-muted mb-0">View semester and final examination results.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -228,8 +282,8 @@
|
|||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-credit-card"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">Fee Payments</h4>
|
||||
<p class="text-muted">Pay course fees and download payment receipts.</p>
|
||||
<h4 class="mt-4 fw-bold">Fee Payments</h4>
|
||||
<p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -238,47 +292,51 @@
|
|||
<div class="portal-icon">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
</div>
|
||||
<h4 class="mt-4">Student Profile</h4>
|
||||
<p class="text-muted">Update your personal information securely.</p>
|
||||
<h4 class="mt-4 fw-bold">Student Profile</h4>
|
||||
<p class="text-muted mb-0">Update your personal information securely.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-5 bg-light">
|
||||
<!-- QUICK LINKS -->
|
||||
<section class="py-5 bg-light overflow-hidden">
|
||||
<div class="container">
|
||||
<div class="text-center mb-5">
|
||||
<h2>Quick Links</h2>
|
||||
<div class="text-center mb-5 animate-item fade-up-init">
|
||||
<h2 class="fw-bold">Quick Links</h2>
|
||||
</div>
|
||||
|
||||
<div class="row text-center">
|
||||
<!-- දකුණේ සිට වමට Slide වේ -->
|
||||
<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">Academic Calendar</a>
|
||||
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<a href="#" class="btn btn-outline-dark w-100">Student Handbook</a>
|
||||
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<a href="#" class="btn btn-outline-dark w-100">Examination Notices</a>
|
||||
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<a href="#" class="btn btn-outline-dark w-100">Contact Support</a>
|
||||
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-5">
|
||||
<div class="container text-center">
|
||||
<h2>Ready to Access Your Student Account?</h2>
|
||||
<p class="text-muted">Log in to manage your academic activities and stay updated.</p>
|
||||
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||
<!-- BOTTOM CTA -->
|
||||
<section class="py-5 bg-white">
|
||||
<div class="container text-center animate-item fade-up-init">
|
||||
<h2 class="fw-bold">Ready to Access Your Student Account?</h2>
|
||||
<p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
|
||||
<button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
|
||||
Student Login
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LOGIN MODAL -->
|
||||
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
|
|
@ -289,8 +347,7 @@
|
|||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<!-- <form action="#" method="POST" id="studentLoginForm"> -->
|
||||
<form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
|
||||
<form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
|
||||
@csrf
|
||||
|
||||
<div class="modal-body">
|
||||
|
|
@ -320,8 +377,8 @@
|
|||
</div>
|
||||
|
||||
<div class="modal-footer d-flex gap-2 justify-content-center">
|
||||
<button type="button" class="btn btn-modal-cancel " data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-modal-login "> Login </button>
|
||||
<button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-modal-login"> Login </button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -333,6 +390,23 @@ function studentlogin() {
|
|||
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
|
||||
myModal.show();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const animatedElements = document.querySelectorAll('.animate-item');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.10
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
|
@ -151,7 +151,7 @@ body{
|
|||
padding: 20px 24px 24px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left; /* Left alignment for Udemy Style */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
|
|
@ -245,6 +245,7 @@ body{
|
|||
/* ===== Why Choose Us ===== */
|
||||
.why-section {
|
||||
background: #F8F4F7;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.why-section li {
|
||||
|
|
@ -256,12 +257,46 @@ body{
|
|||
color: #5E244E;
|
||||
}
|
||||
|
||||
/* ========================================================
|
||||
Custom Pure CSS Animations (No external libraries needed)
|
||||
======================================================== */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transition: all 1s ease-out;
|
||||
}
|
||||
|
||||
/* Fade Up effect */
|
||||
.fade-up-init {
|
||||
transform: translateY(40px);
|
||||
}
|
||||
|
||||
/* Fade Left (Slide from Right) effect */
|
||||
.fade-left-init {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
/* Fade Right (Slide from Left) effect */
|
||||
.fade-right-init {
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
|
||||
/* Zoom In effect */
|
||||
.zoom-in-init {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Animation එක active වූ පසු (JS මඟින් මේ class එක එකතු කරයි) */
|
||||
.animate-on-scroll.animated {
|
||||
opacity: 1;
|
||||
transform: translateY(0) translateX(0) scale(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
{{-- ===================== HERO ===================== --}}
|
||||
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
|
||||
<div class="container">
|
||||
<div class="hero-content text-center">
|
||||
<!-- Hero එක load වෙද්දිම animate වෙන්න කෙලින්ම animated දැම්මා -->
|
||||
<div class="hero-content text-center animate-on-scroll animated fade-up-init">
|
||||
<h1 class="display-4 fw-bold">
|
||||
Automobile Engineering Academy
|
||||
</h1>
|
||||
|
|
@ -290,7 +325,7 @@ body{
|
|||
<section class="section py-5" aria-labelledby="courses-heading">
|
||||
<div class="container py-5">
|
||||
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-center mb-5 animate-on-scroll fade-up-init">
|
||||
<h2 id="courses-heading">Our Courses</h2>
|
||||
<p class="text-muted">
|
||||
Explore our professional automotive engineering courses.
|
||||
|
|
@ -330,8 +365,9 @@ body{
|
|||
@endphp
|
||||
|
||||
<div class="row g-4 mb-5">
|
||||
@foreach($courses as $course)
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@foreach($courses as $index => $course)
|
||||
<!-- Cards ටික එකින් එක delay වෙන්න inline style එකක් දැම්මා -->
|
||||
<div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 150 }}ms;">
|
||||
<div class="card course-card h-100">
|
||||
|
||||
<div class="course-image-wrapper">
|
||||
|
|
@ -367,7 +403,7 @@ body{
|
|||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-center animate-on-scroll fade-up-init">
|
||||
<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>
|
||||
|
|
@ -381,7 +417,8 @@ body{
|
|||
<div class="container">
|
||||
<div class="row align-items-center g-5">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- Image: Slides from Left -->
|
||||
<div class="col-lg-6 animate-on-scroll fade-right-init">
|
||||
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
|
||||
alt="Automotive Engineering Lab"
|
||||
class="img-fluid rounded shadow-sm"
|
||||
|
|
@ -391,7 +428,8 @@ body{
|
|||
decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- Content: Slides from Right -->
|
||||
<div class="col-lg-6 animate-on-scroll fade-left-init">
|
||||
<h2 id="why-us-heading" class="fw-bold mb-4">
|
||||
Why Choose Us?
|
||||
</h2>
|
||||
|
|
@ -420,7 +458,7 @@ body{
|
|||
</section>
|
||||
|
||||
{{-- ===================== CALL TO ACTION ===================== --}}
|
||||
<section class="section py-5">
|
||||
<section class="section py-5 animate-on-scroll zoom-in-init">
|
||||
<div class="container text-center">
|
||||
<h2 class="fw-bold mb-3">
|
||||
Join the Future of Automotive Engineering
|
||||
|
|
@ -435,4 +473,24 @@ body{
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- බාහිර කිසිම script එකක් ඕනේ නැහැ, මේ සරල කෑල්ල කෙලින්ම වැඩ කරනවා -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
observer.unobserve(entry.target); // එක පාරක් වැඩ කළාම ඇති නිසා නැවත check කරන්නේ නැත
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15 // Section එකෙන් 15%ක් screen එකට ආපු ගමන් animate වේ
|
||||
});
|
||||
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
Loading…
Reference in New Issue