Scribd Logo
Importer

Bienvenue sur Scribd !

  • MENU

    Transféré par

    wpbenelux
    8 vues6 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    8 vues6 pages

    MENU

    Transféré par

    wpbenelux

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    <!

    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>

    Vous aimerez peut-être aussi