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

                                    
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

bootstrap4 tabs

bootstrap4 tabs

Timeline style05

Timeline style05

Timeline style04

Timeline style04

Planète animée style01

Planète animée style01

Pie Charts

Pie Charts

Menu aside style01 slide out

Menu aside style01 slide out

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 06

Image hover 06

Form login et créer un compte style01

Form login et créer un compte style01

Dropdown right aligned B4

Dropdown right aligned B4

Cards box with title

Cards box with title