Header Aside Footer Admin
<!DOCTYPE html>
<html lang="en">
<head>
<title>HEADER ASIDE FOOTER ADMIN | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="HEADER ASIDE FOOTER ADMIN">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header-box">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h2 class="logo-text">
<strong><i class="fa fa-code"></i> NGLESSON.COM <i class="fa fa-code"></i></strong>
</h2>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 text-right">
<a class="btn btn-vert btn-sm mt-3 mr-5 btn-vrt-3D" href=""><i class="fa fa-plus"></i> Déposer votre question</a>
<ul class="nav navbar-right pull-right mt-2">
<li>
<a href="#">
<i class="fa fa-envelope-o icon"></i>
<i class="fa fa-circle" id="notif-dot"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bell-o icon"></i>
<i class="fa fa-circle"></i>
</a>
</li>
<li class="menu-profil">
<a >
<img src="avatar.png" class="img-responsive img-circle" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="section-box">
<a href="" data-target="#sidebar" data-toggle="collapse" class="d-md-none btn btn-vert mt-2 btn-md pull-right"><i class="fa fa-bars"></i></a>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-12 col-xs-12 collapse d-md-flex bg-blu pt-2 min-vh-100" id="sidebar">
<ul class="nav flex-column flex-nowrap menup">
<li class="nav-item navp">
<a class="nav-link collapsed" href="#submenu4" data-toggle="collapse" data-target="#submenu4"><i class="fa fa-user-circle"></i> Profil</a>
<div class="collapse" id="submenu4" aria-expanded="false">
<ul class="flex-column pl-2 ml-2 nav">
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Mes informations</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Mes questions</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Mes notifications</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Mes messages</a></li>
</ul>
</div>
</li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-home"></i> Acceuil</a></li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-info-circle"></i> Apropos</a></li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-image"></i> Intégration web</a></li>
<li class="nav-item navp">
<a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-book"></i> Cours</a>
<div class="collapse" id="submenu1" aria-expanded="false">
<ul class="flex-column pl-2 ml-2 nav">
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
</ul>
</div>
</li>
<li class="nav-item navp">
<a class="nav-link collapsed" href="#submenu2" data-toggle="collapse" data-target="#submenu2"><i class="fa fa-code"></i> Solutions techniques</a>
<div class="collapse" id="submenu2" aria-expanded="false">
<ul class="flex-column pl-2 ml-2 nav">
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
</ul>
</div>
</li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-users"></i> Questions & Réponse</a></li>
<li class="nav-item navp">
<a class="nav-link collapsed" href="#submenu3" data-toggle="collapse" data-target="#submenu3"><i class="fa fa-cogs"></i> Services</a>
<div class="collapse" id="submenu3" aria-expanded="false">
<ul class="flex-column pl-2 ml-2 nav">
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
<li class="nav-item mt-2"><a class="nav-link py-0" href="#"><i class="fa fa-circle fa-tiree"></i> Orders</a></li>
</ul>
</div>
</li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-users"></i> Visiteurs</a></li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-shield"></i> Conditions générale</a></li>
<li class="nav-item navp"><a class="nav-link" href="#"><i class="fa fa-sitemap"></i> Plan de site</a></li>
<li class="nav-item navp"></li>
</ul>
</div>
<div class="row col-xl-10 col-lg-10 col-md-9 col-sm-12 col-xs-12">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12 col-12 text-center mx-auto">
<div class="pt-5">
<img src="https://www.mezganisaid.com/assets/img/products/nglesson.png"
class="img-responsive" width="300px" height="auto"><br>
<p class="mt-5">
Bienvenue sur NGLESSON Le site web de FUTUR DÉVELOPPEUR(SE) WEB AU MONDE. Mes intégrations,
mes cours et mes solutions techniques sont destinées aux à tous publics intéréssé par le web. 100% Gratuit.
</p>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 col-12">
<div class="pt-5">
<img src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p class="text-center"> © 2021 NGLESSON Tous droits réservés | Design by MEZGANI Said </p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #E6ECF0;
width: 100%;
height:100%;
font-family: 'Ubuntu', sans-serif;
overflow-x: hidden;
}
.text-blu {color:#434957;}
.text-orange {color:#F07355;}
.text-verte {color:#02AB83;}
.img-circle{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.bg-vert{background:#02AB83;}
.bg-blu{background: #434957;}
/***********************BUTTON******************************************/
.btn-vert {
background-color: #02AB83;
border: 1px solid #02AB83;
color: #FFF !important;
}
.btn-orange {
background-color: #FF9D0C;
border: 1px solid #FF9D0C;
color: #FFF !important;
}
.btn-vrt-3D {
/*display: block;*/
margin: auto;
cursor: pointer;
margin-top: 10px;
padding: 4px 22px;
border-bottom: 5px solid #434957;
font-weight: bold;
font-size: 16px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
outline: none;
-webkit-appearance: none;
}
.btn-orange-3D {
/*display: block;*/
margin: auto;
cursor: pointer;
margin-top: 10px;
padding: 4px 22px;
border-bottom: 5px solid #02AB83;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
outline: none;
-webkit-appearance: none;
}
/*************************** HEADER ***************************/
.header-box {
width: 100%;
height: auto;
min-height: 70px;
/*position: fixed;*/
top: 0;
left: 0;
background: #F07355;
z-index: 2;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
}
.header-box a {
text-decoration: none;
color:#FFF;
}
.logo-text{
color: #FFF;
font-weight: bold;
font-size: 22px;
}
#sidebar .nav-link{
color: #FFF !important;
font-weight: 600;
}
.header-box .container {
max-width: 83%;
height: 100%;
}
.header-box .row {
height: 100%;
align-items: center;
}
.header-box .row .col-lg-4:nth-child(2) {
display: flex;
justify-content: center;
}
.header-box .row .col-lg-4:nth-child(3) {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-box .row .col-lg-4:nth-child(3) .nav {
align-items: center;
}
.header-box .icon {
font-size: 24px;
font-weight: 600;
}
.header-box .fa-circle {
font-size: 13px;
color: #02AB83;
position: relative;
bottom: 13px;
right: 10px;
padding: 0;
}
.header-box .navbar-right li {
padding: 9px;
}
.header-box .navbar-right li:nth-child(2) {
padding-right: 0;
}
.header-box .navbar-right li:nth-child(3) {
padding-left: 7px;
}
.menu-profil img{
width: 40px;
height: 40px;
cursor: pointer;
}
/************************ END HEADER **************************/
/**************************Aside************************************/
.nav-link[data-toggle].collapsed:after {
content: "▾";
}
.nav-link[data-toggle]:not(.collapsed):after {
content: "▴";
}
.fa-tiree{
font-size: 10px;
}
.menup .navp{
margin-top: 10px;
border-top: 1px solid #CCC;
width: 100%;
}
/**************************EN Aside************************************/
/*************************Footer*************************************/
footer{
background: #F07355;
width: 100%;
height: auto;
padding-top: 20px;
padding-bottom: 10px;
}
