Etape 3

css/photographer.css

@@ -2,10 +2,88 @@
     display: none;
 }
 
-.photograph-header {
+.photograph_header {
     background-color: #FAFAFA;
     height: 300px;
     margin: 0 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.text_container {
+    display: flex;
+    flex-direction: column;
+    gap: 19px;
+    padding-left: 50px;
+}
+
+.photographer_main_title {
+    color: var(--secondary);
+    font-family: var(--photographer-main-title-font-family);
+    font-size: var(--photographer-main-title-font-size);
+    font-style: var(--photographer-main-title-font-style);
+    font-weight: var(--photographer-main-title-font-weight);
+    line-height: var(--photographer-main-title-line-height);
+}
+
+.city_of_country_of {
+    color: var(--primary);
+    font-family: var(--city-of-country-of-font-family);
+    font-size: var(--city-of-country-of-font-size);
+    font-style: var(--city-of-country-of-font-style);
+    font-weight: var(--city-of-country-of-font-weight);
+    line-height: var(--city-of-country-of-line-height);
+}
+
+.photographer_tagline {
+    color: var(--dark-grey);
+    font-family: var(--photographer-tagline-font-family);
+    font-size: var(--photographer-tagline-font-size);
+    font-style: var(--photographer-tagline-font-style);
+    font-weight: var(--photographer-tagline-font-weight);
+    line-height: var(--photographer-tagline-line-height);
+}
+
+.img_wrapper {
+    height: 200px;
+    width: 200px;
+}
+
+.img_wrapper img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.filter {
+    display: flex;
+    gap: 25px;
+    align-items: center;
+    margin-left: 100px;
+}
+
+.filter_title {
+    color: var(--black);
+    font-family: var(--photographer-filter-title-font-family);
+    font-size: var(--photographer-filter-title-font-size);
+    font-style: var(--photographer-filter-title-font-style);
+    font-weight: var(--photographer-filter-title-font-weight);
+    line-height: var(--photographer-filter-title-line-height);
+}
+
+.dropdown_menu {
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        padding: 11px;
+        width: 170px;
+        height: 70px;
+        border: none;
+        background-color: #901C1C;
+        border-radius: 5px;
+        cursor: pointer;
 }
 
 .contact_button {
@@ -55,6 +133,10 @@ form {
     align-items: flex-start;
 }
 
+form legend {
+    display: none;
+}
+
 form label {
     color: #312E2E;
     font-size: 36px;
@@ -73,4 +155,10 @@ form input {
     height: 68px;
     border: none;
     border-radius: 5px;
-}
+    font-family: 'DM sans', sans-serif;
+    font-size: 24px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: normal;
+    color: var(--black);
+}

css/style.css

@@ -1,8 +1,77 @@
 @import url("photographer.css");
 
+:root {
+    --primary:  #901C1C;
+    --secondary: #d3573c;
+    --black: #000000;
+    --light-black: #757575;
+    --dark-grey: #525252;
+
+    --main-title-font-family: 'DM sans', sans-serif;
+    --main-title-font-size: 36px;
+    --main-title-font-style: normal;
+    --main-title-font-weight: 400;
+    --main-title-line-height: normal;
+
+    --photographer-name-font-family: 'DM sans', sans-serif;
+    --photographer-name-font-size: 36px;
+    --photographer-name-font-style: normal;
+    --photographer-name-font-weight: 400;
+    --photographer-name-line-height: normal;
+
+    --city-country-font-family: 'DM sans', sans-serif;
+    --city-country-font-size: 13px;
+    --city-country-font-style: normal;
+    --city-country-font-weight: 400;
+    --city-country-line-height: normal;
+
+    --tagline-font-family: 'DM sans', sans-serif;
+    --tagline-font-size: 10px;
+    --tagline-font-style: normal;
+    --tagline-font-weight: 400;
+    --tagline-line-height: normal;
+
+    --price-font-family: 'DM sans'; 
+    --price-font-size: 9px; 
+    --price-font-style: normal; 
+    --price-font-weight: 400;  
+    --price-line-height: normal; 
+
+/* ------------------ PHOTOGRAPHER PAGE -------------------------------- */
+
+    --photographer-main-title-font-family: 'DM sans', sans-serif;
+    --photographer-main-title-font-size: 64px;
+    --photographer-main-title-font-style: normal;
+    --photographer-main-title-font-weight: 400;
+    --photographer-main-title-line-height: normal;
+
+    --city-of-country-of-font-family: 'DM sans', sans-serif;
+    --city-of-country-of-font-size: 24px;
+    --city-of-country-of-font-style: normal;
+    --city-of-country-of-font-weight: 400;
+    --city-of-country-of-line-height: normal;
+
+    --photographer-tagline-font-family: 'DM sans', sans-serif;
+    --photographer-tagline-font-size: 18px;
+    --photographer-tagline-font-style: normal;
+    --photographer-tagline-font-weight: 400;
+    --photographer-tagline-line-height: normal;
+
+    --photographer-filter-title-font-family: 'DM sans', sans-serif;
+    --photographer-filter-title-font-size: 18px;
+    --photographer-filter-title-font-style: normal;
+    --photographer-filter-title-font-weight: 700;
+    --photographer-filter-title-line-height: normal;
+}
+
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
 body {
     font-family: "DM Sans", sans-serif;
-    margin: 0;
 }
 
 
@@ -14,8 +83,13 @@ header {
     height: 90px;
 }
 
-h1 {
-    color: #901C1C;
+.main_title {
+    color: var(--primary);
+    font-family: var(--main-title-font-family);
+    font-size: var(--main-title-font-size);
+    font-style: var(--main-title-font-style);
+    font-weight: var(--main-title-font-weight);
+    line-height: var(--main-title-line-height);
     margin-right: 100px;
 }
 
@@ -40,11 +114,66 @@ h1 {
 }
 
 .photographer_section article h2 {
-    color: #D3573C;
-    font-size: 36px;
+    color: var(--secondary);
+    font-family: var(--main-title-font-family);
+    font-size: var(--main-title-font-size);
+    font-style: var(--main-title-font-style);
+    font-weight: var(--main-title-font-weight);
+    line-height: var(--main-title-line-height);
 }
 
-.photographer_section article img {
+.portrait_wrapper {
     height: 200px;
     width: 200px;
-}
+}
+
+.photographer_section article img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.section_under_name {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    justify-content: center;
+    align-items: center;
+}
+
+.city_country {
+    color: var(--primary);
+    font-family: var(--city-country-font-family);
+    font-size: var(--city-country-font-size);
+    font-style: var(--city-country-font-style);
+    font-weight: var(--city-country-font-weight);
+    line-height: var(--city-country-line-height);
+}
+
+.tagline {
+    color: var(--black);
+    font-family: var(--tagline-font-family);
+    font-size: var(--tagline-font-size);
+    font-style: var(--tagline-font-style);
+    font-weight: var(--tagline-font-weight);
+    line-height: var(--tagline-line-height);
+}
+
+.price {
+    text-align: center;
+    color: var(--light-black);
+    font-family: var(--price-font-family);
+    font-size: var(--price-font-size);
+    font-style: var(--price-font-style);
+    font-weight: var(--price-font-weight);
+    line-height: var(--price-line-height);
+}
+
+footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 200px;
+}
+

index.html

@@ -8,14 +8,25 @@
     <title>Fisheye</title>
   </head>
   <body>
-    <header>
-        <img src="assets/images/logo.png" class="logo" alt="fisheye logo"/>
-        <h1>Nos photographes</h1>
+    <header role="banner">
+        <img src="assets/images/logo.png" class="logo" alt="Fisheye Home Page"/>
+        <h1 class="main_title" aria-label="Nos photographes, titre principal">Nos photographes</h1>
     </header>
     <main id="main">
         <div class="photographer_section"></div>
     </main>
+    <footer>
+      <p>
+        <a href="https://achecks.org/checker/index.php?uri=referer&gid=WCAG2-AA">
+          <img src="https://achecks.org/images/icon_W2_aa.jpg" alt="WCAG 2.0 (Level AA)" height="32" width="102" />
+        </a>
+      </p>
+    </footer>
+
     <script src="scripts/templates/photographer.js"></script>
     <script src="scripts/pages/index.js"></script>
+
   </body>
 </html>
+
+