99 lines
2.0 KiB
CSS
99 lines
2.0 KiB
CSS
/* 1. GRIDS */
|
|
#container_grids,
|
|
#container_grids_plus {
|
|
display: grid;
|
|
grid-gap: 30px;
|
|
align-content: center;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
grid-column-gap: 20px
|
|
grid-row-gap: 20px
|
|
justify-items: stretch
|
|
align-items: stretch
|
|
}
|
|
.grid__item {
|
|
height: 100px;
|
|
border-radius: 8px;
|
|
background: burlywood;
|
|
text-align: center;
|
|
align-content: center;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 2. PLUS */
|
|
|
|
/* COUNTER */
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters */
|
|
#container_grids_plus {
|
|
counter-reset: section;
|
|
}
|
|
#container_grids_plus
|
|
.grid__item::before {
|
|
counter-increment: section;
|
|
content: counter(section);
|
|
margin-top: -100px;
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* BACKGROUNDS */
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background */
|
|
|
|
|
|
/* VARIABLES */
|
|
/* VERIABLES on leur attribue une valeure...
|
|
qu'on peut réutiliser plusieurs fois !!! */
|
|
:root {
|
|
--backcolor: rgb(223, 169, 99);
|
|
--frontcolor: brown;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* !IMPORTANT, outrepasser les styles "inline", valeurs attribuées directement dans les éléments (HTML) */
|
|
#container_grids_plus
|
|
.grid__item {
|
|
font-weight: bold;
|
|
border: 1px solid var(--frontcolor);
|
|
color: var(--frontcolor);
|
|
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
|
background-size: cover !important;
|
|
background-position: center center !important;
|
|
}
|
|
|
|
|
|
|
|
/* CIBLAGE complexe */
|
|
/* https://learn.shayhowe.com/advanced-html-css/complex-selectors/ */
|
|
#container_grids_plus
|
|
.grid__item:hover {
|
|
color: #FFF;
|
|
text-shadow: 0px 0px 5px var(--frontcolor);
|
|
}
|
|
#container_grids_plus
|
|
.grid__item:not(:hover) {
|
|
background-image: unset !important;
|
|
background-color: var(--backcolor) !important;
|
|
}
|
|
|
|
/* ENFANTS dernier dans la classe .wrapper_container */
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/:last-child */
|
|
#wrapper
|
|
.wrapper_container:last-child {
|
|
margin-bottom: 6rem;
|
|
}
|
|
|
|
/* NTH */
|
|
/* https://developer.mozilla.org/fr/docs/Web/CSS/background-size */
|
|
|
|
|