set 0731
This commit is contained in:
parent
d63e9c0a2b
commit
897cd82bc6
|
|
@ -30,7 +30,6 @@ body {
|
||||||
.hero {
|
.hero {
|
||||||
background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6)),
|
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');
|
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -78,7 +77,6 @@ body {
|
||||||
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: #fff;
|
||||||
padding: 12px 35px;
|
padding: 12px 35px;
|
||||||
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
@ -89,7 +87,6 @@ body {
|
||||||
color: #f4ff8d;
|
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 {
|
.btn:hover {
|
||||||
|
|
@ -204,11 +201,6 @@ body {
|
||||||
|
|
||||||
.bg-light {
|
.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: 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-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
@ -216,10 +208,7 @@ body {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Scroll Animations */
|
||||||
/* ========================================================
|
|
||||||
Custom CSS Scroll Animations
|
|
||||||
======================================================== */
|
|
||||||
.animate-item {
|
.animate-item {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
|
|
@ -242,11 +231,9 @@ body {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(0) scale(1);
|
transform: translate(0) scale(1);
|
||||||
}
|
}
|
||||||
/* .rounded-pill {
|
|
||||||
border-radius: inherit;
|
|
||||||
} */
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<!-- HERO SECTION -->
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="container" style="padding-top: 46px;">
|
<div class="container" style="padding-top: 46px;">
|
||||||
<div class="animate-item animated fade-up-init">
|
<div class="animate-item animated fade-up-init">
|
||||||
|
|
@ -337,84 +324,79 @@ body {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- QUICK LINKS -->
|
<!-- QUICK LINKS (FIXED WITH FONTAWESOME ICONS & RESPONSIVE LAYOUT) -->
|
||||||
<!-- <section class="py-5 bg-light overflow-hidden">
|
<section class="py-5 position-relative overflow-hidden"
|
||||||
<div class="container">
|
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="text-center mb-5 animate-item fade-up-init">
|
<div class="container py-2">
|
||||||
<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">
|
|
||||||
|
|
||||||
<!-- Section Title -->
|
<!-- Section Title -->
|
||||||
<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 mb-2" style="color: #ffffff;">Quick Links</h2>
|
<h2 class="fw-bold mb-2 text-white display-6">Quick Links</h2>
|
||||||
<p style="color: #ffffff; font-size: 0.95rem; font-weight: 500;">Access important student portals and resources instantly</p>
|
<p class="text-white-50 fs-6 mx-auto" style="max-width: 500px;">
|
||||||
|
Access important student portals and official resources instantly
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Quick Links Grid -->
|
<!-- 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 -->
|
<!-- Link 1 -->
|
||||||
<div class="col-6 col-md-3">
|
<div class="col-12 col-sm-6 col-lg-3">
|
||||||
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
|
<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.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;">
|
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;"
|
||||||
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
|
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
|
||||||
<i class="bi bi-calendar-event"></i>
|
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>
|
</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Link 2 -->
|
<!-- Link 2 -->
|
||||||
<div class="col-6 col-md-3">
|
<div class="col-12 col-sm-6 col-lg-3">
|
||||||
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
|
<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.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;">
|
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;"
|
||||||
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
|
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
|
||||||
<i class="bi bi-journal-bookmark"></i>
|
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>
|
</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Link 3 -->
|
<!-- Link 3 -->
|
||||||
<div class="col-6 col-md-3">
|
<div class="col-12 col-sm-6 col-lg-3">
|
||||||
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
|
<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.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;">
|
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;"
|
||||||
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
|
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
|
||||||
<i class="bi bi-file-earmark-text"></i>
|
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>
|
</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Link 4 -->
|
<!-- Link 4 -->
|
||||||
<div class="col-6 col-md-3">
|
<div class="col-12 col-sm-6 col-lg-3">
|
||||||
<a href="#" class="d-flex flex-column align-items-center text-decoration-none p-4 rounded-4 text-center"
|
<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.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;">
|
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;"
|
||||||
<div style="color: #0284c7; font-size: 2rem;" class="mb-2">
|
onmouseover="this.style.transform='translateY(-8px)'; this.style.background='#ffffff'; this.style.boxShadow='0 15px 30px rgba(0,0,0,0.25)';"
|
||||||
<i class="bi bi-headset"></i>
|
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>
|
</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -286,7 +286,7 @@ body {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
@ -560,7 +560,7 @@ body {
|
||||||
{{-- Interest Area Field --}}
|
{{-- Interest Area Field --}}
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<label for="interestArea" class="form-label fw-semibold text-dark small fs-6">
|
<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>
|
</label>
|
||||||
<select class="form-select form-select-lg border-2 fs-6" id="interestArea" required>
|
<select class="form-select form-select-lg border-2 fs-6" id="interestArea" required>
|
||||||
<option value="" selected disabled>Select Field of Interest</option>
|
<option value="" selected disabled>Select Field of Interest</option>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue