'updated_header_footer'

parent 42ffce7d
/*========== GOOGLE FONTS ==========*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*========== VARIABLES CSS ==========*/
:root {
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: white;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3 {
margin: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
padding: 0 1rem;
z-index: var(--z-fixed);
}
.header__container {
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
.header__img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.header__logo {
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
.header__search {
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
.header__input {
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
}
.header__input::placeholder {
font-family: var(--body-font);
color: var(--text-color);
}
.header__icon,
.header__toggle {
font-size: 1.2rem;
}
.header__toggle {
color: var(--title-color);
cursor: pointer;
}
/*========== NAV ==========*/
.nav {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: black;
box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
z-index: var(--z-fixed);
transition: .4s;
}
.nav__container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
}
/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
display: none;
}
.nav__logo {
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
.nav__list,
.nav__items {
display: grid;
}
.nav__list {
row-gap: 2.5rem;
}
.nav__items {
row-gap: 1.5rem;
}
.nav__subtitle {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
.nav__link {
display: flex;
align-items: center;
color: var(--text-color);
}
.nav__link:hover {
color: var(--first-color);
}
.nav__icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.nav__name {
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
.nav__logout {
margin-top: 5rem;
}
/* Dropdown */
.nav__dropdown {
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
}
.nav__dropdown-collapse {
background-color: black;
border-radius: .25rem;
margin-top: 1rem;
}
.nav__dropdown-content {
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
.nav__dropdown-item {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
}
.nav__dropdown-item:hover {
color: var(--first-color);
}
.nav__dropdown-icon {
margin-left: auto;
transition: .4s;
}
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/*===== Show menu =====*/
.show-menu {
left: 0;
}
/*===== Active link =====*/
.active {
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px) {
.header__search {
width: 70%;
}
}
@media screen and (min-width: 768px) {
body {
padding: 1rem 3rem 0 6rem;
}
.header {
padding: 0 3rem 0 6rem;
}
.header__container {
height: calc(var(--header-height) + 2rem);
}
.header__search {
width: 300px;
padding: .55rem .75rem;
}
.header__toggle {
display: none;
}
.header__logo {
display: block;
}
.header__img {
width: 40px;
height: 40px;
order: 1;
}
.nav {
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px; /* Reduced navbar */
}
.nav__items {
row-gap: 1.7rem;
}
.nav__icon {
font-size: 1.3rem;
}
/* Element opacity */
.nav__logo-name,
.nav__name,
.nav__subtitle,
.nav__dropdown-icon {
opacity: 0;
transition: .3s;
}
/* Navbar expanded */
.nav:hover {
width: var(--nav-width);
}
/* Visible elements */
.nav:hover .nav__logo-name {
opacity: 1;
}
.nav:hover .nav__subtitle {
opacity: 1;
}
.nav:hover .nav__name {
opacity: 1;
}
.nav:hover .nav__dropdown-icon {
opacity: 1;
}
}
/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
/*========== GOOGLE FONTS ==========*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/*========== VARIABLES CSS ==========*/
:root{
--header-height: 3.5rem;
--nav-width: 219px;
/*========== Colors ==========*/
--first-color: #6923D0;
--first-color: purple;
--first-color-light: #F4F0FA;
--title-color: #19181B;
--text-color: #58555E;
--text-color-light: #A5A1AA;
--body-color: #F9F6FD;
--container-color: #FFFFFF;
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--normal-font-size: .938rem;
--small-font-size: .75rem;
--smaller-font-size: .75rem;
@media screen and (min-width: 1024px){
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
/*========== z index ==========*/
--z-fixed: 100;
}
/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}
body{
margin: var(--header-height) 0 0 0;
padding: 1rem 1rem 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3{
margin: 0;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--container-color);
box-shadow: 0 1px 0 rgba(22, 8, 43, .1);
padding: 0 1rem;
z-index: var(--z-fixed);
&__container{
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
&__img{
width: 35px;
height: 35px;
border-radius: 50%;
}
&__logo{
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
&__search{
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
}
&__input{
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
&::placeholder{
font-family: var(--body-font);
color: var(--text-color);
}
}
&__icon,
&__toggle{
font-size: 1.2rem;
}
&__toggle{
color: var(--title-color);
cursor: pointer;
}
}
/*========== NAV ==========*/
.nav{
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
background-color: var(--container-color);
box-shadow: 1px 0 0 rgba(22, 8, 43, .1);
z-index: var(--z-fixed);
transition: .4s;
&__container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem;
overflow: auto;
scrollbar-width: none; /* For mozilla */
/* For Google Chrome and others */
&::-webkit-scrollbar {
display: none;
}
}
&__logo{
font-weight: var(--font-semi-bold);
margin-bottom: 2.5rem;
}
&__list,
&__items{
display: grid;
}
&__list{
row-gap: 2.5rem;
}
&__items{
row-gap: 1.5rem;
}
&__subtitle{
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
&__link{
display: flex;
align-items: center;
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&__icon{
font-size: 1.2rem;
margin-right: .5rem;
}
&__name{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
white-space: nowrap;
}
&__logout{
margin-top: 5rem;
}
/* Dropdown */
&__dropdown{
overflow: hidden;
max-height: 21px;
transition: .4s ease-in-out;
&-collapse{
background-color: var(--first-color-light);
border-radius: .25rem;
margin-top: 1rem;
}
&-content{
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
}
&-item{
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
&:hover{
color: var(--first-color);
}
}
&-icon{
margin-left: auto;
transition: .4s;
}
/* Show collapse */
&:hover{
max-height: 100rem;
}
/*Rotate icon arrow*/
&:hover &-icon{
transform: rotate(180deg);
}
}
}
/*===== Show menu =====*/
.show-menu{
left: 0;
}
/*===== Active link =====*/
.active{
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px){
.header{
&__search{
width: 70%;
}
}
}
@media screen and (min-width: 768px){
body{
padding: 1rem 3rem 0 6rem;
}
.header{
padding: 0 3rem 0 6rem;
&__container{
height: calc(var(--header-height) + .5rem);
}
&__search{
width: 300px;
padding: .55rem .75rem;
}
&__toggle{
display: none;
}
&__logo{
display: block;
}
&__img{
width: 40px;
height: 40px;
order: 1;
}
}
.nav{
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px;
&__items{
row-gap: 1.7rem;
}
&__icon{
font-size: 1.3rem;
}
&__logo-name,
&__name,
&__subtitle,
&__dropdown-icon{
opacity: 0;
transition: .3s;
}
&:hover{
width: var(--nav-width);
}
&:hover &__logo-name{
opacity: 1;
}
&:hover &__subtitle{
opacity: 1;
}
&:hover &__name{
opacity: 1;
}
&:hover &__dropdown-icon{
opacity: 1;
}
}
}
\ No newline at end of file
box/boy.jpg

41.2 KB

<!--Footer Starts Here-->
<footer class="footer">
<div class="wrapper">
<p>
<a href="" title="ABC Institutes">inteljr</a> &copy; <?php echo date('Y'); ?>. All Rights Reserved.
Powered by <a href="https://www.youtube.com/vijaythapa?sub_confirmation=1" title="Vijay Thapa" target="_blank">Inteljr</a>.
</p>
</div>
</footer>
<!--Footer Ends Here-->
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--Meta Tags Starts Here-->
<meta charset="UTF-8" />
<meta name="author" content="Beyond Boundaries" />
<meta name="description" content="Test Preparation Portal For Beyond Boundaries." />
<meta name="keywords" content="Test Preaparation, Beyond Boundaries, Online Portal, Kathmandu, Nepal" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--Meta Tags Ends Here-->
<title>Online Test Preparation Portal - Beyond Boundaries</title>
<!--COUNT DOWN TIMER STARTS HERE-->
<script src="<?php echo SITEURL; ?>/assets/js/countdown/jquery.js"></script>
<script src="<?php echo SITEURL; ?>/assets/js/countdown/jquery.simple.timer.js"></script>
<script>
$(function(){
$('.timer').startTimer();
});
</script>
<!--COUNT DOWN TIMER ENDS HERE-->
<!--ADDING CKEDITOR HERE-->
<script type="text/javascript" src="<?php echo SITEURL; ?>/assets/ckeditor/ckeditor.js"></script>
<!--CSS File Starts Here-->
<link rel="stylesheet" type="text/css" href="<?php echo SITEURL; ?>/assets/css/style.css" />
<!--CSS File Ends Here-->
</head>
<body>
<!--Header Starts Here-->
<header class="header">
<div class="wrapper clearfix">
<div class="logo">
<img src="<?php echo SITEURL; ?>/images/logo.png" alt="Beyond Boundaries" title="Beyond Boundaries" />
</div>
<div class="head-title">
<h1>Inteljr E-Learning</h1>
</div>
</div>
<div class="progressBar">
<div id="progressBarInner" class="clearfix"></div>
</div>
</header>
<!--Header Ends Here-->
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--========== BOX ICONS ==========-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!--========== CSS ==========-->
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css">
<title>Responsive sidebar submenus</title>
<style>
body{
font-family: 'Raleway', sans-serif;
}
.main-section{
width:80%;
margin:0 auto;
text-align: center;
padding: 0px 5px;
}
.dashbord{
width:32%;
display: inline-block;
background-color:#34495E;
color:#fff;
margin-top: 50px;
}
.icon-section i{
font-size: 30px;
padding:10px;
border:1px solid #fff;
border-radius:50%;
margin-top:-25px;
margin-bottom: 10px;
background-color:#34495E;
}
}
.icon-section p{
margin:0px;
font-size: 20px;
padding-bottom: 10px;
}
.detail-section{
background-color: #2F4254;
padding: 5px 0px;
}
.dashbord .detail-section:hover{
background-color: #5a5a5a;
cursor: pointer;
}
.detail-section a{
color:#fff;
text-decoration: none;
}
.dashbord-green .icon-section,.dashbord-green .icon-section i{
background-color: #16A085;
}
.dashbord-green .detail-section{
background-color: #149077;
}
.dashbord-orange .icon-section,.dashbord-orange .icon-section i{
background-color: #F39C12;
}
.dashbord-orange .detail-section{
background-color: #DA8C10;
}
.dashbord-blue .icon-section,.dashbord-blue .icon-section i{
background-color: #2980B9;
}
.dashbord-blue .detail-section{
background-color:#2573A6;
}
.dashbord-red .icon-section,.dashbord-red .icon-section i{
background-color:#E74C3C;
}
.dashbord-red .detail-section{
background-color:#CF4436;
}
.dashbord-skyblue .icon-section,.dashbord-skyblue .icon-section i{
background-color:#8E44AD;
}
.dashbord-skyblue .detail-section{
background-color:#803D9B;
}
body{
background-image: url('photo-1523821741446-edb2b68bb7a0.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#bg-test{
background-image: url('photo-1523821741446-edb2b68bb7a0.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!--========== HEADER ==========-->
<header class="header">
<div class="header__container">
<img src="assets/img/perfil.jpg" alt="" class="header__img">
<img src="logo.png"width="80"/>
<div class="header__search">
<input type="search" placeholder="Search" class="header__input">
<i class='bx bx-search header__icon'></i>
</div>
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
<!--========== NAV ==========-->
<div class="nav" id="navbar">
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<i class='bx bxs-disc nav__icon' ></i>
<span class="nav__logo-name"><font color="white">INTELJR</span>
</a>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle">Profile</h3>
<a href="#" class="nav__link active">
<i class='bx bx-home nav__icon' ></i>
<span class="nav__name">Home</span>
</a>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon' ></i>
<span class="nav__name">Profile</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Passwords</a>
<a href="#" class="nav__dropdown-item">Mail</a>
<a href="#" class="nav__dropdown-item">Accounts</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-message-rounded nav__icon' ></i>
<span class="nav__name">Messages</span>
</a>
</div>
<div class="nav__items">
<h3 class="nav__subtitle">Menu</h3>
<div class="nav__dropdown">
<a href="#" class="nav__link">
<i class='bx bx-bell nav__icon' ></i>
<span class="nav__name">Notifications</span>
<i class='bx bx-chevron-down nav__icon nav__dropdown-icon'></i>
</a>
<div class="nav__dropdown-collapse">
<div class="nav__dropdown-content">
<a href="#" class="nav__dropdown-item">Blocked</a>
<a href="#" class="nav__dropdown-item">Silenced</a>
<a href="#" class="nav__dropdown-item">Publish</a>
<a href="#" class="nav__dropdown-item">Program</a>
</div>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-compass nav__icon' ></i>
<span class="nav__name">Explore</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon' ></i>
<span class="nav__name">Saved</span>
</a>
</div>
</div>
</div>
<a href="#" class="nav__link nav__logout">
<i class='bx bx-log-out nav__icon' ></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<!--========== CONTENTS ==========--></br>
<center><h2><font color="white">Dashboard</h2></center>
<div class="main-section">
<div class="dashbord">
<div class="icon-section">
<i class="fa fa-users" aria-hidden="true"></i><br>
<small>Students</small>
<p>25</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
<div class="dashbord dashbord-green">
<div class="icon-section">
<i class="fa fa-user" aria-hidden="true"></i><br>
<small>Parents</small>
<p> 25</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
<div class="dashbord dashbord-orange">
<div class="icon-section">
<i class="fa fa-bell" aria-hidden="true"></i><br>
<small>Class</small>
<p>9 New</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
<div class="dashbord dashbord-blue">
<div class="icon-section">
<i class="fa fa-question-circle" aria-hidden="true"></i><br>
<small>Questions</small>
<p>30</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
<div class="dashbord dashbord-red">
<div class="icon-section">
<i class="fa fa-gamepad" aria-hidden="true"></i><br>
<small>Activites</small>
<p>5</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
<div class="dashbord dashbord-skyblue">
<div class="icon-section">
<i class="fa fa-film" aria-hidden="true"></i><br>
<small>Records</small>
<p>6</p>
</div>
<div class="detail-section">
<a href="#">More Info </a>
</div>
</div>
</div>
<br>
<br>
<br>
<!--========== MAIN JS ==========-->
<script src="assets/js/main.js"></script>
</body>
</html>
\ No newline at end of file
<?php
if(!isset($_SESSION['user']))
{
$_SESSION['xss']="<div class='error'>Please login to access control panel</div>";
header('location:'.SITEURL.'admin/login.php');
}
?>
<!--Navigation Starts Here-->
<nav class="menu">
<div class="wrapper">
<ul>
<a href="<?php echo SITEURL; ?>admin/index.php?page=home"><li>Home</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=students"><li>Students</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=parent"><li>Parents</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=faculties"><li>Faculties</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=questions"><li>Questions</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=results"><li>Results</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=settings"><li>Settings</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=my_uploads"><li>upload</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=att"><li>Attendense</li></a>
<a href="<?php echo SITEURL; ?>admin/index.php?page=logout" onclick="return confirm('Are you sure?')"><li>Log Out</li></a>
</ul>
</div>
</nav>
<!--Navigation Ends Here-->
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment