generated from dwd/boilarplate-astro-tailwind
bnew #7
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>
|
||||||
|
|
@ -87,7 +87,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-24 h-24 rounded-full mb-4"
|
class="w-24 h-24 rounded-full mb-4"
|
||||||
src="public/img/goal.png"
|
src="/img/goal.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-bold">Mission</h3>
|
<h3 class="text-lg font-bold">Mission</h3>
|
||||||
|
|
@ -105,7 +105,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-24 h-24 rounded-full mb-4"
|
class="w-24 h-24 rounded-full mb-4"
|
||||||
src="public/img/rocket.png"
|
src="/img/rocket.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-bold">Vision</h3>
|
<h3 class="text-lg font-bold">Vision</h3>
|
||||||
|
|
@ -124,7 +124,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-24 h-24 rounded-full mb-4"
|
class="w-24 h-24 rounded-full mb-4"
|
||||||
src="public/img/commitee.png"
|
src="/img/commitee.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-bold">Ethics</h3>
|
<h3 class="text-lg font-bold">Ethics</h3>
|
||||||
|
|
@ -141,7 +141,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-24 h-24 rounded-full mb-4"
|
class="w-24 h-24 rounded-full mb-4"
|
||||||
src="public/img/philosophy.png"
|
src="/img/philosophy.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-bold">Philosophy</h3>
|
<h3 class="text-lg font-bold">Philosophy</h3>
|
||||||
|
|
@ -223,7 +223,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue3.png"
|
src="/img/codevalue3.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -243,7 +243,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue4.png"
|
src="/img/codevalue4.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -263,7 +263,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue5.png"
|
src="/img/codevalue5.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -283,7 +283,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue1.png"
|
src="/img/codevalue1.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -303,7 +303,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue2.png"
|
src="/img/codevalue2.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -323,7 +323,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
class="w-24 h-24 flex items-center justify-center rounded-full border-2 border-yellow-400"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="public/img/codevalue6.png"
|
src="/img/codevalue6.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -398,7 +398,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
<img
|
<img
|
||||||
class="rounded-lg shadow-lg"
|
class="rounded-lg shadow-lg"
|
||||||
src="public/img/Objective.jpg"
|
src="/img/Objective.jpg"
|
||||||
alt="objective"
|
alt="objective"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -443,7 +443,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
<div class="w-full md:w-1/2">
|
<div class="w-full md:w-1/2">
|
||||||
<img
|
<img
|
||||||
class="rounded-lg shadow-lg"
|
class="rounded-lg shadow-lg"
|
||||||
src="public/img/objective.jpg"
|
src="/img/objective.jpg"
|
||||||
alt="objective"
|
alt="objective"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<img
|
<img
|
||||||
class="lg:max-w-3xl"
|
class="lg:max-w-3xl"
|
||||||
src="public/img/school-image-3.png"
|
src="/img/school-image-3.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -37,17 +37,9 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
</h3>
|
</h3>
|
||||||
<div class="flex flex-row place-content-between">
|
<div class="flex flex-row place-content-between">
|
||||||
|
|
||||||
<button
|
<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>
|
||||||
onclick="formModal.showModal();"
|
<!-- <p class="text-base xl:text-lg font-bold">Or</p> -->
|
||||||
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"
|
<!-- <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> -->
|
||||||
>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
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -400,11 +392,11 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table> -->
|
</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="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>
|
<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>
|
||||||
<section class="container mx-auto">
|
<section class="container mx-auto">
|
||||||
<div>
|
<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">
|
<Layout title="Holy Wisdom Public School">
|
||||||
<main>
|
<main>
|
||||||
<div class="pb-16">
|
<div class="pb-16">
|
||||||
<section class="container-fluid gradintBack">
|
<div class="mx-auto">
|
||||||
<div
|
<img class="w-full" src="/img/new-bg5.png" alt="">
|
||||||
class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
|
</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">
|
<div class="w-full">
|
||||||
<img
|
<img
|
||||||
class="w-full xl:max-w-2xl"
|
class="w-full xl:max-w-2xl"
|
||||||
|
|
@ -21,13 +36,11 @@ import FAQ from "../components/FAQ.vue";
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-full">
|
<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
|
<h1
|
||||||
class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]"
|
class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]"
|
||||||
>
|
>
|
||||||
HOLY WISDOM PUBLIC SCHOOL
|
HOLY WISDOM PUBLIC SCHOOL
|
||||||
</h1>
|
</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">
|
<h2 class="text-2xl md:text-2xl text-[#3084b5] py-4">
|
||||||
An ideal institution for Children’s Education in
|
An ideal institution for Children’s Education in
|
||||||
this area.
|
this area.
|
||||||
|
|
@ -55,8 +68,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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">
|
<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="flex flex-col md:flex-row justify-center gap-4">
|
||||||
<div class="w-full md:w-2/3">
|
<div class="w-full md:w-2/3">
|
||||||
|
|
@ -355,7 +367,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<div class="bg-card p-4 rounded-lg text-center">
|
<div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority3.jpg"
|
src="/img/Priority3.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
@ -365,7 +377,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<div class="bg-card p-4 rounded-lg text-center">
|
<div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority5.jpg"
|
src="/img/Priority5.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
@ -375,7 +387,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<div class="bg-card p-4 rounded-lg text-center">
|
<div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority6.jpg"
|
src="/img/Priority6.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
@ -386,7 +398,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<div class="bg-card p-4 rounded-lg text-center">
|
<div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority1.jpg"
|
src="/img/Priority1.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
@ -396,7 +408,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<!-- <div class="bg-card p-4 rounded-lg text-center">
|
<!-- <div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority4.jpg"
|
src="/img/Priority4.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
@ -406,7 +418,7 @@ import FAQ from "../components/FAQ.vue";
|
||||||
<div class="bg-card p-4 rounded-lg text-center">
|
<div class="bg-card p-4 rounded-lg text-center">
|
||||||
<img
|
<img
|
||||||
class="w-full h-48 object-cover rounded-lg mb-4"
|
class="w-full h-48 object-cover rounded-lg mb-4"
|
||||||
src="public/img/Priority2.jpg"
|
src="/img/Priority2.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
<!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> -->
|
<!-- <img class="lg:max-w-2xl" src="/img/image.png" alt=""> -->
|
||||||
<img
|
<img
|
||||||
class="lg:max-w-2xl"
|
class="lg:max-w-2xl"
|
||||||
src="public/img/school-bus.png"
|
src="/img/school-bus.png"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -187,7 +187,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<div class="w-full md:w-3/5 lg:w-1/2 px-4">
|
<div class="w-full md:w-3/5 lg:w-1/2 px-4">
|
||||||
<img
|
<img
|
||||||
src="public/img/dream.jpg"
|
src="/img/dream.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
class="inline-block rounded shadow-lg border border-merino-400"
|
class="inline-block rounded shadow-lg border border-merino-400"
|
||||||
/>
|
/>
|
||||||
|
|
@ -222,7 +222,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<div class="w-full md:w-3/5 lg:w-1/2 px-4">
|
<div class="w-full md:w-3/5 lg:w-1/2 px-4">
|
||||||
<img
|
<img
|
||||||
src="public/img/team.jpg"
|
src="/img/team.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
class="inline-block rounded shadow-lg border border-merino-400"
|
class="inline-block rounded shadow-lg border border-merino-400"
|
||||||
/>
|
/>
|
||||||
|
|
@ -717,7 +717,7 @@ import ContactForm from "../components/ContactForm.vue";
|
||||||
>
|
>
|
||||||
<div class="md:w-1/2 flex justify-center mb-6 md:mb-0">
|
<div class="md:w-1/2 flex justify-center mb-6 md:mb-0">
|
||||||
<img
|
<img
|
||||||
src="public/img/visit.png"
|
src="/img/visit.png"
|
||||||
alt="location marker with buildings"
|
alt="location marker with buildings"
|
||||||
class="rounded-full bg-muted p-4"
|
class="rounded-full bg-muted p-4"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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