Scribd Logo
Upload

Welcome to Scribd!

  • 32 views

    School Project Template

    Uploaded by

    Ranjana Pal
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    School Project Template

    Uploaded by

    Ranjana Pal
    32 views8 pages
    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.

    Original Description:

    Original Title

    SchoolProjectTemplate

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    32 views8 pages

    School Project Template

    Uploaded by

    Ranjana Pal
    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.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 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