Display images OK

Kherset · Sep 25, 2023 · 066d495 · 066d495
1 parent 9823687
commit 066d495
Show file tree

Hide file tree

Showing 143 changed files with 229 additions and 51 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/images/Sample Photos/.DS_Store b/assets/images/Sample Photos/.DS_Store
diff --git a/assets/images/Sample Photos/Ellie Rose/Architecture_Connected_Curves.jpg b/assets/images/Sample Photos/Ellie Rose/Architecture_Connected_Curves.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Architecture_Cross_Bar.jpg b/assets/images/Sample Photos/Ellie Rose/Architecture_Cross_Bar.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Architecture_Horseshoe.jpg b/assets/images/Sample Photos/Ellie Rose/Architecture_Horseshoe.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Architecture_Water_on_Modern.jpg b/assets/images/Sample Photos/Ellie Rose/Architecture_Water_on_Modern.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Architecture_White_Light.jpg b/assets/images/Sample Photos/Ellie Rose/Architecture_White_Light.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Sport_Jump.jpg b/assets/images/Sample Photos/Ellie Rose/Sport_Jump.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Sport_Next_Hold.jpg b/assets/images/Sample Photos/Ellie Rose/Sport_Next_Hold.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Sport_Race_End.jpg b/assets/images/Sample Photos/Ellie Rose/Sport_Race_End.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/Sport_Sky_Cross.jpg b/assets/images/Sample Photos/Ellie Rose/Sport_Sky_Cross.jpg
diff --git a/assets/images/Sample Photos/Ellie Rose/sport_water_tunnel.jpg b/assets/images/Sample Photos/Ellie Rose/sport_water_tunnel.jpg
diff --git a/assets/images/Sample Photos/Marcel/Architecture_Corner_Room.jpg b/assets/images/Sample Photos/Marcel/Architecture_Corner_Room.jpg
diff --git a/assets/images/Sample Photos/Marcel/Architecture_Dome.jpg b/assets/images/Sample Photos/Marcel/Architecture_Dome.jpg
diff --git a/assets/images/Sample Photos/Marcel/Architecture_On_a_hill.jpg b/assets/images/Sample Photos/Marcel/Architecture_On_a_hill.jpg
diff --git a/assets/images/Sample Photos/Marcel/Architecure_Contrast.jpg b/assets/images/Sample Photos/Marcel/Architecure_Contrast.jpg
diff --git a/assets/images/Sample Photos/Marcel/Travel _Adventure_Door.jpg b/assets/images/Sample Photos/Marcel/Travel _Adventure_Door.jpg
diff --git a/assets/images/Sample Photos/Marcel/Travel_Bike_and_Stair.jpg b/assets/images/Sample Photos/Marcel/Travel_Bike_and_Stair.jpg
diff --git a/assets/images/Sample Photos/Marcel/Travel_OpenMountain.jpg b/assets/images/Sample Photos/Marcel/Travel_OpenMountain.jpg
diff --git a/assets/images/Sample Photos/Marcel/Travel_SunsetonCanals.jpg b/assets/images/Sample Photos/Marcel/Travel_SunsetonCanals.jpg
diff --git a/assets/images/Sample Photos/Marcel/Travel_Tower.jpg b/assets/images/Sample Photos/Marcel/Travel_Tower.jpg
diff --git a/assets/images/Sample Photos/Mimi/.DS_Store b/assets/images/Sample Photos/Mimi/.DS_Store
diff --git a/assets/images/Sample Photos/Mimi/Animals_Rainbow.jpg b/assets/images/Sample Photos/Mimi/Animals_Rainbow.jpg
diff --git a/assets/images/Sample Photos/Mimi/Event_BenevidesWedding.jpg b/assets/images/Sample Photos/Mimi/Event_BenevidesWedding.jpg
diff --git a/assets/images/Sample Photos/Mimi/Event_PintoWedding.jpg b/assets/images/Sample Photos/Mimi/Event_PintoWedding.jpg
diff --git a/assets/images/Sample Photos/Mimi/Event_SeasideWedding.jpg b/assets/images/Sample Photos/Mimi/Event_SeasideWedding.jpg
diff --git a/assets/images/Sample Photos/Mimi/Portrait_Background.jpg b/assets/images/Sample Photos/Mimi/Portrait_Background.jpg
diff --git a/assets/images/Sample Photos/Mimi/Portrait_Nora.jpg b/assets/images/Sample Photos/Mimi/Portrait_Nora.jpg
diff --git a/assets/images/Sample Photos/Mimi/Portrait_Wednesday.jpg b/assets/images/Sample Photos/Mimi/Portrait_Wednesday.jpg
diff --git a/assets/images/Sample Photos/Mimi/Travel_HillsideColor.jpg b/assets/images/Sample Photos/Mimi/Travel_HillsideColor.jpg
diff --git a/assets/images/Sample Photos/Mimi/Travel_Lonesome.jpg b/assets/images/Sample Photos/Mimi/Travel_Lonesome.jpg
diff --git a/assets/images/Sample Photos/Nabeel/.DS_Store b/assets/images/Sample Photos/Nabeel/.DS_Store
diff --git a/assets/images/Sample Photos/Nabeel/Portrait_AfternoonBreak.jpg b/assets/images/Sample Photos/Nabeel/Portrait_AfternoonBreak.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Portrait_Alexandra.jpg b/assets/images/Sample Photos/Nabeel/Portrait_Alexandra.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Portrait_Shaw.jpg b/assets/images/Sample Photos/Nabeel/Portrait_Shaw.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Portrait_Sunkissed.jpg b/assets/images/Sample Photos/Nabeel/Portrait_Sunkissed.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Travel_Boat_Wanderer.jpg b/assets/images/Sample Photos/Nabeel/Travel_Boat_Wanderer.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Travel_Bridge_into_Forest.jpg b/assets/images/Sample Photos/Nabeel/Travel_Bridge_into_Forest.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Travel_On_the_Road.jpg b/assets/images/Sample Photos/Nabeel/Travel_On_the_Road.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Travel_Outdoor_Baths.jpg b/assets/images/Sample Photos/Nabeel/Travel_Outdoor_Baths.jpg
diff --git a/assets/images/Sample Photos/Nabeel/Travel_Road_into_Hill.jpg b/assets/images/Sample Photos/Nabeel/Travel_Road_into_Hill.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/.DS_Store b/assets/images/Sample Photos/Photographers ID Photos/.DS_Store
diff --git a/assets/images/Sample Photos/Photographers ID Photos/EllieRoseWilkens.jpg b/assets/images/Sample Photos/Photographers ID Photos/EllieRoseWilkens.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/MarcelNikolic.jpg b/assets/images/Sample Photos/Photographers ID Photos/MarcelNikolic.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/MimiKeel.jpg b/assets/images/Sample Photos/Photographers ID Photos/MimiKeel.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/NabeelBradford.jpg b/assets/images/Sample Photos/Photographers ID Photos/NabeelBradford.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/RhodeDubois.jpg b/assets/images/Sample Photos/Photographers ID Photos/RhodeDubois.jpg
diff --git a/assets/images/Sample Photos/Photographers ID Photos/TracyGalindo.jpg b/assets/images/Sample Photos/Photographers ID Photos/TracyGalindo.jpg
diff --git a/assets/images/Sample Photos/Rhode/Animals_Majesty.jpg b/assets/images/Sample Photos/Rhode/Animals_Majesty.jpg
diff --git a/assets/images/Sample Photos/Rhode/Event_Emcee.jpg b/assets/images/Sample Photos/Rhode/Event_Emcee.jpg
diff --git a/assets/images/Sample Photos/Rhode/Event_KeyboardCheck.jpg b/assets/images/Sample Photos/Rhode/Event_KeyboardCheck.jpg
diff --git a/assets/images/Sample Photos/Rhode/Event_ProductPitch.jpg b/assets/images/Sample Photos/Rhode/Event_ProductPitch.jpg
diff --git a/assets/images/Sample Photos/Rhode/Event_VentureConference.jpg b/assets/images/Sample Photos/Rhode/Event_VentureConference.jpg
diff --git a/assets/images/Sample Photos/Rhode/Fashion_Melody_Red_on_Stripes.jpg b/assets/images/Sample Photos/Rhode/Fashion_Melody_Red_on_Stripes.jpg
diff --git a/assets/images/Sample Photos/Rhode/Fashion_Wings.jpg b/assets/images/Sample Photos/Rhode/Fashion_Wings.jpg
diff --git a/assets/images/Sample Photos/Rhode/Sport_2000_with_8.jpg b/assets/images/Sample Photos/Rhode/Sport_2000_with_8.jpg
diff --git a/assets/images/Sample Photos/Rhode/Sport_Butterfly.jpg b/assets/images/Sample Photos/Rhode/Sport_Butterfly.jpg
diff --git a/assets/images/Sample Photos/Tracy/Art_Mine.jpg b/assets/images/Sample Photos/Tracy/Art_Mine.jpg
diff --git a/assets/images/Sample Photos/Tracy/Art_Purple_light.jpg b/assets/images/Sample Photos/Tracy/Art_Purple_light.jpg
diff --git a/assets/images/Sample Photos/Tracy/Art_Triangle_Man.jpg b/assets/images/Sample Photos/Tracy/Art_Triangle_Man.jpg
diff --git a/assets/images/Sample Photos/Tracy/Event_18thAnniversary.jpg b/assets/images/Sample Photos/Tracy/Event_18thAnniversary.jpg
diff --git a/assets/images/Sample Photos/Tracy/Event_Sparklers.jpg b/assets/images/Sample Photos/Tracy/Event_Sparklers.jpg
diff --git a/assets/images/Sample Photos/Tracy/Event_WeddingGazebo.jpg b/assets/images/Sample Photos/Tracy/Event_WeddingGazebo.jpg
diff --git a/assets/images/Sample Photos/Tracy/Fashion_Pattern_on_Pattern.jpg b/assets/images/Sample Photos/Tracy/Fashion_Pattern_on_Pattern.jpg
diff --git a/assets/images/Sample Photos/Tracy/Fashion_Urban_Jungle.jpg b/assets/images/Sample Photos/Tracy/Fashion_Urban_Jungle.jpg
diff --git a/assets/images/Sample Photos/Tracy/Fashion_Yellow_Beach.jpg b/assets/images/Sample Photos/Tracy/Fashion_Yellow_Beach.jpg
diff --git a/assets/images/.DS_Store → assets/medias/.DS_Store b/assets/images/.DS_Store → assets/medias/.DS_Store
diff --git a/assets/medias/195/Architecture_Contrast.jpg b/assets/medias/195/Architecture_Contrast.jpg
diff --git a/assets/medias/195/Architecture_Corner_Room.jpg b/assets/medias/195/Architecture_Corner_Room.jpg
diff --git a/assets/medias/195/Architecture_Dome.jpg b/assets/medias/195/Architecture_Dome.jpg
diff --git a/assets/medias/195/Architecture_On_a_hill.jpg b/assets/medias/195/Architecture_On_a_hill.jpg
diff --git a/..._highway_in_buenos_aires_587740985637.mp4 → ..._highway_in_buenos_aires_587740985637.mp4 b/..._highway_in_buenos_aires_587740985637.mp4 → ..._highway_in_buenos_aires_587740985637.mp4
diff --git a/assets/medias/195/Travel_Adventure_Door.jpg b/assets/medias/195/Travel_Adventure_Door.jpg
diff --git a/assets/medias/195/Travel_Bike_and_Stair.jpg b/assets/medias/195/Travel_Bike_and_Stair.jpg
diff --git a/assets/medias/195/Travel_OpenMountain.jpg b/assets/medias/195/Travel_OpenMountain.jpg
diff --git a/assets/medias/195/Travel_SunsetonCanals.jpg b/assets/medias/195/Travel_SunsetonCanals.jpg
diff --git a/assets/medias/195/Travel_Tower.jpg b/assets/medias/195/Travel_Tower.jpg
diff --git a/assets/medias/243/Animals_Rainbow.jpg b/assets/medias/243/Animals_Rainbow.jpg
diff --git a/.../Animals_Wild_Horses_in_the_mountains.mp4 → .../Animals_Wild_Horses_in_the_mountains.mp4 b/.../Animals_Wild_Horses_in_the_mountains.mp4 → .../Animals_Wild_Horses_in_the_mountains.mp4
diff --git a/assets/medias/243/Event_BenevidesWedding.jpg b/assets/medias/243/Event_BenevidesWedding.jpg
diff --git a/assets/medias/243/Event_PintoWedding.jpg b/assets/medias/243/Event_PintoWedding.jpg
diff --git a/assets/medias/243/Event_SeasideWedding.jpg b/assets/medias/243/Event_SeasideWedding.jpg
diff --git a/assets/medias/243/Portrait_Background.jpg b/assets/medias/243/Portrait_Background.jpg
diff --git a/assets/medias/243/Portrait_Nora.jpg b/assets/medias/243/Portrait_Nora.jpg
diff --git a/assets/medias/243/Portrait_Wednesday.jpg b/assets/medias/243/Portrait_Wednesday.jpg
diff --git a/assets/medias/243/Travel_HillsideColor.jpg b/assets/medias/243/Travel_HillsideColor.jpg
diff --git a/assets/medias/243/Travel_Lonesome.jpg b/assets/medias/243/Travel_Lonesome.jpg
diff --git a/assets/medias/527/Portrait_AfternoonBreak.jpg b/assets/medias/527/Portrait_AfternoonBreak.jpg
diff --git a/assets/medias/527/Portrait_Alexandra.jpg b/assets/medias/527/Portrait_Alexandra.jpg
diff --git a/assets/medias/527/Portrait_Shaw.jpg b/assets/medias/527/Portrait_Shaw.jpg
diff --git a/assets/medias/527/Portrait_Sunkissed.jpg b/assets/medias/527/Portrait_Sunkissed.jpg
diff --git a/assets/medias/527/Travel_Boat_Wanderer.jpg b/assets/medias/527/Travel_Boat_Wanderer.jpg
diff --git a/assets/medias/527/Travel_Bridge_into_Forest.jpg b/assets/medias/527/Travel_Bridge_into_Forest.jpg
diff --git a/assets/medias/527/Travel_On_the_Road.jpg b/assets/medias/527/Travel_On_the_Road.jpg
diff --git a/assets/medias/527/Travel_Outdoor_Baths.jpg b/assets/medias/527/Travel_Outdoor_Baths.jpg
diff --git a/assets/medias/527/Travel_Road_into_Hill.jpg b/assets/medias/527/Travel_Road_into_Hill.jpg
diff --git a/...e Photos/Nabeel/Travel_Rock_Mountains.mp4 → assets/medias/527/Travel_Rock_Mountains.mp4 b/...e Photos/Nabeel/Travel_Rock_Mountains.mp4 → assets/medias/527/Travel_Rock_Mountains.mp4
diff --git a/assets/medias/82/Art_Mine.jpg b/assets/medias/82/Art_Mine.jpg
diff --git a/assets/medias/82/Art_Purple_light.jpg b/assets/medias/82/Art_Purple_light.jpg
diff --git a/assets/medias/82/Art_Triangle_Man.jpg b/assets/medias/82/Art_Triangle_Man.jpg
diff --git a/...otos/Tracy/Art_Wooden_Horse_Sculpture.mp4 → .../medias/82/Art_Wooden_Horse_Sculpture.mp4 b/...otos/Tracy/Art_Wooden_Horse_Sculpture.mp4 → .../medias/82/Art_Wooden_Horse_Sculpture.mp4
diff --git a/assets/medias/82/Event_18thAnniversary.jpg b/assets/medias/82/Event_18thAnniversary.jpg
diff --git a/assets/medias/82/Event_Sparklers.jpg b/assets/medias/82/Event_Sparklers.jpg
diff --git a/assets/medias/82/Event_WeddingGazebo.jpg b/assets/medias/82/Event_WeddingGazebo.jpg
diff --git a/assets/medias/82/Fashion_Pattern_on_Pattern.jpg b/assets/medias/82/Fashion_Pattern_on_Pattern.jpg
diff --git a/assets/medias/82/Fashion_Urban_Jungle.jpg b/assets/medias/82/Fashion_Urban_Jungle.jpg
diff --git a/assets/medias/82/Fashion_Yellow_Beach.jpg b/assets/medias/82/Fashion_Yellow_Beach.jpg
diff --git a/assets/medias/925/Animals_Majesty.jpg b/assets/medias/925/Animals_Majesty.jpg
diff --git a/...Sample Photos/Rhode/Animals_Puppiness.mp4 → assets/medias/925/Animals_Puppiness.mp4 b/...Sample Photos/Rhode/Animals_Puppiness.mp4 → assets/medias/925/Animals_Puppiness.mp4
diff --git a/assets/medias/925/Event_Emcee.jpg b/assets/medias/925/Event_Emcee.jpg
diff --git a/assets/medias/925/Event_KeyboardCheck.jpg b/assets/medias/925/Event_KeyboardCheck.jpg
diff --git a/assets/medias/925/Event_ProductPitch.jpg b/assets/medias/925/Event_ProductPitch.jpg
diff --git a/assets/medias/925/Event_VentureConference.jpg b/assets/medias/925/Event_VentureConference.jpg
diff --git a/assets/medias/925/Fashion_Melody_Red_on_Stripes.jpg b/assets/medias/925/Fashion_Melody_Red_on_Stripes.jpg
diff --git a/assets/medias/925/Fashion_Wings.jpg b/assets/medias/925/Fashion_Wings.jpg
diff --git a/assets/medias/925/Sport_2000_with_8.jpg b/assets/medias/925/Sport_2000_with_8.jpg
diff --git a/assets/medias/925/Sport_Butterfly.jpg b/assets/medias/925/Sport_Butterfly.jpg
diff --git a/assets/medias/930/Architecture_Connected_Curves.jpg b/assets/medias/930/Architecture_Connected_Curves.jpg
diff --git a/assets/medias/930/Architecture_Cross_Bar.jpg b/assets/medias/930/Architecture_Cross_Bar.jpg
diff --git a/assets/medias/930/Architecture_Horseshoe.jpg b/assets/medias/930/Architecture_Horseshoe.jpg
diff --git a/assets/medias/930/Architecture_Water_on_Modern.jpg b/assets/medias/930/Architecture_Water_on_Modern.jpg
diff --git a/assets/medias/930/Architecture_White_Light.jpg b/assets/medias/930/Architecture_White_Light.jpg
diff --git a/assets/medias/930/Sport_Jump.jpg b/assets/medias/930/Sport_Jump.jpg
diff --git a/assets/medias/930/Sport_Next_Hold.jpg b/assets/medias/930/Sport_Next_Hold.jpg
diff --git a/assets/medias/930/Sport_Race_End.jpg b/assets/medias/930/Sport_Race_End.jpg
diff --git a/assets/medias/930/Sport_Sky_Cross.jpg b/assets/medias/930/Sport_Sky_Cross.jpg
diff --git a/...os/Ellie Rose/Sport_Tricks_in_the_air.mp4 → ...ts/medias/930/Sport_Tricks_in_the_air.mp4 b/...os/Ellie Rose/Sport_Tricks_in_the_air.mp4 → ...ts/medias/930/Sport_Tricks_in_the_air.mp4
diff --git a/assets/medias/930/sport_water_tunnel.jpg b/assets/medias/930/sport_water_tunnel.jpg
diff --git a/assets/medias/IDPhotos/EllieRoseWilkens.jpg b/assets/medias/IDPhotos/EllieRoseWilkens.jpg
diff --git a/assets/medias/IDPhotos/MarcelNikolic.jpg b/assets/medias/IDPhotos/MarcelNikolic.jpg
diff --git a/assets/medias/IDPhotos/MimiKeel.jpg b/assets/medias/IDPhotos/MimiKeel.jpg
diff --git a/assets/medias/IDPhotos/NabeelBradford.jpg b/assets/medias/IDPhotos/NabeelBradford.jpg
diff --git a/assets/medias/IDPhotos/RhodeDubois.jpg b/assets/medias/IDPhotos/RhodeDubois.jpg
diff --git a/assets/medias/IDPhotos/TracyGalindo.jpg b/assets/medias/IDPhotos/TracyGalindo.jpg
diff --git a/assets/images/logo.png → assets/medias/logo.png b/assets/images/logo.png → assets/medias/logo.png
diff --git a/css/photographer.css b/css/photographer.css
@@ -5,7 +5,7 @@
 /****************** Header ******************/
 header {
     align-items: center;
-    background-color: darkcyan;
+    background-color: lightgray;
     display: flex;
     height: 200px;
     justify-content: space-between;
@@ -223,12 +223,68 @@ form input {
         content: "";
         display: block;
         position: absolute;
-        left: 5%; /* Ajustez la valeur de la position horizontale selon vos besoins */
-        right: 5%; /* Ajustez la valeur de la position horizontale selon vos besoins */
+        left: 5%;
+        right: 5%;
         top: 40px;
-        width: 90%; /* Ajustez la largeur de la bordure inférieure selon vos besoins */
-        border-top: 1px solid white; /* Épaisseur et couleur de la bordure inférieure */
+        width: 90%;
+        border-top: 1px solid white;
         z-index: 2;
       }
 
 /****************** DropDown Menu ******************/
+
+/****************** Medias ******************/
+  #medias-container {
+    display: grid;
+    height: auto;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 60px;
+    margin: 30px 100px 50px;
+    width: auto;
+  }
+
+  .medias-item {
+    background-color: white;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 250px;
+    width: auto;
+    box-sizing: border-box;
+  }
+
+  .img-container {
+    position: relative;
+    width: 100%;
+    height: 300px;
+  }
+
+  .media-item  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+  }
+
+  .item-content  {
+    display: flex;
+    justify-content: space-between;
+    color: #901C1C;
+    margin-top: 10px;
+    box-sizing: border-box;
+  }
+
+  .likes  {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .likes-icon {
+    margin-left: 5px;
+  }
+
+/****************** Medias ******************/
diff --git a/data/photographers.json b/data/photographers.json
@@ -285,7 +285,7 @@
 		{
 			"id": 34513453,
 			"photographerId": 527,
-			"title": "Shaw Potrait",
+			"title": "Shaw Portrait",
 			"image": "Portrait_Shaw.jpg",
 			"likes": 52,
 			"date": "2017-04-21",
@@ -331,7 +331,7 @@
 		{
 			"id": 2525345343,
 			"photographerId": 243,
-			"title": "Wednesday Potrait",
+			"title": "Wednesday Portrait",
 			"image": "Portrait_Wednesday.jpg",
 			"likes": 34,
 			"date": "2019-04-07",
@@ -413,7 +413,7 @@
 		{
 			"id": 2523434,
 			"photographerId": 195,
-			"title": "Senset on Canals, Venice",
+			"title": "Sunset on Canals, Venice",
 			"image": "Travel_SunsetonCanals.jpg",
 			"likes": 53,
 			"date": "2019-05-06",
@@ -494,7 +494,7 @@
 		{
 			"id": 952343423,
 			"photographerId": 930,
-			"title": "Tricks in te air",
+			"title": "Tricks in the air",
 			"video": "Sport_Tricks_in_the_air.mp4",
 			"likes": 150,
 			"date": "2018-02-30",

diff --git a/index.html b/index.html
@@ -5,11 +5,12 @@
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="assets/favicon.png">
     <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/8f5705fdf5.js" crossorigin="anonymous"></script>
     <title>Fisheye</title>
   </head>
   <body>
     <nav>
-        <a href="index.html" class="homepage-link" aria-label="Logo du site redirigeant vers la page d'accueil"> <img src="assets/images/logo.png" class="logo" alt="Fisheye Home page"/> </a>
+        <a href="index.html" class="homepage-link" aria-label="Logo du site redirigeant vers la page d'accueil"> <img src="assets/medias/logo.png" class="logo" alt="Fisheye Home page"/> </a>
         <h1 aria-label="Nos photographes">Nos photographes</h1>
     </nav>
     <main id="main">

diff --git a/photographer.html b/photographer.html
@@ -5,11 +5,12 @@
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="assets/favicon.png">
     <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/8f5705fdf5.js" crossorigin="anonymous"></script>
     <title>Fisheye - photographe </title>
   </head>
   <body>
     <nav>
-      <a href="index.html" class="homepage-link" aria-label="Logo du site redirigeant vers la page d'accueil"> <img src="assets/images/logo.png" class="logo" alt="Fisheye Home page"/> </a>
+      <a href="index.html" class="homepage-link" aria-label="Logo du site redirigeant vers la page d'accueil"> <img src="assets/medias/logo.png" class="logo" alt="Fisheye Home page"/> </a>
     </nav>
 
       <header>
@@ -37,9 +38,15 @@ <h4 class="sort_title">Trier par </h4>
           </div>
         </div>
       </div>
+
+      <section id="medias-container">
+
+      </section>
     </main>
 
 
+
+    <!-- Modal -->
     <div id="contact_modal">
 			<div class="modal">
 				<header>
@@ -55,7 +62,7 @@ <h2>Contactez-moi</h2>
 				</form>
 			</div>
 		</div>
-
+    <!-- Modal -->
 
 
     <script src="/scripts/templates/photographer.js" ></script>

diff --git a/scripts/pages/photographer.js b/scripts/pages/photographer.js
@@ -1,42 +1,80 @@
 // Allows to retrieve the photographer's ID.
-let params = new URL(document.location).searchParams;
-let id = parseInt(params.get("id"));
-
-// Allows to retrieve all photographers from the JSON file.
-async function getPhotographers() {
-  try {
-      const response = await fetch('data/photographers.json');
-      if (!response.ok) {
-          throw new Error('Unable to retrieve photographer data.');
+    let params = new URL(document.location).searchParams;
+    let id = parseInt(params.get("id"));
+
+/**************************************** Photographers ****************************************/
+  // Allows to retrieve all photographers from the JSON file.
+      async function getPhotographers() {
+        try {
+            const response = await fetch('data/photographers.json');
+            if (!response.ok) {
+                throw new Error('Unable to retrieve photographer data.');
+            }
+            const data = await response.json();
+            return data.photographers;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+      }
+
+  // Allows to retrieve a photographer from his ID.
+      async function getPhotographersById(id) {
+          const photographers = await getPhotographers();
+
+          const photographer = photographers.find(function (photographer) {
+            return photographer.id === id;
+          });
+
+          if (photographer) {
+            console.log("Photographer found :", photographer);
+            return photographer;
+          } else {
+            console.log("No photographer found with the ID", id);
+            return null;
+          }
       }
-      const data = await response.json();
-      return data.photographers;
-  } catch (error) {
-      console.error(error);
-      return [];
+
+  async function displayPhotographer() {
+    const photographer = await getPhotographersById(id) // Photographer object retrieved.
+    photographerHeader(photographer)
   }
-}
 
-// Allows to retrieve a photographer from his ID.
-async function getPhotographersById(id) {
-    const photographers = await getPhotographers();
-
-    const photographer = photographers.find(function (photographer) {
-      return photographer.id === id;
-    });
-
-    if (photographer) {
-      console.log("Photographer found :", photographer);
-      return photographer;
-    } else {
-      console.log("No photographer found with the ID", id);
-      return null;
-    }
-}
+/**************************************** Medias ****************************************/
+  // Allows to retrieve all photographers from the JSON file.
+      async function getMedias() {
+        try {
+            const response = await fetch('data/photographers.json');
+            if (!response.ok) {
+                throw new Error('Unable to retrieve medias data.');
+            }
+            const data = await response.json();
+            return data.media;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+      }
+
+  // Allows the use of the photographer's ID to retrieve the associated media.
+      async function getMediasByPhotographerId(id) {
+        const medias = await getMedias();
+        return medias.filter(media => media.photographerId === id);
+      }
+
+getMediasByPhotographerId(id)
+
+async function displayMedias() {
+  const medias = await getMediasByPhotographerId(id) // Photographer object retrieved.
+  medias.forEach(media => {
+    createMedias(media)
+  });
 
-async function displayPhotographer() {
-  const photographer = await getPhotographersById(id) // Photographer object retrieved.
-  photographerHeader(photographer)
 }
 
+
+
+
+
 displayPhotographer()
+displayMedias()
diff --git a/scripts/templates/homepage.js b/scripts/templates/homepage.js
@@ -1,7 +1,7 @@
 function homepageTemplate(data) {
     const { name, portrait, city, country, tagline, price, id } = data;
 
-    const picture = `assets/images/Sample Photos/Photographers ID Photos/${portrait}`;
+    const picture = `assets/medias/IDPhotos/${portrait}`;
 
     function getUserCardDOM() {
         const article = document.createElement( 'article' );

diff --git a/scripts/templates/photographer.js b/scripts/templates/photographer.js
@@ -1,9 +1,7 @@
 function photographerHeader(data) {
+  const { name, portrait, city, country, tagline,} = data;
+  const picture = `assets/medias/IDPhotos/${portrait}`;
 
-  const { name, portrait, city, country, tagline, price, id } = data;
-  const picture = `assets/images/Sample Photos/Photographers ID Photos/${portrait}`;
-
-  const photographerContent = document.querySelector('.photographer-content')
   const photographerName = document.querySelector('.photographer-name')
   const photographerLocation = document.querySelector('.photographer-location')
   const photographerDescription = document.querySelector('.photographer-description')
@@ -14,3 +12,81 @@ function photographerHeader(data) {
   photographerDescription.textContent = `${tagline}`;
   photographerPhoto.setAttribute('src', `${picture}`)
 }
+
+
+function createMedias(data) {
+  const { id, photographerId, title, image, video, likes, date, price} = data;
+  const imageMedia = `assets/medias/${photographerId}/${image}`;
+  const videoMedia = `assets/medias/${photographerId}/${video}`;
+  const mediasContainer = document.getElementById('medias-container');
+
+  // Create media element
+  const article = document.createElement('article')
+  article.className ='medias-item'
+
+  // Create image container
+  const imageContainer = document.createElement('div')
+  imageContainer.className ='img-container'
+
+  // Create image or video element
+  const imageOrVideo = (data) => {
+    if (data && (data.image || data.video)) {
+        if (data.image && (data.image.endsWith('.jpg') || data.image.endsWith('.jpeg') || data.image.endsWith('.png'))) {
+            const image = document.createElement('img');
+            image.src = `assets/medias/${data.photographerId}/${data.image}`;
+            return image;
+        } else if (data.video && data.video.endsWith('.mp4')) {
+            const video = document.createElement('video');
+            video.src = `assets/medias/${data.photographerId}/${data.video}`;
+            video.controls = true;
+            return video;
+        }
+    }
+    // Si aucune image ni vidéo valide n'est trouvée, vous pouvez renvoyer null ou un élément de remplacement, par exemple un message d'erreur.
+    return null;
+};
+ const mediaElement = imageOrVideo(data);
+ mediaElement.className = "media-item"
+
+   // Create item content
+   const itemContent = document.createElement('div')
+   itemContent.className ='item-content'
+
+  // Create title element
+  const mediaTitle = document.createElement('h4');
+  mediaTitle.className ='item-title'
+  mediaTitle.textContent = title;
+
+  // Create item content
+  const likesContainer = document.createElement('div')
+  likesContainer.className ='likes'
+
+  // Create number of like element
+  const likesElement = document.createElement('div');
+  likesElement.className ='likes'
+
+  // Create number of number of like element
+  const mediaNumber = document.createElement('p');
+  mediaNumber.className ='likes-number'
+  mediaNumber.textContent = likes;
+
+  // Create item icon
+  const likesIcon = document.createElement('p')
+  likesIcon.className ='likes-icon'
+  likesIcon.innerHTML = '<i class="fa-solid fa-heart"></i>'
+
+
+
+  // Building page
+  mediasContainer.appendChild(article)
+  article.appendChild(imageContainer)
+  imageContainer.appendChild(mediaElement)
+  article.appendChild(itemContent)
+  itemContent.appendChild(mediaTitle)
+  itemContent.appendChild(likesElement)
+  likesElement.appendChild(mediaNumber)
+  likesElement.appendChild(likesIcon)
+
+  // article.appendChild()
+
+}