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

page scroll progress bar

page scroll progress bar

Timeline style08

Timeline style08

Pie Charts

Pie Charts

Pagination with Jquery

Pagination with Jquery

Image hover Flip Flap Style

Image hover Flip Flap Style

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Carousel Bootstrap4

Carousel Bootstrap4

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js