set new themes 0722
This commit is contained in:
parent
021ec03fda
commit
5ca81c9b24
|
|
@ -108,12 +108,13 @@ body{
|
|||
|
||||
.service-card i{
|
||||
font-size:45px;
|
||||
color:var(--primary);
|
||||
color: #6C2B2E;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.service-card h5{
|
||||
font-weight:700;
|
||||
color: #773939;
|
||||
}
|
||||
|
||||
.service-card p{
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ body {
|
|||
.btn-view-courses{
|
||||
background: #822424;
|
||||
color: #fff;
|
||||
padding: 14px 35px;
|
||||
/* padding: 14px ; */
|
||||
border-radius: 40px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -242,7 +242,7 @@ body {
|
|||
|
||||
.hero-about {
|
||||
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-position: center;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body {
|
|||
.hero-contact{
|
||||
min-height:50vh;
|
||||
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-position:center;
|
||||
display:flex;
|
||||
|
|
@ -94,7 +94,7 @@ body {
|
|||
}
|
||||
|
||||
.info-card i {
|
||||
color: #FFC926 !important;
|
||||
color: #861E28 !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +135,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 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>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -506,11 +506,11 @@ $courses=[
|
|||
{{-- Why Study With Us Section --}}
|
||||
<section class="pb-5 why-study-section>
|
||||
<div class="container">
|
||||
<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');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;">
|
||||
<<div class="features-section text-center animate-on-scroll fade-up-init"
|
||||
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-position: center;
|
||||
background-repeat: no-repeat;">
|
||||
<h2>Why Study With Us?</h2>
|
||||
<!-- <div class="section-divider"></div> -->
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
margin-left: 20px;
|
||||
transition: 0.2s ease;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
<style>
|
||||
/* Global Root Variables */
|
||||
:root {
|
||||
--primary: #000000;
|
||||
--primary: #642326;
|
||||
--background: #f5f6fb;
|
||||
--sidebar-width: 260px;
|
||||
--text-color: #333333;
|
||||
--sidebar-bg: #5E244E;
|
||||
--sidebar-bg: #282d55;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -82,6 +82,7 @@
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
color: #2e2750;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
|
|
@ -184,7 +185,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.sidebar {
|
||||
left: calc(-1 * var(--sidebar-width));
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ body {
|
|||
color: #fff;
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.portal-card {
|
||||
|
|
@ -74,10 +75,10 @@ body {
|
|||
}
|
||||
|
||||
.btn-portal {
|
||||
background: var(--primary-light);
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color: #fff;
|
||||
padding: 12px 35px;
|
||||
border: none;
|
||||
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
|
@ -85,9 +86,14 @@ body {
|
|||
|
||||
.btn-portal:hover {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
|
||||
color: #fff;
|
||||
color: #f4ff8d;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
|
||||
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
|
|
@ -196,6 +202,21 @@ body {
|
|||
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
|
||||
======================================================== */
|
||||
|
|
@ -221,10 +242,13 @@ body {
|
|||
opacity: 1;
|
||||
transform: translate(0) scale(1);
|
||||
}
|
||||
/* .rounded-pill {
|
||||
border-radius: inherit;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="container" style="padding-top: 46px;">
|
||||
<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;">
|
||||
|
|
@ -314,27 +338,88 @@ body {
|
|||
</section>
|
||||
|
||||
<!-- QUICK LINKS -->
|
||||
<section class="py-5 bg-light overflow-hidden">
|
||||
<!-- <section class="py-5 bg-light overflow-hidden">
|
||||
<div class="container">
|
||||
<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">
|
||||
<div class="row text-center animate-item slide-right-init" style="color:white;">
|
||||
<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 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 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 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>
|
||||
</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>
|
||||
|
||||
<!-- BOTTOM CTA -->
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ body {
|
|||
|
||||
|
||||
.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-position: center;
|
||||
background-size: cover;
|
||||
|
|
@ -118,7 +118,7 @@ body {
|
|||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 60px;
|
||||
font-size: 63px;
|
||||
font-weight: 800;
|
||||
margin-top: -87px;
|
||||
text-shadow: 0 2px 15px rgba(0,0,0,0.3);
|
||||
|
|
@ -427,36 +427,37 @@ body {
|
|||
@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="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">
|
||||
<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>
|
||||
<a href="/courses" style="text-decoration:none;">
|
||||
<div class="course-image-wrapper">
|
||||
<span class="badge-floating">{{ $course['badge'] }}</span>
|
||||
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}" loading="lazy">
|
||||
</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 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>
|
||||
|
||||
<!-- 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>
|
||||
<a href="/courses" class="read-btn">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue