@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2022 - jb.martinez.free.fr --> conception Mobile First : du Mobile vert les grands écrans */ /* *************************************************************************************************** 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-1 : #000000; --color-2 : #FFFFFF; --color-3 : #01429c; --color-4 : red; } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ background-color: var(--color-2); font-size: 16px; } /* *************************************************************************************************** 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 { padding-top: 0; width: 30vw; transform: translateY(1rem); } /*-- Lien hypertexte --*/ a { color: var(--color-1); text-decoration:none; } a:hover { color: var(--color-4); 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) */ width: 100%; height: auto; vertical-align: bottom; } /*-- Liste --*/ ul, ol { margin: 0; padding: 0; } li { list-style:none; margin-left:0; padding-left:0; } /*-- Tableau --*/ table { } tr { } td { } .dsp-small-none { display: none!important; } .dsp-small { display: none!important; } .dsp-320-none { display: none!important; } .dsp-320-block { display: inline-block!important; } .dsp-320 { display: block!important; } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : Header, nav, main, footer ] ****************************************************************************************************** */ /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { position: relative; z-index: 200; } #logo { display: none; } .fa-magnifying-glass, .fa-basket-shopping, .fa-user-tie { font-size: 1.5rem; } /* --- NAV : MENU --- */ header > div, nav { width: 100%; } header > div:nth-child(1) { width: auto; } nav { padding: 0.5rem 1rem; } #group-sous-nav { display: none; } #check-nav { display: none; } header nav li a { position: relative; display: block; padding: 0.5rem 1rem 0; font-size: 1rem; } header > div nav a { padding-right: 1.2rem; background-image: url("../img/angle-down-solid.svg")!important; background-repeat: no-repeat; background-position: right 0.7rem; background-size: 12px; text-transform: uppercase; } header > div nav a:hover { background-image: url("../img/angle-down-red.svg")!important; } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { position: relative; min-height: 100vh!important; } #group-slider { position: relative; width: 100%; height: auto; } #link-niv1 { position: relative; z-index: 5; width: 100%; margin: 3rem 0 5rem; } #link-niv1 li { width: 80px; height: 80px; margin-right: 1rem; } #link-niv1 li a { position: relative; display: block; text-transform: uppercase; font-size: 1.6rem; text-align: center; color: var(--color-3); font-family: 'League Gothic', sans-serif; } #link-niv1 li a:hover { color: var(--color-4); } #link-niv1 svg { width: 100%; height: auto; } .link1 { padding-left: 0.5rem; } #svg-console .st1{ fill:#FFFFFF; stroke:var(--color-3); stroke-width:10; stroke-miterlimit:10; } #svg-console .st2{ fill: var(--color-3); stroke: var(--color-3); stroke-width:10; stroke-miterlimit:10; } #link-niv1 a:hover #svg-console .st1 { stroke:var(--color-4); } #link-niv1 a:hover #svg-console .st2 { fill:var(--color-4); stroke:var(--color-4); } #svg-vintage .st2{ fill:#FFFFFF; stroke:var(--color-3); stroke-width:10; stroke-miterlimit:10; } #svg-vintage .st3{ fill:var(--color-3); } #link-niv1 a:hover #svg-vintage .st2{ stroke:var(--color-4); } #link-niv1 a:hover #svg-vintage .st3{ fill:var(--color-4); } #svg-societe .st2{ fill:#FFFFFF; stroke:var(--color-3); stroke-width:10; stroke-miterlimit:10; } #svg-societe .st3{ fill:var(--color-3); } #link-niv1 a:hover #svg-societe .st2{ fill:#FFFFFF; stroke:var(--color-4); stroke-width:10; stroke-miterlimit:10; } #link-niv1 a:hover #svg-societe .st3{ fill:var(--color-4); } /* --- FOOTER : PIED DE PAGE --- */ footer { position: relative; z-index: 5; color: var(--color-2); margin-top: 3rem; font-size: 12px; } footer nav { width: 100%; text-align: center; background-image: url("../img/ligne.svg"); background-repeat: no-repeat; background-position: bottom; background-size: 100%; height: 15vh; margin-bottom: 2rem; } footer nav li { width: auto; height: auto; margin-right: 1rem; } footer nav li:last-child { margin-right: 0; } footer nav a { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-right: 1rem; width: 40px; height: 40px; font-size: 25px; background-color: var(--color-2); border-radius: 20px; box-shadow: 10px 5px 5px rgba(0,0,0,0.25); } footer section { background-color: var(--color-3); padding: 3rem 0.5rem; } footer section a { color: var(--color-2); } footer section a:hover { color: var(--color-4); } footer section div { width: 100%; } footer section div:nth-child(1) { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-right: 0; width: calc(100% - 0); } footer section div:nth-child(2) ul { width: 40%; padding: 0.1rem; } nav { padding: 0.5rem 1rem; } footer section div:nth-child(2) ul:nth-child(3) { width: 20%; } footer section div:nth-child(2) ul:last-child { width: 100%; padding: 1rem; } .logo-xxl { width: auto; height: 50px; } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - MEDIA QUERIES : GESTION TAILLE ECRAN ****************************************************************************************************** */ /* SMALL SCREEN : smartphone à partir de 576px */ @media (min-width: 576px) { .dsp-320-none { display: inline-block!important; } .dsp-320, .dsp-320-block { display: none!important; } /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } h1 { width: 20vw; } .fa-magnifying-glass, .fa-basket-shopping, .fa-user-tie { font-size: 1rem; } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } footer section { padding: 3rem 1rem; } footer section div { padding: 0 0.25rem; } footer section div:nth-child(2) ul { width: 40%; padding: 1rem; } footer nav { height: 25vh; } footer nav a { margin-right: 1rem; width: 60px; height: 60px; font-size: 40px; } } /* MEDIUM SCREEN : Tablette à partir de 768px */ @media (min-width: 768px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */ @media (min-width: 992px) { .dsp-small-none { display: inline-block!important; } .dsp-small { display: table-cell!important; } /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } header > div, nav { width: 50%; } h1 { width: 8vw; transform: translateY(0); } /* --- NAV : MENU --- */ nav { } #check-nav:checked ~ #group-sous-nav { display: block; } @keyframes slidein { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(0) scaleY(1); } } @keyframes slideoff { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-50%) scaleY(0); } } #group-sous-nav { position: absolute; z-index: 150; top: 3.1rem; left: 0; width: 100%; height: 30vh; color: var(--color-1); background-color: rgba(1,66,156,0.9); border-top: 5px double var(--color-1); border-bottom: 5px double var(--color-1); } .console-sous-nav { position: relative; display: flex; width: 100%; height: 30vh; flex-direction: row; justify-content: center; align-items: center; } #console-splide img { width: auto; height: 100px; } #vintage-splide img { width: auto; height: 40px; } #societe-splide img { width: auto; height: 100px; } .splide { position: relative; width: 70%; visibility: visible; } .splide__list { padding-bottom: 2rem!important; } .splide__pagination { transform: translateY(2rem); } .splide__arrow--prev { transform: translateX(-7rem) translateY(-2rem); } .splide__arrow--next { transform: translateX(5rem) translateY(-2rem); } .splide__slide:hover { -webkit-filter: drop-shadow(2px 2px 10px red); filter: drop-shadow(2px 2px 10px red); } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { min-height: 53vh; } #header-slider::after { display: block; } /*-- ICON --*/ #link-niv1 { margin: 3rem 0; } #link-niv1 li { width: 80px; height: 80px; } /* --- FOOTER : PIED DE PAGE --- */ footer { font-size: 12px; } footer section { padding: 3rem 4rem; } footer section div { width: 60%; } footer section div:nth-child(1) { padding-right: 1rem; width: calc(40% - 2rem); } footer nav a { margin-right: 1rem; width: 80px; height: 80px; font-size: 50px; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */ @media (min-width: 1200px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } .splide { position: relative; width: 60%; visibility: visible; } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /*-- ICON --*/ #link-niv1 li { width: 80px; height: 80px; } /* --- FOOTER : PIED DE PAGE --- */ footer { font-size: 12px; } footer section div { width: 50%; } footer section div:nth-child(1) { padding-right: 2rem; width: calc(50% - 2rem); } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1400px */ @media (min-width: 1400px) { body { /* --- Désigner le contenue de la page html */ font-size: 16px; } /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ h1 { padding-top: 0; width: 5vw; } nav { } header nav li a { position: relative; display: block; padding: 0 1rem; font-size: 1.5rem; } header > div nav a { padding-right: 2rem; background-image: url("../img/angle-down-solid.svg")!important; background-repeat: no-repeat; background-position: right; background-size: 20px; text-transform: uppercase; } .splide { position: relative; width: 40%; visibility: visible; } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /*-- ICON --*/ #link-niv1 li { width: 120px; height: 120px; } /* --- FOOTER : PIED DE PAGE --- */ footer { font-size: 16px; } }