This commit is contained in:
imadhigp 2026-07-31 09:00:01 +05:30
parent d63e9c0a2b
commit 897cd82bc6
3 changed files with 61 additions and 79 deletions

View File

@ -30,7 +30,6 @@ body {
.hero {
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
background-size: cover;
background-position: center;
color: #fff;
@ -78,7 +77,6 @@ body {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff;
padding: 12px 35px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
@ -89,7 +87,6 @@ body {
color: #f4ff8d;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
}
.btn:hover {
@ -204,11 +201,6 @@ body {
.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;
@ -216,10 +208,7 @@ body {
color: white;
}
/* ========================================================
Custom CSS Scroll Animations
======================================================== */
/* Scroll Animations */
.animate-item {
opacity: 0;
will-change: transform, opacity;
@ -242,11 +231,9 @@ body {
opacity: 1;
transform: translate(0) scale(1);
}
/* .rounded-pill {
border-radius: inherit;
} */
</style>
<!-- HERO SECTION -->
<section class="hero">
<div class="container" style="padding-top: 46px;">
<div class="animate-item animated fade-up-init">
@ -337,84 +324,79 @@ body {
</div>
</section>
<!-- QUICK LINKS -->
<!-- <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" 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" 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" 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" 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" 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">
<!-- QUICK LINKS (FIXED WITH FONTAWESOME ICONS & RESPONSIVE LAYOUT) -->
<section class="py-5 position-relative overflow-hidden"
style="background: linear-gradient(rgba(86, 94, 110, 0.57), rgba(10, 9, 17, 0.92)), 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; min-height: 380px; display: flex; align-items: center;">
<div class="container py-2">
<!-- 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>
<h2 class="fw-bold mb-2 text-white display-6">Quick Links</h2>
<p class="text-white-50 fs-6 mx-auto" style="max-width: 500px;">
Access important student portals and official resources instantly
</p>
</div>
<!-- Quick Links Grid -->
<div class="row g-3 justify-content-center animate-item slide-right-init">
<div class="row g-4 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 class="col-12 col-sm-6 col-lg-3">
<a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
<div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
color: #fff; transition: all 0.3s ease;">
<i class="fa-solid fa-calendar-days fs-3"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Academic Calendar</span>
<span class="fw-bold text-dark fs-6 mt-auto">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 class="col-12 col-sm-6 col-lg-3">
<a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
<div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
color: #fff; transition: all 0.3s ease;">
<i class="fa-solid fa-book-bookmark fs-3"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Student Handbook</span>
<span class="fw-bold text-dark fs-6 mt-auto">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 class="col-12 col-sm-6 col-lg-3">
<a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 255, 255, 0.85)'; this.style.boxShadow='none';">
<div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
color: #fff; transition: all 0.3s ease;">
<i class="fa-solid fa-file-lines fs-3"></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Examination Notices</span>
<span class="fw-bold text-dark fs-6 mt-auto">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 class="col-12 col-sm-6 col-lg-3">
<a href="#" class="text-decoration-none p-4 rounded-4 text-center d-flex flex-column align-items-center h-100 shadow-sm"
style="background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s ease;"
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
onmouseout="this.style.transform='translateY(0)'; this.style.background='rgba(255, 254, 254, 0.85)'; this.style.boxShadow='none';">
<div class="mb-3" style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgb(108, 55, 55);
color: #fff;; transition: all 0.3s ease;">
<i class="fa-solid fa-headset fs-3" ></i>
</div>
<span class="fw-bold" style="color: #002886; font-size: 19px;">Contact Support</span>
<span class="fw-bold text-dark fs-6 mt-auto">Contact Support</span>
</a>
</div>

View File

@ -286,7 +286,7 @@ body {
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.31)), url('https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80');
background: linear-gradient(rgba(17, 17, 39, 0.9), rgba(0, 9, 15, 0.6)), 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;
@ -560,7 +560,7 @@ body {
{{-- Interest Area Field --}}
<div class="mb-4">
<label for="interestArea" class="form-label fw-semibold text-dark small fs-6">
<i class="fa-solid fa-car-battery me-1 text-primary"></i> Which area of Automotive Engineering interests you most?
<!-- <i class="fa-solid fa-car-battery me-1 text-primary"></i> Which area of Automotive Engineering interests you most? -->
</label>
<select class="form-select form-select-lg border-2 fs-6" id="interestArea" required>
<option value="" selected disabled>Select Field of Interest</option>