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;
}

                                    
toggle switch style02

toggle switch style02

input radio checkbox b4 style

input radio checkbox b4 style

Vers le haut

Vers le haut

Timeline style04

Timeline style04

Table bootstrap with Datatable

Table bootstrap with Datatable

Radio button style

Radio button style

Pie Charts

Pie Charts

Input file style02

Input file style02

Image hover 04

Image hover 04

Image hover 02

Image hover 02

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Background div gradient

Background div gradient