"Entête de page"
Bootstrap 4.0.0 Snippet by kdrclavier

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

Related: See More


Questions / Comments: