Scribd
Upload
62 views8 pages

School Project Template

This document contains the HTML and CSS code for the frontend of a school management system website. The HTML defines the layout of the sidebar navigation menu, profile information, and main content area. The CSS styles these elements and components. Key features included are a responsive sidebar menu, user profile, links to pages like classes, students, teachers, and a hamburger menu icon to toggle the sidebar on smaller screens.

Uploaded by

Ranjana Pal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
62 views8 pages

School Project Template

This document contains the HTML and CSS code for the frontend of a school management system website. The HTML defines the layout of the sidebar navigation menu, profile information, and main content area. The CSS styles these elements and components. Key features included are a responsive sidebar menu, user profile, links to pages like classes, students, teachers, and a hamburger menu icon to toggle the sidebar on smaller screens.

Uploaded by

Ranjana Pal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

AdminMst.

Master

<html>
<head runat="server">
<title>School Management Project</title>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<link href="Content/styles.css" rel="stylesheet" />

<script>
$(document).ready(function () {
$(".siderbar_menu li").click(function () {
$(".siderbar_menu li").removeClass("active");
$(this).addClass("active");
});

$(".hamburger").click(function () {
$(".wrapper").addClass("active");
});

$(".close, .bg_shadow").click(function () {
$(".wrapper").removeClass("active");
});
});
</script>

<asp:ContentPlaceHolder ID="head" runat="server">


</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">

<div class="wrapper">
<div class="sidebar">
<div class="bg_shadow"></div>
<div class="sidebar_inner">
<div class="close">
<i class="fas fa-times"></i>
</div>

<div class="profile_info">
<div class="profile_img">
<img src="../Image/logo.png" alt="profile_img">
</div>
<div class="profile_data">
<p class="name">Admin Module</p>
<span><i class="fas fa-map-marker-alt"></i>Mumbai,
India</span>
</div>
</div>

<ul class="siderbar_menu">
<li>
<a href="../Admin/AdminHome.aspx">
<div class="icon"><i class="fas fa-home"></i></div>
<div class="title">Home</div>
</a>
</li>
<li>
<a href="#">
<div class="icon"><i class="fas
fa-hotel"></i></div>
<div class="title">Class</div>
<div class="arrow"><i class="fas fa-chevron-
down"></i></div>
</a>
<ul class="accordion">
<li><a href="../Admin/AddClass.aspx"
class="active"><i class="fas fa-user-plus pr-1"></i>Add Class</a></li>
<li><a href="../Admin/ClassFees.aspx"
class="active"><i class="fas fa-money-bill-alt pr-1"></i>Class Fees</a></li>
</ul>
</li>
<li>
<a href="../Admin/Subject.aspx">
<div class="icon"><i class="fas fa-book"></i></div>
<div class="title">Subjects</div>
</a>
</li>
<li>
<a href="#">
<div class="icon"><i class="fas
fa-user-tie"></i></div>
<div class="title">Teachers</div>
<div class="arrow"><i class="fas fa-chevron-
down"></i></div>
</a>
<ul class="accordion">
<li><a href="../Admin/Teacher.aspx"
class="active"><i class="fas fa-user-plus pr-1"></i>Add Teachers</a></li>
<li><a href="../Admin/TeacherSubject.aspx"
class="active"><i class="fas fa-book-reader pr-1"></i>Teachers Subject</a></li>
<li><a href="../Admin/Expense.aspx"
class="active"><i class="fas fa-hand-holding-usd pr-1"></i>Add Expense</a></li>
<li><a href="../Admin/ExpenseDetails.aspx"
class="active"><i class="fas fa-money-check-alt pr-1"></i>Expense Details</a></li>
</ul>
</li>
<li>
<a href="#">
<div class="icon"><i class="fas fa-user-
graduate"></i></div>
<div class="title">Students</div>
<div class="arrow"><i class="fas fa-chevron-
down"></i></div>
</a>
<ul class="accordion">
<li><a href="../Admin/Student.aspx"
class="active"><i class="fas fa-users pr-1"></i>Add Students</a></li>
<li><a href="../Admin/StudAttendanceDetails.aspx"
class="active"><i class="far fa-list-alt pr-1"></i>Attendance Details</a></li>
</ul>

</li>
<li>
<a href="#">
<div class="icon"><i class="fas fa-clipboard-
list"></i></div>
<div class="title">Examination</div>
<div class="arrow"><i class="fas fa-chevron-
down"></i></div>
</a>
<ul class="accordion">
<li><a href="../Admin/Marks.aspx" class="active"><i
class="fas fa-notes-medical pr-1"></i>Add Marks</a></li>
<li><a href="../Admin/MarkDetails.aspx"
class="active"><i class="fas fa-clipboard-check pr-1"></i>Marks Details</a></li>
</ul>
</li>
<li>
<a href="#">
<div class="icon"><i class="fas fa-calendar-
alt"></i></div>
<div class="title">Attendance</div>
<div class="arrow"><i class="fas fa-chevron-
down"></i></div>
</a>
<ul class="accordion">
<li><a href="../Admin/EmployeeAttendance.aspx"
class="active"><i class="fas fa-calendar-plus pr-1"></i>Employee
Attendance</a></li>
<li><a href="../Admin/EmpAttendanceDetails.aspx"
class="active"><i class="fas fa-calendar-check pr-1"></i>Employee Details</a></li>
</ul>
</li>
</ul>
<div class="logout_btn">
<asp:LinkButton ID="btnLogOut" runat="server"
CausesValidation="false">Logout</asp:LinkButton>
</div>

