<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/conteneur.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header role="header">
<!--Menu de naaivgatin-->
<nav class="menu" role="navigation">
<div class="inner">
<!--Logo header-->
<div class="m-left">
<img src="images/logo/logo.jpg" class="logo"/>
</div>
<!--Fin Logo header-->
<!--Menu responsible-->
<div class="m-right">
<a href="index.html" class="m-link" title="Accueil"><i class="fa fa-home" aria-hidden="true"></i>Acceuil</a>
<a href="produits.html" class="m-link" title="Prestations et Produits"><i class="fa fa-suitcase" aria-hidden="true"></i>Prestation et Conseil</a>
<a href="forum.html" class="m-link" title="Forum"><i class="fa fa-wpforms" aria-hidden="true"></i>Forum</a>
<a href="contacts.html" class="m-link" title=Contacts><i class="fa fa-envelope"></i>Contacts</a>
</div>
<!--Fin Menu responsible-->
</div>
</nav>
</header>
<!--A la ligne !-->
<br>
<br>
<br>
<br>
<!-- Fin de la ligne !-->
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,400i,500,500i,700,700i');
.menu
{
background: #CC7A16;
width: 100%;
height: 66px;
line-height: 66px; /*Interligne pour placer le menu au centre*/
letter-spacing: 1px; /*Les espacement entre les lettres*/
transition: 0.3s ease-in-out;
}
.menu:hover
{
box-shadow: 00px 06px 20px #9e9e9e;
background: #F9A100;
}
.m-left{
float: left; /* Placer le logo a gauche*/
}
.logo
{
margin: 0; padding: 0; /*Supprimer les marges*/
}
.m-right
{
float: right; /*Placer les texte du menu a droite*/
}
.m-link
{
text-decoration: none; /* Supprimer les decorations des liens dans le menu*/
color: aliceblue;
text-transform: capitalize; /* Transformer le texte en majuscule*/
font-weight: 900; /*Augmenter la taille des ecritures dans le menu*/
padding: 0; margin: 0 10px; /* Pour espacer les liens*/
transition: all 0.3s ease-in-out; /*Une transition de bordure des liens du menu au survole de la souris*/
border-bottom: 02px solid transparent; /*Definition de la marge au survole de sourir*/
}
.m-link:hover
{
text-decoration: none;
color:aliceblue;
border-color: #FFFFFF;
padding-bottom: 03px; /*L'espacement des interlinge entre la transition et le texte*/
}
.m-link i
{
margin-right: 3px;
}
