generated from dwd/boilarplate-astro-tailwind
last update
Suvodip
parent
7bda9dbf6d
commit
efb4a5b83f
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue