set new themes 0722

This commit is contained in:
imadhigp 2026-07-22 17:06:18 +05:30
parent 021ec03fda
commit 5ca81c9b24
8 changed files with 142 additions and 53 deletions

View File

@ -108,12 +108,13 @@ body{
.service-card i{ .service-card i{
font-size:45px; font-size:45px;
color:var(--primary); color: #6C2B2E;
margin-bottom:20px; margin-bottom:20px;
} }
.service-card h5{ .service-card h5{
font-weight:700; font-weight:700;
color: #773939;
} }
.service-card p{ .service-card p{

View File

@ -160,7 +160,7 @@ body {
.btn-view-courses{ .btn-view-courses{
background: #822424; background: #822424;
color: #fff; color: #fff;
padding: 14px 35px; /* padding: 14px ; */
border-radius: 40px; border-radius: 40px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -242,7 +242,7 @@ body {
.hero-about { .hero-about {
min-height: 60vh; min-height: 60vh;
background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80'); background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;

View File

@ -28,7 +28,7 @@ body {
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
linear-gradient(rgba(218, 225, 255, 0.56), rgba(0, 0, 0, 0.8)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg'); linear-gradient(rgba(233, 236, 246, 0.6), rgba(39, 35, 35, 0.71)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;
@ -94,7 +94,7 @@ body {
} }
.info-card i { .info-card i {
color: #FFC926 !important; color: #861E28 !important;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
@ -135,7 +135,7 @@ body {
<div class="container"> <div class="container">
<div class="animate-item animated fade-up-init"> <div class="animate-item animated fade-up-init">
<h1 class="fw-bold display-4">Contact Us</h1> <h1 class="fw-bold display-4">Contact Us</h1>
<p class="fs-5 text-white-50">We are here to help you. Reach us anytime.</p> <p class="fs-5 text-white-50" style="color:rgba(255, 255, 255, 0.8) !important">We are here to help you. Reach us anytime.</p>
</div> </div>
</div> </div>
</section> </section>

View File

@ -506,11 +506,11 @@ $courses=[
{{-- Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5 why-study-section> <section class="pb-5 why-study-section>
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init" <<div class="features-section text-center animate-on-scroll fade-up-init"
style="background-image: linear-gradient(rgba(110, 126, 166, 0.84), rgba(15, 23, 42, 0.90)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80'); style="background-image: linear-gradient(rgba(77, 103, 169, 0.61), rgba(0, 0, 0, 0.9)), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat;"> background-repeat: no-repeat;">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<!-- <div class="section-divider"></div> --> <!-- <div class="section-divider"></div> -->

View File

@ -43,6 +43,7 @@
margin-left: 20px; margin-left: 20px;
transition: 0.2s ease; transition: 0.2s ease;
font-weight: bold; font-weight: bold;
font-size: 18px;
} }
.nav-link:hover, .nav-link:hover,

View File

@ -13,11 +13,11 @@
<style> <style>
/* Global Root Variables */ /* Global Root Variables */
:root { :root {
--primary: #000000; --primary: #642326;
--background: #f5f6fb; --background: #f5f6fb;
--sidebar-width: 260px; --sidebar-width: 260px;
--text-color: #333333; --text-color: #333333;
--sidebar-bg: #5E244E; --sidebar-bg: #282d55;
} }
* { * {
@ -82,6 +82,7 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
color: #2e2750;
} }
.sidebar .nav-link { .sidebar .nav-link {
@ -184,7 +185,7 @@
opacity: 1; opacity: 1;
} }
/* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
@media (max-width: 991px) { @media (max-width: 991px) {
.sidebar { .sidebar {
left: calc(-1 * var(--sidebar-width)); left: calc(-1 * var(--sidebar-width));

View File

@ -36,6 +36,7 @@ body {
color: #fff; color: #fff;
padding: 80px 0; padding: 80px 0;
text-align: center; text-align: center;
height: 480px;
} }
.portal-card { .portal-card {
@ -74,10 +75,10 @@ body {
} }
.btn-portal { .btn-portal {
background: var(--primary-light); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff; color: #fff;
padding: 12px 35px; padding: 12px 35px;
border: none;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -85,9 +86,14 @@ body {
.btn-portal:hover { .btn-portal:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff; color: #f4ff8d;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3); box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
}
.btn:hover {
border-color: rgba(255, 255, 255, 0.98);
} }
.modal-content { .modal-content {
@ -196,6 +202,21 @@ body {
box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3); box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
} }
.bg-light {
background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-position-x: 0%, 0%;
background-position-y: 0%, 0%;
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-size: auto, auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
/* ======================================================== /* ========================================================
Custom CSS Scroll Animations Custom CSS Scroll Animations
======================================================== */ ======================================================== */
@ -221,10 +242,13 @@ body {
opacity: 1; opacity: 1;
transform: translate(0) scale(1); transform: translate(0) scale(1);
} }
/* .rounded-pill {
border-radius: inherit;
} */
</style> </style>
<section class="hero"> <section class="hero">
<div class="container"> <div class="container" style="padding-top: 46px;">
<div class="animate-item animated fade-up-init"> <div class="animate-item animated fade-up-init">
<h1 class="fw-bold display-5">Student Portal</h1> <h1 class="fw-bold display-5">Student Portal</h1>
<p class="mt-3 fs-5" style="max-width: 700px; margin: auto;"> <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
@ -314,27 +338,88 @@ body {
</section> </section>
<!-- QUICK LINKS --> <!-- QUICK LINKS -->
<section class="py-5 bg-light overflow-hidden"> <!-- <section class="py-5 bg-light overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-item fade-up-init"> <div class="text-center mb-5 animate-item fade-up-init">
<h2 class="fw-bold">Quick Links</h2> <h2 class="fw-bold">Quick Links</h2>
</div> </div>
<div class="row text-center animate-item slide-right-init"> <div class="row text-center animate-item slide-right-init" style="color:white;">
<div class="col-md-3 mb-3"> <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> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Academic Calendar</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Student Handbook</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Examination Notices</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill" style="color:white;">Contact Support</a>
</div> </div>
</div> </div>
</div> </div>
</section> -->
<section class="py-5 overflow-hidden"
style="background: linear-gradient(rgba(25, 48, 102, 0.49), rgba(10, 9, 17, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: white; height: 395px; ">
<div class="container">
<!-- Section Title -->
<div class="text-center mb-5 animate-item fade-up-init">
<h2 class="fw-bold mb-2" style="color: #ffffff;">Quick Links</h2>
<p style="color: #ffffff; font-size: 0.95rem; font-weight: 500;">Access important student portals and resources instantly</p>
</div>
<!-- Quick Links Grid -->
<div class="row g-3 justify-content-center animate-item slide-right-init">
<!-- Link 1 -->
<div class="col-6 col-md-3">
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
<i class="bi bi-calendar-event"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Academic Calendar</span>
</a>
</div>
<!-- Link 2 -->
<div class="col-6 col-md-3">
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
<i class="bi bi-journal-bookmark"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Student Handbook</span>
</a>
</div>
<!-- Link 3 -->
<div class="col-6 col-md-3">
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
<i class="bi bi-file-earmark-text"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Examination Notices</span>
</a>
</div>
<!-- Link 4 -->
<div class="col-6 col-md-3">
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
style="background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease;">
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
<i class="bi bi-headset"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Contact Support</span>
</a>
</div>
</div>
</div>
</section> </section>
<!-- BOTTOM CTA --> <!-- BOTTOM CTA -->

View File

@ -101,7 +101,7 @@ body {
.hero { .hero {
height: 650px; height:636px;
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: 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-position: center;
background-size: cover; background-size: cover;
@ -118,7 +118,7 @@ body {
} }
.hero h1 { .hero h1 {
font-size: 60px; font-size: 63px;
font-weight: 800; font-weight: 800;
margin-top: -87px; margin-top: -87px;
text-shadow: 0 2px 15px rgba(0,0,0,0.3); text-shadow: 0 2px 15px rgba(0,0,0,0.3);
@ -427,36 +427,37 @@ body {
@foreach($courses as $key => $course) @foreach($courses as $key => $course)
<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="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="card course-card w-100 d-flex flex-column">
<a href="/courses" style="text-decoration:none;">
<div class="course-image-wrapper"> <div class="course-image-wrapper">
<span class="badge-floating">{{ $course['badge'] }}</span> <span class="badge-floating">{{ $course['badge'] }}</span>
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy"> <img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
</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'] }}
</div>
<p class="course-short-desc">{{ $course['desc'] }}</p>
<div class="course-features-container">
<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>
<!-- Footer wrapped inside card-body with margin-top: auto to perfectly align elements --> <div class="card-body">
<div class="course-footer"> <h4 class="course-title">{{ $course['title'] }}</h4>
<div class="course-meta-row"> <div class="course-author">
<span class="rating-star"> <i class="fa-solid fa-graduation-cap"></i> {{ $course['author'] }}
<i class="fas fa-star me-1"></i>{{ $course['rating'] }} </div>
<span class="rating-count">({{ $course['students'] }})</span> <p class="course-short-desc">{{ $course['desc'] }}</p>
</span>
<span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span> <div class="course-features-container">
<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>
<!-- 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'] }}
<span class="rating-count">({{ $course['students'] }})</span>
</span>
<span class="small fw-bold" style="color: #2ecc71;"><i class="fa-solid fa-circle-check me-1"></i>Active</span>
</div>
<a href="/courses" class="read-btn">View Details</a>
</div>
</div> </div>
<a href="/courses" class="read-btn">View Details</a> </a>
</div>
</div>
</div> </div>
</div> </div>