@@ -17,7 +17,7 @@
- Goinement Lundi
+Gouinement Lundi
diff --git a/style.css b/style.css
index 213f6b7..1eba730 100644
--- a/style.css
+++ b/style.css
@@ -1,18 +1,10 @@
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-*/
-
-html {
- /* reset display */
- display: block;
-}
body{
+ /* affichage du contenu en colonne */
display: flex;
flex-direction: column;
align-items: center;
-
+ /* style background et font */
background-color: black;
color: white;
font-family: sans-serif;
@@ -20,11 +12,11 @@ body{
section{
width: 100%;
+ /* affichage des images en lignes avec retour à la ligne (wrap)*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
- align-content: center;
}
h1,h2,h3,h4,h5,h6{
@@ -32,39 +24,69 @@ h1,h2,h3,h4,h5,h6{
text-decoration-color: fuchsia;
}
-img{
- width: 300px;
- display: block;
+/* Styling des liens */
+a{
+ color: white;
+ text-decoration-color: fuchsia;
}
+/* lors du hover : fushia */
+a:hover,
+a:active,
+a:focus,
+a:focus-within {
+ color: fuchsia;
+}
+
+img{
+ /* Normalize images */
+ display: block;
+ /* taille des images */
+ width: 300px;
+}
+
+div{
+ /* position relative pour la >p absolute */
+ position: relative;
+ /* background pour l’effet blend de l’image */
+ background-color: rgb(255, 20, 255);
+ /* Prends la taille des images */
+ height: fit-content;
+ /* Centre les rectangles avec les carrés dans le row (ex: image interlopes)*/
+ align-self: center;
+}
+
+div>p{
+ /* N’affiche pas la balise p par défaut */
+ display:none;
+ /* Fixe la position du p à l’intérieur de la div / de l’image, au centre */
+ position: absolute;
+ bottom: calc((100% / 2) - 1em);
+ /* style du paragraphe */
+ margin: 10px 0;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ /* style de la font */
+ color: white;
+ font-size: larger;
+ font-weight: bolder;
+ /* centre le texte */
+ text-align: center;
+}
+
+/* HOVER */
+
+/* Simule un élément interactif pour le proto (le pointer change) */
+div:hover{
+ cursor: pointer;
+}
+
+/* lors du hover de la div : blend le background de la div avec l’image */
div:hover>img{
mix-blend-mode:multiply;
}
-div{
- position: relative;
- background-color: rgb(255, 20, 255);
- height: fit-content;
-}
-
-div>p{
- position: absolute;
- display:none;
- bottom: calc((100% / 2) - 1em);
- margin: 10px 0;
- padding: 0;
- width: 100%;
- color: white;
- background-color: rgba(0, 0, 0, 0.5);
- font-size: larger;
- font-weight: bolder;
- text-align: center;
-}
-
+/* Lors du hover de la div, afficher le paragraphe */
div:hover>p{
display: block;
-}
-
-
-
-
+}
\ No newline at end of file