<!
DOCTYPE html>
<!-- saved from
url=(0088)file:///C:/Users/Digital%20House/Desktop/cours%20BALISAGES/Co
urs%205/Menu%20website.html -->
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>Menu de Navigation</title>
<style>
/* Importation de polices Google */
@import
url("https://fonts.googleapis.com/css2?family=Anton&family=Poppins&disp
lay=swap");
@import
url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=s
wap");
body {
font-family: "Dela Gothic One", sans-serif;
background-color: rgb(236, 233, 233);
}
/* Réinitialisation des styles par défaut pour les listes */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* Style du conteneur de navigation */
nav {
font-family: "Dela Gothic One", sans-serif;
text-align: center; /* Centre le menu horizontalement */
text-transform: uppercase;
}
/* Style des éléments de liste pour un affichage horizontal et un
style de menu */
nav ul li {
display: inline-block; /* Affiche les éléments de liste côte à
côte */
margin-left: 15px; /* Espace entre les éléments de menu */
}
/* Style des liens */
nav ul li a {
text-decoration: none; /* Supprime le soulignement des liens */
color: #333; /* Couleur du texte des liens */
font-weight: bold; /* Texte des liens en gras */
padding: 10px 10px; /* Ajoute un peu d'espace autour du texte
des liens */
transition: all 0.9s ease; /* Transition en douceur pour
l'effet de survol */
}
/* Style pour l'état de survol */
nav ul li a:hover {
background-color: #007bff; /* Couleur de fond au survol */
color: #ffffff; /* Couleur du texte au survol */
border-radius: 5px; /* Bords arrondis pour l'effet de survol */
font-size: 20px;
}
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
/* flex-flow: nowrap; */
flex-wrap: nowrap;
background-color: #bbdefb;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div {
background: #ffecb3;
border: 3px solid #ffcc80;
border-radius: 5px;
padding: 8px;
}
.item1 {
/* flex:0 1 auto; */
align-self: auto;
}
.zone {
background-color: rgb(17, 143, 221);
color: beige;
width: 400px;
margin: 5%;
padding: 15px;
border-radius: 10px;
box-shadow: #333;
transition: background-color 0.5s ease-in-out;
}
.zone:hover {
background-color: rgb(2, 3, 3);
color: beige;
width: 800px;
text-align: left;
margin: 5%;
padding: 15px;
}
/* Styles responsifs */
@media (max-width: 768px) {
nax²v ul {
text-align: center;
}
nav ul li {
display: block; /* Empile les éléments de liste verticalement
*/
margin: 15px; /* Ajoute une marge pour séparer les éléments
empilés */
text-align: left;
font-size: 35px;
}
.zone {
background-color: black;
color: beige;
}
.zone:hover {
background-color: rgb(225, 130, 15);
color: beige;
height: 800px;
}
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
/* flex-flow: nowrap; */
flex-wrap: wrap;
background-color: #bbdefb;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div {
background: #ffecb3;
border: 3px solid #ffcc80;
border-radius: 5px;
padding: 8px;
}
.item1 {
/* flex:0 1 auto; */
align-self: auto;
}
}
</style>
<style type="text/css" id="operaUserStyle"></style>
</head>
<body>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#apropos">A propos de moi</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Prendre rdv</a></li>
</ul>
</nav>
<div class="zone">
<div>
<section class="masthead" role="img" aria-label="Image
Description">
<h1>
Mon gero
</h1>
<button>
moi je parle de moi
</button>
</section>
<h1>Ceci est un titre</h1>
<p style="font-family: poppins">
L'objectif de cet exercice est de créer un menu de navigation
simple
pour un site web en utilisant des listes en HTML stylisées
avec CSS.
Structure HTML Commencez par créer un nouveau fichier HTML.
</p>
<img src="joer.png" alt="" style="width: 250px;">
</div>
</div>
<div class="flex-container">
<div class="item1">
Ceci est un titre L'objectif de cet exercice est de créer un
menu de
navigation simple pour un site web en utilisant des listes en
HTML
stylisées avec CSS. Structure HTML Commencez par créer un
nouveau
fichier HTML.
</div>
<div class="item2">
Ceci est un titre L'objectif de cet exercice est de créer un
menu de
navigation simple pour un site web en utilisant des listes en
HTML
stylisées avec CSS. Structure HTML Commencez par créer un
nouveau
fichier HTML.
</div>
<div class="item3">
Ceci est un titre L'objectif de cet exercice est de créer un
menu de
navigation simple pour un site web en utilisant des listes en
HTML
stylisées avec CSS. Structure HTML Commencez par créer un
nouveau
fichier HTML.
</div>
</div>
</body>
</html>
