Update background.png, fonts.css, and 2 more files...

src/fonts/fonts.css

@@ -14,7 +14,7 @@
 }
 
 @font-face {
-  font-family: "GoldenRatio Demo";
+  font-family: "GoldenRatio";
   src: url("golden_ratio/GoldenRatio-Demo.otf");
 }
 

src/index.html

@@ -47,7 +47,7 @@
                 <div class="profil">
                     <img src="img/louise.jpg"/>
                     <div>
-                        <h3>Louise Gouthéraud</h3>
+                        <h3>Louise Goutheraud</h3>
                         <p class="role">Réalisatrice</p> 
                     </div>
                 </div>
@@ -61,7 +61,7 @@
             </div>
             <div class="participants">
                 <div class="mannequins">
-                    <h3>Mannequins</h3>
+                    <h4>Mannequins</h4>
                     <ul>
                         <li>Jeanne Gouthéraud</li>
                         <li>Marylou Gricourt</li>
@@ -73,7 +73,7 @@
                     </ul>
                 </div>
                 <div class="ecrivains">
-                    <h3>Écrivains</h3>
+                    <h4>Ecrivains</h4>
                     <ul>
                         <li>Louise Gouthéraud</li>
                         <li>Jeanne Gouthéraud</li>
@@ -82,7 +82,7 @@
                     </ul>
                 </div>
                 <div class="site">
-                    <h3>Site internet</h3>
+                    <h4>Site internet</h4>
                     <ul>
                         <li>Elisa Blancart</li>
                         <li>Adrian Amaglio</li>

src/main.css

@@ -1,6 +1,44 @@
+html {
+	background-image: url('./background.png');
+	background-size: contain;
+    background-position-y: -175px;
+}
+
 body {
 	max-width: 1300px;
 	margin: auto;
+	font-family: "LiberationSerif";
+}
+
+h1 {
+	font-family: Kiona;
+	font-size: 100px;
+	letter-spacing: -5px;
+	line-height: 105px;
+	margin-bottom: 5px;
+	margin-top: calc(1em + 5vh);
+}
+
+h2 {
+	font-family: "Ge Body";
+	margin-bottom: 1.5em;
+}
+
+h3, h4 {
+	font-family: "GoldenRatio";
+	margin: 0.8em 0;
+}
+
+h3 {
+	font-size: 1.3em;
+}
+
+h4 {
+	font-size: 1.1em;
+}
+
+section {
+    margin-top: 5em;
 }
 
 header {
@@ -21,6 +59,11 @@ header .button {
 	color: black;
 }
 
+header #download {
+	margin-top: calc(40vh - 189px);
+	margin-bottom: calc(55vh - 189px);
+}
+
 .profil {
 	display: inline-flex;
 	width: 49%;
@@ -28,6 +71,7 @@ header .button {
 
 .profil:nth-child(2n) {
 	flex-direction: row-reverse;
+	text-align: right;
 }
 
 .profil > div {
@@ -41,10 +85,11 @@ header .button {
 
 .participants {
 	display: flex;
+	justify-content: space-around;
+	margin: 4em 5em;
 }
 
 .participants > div {
-    flex: 1 1 auto;
     text-align: center;
 }
 
@@ -133,3 +178,9 @@ header .button {
     padding: 0.75rem 0.55rem;
     line-height: 1.1em;
 }
+
+ul,ol,li {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}