- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
diff --git a/src/main.css b/src/main.css
index 01d5444..61c14d4 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,5 +1,4 @@
html {
- background-image: url('./background.png'), linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 85%, rgba(0,0,0,0.2) 100%);
background-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0) 85%, rgba(0,0,0,0.2) 100%), url('./background.png');
background-size: contain;
background-position-y: -330px;
@@ -9,11 +8,12 @@ body {
max-width: 1300px;
margin: auto;
font-family: "Liberation sans";
+ color: #444;
}
h1 {
font-family: Kiona;
- font-size: 118px;
+ font-size: 121px;
letter-spacing: -5px;
line-height: 0.7em;
margin: calc(0.8em + 5vh) auto 20px;
@@ -21,6 +21,7 @@ h1 {
display: flex;
width: 5.915em;
flex-wrap: wrap;
+ font-weight: normal;
}
h1 > div::first-letter {
@@ -28,13 +29,23 @@ h1 > div::first-letter {
}
header h4 {
- font-style: italic;
+ font-style: italic;
+ font-size: 1.07em;
+ display: block;
+ margin: 0;
+ padding-left: 0px;
}
h2 {
font-family: "Ge Body";
- font-size: 2.2em;
- margin-bottom: 1em;
+ font-weight: normal;
+ font-size: 2.75em;
+ margin: 0.8em -8px 1em;
+}
+
+h2::first-letter {
+ font-size: 1.5em;
+ letter-spacing: 1px;
}
h3, h4 {
@@ -50,26 +61,50 @@ h4 {
font-size: 1.1em;
}
+h1,h2 {
+ color: #111;
+}
+
+#qui h3, #qui h4, #contact label{
+ color: #222;
+}
+
section {
- margin-top: 5em;
+ margin: 5em 10px 0;
}
header {
text-align: center;
}
+header svg, header .button, .couleur, h2::first-letter{
+ fill: #4C8F29;
+ color: #4C8F29;
+}
+
+header svg {
+ width: 50px;
+ height: 50px;
+}
+
header .button {
display: inline-block;
- border-radius: 100%;
- width: 7em;
- height: 7em;
- line-height: 6.75em;
+ border-radius: 20px;
text-align: center;
font-size: 1.25em;
padding: 0.5em;
- background-color: #a7e3f0;
+ border: 2px solid currentColor;
text-decoration: none;
- color: black;
+ font-family: "Kiona";
+ font-weight: bold;
+}
+
+header .button span {
+ vertical-align: bottom;
+ line-height: 50px;
+ height: 50px;
+ display: inline-block;
+ font-size: 1.1em;
}
header #download {
@@ -82,6 +117,13 @@ header #download {
width: 49%;
}
+#charte > div{
+ text-align: justify;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 1em;
+}
+
.profil:nth-child(2n) {
flex-direction: row-reverse;
text-align: right;
@@ -106,18 +148,24 @@ header #download {
text-align: center;
}
-
-#galerie .content{
- display: grid;
- grid-template-columns: repeat(11, 1fr);
- grid-template-rows: repeat(9, 9%);
- grid-gap: 0.4rem;
- width: 1250px;
- height: 670px;
+#galerie .wrapper {
+ width: 100%;
+ padding-bottom: 54.25%;
+ position: relative;
+ max-width: 1250px;
margin: auto;
}
-#galerie img{
+#galerie .content {
+ position: absolute;
+ top: 0; bottom: 0; left: 0; right: 0;
+ display: grid;
+ grid-template-columns: repeat(11, 1fr);
+ grid-template-rows: repeat(9, 1fr);
+ grid-gap: 0.4rem;
+}
+
+#galerie img {
width: 100%;
height: 100%;
object-fit: cover;
@@ -183,14 +231,20 @@ header #download {
outline: 0;
padding: 0 0.55rem;
text-decoration: none;
- width: 100%;
+ width: calc(100% - 1.16rem);
color: inherit;
line-height: 2.8em;
+ border: 1px solid #DDD;
+ border-radius: 6px;
+}
+
+#contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus, #contact select:focus, #contact textarea:focus {
+ box-shadow: 0px 0px 4px 1px #61c030;
+ border-color: transparent;
}
#contact input[type="submit"], #contact .button {
background-color: transparent;
- color: inherit;
border: 2px solid currentColor;
border-radius: 0;
cursor: pointer;
@@ -207,4 +261,8 @@ ul,ol,li {
list-style: none;
padding: 0;
margin: 0;
+}
+
+.a {
+ color: #005700;
}
\ No newline at end of file
+
+
@@ -164,7 +177,7 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+