generated from dwd/boilarplate-astro-tailwind
commit
f7eaa9199b
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 709 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
|
|
@ -0,0 +1,873 @@
|
|||
<div class="body-class">
|
||||
<div class="header-class">
|
||||
<div class="menu-container">
|
||||
<input type="checkbox" name="check" id="check">
|
||||
<div class="nav-btn">
|
||||
<div class="nav-links">
|
||||
<ul class="ul-class">
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Home</a>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Institute<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">History</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Mission</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Vision</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Objective</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Infrastructure & Facilities</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Distinctiveness</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Best Practices</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Awards & Recognition</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Funds Received</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Strategic/Perspective Plan</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Future Plan</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Holiday List</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Campus</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">SWOC of College</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Site Map</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Contact</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Administration<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Administrative Committee</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Teachers' Council</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Organogram</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Code of Conduct</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Disciplinary Rules</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Feedback Form</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">RTI</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">RUSA</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Support Staff</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class"> Academics<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Programs Offered<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Humanities</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Science</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Commerce</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Departments<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Humanities<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Bengali</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Economics</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Education</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">English</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">French</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Geography</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">History</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Philosophy</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Political Science</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Sanskrit</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Sociology</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Science<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Botany</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Chemistry</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Computer Science</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Environmental Science</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Mathematics</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Physics</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Zoology</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Commerce</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">ISR</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NSS</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Syllabus</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Faculty List (5 Years)</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Add-on Courses</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">PO, PSO & CO</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Academic Audit Report</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">University Examination</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">University Result</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Internal Examination</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">LMS</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Language Lab</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Language Lab</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Feedback on Curriculam</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Study Tours & Field Trips</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Exam Related Grievances</a>
|
||||
</li>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Student's_Corner<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Rules & Regulations</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Routine</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Scholarship</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Placement Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Online Competitive Exam</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Skill Development Program</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Achievements</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Student Support Services</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Students' Union</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Alumni</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">E-Magazine</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Feedback Form</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Online Grievance Redressal</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Anti Ragging Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Minority Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">ST/SC Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">OBC Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Anti Sexual Harassment Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Add on Information</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Research<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">PhD/MPhil/PG Teachers</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Research Guides</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Research Projects</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Know Your Ganges</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Central Instrumental Facility</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Publications<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Journal Trivium</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Journal Ruellia</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Papers & Journals</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Books & Chapters</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Notifications<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">General Notice</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Tender Notice</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">News&Events<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Events</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Press Coverage</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Gallery</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Videos</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">Facilities<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">ICT & Other Facilities</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class"> Girl's Hostel </a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hamburger-menu-container">
|
||||
<div class="hamburger-menu">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="https://kit.fontawesome.com/3b161c540c.js" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
.body-class{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:root {
|
||||
--clr-btn: #3e5b66;
|
||||
--clr-dropdown: #3e5b66;
|
||||
--clr-nav-hover: #0011ff;
|
||||
--clr-dropdown-hov: #009463;
|
||||
--clr-dropdown-link-hov: #ff04c9;
|
||||
--clr-light: #FFF;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.ul-class {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.link-class {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-class {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: #868756;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(30, 130, 95, 0.5);
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
max-width: 100%;
|
||||
padding: 0px 2rem 0px 2rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.log-sign {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--clr-light);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .5rem 1.3rem;
|
||||
font-size: .8rem;
|
||||
border: 2px solid var(--clr-light);
|
||||
border-radius: 2rem;
|
||||
line-height: 1;
|
||||
margin: 0 .2rem;
|
||||
transition: .3s;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn.solid,
|
||||
.btn.transparent:hover {
|
||||
background-color: var(--clr-light);
|
||||
color: var(--clr-btn);
|
||||
}
|
||||
|
||||
.btn.transparent,
|
||||
.btn.solid:hover {
|
||||
background-color: transparent;
|
||||
color: var(--clr-light);
|
||||
}
|
||||
|
||||
.nav-links > .ul-class {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link > .link-class {
|
||||
line-height: 3rem;
|
||||
color: var(--clr-light);
|
||||
padding: 0 .8rem;
|
||||
letter-spacing: 1px;
|
||||
font-size: .95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.nav-link > .link-class > i {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 15rem;
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.dropdown .ul-class {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-link > .link-class {
|
||||
display: flex;
|
||||
background-color: #3e5b66;
|
||||
color: #FFF;
|
||||
padding: .5rem 1rem;
|
||||
font-size: .9rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.dropdown-link:hover > .link-class {
|
||||
background-color: #273c45;
|
||||
color: #fbaf00;
|
||||
}
|
||||
|
||||
.dropdown-link:not(:nth-last-child(2)) {
|
||||
border-bottom: 1px solid var(--clr-light);
|
||||
}
|
||||
|
||||
.dropdown-link i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
top: -5.5px;
|
||||
left: 32px;
|
||||
background-color: #3e5b66;
|
||||
transform: rotate(45deg);
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.dropdown-link:first-child:hover ~ .arrow {
|
||||
background-color: var(--clr-dropdown);
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown.second {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
padding-left: .8rem;
|
||||
cursor: pointer;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.dropdown.second .arrow {
|
||||
top: 10px;
|
||||
left: -5.5px;
|
||||
}
|
||||
|
||||
.nav-link:hover > .dropdown,
|
||||
.dropdown-link:hover>.dropdown {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.hamburger-menu-container {
|
||||
flex: 1;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hamburger-menu div {
|
||||
width: 1.6rem;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--clr-light);
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.hamburger-menu div:before,
|
||||
.hamburger-menu div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: var(--clr-light);
|
||||
border-radius: 3px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.hamburger-menu div:before {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
|
||||
.hamburger-menu div:after {
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
#check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.5rem;
|
||||
transform: translateY(-50%);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
z-index: 90000;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
|
||||
transform: translateY(0) rotate(-45deg);
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
|
||||
transform: translateY(0) rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
.hamburger-menu-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
position: fixed;
|
||||
height: calc(100vh - 3rem);
|
||||
top: 2.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--clr-btn);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%);
|
||||
transition: .65s;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#check:checked ~ .nav-btn {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#check:checked ~ .nav-btn .nav-link,
|
||||
#check:checked ~ .nav-btn .log-sign {
|
||||
animation: animation .5s ease forwards var(--i);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links > .ul-class {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
.nav-link > .link-class {
|
||||
line-height: 1;
|
||||
padding: 1.6rem 2rem;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class {
|
||||
transform: scale(1);
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown,
|
||||
.dropdown.second {
|
||||
position: initial;
|
||||
top: initial;
|
||||
left: initial;
|
||||
transform: initial;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: #3e5b66;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link:hover > .dropdown,
|
||||
.dropdown-link:hover>.dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class > i,
|
||||
.dropdown-link:hover>.link-class>i {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.dropdown-link > .link-class {
|
||||
background-color: transparent;
|
||||
color: var(--clr-light);
|
||||
padding: 1.2rem 2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.dropdown.second .dropdown-link > .link-class {
|
||||
padding: 1.2rem 2rem 1.2rem 3rem;
|
||||
}
|
||||
|
||||
.dropdown.second .dropdown.second .dropdown-link > .link-class {
|
||||
padding: 1.2rem 2rem 1.2rem 4rem;
|
||||
}
|
||||
|
||||
.dropdown-link:not(:nth-last-child(2)) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
z-index: 1;
|
||||
background-color: var(--clr-btn);
|
||||
left: 10%;
|
||||
transform: scale(1.1) rotate(45deg);
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.nav-link:hover .arrow {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown .dropdown .arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-link:hover > .link-class {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown-link:first-child:hover ~ .arrow {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.nav-link > .link-class > i {
|
||||
font-size: 1.1rem;
|
||||
transform: rotate(-90deg);
|
||||
transition: .7s;
|
||||
}
|
||||
|
||||
.dropdown i {
|
||||
font-size: 1rem;
|
||||
transition: .7s;
|
||||
}
|
||||
|
||||
.log-sign {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1.9rem;
|
||||
justify-content: flex-start;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,657 @@
|
|||
<body class="body-class lg:hidden">
|
||||
<div class="header-class2">
|
||||
<div class="menu-container">
|
||||
<input type="checkbox" name="check" id="check">
|
||||
<div class="nav-btn">
|
||||
<div class="nav-links">
|
||||
<ul class="ul-class">
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class"> NCC<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Accreditation Document<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NAAC Certificates & Score Sheet</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NAAC 3rd Cycle Press Note</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Capacity Building Program</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NAAC SSR</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">IIQA Documents<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">IIQA Filled in Form</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">AISHE Certificate 2021-22</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">2F & 12B</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">University Affiliated Courses</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Undertaking of H.O.I.</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Self Declaration of H.O.I.</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Program Outcome</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Syllabus</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">List of Programme</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">IQAC Minutes & Report</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Annual Examination Report</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Feedback</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Project Certificate</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Collaborative Activities</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Career Counselling Certificate</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">JAM/NET/Exam Cleared List</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">ICT Rooms</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Full Time Teachers & Students</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Seminar Reports - IPR, RM & EP</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Program Studies & Placement</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Mentor/Mentee Meeting Report</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Developing Grants Received</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Solar Panel Installation</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Water Harvesting Project</a>
|
||||
</li>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">IQAC<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Policy Document</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Committee</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">IQAC Minutes</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">A.Q.A.R.</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">S.S.S.</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Academic Audit</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Green Audit</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">College Annual Report</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Gender Audit</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">NIRF<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NIRF 2024</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NIRF 2023</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NIRF 2022</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NIRF 2021</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">NIRF 2020</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class">ICC<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Members</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Policy Document</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Grievance Redressal</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Grievance Cell</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Anti Sexual Harassment Cell</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hamburger-menu-container">
|
||||
<div class="hamburger-menu">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script is:inline src="https://kit.fontawesome.com/3b161c540c.js" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
.body-class{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:root {
|
||||
--clr-btn: #3e5b66;
|
||||
--clr-dropdown: #3e5b66;
|
||||
--clr-nav-hover: #0011ff;
|
||||
--clr-dropdown-hov: #009463;
|
||||
--clr-dropdown-link-hov: #ff04c9;
|
||||
--clr-light: #FFF;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.ul-class {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.link-class {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-class2 {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: #c6a7a4;
|
||||
width: 100%;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(30, 130, 95, 0.5);
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
max-width: 100%;
|
||||
padding: 0px 2rem 0px 2rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.log-sign {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: var(--clr-light);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .5rem 1.3rem;
|
||||
font-size: .8rem;
|
||||
border: 2px solid var(--clr-light);
|
||||
border-radius: 2rem;
|
||||
line-height: 1;
|
||||
margin: 0 .2rem;
|
||||
transition: .3s;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn.solid,
|
||||
.btn.transparent:hover {
|
||||
background-color: var(--clr-light);
|
||||
color: var(--clr-btn);
|
||||
}
|
||||
|
||||
.btn.transparent,
|
||||
.btn.solid:hover {
|
||||
background-color: transparent;
|
||||
color: var(--clr-light);
|
||||
}
|
||||
|
||||
.nav-links > .ul-class {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link > .link-class {
|
||||
line-height: 3rem;
|
||||
color: var(--clr-light);
|
||||
padding: 0 .8rem;
|
||||
letter-spacing: 1px;
|
||||
font-size: .95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.nav-link > .link-class > i {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 15rem;
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.dropdown .ul-class {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-link > .link-class {
|
||||
display: flex;
|
||||
background-color: #3e5b66;
|
||||
color: #FFF;
|
||||
padding: .5rem 1rem;
|
||||
font-size: .9rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.dropdown-link:hover > .link-class {
|
||||
background-color: #273c45;
|
||||
color: #fbaf00;
|
||||
}
|
||||
|
||||
.dropdown-link:not(:nth-last-child(2)) {
|
||||
border-bottom: 1px solid var(--clr-light);
|
||||
}
|
||||
|
||||
.dropdown-link i {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
top: -5.5px;
|
||||
left: 32px;
|
||||
background-color: #3e5b66;
|
||||
transform: rotate(45deg);
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-link:first-child:hover ~ .arrow {
|
||||
background-color: var(--clr-dropdown);
|
||||
}
|
||||
|
||||
.dropdown-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown.second {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
padding-left: .8rem;
|
||||
cursor: pointer;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.dropdown.second .arrow {
|
||||
top: 10px;
|
||||
left: -5.5px;
|
||||
}
|
||||
|
||||
.nav-link:hover > .dropdown,
|
||||
.dropdown-link:hover>.dropdown {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.hamburger-menu-container {
|
||||
flex: 1;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hamburger-menu div {
|
||||
width: 1.6rem;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--clr-light);
|
||||
position: relative;
|
||||
z-index: 1002;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.hamburger-menu div:before,
|
||||
.hamburger-menu div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
background-color: var(--clr-light);
|
||||
border-radius: 3px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.hamburger-menu div:before {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
|
||||
.hamburger-menu div:after {
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
#check {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1.5rem;
|
||||
transform: translateY(-50%);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
z-index: 90001;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
|
||||
transform: translateY(0) rotate(-45deg);
|
||||
}
|
||||
|
||||
#check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
|
||||
transform: translateY(0) rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
.hamburger-menu-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
position: fixed;
|
||||
height: calc(100vh - 3rem);
|
||||
top: 2.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--clr-btn);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%);
|
||||
transition: .65s;
|
||||
}
|
||||
|
||||
#check:checked ~ .nav-btn {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#check:checked ~ .nav-btn .nav-link,
|
||||
#check:checked ~ .nav-btn .log-sign {
|
||||
animation: animation .5s ease forwards var(--i);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links > .ul-class {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
.nav-link > .link-class {
|
||||
line-height: 1;
|
||||
padding: 1.6rem 2rem;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class {
|
||||
transform: scale(1);
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown,
|
||||
.dropdown.second {
|
||||
position: initial;
|
||||
top: initial;
|
||||
left: initial;
|
||||
transform: initial;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: #3e5b66;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link:hover > .dropdown,
|
||||
.dropdown-link:hover>.dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link:hover > .link-class > i,
|
||||
.dropdown-link:hover>.link-class>i {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.dropdown-link > .link-class {
|
||||
background-color: transparent;
|
||||
color: var(--clr-light);
|
||||
padding: 1.2rem 2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.dropdown.second .dropdown-link > .link-class {
|
||||
padding: 1.2rem 2rem 1.2rem 3rem;
|
||||
}
|
||||
|
||||
.dropdown.second .dropdown.second .dropdown-link > .link-class {
|
||||
padding: 1.2rem 2rem 1.2rem 4rem;
|
||||
}
|
||||
|
||||
.dropdown-link:not(:nth-last-child(2)) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
z-index: 2;
|
||||
background-color: var(--clr-btn);
|
||||
left: 10%;
|
||||
transform: scale(1.1) rotate(45deg);
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.nav-link:hover .arrow {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown .dropdown .arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-link:hover > .link-class {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.dropdown-link:first-child:hover ~ .arrow {
|
||||
background-color: #273c45;
|
||||
}
|
||||
|
||||
.nav-link > .link-class > i {
|
||||
font-size: 1.1rem;
|
||||
transform: rotate(-90deg);
|
||||
transition: .7s;
|
||||
}
|
||||
|
||||
.dropdown i {
|
||||
font-size: 1rem;
|
||||
transition: .7s;
|
||||
}
|
||||
|
||||
.log-sign {
|
||||
flex: initial;
|
||||
width: 100%;
|
||||
padding: 1.5rem 1.9rem;
|
||||
justify-content: flex-start;
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<li class="nav-link" style="--i: 0s">
|
||||
<a href="#" class="link-class"> Academics<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Programs Offered<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Humanities</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Science</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Commerce</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">More<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 1</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 2</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 3</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 1</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 2</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 3<i class="fas fa-caret-down"></i></a>
|
||||
<div class="dropdown second">
|
||||
<ul class="ul-class">
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 1</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 2</a>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 3</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-link">
|
||||
<a href="#" class="link-class">Link 4</a>
|
||||
</li>
|
||||
<div class="arrow"></div>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -37,17 +37,9 @@ import ContactForm from "../components/ContactForm.vue";
|
|||
</h3>
|
||||
<div class="flex flex-row place-content-between">
|
||||
|
||||
<button
|
||||
onclick="formModal.showModal();"
|
||||
class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
|
||||
>Get in Touch</button
|
||||
>
|
||||
<p class="text-base xl:text-lg font-bold">Or</p>
|
||||
<a
|
||||
href="/assets/admission-form.pdf" download
|
||||
class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
|
||||
>Download Form</a
|
||||
>
|
||||
<button onclick="formModal.showModal();" class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" >Download Form</button>
|
||||
<!-- <p class="text-base xl:text-lg font-bold">Or</p> -->
|
||||
<!-- <a href="/assets/admission-form.pdf" download class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" >Download Form</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -400,11 +392,11 @@ import ContactForm from "../components/ContactForm.vue";
|
|||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
<div class="my-6 flex flex-row">
|
||||
<!-- <div class="my-6 flex flex-row">
|
||||
<p class="animate-bounce text-4xl font-bold">⤷</p>
|
||||
|
||||
<p class="text-2xl font-bold"><a target="_blank" class="text-blue-700" href="/assets/admission-form.pdf" download>Click Here</a> to download admission form</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
<section class="container mx-auto">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Snake Game</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
canvas {
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
||||
|
||||
<script is:inline>
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const gridSize = 20;
|
||||
const tileCount = canvas.width / gridSize;
|
||||
|
||||
let snake = [{ x: 10, y: 10 }];
|
||||
let velocity = { x: 0, y: 0 };
|
||||
|
||||
let food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
|
||||
let score = 0;
|
||||
const gameSpeed = 200;
|
||||
document.addEventListener('keydown', (event) => {
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
if (velocity.y === 0) {
|
||||
velocity = { x: 0, y: -1 };
|
||||
}
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
if (velocity.y === 0) {
|
||||
velocity = { x: 0, y: 1 };
|
||||
}
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
if (velocity.x === 0) {
|
||||
velocity = { x: -1, y: 0 };
|
||||
}
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
if (velocity.x === 0) {
|
||||
velocity = { x: 1, y: 0 };
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
function gameLoop() {
|
||||
const head = { x: snake[0].x + velocity.x, y: snake[0].y + velocity.y };
|
||||
snake.unshift(head);
|
||||
if (head.x === food.x && head.y === food.y) {
|
||||
score++;
|
||||
food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
|
||||
resetGame();
|
||||
}
|
||||
|
||||
for (let i = 1; i < snake.length; i++) {
|
||||
if (head.x === snake[i].x && head.y === snake[i].y) {
|
||||
resetGame();
|
||||
}
|
||||
}
|
||||
draw();
|
||||
}
|
||||
|
||||
function resetGame() {
|
||||
alert(`Game Over! Your score: ${score}`);
|
||||
score = 0;
|
||||
snake = [{ x: 10, y: 10 }];
|
||||
velocity = { x: 0, y: 0 };
|
||||
food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) };
|
||||
}
|
||||
function draw() {
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#0F0';
|
||||
snake.forEach(segment => {
|
||||
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
|
||||
});
|
||||
ctx.fillStyle = '#F00';
|
||||
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
|
||||
|
||||
ctx.fillStyle = '#FFF';
|
||||
ctx.font = '20px Arial';
|
||||
ctx.fillText(`Score: ${score}`, 10, 30);
|
||||
}
|
||||
setInterval(gameLoop, gameSpeed);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,10 +9,25 @@ import FAQ from "../components/FAQ.vue";
|
|||
<Layout title="Holy Wisdom Public School">
|
||||
<main>
|
||||
<div class="pb-16">
|
||||
<section class="container-fluid gradintBack">
|
||||
<div
|
||||
class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
|
||||
>
|
||||
<div class="mx-auto">
|
||||
<img class="w-full" src="/img/new-bg5.png" alt="">
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">
|
||||
An ideal institution for Children’s Education in
|
||||
this area.
|
||||
</h2>
|
||||
<h3 class="text-xl text-justify pb-4">
|
||||
Carefully organized and tiered educational
|
||||
materials, inspired by the principles of Maria
|
||||
Montessori, designed to showcase your excellence as
|
||||
an instructor. Strategically crafted for effective
|
||||
implementation in both traditional classrooms and
|
||||
homeschool environments.
|
||||
</h3>
|
||||
</div>
|
||||
<!-- <section class="container-fluid gradintBack">
|
||||
<div class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4">
|
||||
<div class="w-full">
|
||||
<img
|
||||
class="w-full xl:max-w-2xl"
|
||||
|
|
@ -21,13 +36,11 @@ import FAQ from "../components/FAQ.vue";
|
|||
/>
|
||||
</div>
|
||||
<div class="flex flex-col w-full">
|
||||
<!-- <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">A Montessori-inspired School Curriculum</h1> -->
|
||||
<h1
|
||||
class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]"
|
||||
>
|
||||
HOLY WISDOM PUBLIC SCHOOL
|
||||
</h1>
|
||||
<!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Conduct classroom sessions effortlessly and with assurance.</h2> -->
|
||||
<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">
|
||||
An ideal institution for Children’s Education in
|
||||
this area.
|
||||
|
|
@ -55,8 +68,7 @@ import FAQ from "../components/FAQ.vue";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- grid grid-cols-1 md:grid-cols-2 -->
|
||||
</section>
|
||||
</section> -->
|
||||
<section class="container mx-auto px-4 mt-16 mb-10 2xl:-mb-16">
|
||||
<div class="flex flex-col md:flex-row justify-center gap-4">
|
||||
<div class="w-full md:w-2/3">
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Form Submission</title>
|
||||
</head>
|
||||
<body>
|
||||
<form id="formSection">
|
||||
<p class="text-2xl py-4">Write your Query</p>
|
||||
<div class="pb-3">
|
||||
<label for="name">Name:<span class="text-red-500">*</span></label>
|
||||
<input id="name" name="name" type="text" placeholder="Enter your Name" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone">Mobile:<span class="text-red-500">*</span></label>
|
||||
<input id="phone" name="phone" type="text" placeholder="Enter your Mobile Number" required />
|
||||
</div>
|
||||
<div class="py-3">
|
||||
<label for="email">E-mail ID:<span class="text-red-500">*</span></label>
|
||||
<input id="email" name="email" type="email" placeholder="Enter your E-mail ID" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Write your Query:<span class="text-red-500">*</span></label>
|
||||
<textarea id="message" name="message" rows="7" placeholder="Write your Query" required></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" value="Submit" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script is:inline>
|
||||
document.getElementById('formSection').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = {
|
||||
data: {
|
||||
name: document.getElementById('name').value,
|
||||
phone: document.getElementById('phone').value,
|
||||
email: document.getElementById('email').value,
|
||||
message: document.getElementById('message').value
|
||||
},
|
||||
owner: 'owner_value', // Replace with appropriate value
|
||||
domain: 'domain_value', // Replace with appropriate value
|
||||
referrer: document.referrer
|
||||
};
|
||||
|
||||
fetch('your_backend_endpoint', { // Replace with your backend endpoint URL
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('Data submitted successfully');
|
||||
} else {
|
||||
alert('Error: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred while submitting the form');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue