generated from dwd/boilarplate-astro-tailwind
873 lines
37 KiB
Plaintext
873 lines
37 KiB
Plaintext
<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> |