</div>
</div>
<div class="main_container">
<div class="navbar">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<a href="#">Mithila English High School</a>
</div>
</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">


</asp:ContentPlaceHolder>

</div>
</div>

</form>
</body>
</html>
styles.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|
Trade+Winds&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Montserrat';
}

body{
background: #e7f1ff;
font-size: 14px;
letter-spacing: 1px;
}

.wrapper{
display: flex;
width: 100%;
}

.sidebar{
position: relative;
}

.sidebar .bg_shadow{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.sidebar_inner {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: #5558c9;
z-index: 999;
transition: all 0.3s ease;
}

.main_container {
margin-left: 250px;
width: calc(100% - 250px);
transition: all 0.3s ease;
}
.sidebar_inner .profile_info {
padding: 20px;
text-align: center;
}

.sidebar_inner .profile_info .profile_img {


width: 100px;
margin: 0 auto 5px;
}

.sidebar_inner .profile_info .profile_img img {


width: 100%;
display: block;
}

.sidebar_inner .profile_info .profile_data .name {


font-size: 18px;
color: #fff;
margin-bottom: 5px;
font-family: 'Trade Winds';
}

.sidebar_inner .profile_info .profile_data span {


color: #c4dcff;
}

.sidebar_inner .siderbar_menu{
height: 500px;
overflow: auto;
}

.sidebar_inner .siderbar_menu > li > a {


padding: 12px 20px;
display: flex;
align-items: center;
position: relative;
margin-bottom: 1px;
color: #c4dcff;
}

.sidebar_inner .siderbar_menu > li > a .icon {


font-size: 25px;
margin-right: 15px;
}

.sidebar_inner .siderbar_menu > li.active > a,


.sidebar_inner .siderbar_menu > li > a:hover{
background: #3d3d79;
color: #fff;
text-decoration: none !important;
}

.sidebar_inner .siderbar_menu > li > a .arrow{


position: absolute;
top: 20px;
right: 20px;
transition: all 0.3s ease;
}
.sidebar .logout_btn a{
position: absolute;
bottom: 20px;
left: 20px;
width: 210px;
border: 1px solid #fff;
color: #fff;
border-radius: 5px;
font-weight: 600;
padding: 10px;
text-align: center;
transition: all 0.3s ease;
}

.sidebar .logout_btn a:hover {


background: #fff;
color: #3d3d79;
text-decoration: none;
}

.sidebar_inner .close{
position: absolute;
top: 5px;
right: 15px;
font-size: 25px;
color: #fff;
cursor: pointer;
display: none;
}

.sidebar_inner .close:hover,
.navbar .hamburger:hover{
opacity: 0.7;
}

.navbar{
background: #fff;
height: 50px;
width: 100%;
box-shadow: 0 3px 5px rgba(0,0,0,0.125);
display: flex;
align-items: center;
padding: 0 20px;
}

.navbar .hamburger{
font-size: 25px;
cursor: pointer;
margin-right: 20px;
color: #5558c9;
display: none;
}

.navbar .logo a{
font-family: 'Trade Winds';
color: #5558c9;
font-size: 20px;
}
.content{
padding: 20px;
display: flex;
flex-wrap: wrap;
}

.content .item{
background: #fff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.125), -2px -2px 4px rgba(0,0,0,0.125);
margin: 10px 5px;
width: 31.8%;
padding: 20px;
}

.accordion{
background: #6f6fc7;
padding-left: 20px;
height: 0px;
transition: all 0.3s ease;
overflow: hidden;
}

.accordion li a{
display: block;
color: #c4dcff;
padding: 12px 0;
padding-left: 10px;
}

.accordion li:last-child a{
border-bottom: 0px;
}

.accordion li a.active {
color: #fff;
text-decoration: none;
}

.accordion li a:hover {
background: #3d3d79;
color: #fff;
}

.siderbar_menu > li.active .accordion {


height:auto;
}

.siderbar_menu > li.active .arrow{


transform: rotate(180deg);
transition: all 0.3s ease;
}

@media (max-width: 1024px) {


.sidebar_inner{
left: -115%;
transition: all 0.5s ease;
}
.main_container{
width: 100%;
margin-left: 0;
}
.navbar .hamburger,
.sidebar_inner .close{
display: block;
}
.content .item{
width: 47%;
}
.wrapper.active .sidebar_inner{
left: 0;
transition: all 0.5s ease;
}

.wrapper.active .sidebar .bg_shadow{


visibility: visible;
opacity: 0.7;
}
}

@media (max-width: 528px) {


.content .item{
width: 100%;
}
}

You might also like