@charset "utf-8"; /* * * ██╗ ███████╗ ███╗ ███╗ * ██║ ██╔══██║ ████╗ ████║ * ██║ █████╔═╝ ██╔████╔██║ --- CSS Document --> conception Design Desktop Web : du grands écrans vert les Mobiles * ██ ██║ ██╔══██╗ ██║╚██╔╝██║ * ╚█████╔╝ ███████║ ██║ ╚═╝ ██║ JB Simon MARTINEZ © 2025 - jbmartinez.net * ╚════╝ ╚══════╝ ╚═╝ ╚═╝ * * */ /* *************************************************************************************************** 0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ] ****************************************************************************************************** */ * { /* --- Désigner tous les éléments d'une page en même temps. */ } html { scroll-behavior: smooth; /* scroll souple */ } :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --color-bg :#fff ; --color-text :#000 ; --color-link :#000 ; --color-hover :rgba(0,0,0,0.8) ; --color-5 :# ; } @font-face { /*--- Appel d'un police de caractère personnel ---*/ font-family: "Colonna"; src: url("") format("woff"), url("") format("woff2"); } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ background-color: var(--color-bg); /* Couleur de fond */ color: var(--color-text); /* Couleur du texte */ } /* *************************************************************************************************** 1 - BOOTSTRAP : AMORCER ==> [ col-1, col-md-1, col-lg-1... ] ****************************************************************************************************** */ /* *************************************************************************************************** 2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ] ****************************************************************************************************** */ /*-- Titre --*/ h1, h2, h3, h4, h5 { } .title-page { text-align: center; font-size: 2rem; } .title-page img { display: inline-block; } /*-- Lien hypertexte --*/ a { color: var(--color-link); /* Couleur du lien */ text-decoration:none; } a:hover { color: var(--color-hover); /* Couleur du lien au survol */ text-decoration:none; } button { } button:hover { } button:focus { /* Supprimer border de focus sur les bouton */ outline-style:none; } /*-- images --*/ img { /* width: 100%; pour une gestion automatique des images callé sur la taille du bloque parent (figure, picture) */ vertical-align: bottom; } /*-- Liste --*/ ul, ol { margin: 0; padding: 0; } li { list-style:none; margin-left:0; padding-left:0; } /*-- Tableau --*/ table { } tr { } td { } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ] ****************************************************************************************************** */ /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; height: 75vh; margin: 3rem auto; } #grid { position: relative; width: 600px; height: 600px; background-image: url("../img/grid.png"); background-size: contain; } #grid ul { padding: 3% 3.5%; } #grid ul li { position:relative; display: inline-block; width: 26.8%; height: 26.8%; margin: 3.6% 3%; } #grid ul li img { width: 100%; height: 100%; filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.5)); } #grid ul li a { display: block; width: 100%; height: 100%; background-color: transparent; } #grid ul li a:hover { background-color: rgb(0, 89, 255, 0.2); } #nav-gamers { position: relative; width: 600px; margin: 0 auto; } #nav-gamers ul { display: flex; flex-wrap: wrap; justify-content:space-between; align-items: center; padding: 1rem; } #nav-gamers ul li { display:flex } /* --- FOOTER : PIED DE PAGE --- */ footer { text-align: center; } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - MEDIA QUERIES : GESTION TAILLE ECRAN => Responsive Web Design (RWD) ****************************************************************************************************** */ /* BREAKPOINT XXL LARGE SCREEN : - 1400px */ @media (max-width: 1400px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* BREAKPOINT XL LARGE SCREEN : - 1200px */ @media (max-width: 1200px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* BREAKPOINT MEDIUM SIZE SCREEN : - 992px */ @media (max-width: 992px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* BREAKTHROUGH POINT INTERMEDIATE SIZE SCREEN : - 768px */ @media (max-width: 768px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* BREAKPOINT SMALL SCREEN SIZE : - 576px */ @media (max-width: 576px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } }