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

                                    
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Arrows Defense Game

Arrows Defense Game

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Bootstrap4 01

Card Bootstrap4 01

ChartJS style01

ChartJS style01

Form Step With B4 Style01

Form Step With B4 Style01

Header with background animate 01

Header with background animate 01

Simple Table With UIKIT

Simple Table With UIKIT

Table Responsive with css 01

Table Responsive with css 01

Texte Block Posts Style01

Texte Block Posts Style01

texte animate effects style 01

texte animate effects style 01

toggle switch style01

toggle switch style01