generated from dwd/boilarplate-astro-tailwind
Compare commits
No commits in common. "f7eaa9199b363829ecb7a18731f857e383be2e4d" and "2627d4109f1ef74995cc0607c920481e06bdc90f" have entirely different histories.
f7eaa9199b
...
2627d4109f
Binary file not shown.
|
Before Width: | Height: | Size: 454 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 709 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 KiB |
|
|
@ -1,873 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,657 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<li class="nav-link" style="--i: 0s">
|
|
||||||
<a href="#" class="link-class"> Academics<i class="fas fa-caret-down"></i></a>
|
|
||||||
<div class="dropdown">
|
|
||||||
<ul class="ul-class">
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Programs Offered<i class="fas fa-caret-down"></i></a>
|
|
||||||
<div class="dropdown second">
|
|
||||||
<ul class="ul-class">
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Humanities</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Science</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Commerce</a>
|
|
||||||
</li>
|
|
||||||
<div class="arrow"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">More<i class="fas fa-caret-down"></i></a>
|
|
||||||
<div class="dropdown second">
|
|
||||||
<ul class="ul-class">
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 1</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 2</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 3</a>
|
|
||||||
</li>
|
|
||||||
<div class="arrow"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 1</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 2</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 3<i class="fas fa-caret-down"></i></a>
|
|
||||||
<div class="dropdown second">
|
|
||||||
<ul class="ul-class">
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 1</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 2</a>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 3</a>
|
|
||||||
</li>
|
|
||||||
<div class="arrow"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="dropdown-link">
|
|
||||||
<a href="#" class="link-class">Link 4</a>
|
|
||||||
</li>
|
|
||||||
<div class="arrow"></div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
@ -37,9 +37,17 @@ 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 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>
|
<button
|
||||||
<!-- <p class="text-base xl:text-lg font-bold">Or</p> -->
|
onclick="formModal.showModal();"
|
||||||
<!-- <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> -->
|
class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
|
||||||
|
>Get in Touch</button
|
||||||
|
>
|
||||||
|
<p class="text-base xl:text-lg font-bold">Or</p>
|
||||||
|
<a
|
||||||
|
href="/assets/admission-form.pdf" download
|
||||||
|
class="text-sm xl:text-lg rounded-lg text-white shadow-2xl px-4 md:px-8 p-3 bg-[#3084b5] te border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
|
||||||
|
>Download Form</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -392,11 +400,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>
|
||||||
|
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
<!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,25 +9,10 @@ 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">
|
||||||
<div class="mx-auto">
|
<section class="container-fluid gradintBack">
|
||||||
<img class="w-full" src="/img/new-bg5.png" alt="">
|
<div
|
||||||
</div>
|
class="container mx-auto px-4 flex flex-col-reverse xl:flex-row place-items-center gap-y-4"
|
||||||
<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"
|
||||||
|
|
@ -36,11 +21,13 @@ 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.
|
||||||
|
|
@ -68,7 +55,8 @@ import FAQ from "../components/FAQ.vue";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section> -->
|
<!-- grid grid-cols-1 md:grid-cols-2 -->
|
||||||
|
</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">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!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