@charset "utf-8"; /* ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## JB Simon MARTINEZ © 2021 - jb-martinez.net --> 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 :# ; --color-2 :# ; --color-3 :# ; --color-4 :# ; --color-5 :# ; } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ } /* *************************************************************************************************** 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 { } /*-- Lien hypertexte --*/ a { } a:hover { 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 { } #poppie-card { position: relative; width: 1200px; } body { background: #edf2f4; perspective: 1000px; transform-style: preserve-3d; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100vh; font-family: "Playfair Display", georgia, serif; } .card { pointer-events: none; transform: translateZ(0); padding: 30px; background: white; border-radius: 5px; width: 800px; height: 625px; margin: auto; transform-style: preserve-3d; backface-visibility: hidden; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, .1); position: relative; } .card .card-content { position:relative; margin: auto; text-align: center; transform-style: preserve-3d; } .card .card-content div:nth-child(2) { position: absolute; top: 0; left: 0; transform: translateZ(20px); filter: drop-shadow(5px 5px 4px rgba(36, 142, 242,0.5)); } .card .card-content div:nth-child(3) { position: absolute; top: 0; left: 0; transform: translateZ(30px); /*filter: drop-shadow(5px 5px 4px #4444dd);*/ } .card .card-content div:nth-child(4) { position: absolute; top: 0; left: 0; transform: translateZ(40px); } .card .card-content div:nth-child(5) { position: absolute; top: 0; left: 0; margin-top: 2rem; width: calc(100% - 2rem); height: calc(100% - 2rem); padding: 1rem; transform: translateY(-50px) translateZ(70px); font-family: 'Roboto', sans-serif; text-shadow: #000 1px 1px 20px; /* filter: drop-shadow(5px 5px 4px rgba(68,68,221,0.5)); */ } .card .card-content div:nth-child(6) { position: absolute; top: 0; left: 0; margin-top: 2rem; width: calc(100% - 2rem); height: calc(100% - 2rem); padding: 1rem; transform: translateY(-50px) translateZ(80px); font-family: 'Roboto', sans-serif; text-shadow: #000 1px 1px 20px; filter: drop-shadow(5px 5px 4px rgba(36, 242, 50,0.5)); } .card .card-content div:nth-child(7) { position: absolute; top: 0; left: 0; margin-top: 2rem; width: calc(100% - 2rem); height: calc(100% - 2rem); padding: 1rem; transform: translateY(-50px) translateZ(90px); font-family: 'Roboto', sans-serif; text-shadow: #000 1px 1px 20px; filter: drop-shadow(5px 5px 4px rgba(36, 242, 50,0.5)); } /* --- FOOTER : PIED DE PAGE --- */ footer { } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - MEDIA QUERIES : GESTION TAILLE ECRAN ****************************************************************************************************** */ /* SMALL SCREEN : smartphone à partir de 576px */ @media (min-width: 576px) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* 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) { /* --- HEADER : ENTÊTE DE LA PAGE --- */ header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } } /* 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 { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- FOOTER : PIED DE PAGE --- */ footer { } }