0_intro
vincent_b
BIN
public/3_grid/cat1.jpg
Normal file
|
After Width: | Height: | Size: 294 KiB |
BIN
public/3_grid/cat10.jpg
Normal file
|
After Width: | Height: | Size: 108 KiB |
BIN
public/3_grid/cat2.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
public/3_grid/cat3.jpg
Normal file
|
After Width: | Height: | Size: 106 KiB |
BIN
public/3_grid/cat4.jpg
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
public/3_grid/cat5.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
public/3_grid/cat6.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
public/3_grid/cat7.jpg
Normal file
|
After Width: | Height: | Size: 68 KiB |
BIN
public/3_grid/cat8.jpg
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/3_grid/cat9.jpg
Normal file
|
After Width: | Height: | Size: 60 KiB |
54
public/3_grid/index.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>2 Flexboxs</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
<link rel="stylesheet" href="style_grid.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
<h3>Grids</h3>
|
||||
|
||||
<div id="container_grids" class="wrapper_container">
|
||||
<div class="grid__item"><p>Esse occaecat sint</p></div>
|
||||
<div class="grid__item"><p>Ex culpa veniam</p></div>
|
||||
<div class="grid__item"><p>Laborum labore ipsum</p></div>
|
||||
<div class="grid__item"><p>Commodo aliqua aliqua</p></div>
|
||||
<div class="grid__item"><p>Dolor eiusmod amet</p></div>
|
||||
<div class="grid__item"><p>Irure irure eiusmod</p></div>
|
||||
<div class="grid__item"><p>Eu quis velit</p></div>
|
||||
<div class="grid__item"><p>Ullamco deserunt duis</p></div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Grids (plus)</h3>
|
||||
|
||||
<!-- CATS ! https://genrandom.com/cats/ -->
|
||||
|
||||
<div id="container_grids_plus" class="wrapper_container">
|
||||
<div class="grid__item" style="background: no-repeat url('cat1.jpg')"><p>Esse occaecat sint</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat2.jpg')"><p>Ex culpa veniam</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat3.jpg')"><p>Laborum labore ipsum</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat4.jpg')"><p>Commodo aliqua aliqua</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat5.jpg')"><p>Dolor eiusmod amet</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat6.jpg')"><p>Irure irure eiusmod</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat7.jpg')"><p>Eu quis velit</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat8.jpg')"><p>Ullamco deserunt duis</p></div>
|
||||
<div class="grid__item" style="background: no-repeat url('cat9.jpg')"><p>Occaecat sint</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<script src="/assets/js/script_html_infos.js"></script>
|
||||
<script src="https://livejs.com/live.js"></script>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
98
public/3_grid/style_grid.css
Normal file
@@ -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 */
|
||||
|
||||
|
||||