0_intro

public/3_grid/style_grid.css

@@ -0,0 +1,98 @@
+/* 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 */
+
+