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

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Nav Menu style02

Nav Menu style02

Image hover 06

Image hover 06

Image hover 03

Image hover 03

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Blog post card 01

Blog post card 01

Bloc resizable with jquery

Bloc resizable with jquery

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table