OpenClassrooms-Student-Center · chifoumi62 · Mar 18, 2025 · Mar 23, 2025 · Mar 23, 2025 · Mar 24, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/assets/images/camera.png b/assets/images/camera.png
diff --git a/assets/images/gallery/concert/aaron-paul-wnX-fXzB6Cw-unsplash.jpg b/assets/images/gallery/concert/aaron-paul-wnX-fXzB6Cw-unsplash.jpg
diff --git a/assets/images/gallery/concert/austin-neill-hgO1wFPXl3I-unsplash.jpg b/assets/images/gallery/concert/austin-neill-hgO1wFPXl3I-unsplash.jpg
diff --git a/assets/images/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg b/assets/images/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg
diff --git a/assets/images/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg b/assets/images/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg
diff --git a/assets/images/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg b/assets/images/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg
diff --git a/assets/images/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg b/assets/images/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg
diff --git a/assets/images/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg b/assets/images/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg
diff --git a/assets/images/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg b/assets/images/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg
diff --git a/assets/images/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg b/assets/images/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg
diff --git a/assets/images/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg b/assets/images/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg
diff --git a/assets/images/gallery/portraits/nino-van-prattenburg - 443cl1uR_8-unsplash.jpg b/assets/images/gallery/portraits/nino-van-prattenburg - 443cl1uR_8-unsplash.jpg
diff --git a/assets/images/nina.png b/assets/images/nina.png
diff --git a/assets/images/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg b/assets/images/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg
diff --git a/assets/images/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg b/assets/images/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg
diff --git a/assets/images/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg b/assets/images/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg
diff --git a/assets/images2/camera.png b/assets/images2/camera.png
diff --git a/assets/images2/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg b/assets/images2/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg
diff --git a/assets/images2/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg b/assets/images2/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg
diff --git a/assets/images2/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg b/assets/images2/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg
diff --git a/assets/images2/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg b/assets/images2/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg
diff --git a/assets/images2/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg b/assets/images2/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg
diff --git a/assets/images2/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg b/assets/images2/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg
diff --git a/assets/images2/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg b/assets/images2/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg
diff --git a/assets/images2/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg b/assets/images2/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg
diff --git a/...-van-prattenburg--443cl1uR_8-unsplash.jpg → ...-van-prattenburg--443cl1uR_8-unsplash.jpg b/...-van-prattenburg--443cl1uR_8-unsplash.jpg → ...-van-prattenburg--443cl1uR_8-unsplash.jpg
diff --git a/assets/images2/nina.png b/assets/images2/nina.png
diff --git a/assets/images2/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg b/assets/images2/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg
diff --git a/assets/images2/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg b/assets/images2/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg
diff --git a/assets/images2/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg b/assets/images2/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg
diff --git a/assets/maugallery.js b/assets/maugallery.js
@@ -52,18 +52,19 @@
     $(".gallery-item").on("click", function() {
       if (options.lightBox && $(this).prop("tagName") === "IMG") {
         $.fn.mauGallery.methods.openLightBox($(this), options.lightboxId);
+        $(".mg-prev").off("click").on("click", () =>
+          $.fn.mauGallery.methods.prevImage(options.lightboxId)
+        );
+        $(".mg-next").off("click").on("click", () =>
+          $.fn.mauGallery.methods.nextImage(options.lightboxId)
+        );
       } else {
         return;
       }
     });
 
     $(".gallery").on("click", ".nav-link", $.fn.mauGallery.methods.filterByTag);
-    $(".gallery").on("click", ".mg-prev", () =>
-      $.fn.mauGallery.methods.prevImage(options.lightboxId)
-    );
-    $(".gallery").on("click", ".mg-next", () =>
-      $.fn.mauGallery.methods.nextImage(options.lightboxId)
-    );
+
   };
   $.fn.mauGallery.methods = {
     createRowWrapper(element) {
@@ -150,12 +151,10 @@
 
       $(imagesCollection).each(function(i) {
         if ($(activeImage).attr("src") === $(this).attr("src")) {
-          index = i ;
+          index = i-1 ;
         }
       });
-      next =
-        imagesCollection[index] ||
-        imagesCollection[imagesCollection.length - 1];
+      next = imagesCollection[index];
       $(".lightboxImage").attr("src", $(next).attr("src"));
     },
     nextImage() {
@@ -189,10 +188,10 @@
 
       $(imagesCollection).each(function(i) {
         if ($(activeImage).attr("src") === $(this).attr("src")) {
-          index = i;
+          index = i+1;
         }
       });
-      next = imagesCollection[index] || imagesCollection[0];
+      next = imagesCollection[index];
       $(".lightboxImage").attr("src", $(next).attr("src"));
     },
     createLightBox(gallery, lightboxId, navigation) {

diff --git a/assets/style.css b/assets/style.css
@@ -21,6 +21,10 @@ body {
 .top-header .name {
 	font-size: 26px;
 }
+.top-header .info p {
+	font-size: 14px;
+	margin: 0px;
+}
 
 .nav ul {
 	display: flex;
@@ -69,7 +73,7 @@ body {
 
 .picture img {
 	width: 100%;
-
+	height: auto;
 }
 #about-me {
 	flex: 2
@@ -100,9 +104,9 @@ body {
 .gallery .nav {
 	justify-content: center;
 }
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+.nav-pills .nav-link.active-tag, .nav-pills .show > .nav-link {
 	color: #fff;
-	background-color: #BEB45A;
+	background-color:#000;
 	border-radius:0 ;
 }
 .nav-pills .nav-link {
@@ -243,6 +247,11 @@ input[type="submit"] {
 	background-color: #BEB45A;
 	padding: .5em 1em
 }
+.visually-hidden {
+	color: #0a0a0a;
+	background-color: #fff;
+	opacity: 1;
+}
 
 @media all and (max-width: 1180px) {
 	.picture {

diff --git a/index.html b/index.html
@@ -1,28 +1,69 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
 <head>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="./assets/bootstrap/bootstrap.css">
+	<title>Nina Carducci, photographe professionnelle à Bordeaux</title>
+	<meta name="description" content="Nina Carducci, photographe professionnelle à
+		Bordeaux, vous propose ses services pour vos événements personnels et professionnels.">
+	<meta property="og:site_name" content="Nina Carducci, photographe professionnelle à Bordeaux">
+	<meta property="og:url" content="https://chifoumi62.github.io/Nina-Carducci-Dev/">
+	<meta property="og:type" content="website">
+	<meta property="og:title" content="Nina Carducci, photographe professionnelle à Bordeaux">
+	<meta property="og:description" content="Nina Carducci, photographe professionnelle à
+		Bordeaux, vous propose ses services pour vos événements personnels et professionnels.">
+	<meta property="og:image" content="https://chifoumi62.github.io/Nina-Carducci-Dev/assets/images/nina.png">
+	<link rel="stylesheet" href="./assets/bootstrap/bootstrap.min.css">
+	<meta name="twitter:card" content="summary_large_image">
+	<meta name="twitter:site" content="@monCompteTwitter">
+	<meta name="twitter:title" content="Nina Carducci, photographe professionnelle à Bordeaux">
+	<meta name="twitter:description" content="Nina Carducci, photographe professionnelle à
+		Bordeaux, vous propose ses services pour vos événements personnels et professionnels.">
+	<meta name="twitter:image" content="https://chifoumi62.github.io/Nina-Carducci-Dev/assets/images/nina.png">
+	<meta name="twitter:url" content="https://www.ninacarducci.com">
 	<link rel="stylesheet" href="./assets/style.css">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Inter&family=Spectral:ital,wght@0,400;1,300;1,400;1,800&display=swap" rel="stylesheet">
 	<meta charset="UTF-8">
-	<script src="./assets/bootstrap/bootstrap.bundle.js"></script>
-	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-	<script src="./assets/maugallery.js"></script>
-	<script src="./assets/scripts.js"></script>
+	<script type='application/ld+json'> 
+		{
+		  "@context": "http://www.schema.org",
+		  "@type": "ProfessionalService",
+		  "name": "Nina Carducci",
+		  "image": "https://chifoumi62.github.io/Nina-Carducci-Dev/assets/images/nina.png",
+		  "@id": "imageid",
+		  "url": "https://chifoumi62.github.io/Nina-Carducci-Dev/",
+		  "description": "Photographe professionnelle sur Bordeaux, laissez-moi immortaliser les étapes les plus importantes de votre vie, retoucher vos photos pour un rendu optimal et créer des albums personnalisés, pour revivre et partager vos souvenirs.",
+		  "priceRange": "50€ - 400€",
+		  "address": {
+			"@type": "PostalAddress",
+			"streetAddress": "68 avenue Alsace-Lorraine",
+			"addressLocality": "Bordeaux",
+			"postalCode": "33200",
+			"addressCountry": "France"
+		  },
+		  "openingHours": "Lundi, Mardi, Mercredi, Jeudi, Vendredi 10:00-19:00",
+		  "contactPoint": {
+			"@type": "ContactPoint",
+			"telephone": "05 56 67 78 89"
+		  }
+		}
+	</script>
+	<script src="./assets/bootstrap/bootstrap.bundle.min.js" async></script>
+	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous" defer></script>
+	<script src="./assets/maugallery.js" defer></script>
+	<script src="./assets/scripts.js" defer></script>
 </head>
 <body>
 <div class="top-header">
-	<h3 class="name">Nina Carducci</h3>
+	<h1 class="name">Nina Carducci, photographe professionnelle à Bordeaux</h1>
 	<div class="nav">   
 		<ul>
 			<li><a href="#about">À propos</a></li>
 			<li><a href="#gallery">Galerie</a></li>
 			<li><a href="#services">Service</a></li>
 			<li><a href="#contact">Contact</a></li>
-			<li><a class="social-link" href="https://www.instagram.com/ninacarducci.photo/?hl=fr" target="_blank"><img src="assets/images/instagram.png" alt=""></a></li>
+			<li><a class="social-link" href="https://www.instagram.com/ninacarducci.photo/?hl=fr" target="_blank"><img src="assets/images/instagram.png" alt="logo instagram"></a></li>
 		</ul>
 	</div>
 </div>
@@ -36,13 +77,13 @@ <h3 class="name">Nina Carducci</h3>
 		</div>
 		<div class="carousel-inner">
 			<div class="carousel-item active">
-				<img src="./assets/images/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg" class="d-block w-100" alt="...">
+				<img src="./assets/images/slider/ryoji-iwata-wUZjnOv7t0g-unsplash.jpg" class="d-block w-100" alt="homme sur passage pieton">
 			</div>
 			<div class="carousel-item">
-				<img src="./assets/images/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg" class="d-block w-100" alt="...">
+				<img src="./assets/images/slider/nicholas-green-nPz8akkUmDI-unsplash.jpg"  class="d-block w-100" alt="homme au milieu d'une foulle de supporters">
 			</div>
 			<div class="carousel-item">
-				<img src="./assets/images/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg" class="d-block w-100" alt="...">
+				<img src="./assets/images/slider/edward-cisneros-3_h6-1NPDGw-unsplash.jpg" class="d-block w-100" alt="deux mariés qui s'embrassent">
 			</div>
 		</div>
 		<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
@@ -57,41 +98,41 @@ <h3 class="name">Nina Carducci</h3>
 </div>
 <div id="about">
 	<div class="picture left">
-		<img src="./assets/images/nina.png">
+		<img src="./assets/images/nina.png" alt="photo de Nina Carducci">
 	</div>
 	<div id="about-me">
-		<h3 class="about-me__title">A propos de moi</h3>
-		<h6 class="about-me__introduction">Devenir photographe était pour moi une évidence. Comme si j’y étais prédestiné. Saisir un moment, une émotion, une situation, un endroit, une lumière et les rendre immortels, voilà ce qui me fait vibrer.</h6>
+		<h2 class="about-me__title">A propos de moi</h2>
+		<p class="about-me__introduction">Devenir photographe était pour moi une évidence. Comme si j’y étais prédestiné. Saisir un moment, une émotion, une situation, un endroit, une lumière et les rendre immortels, voilà ce qui me fait vibrer.<p>
 		<p>Nous passons notre vie à chercher le bonheur, et lorsque nous y touchons, nous n’avons qu’une envie : le figer au travers de photographies pour le savourer avec les personnes qui sont importantes à nos yeux, ou le partager au plus grand nombre.
 			C’est ce que je vous propose : saisir ces merveilleux moments au travers de mon regard, mon approche, ma technique. Rendre ces moments immortels, afin que vous puissiez y puiser de l’amour, du bonheur, de la tendresse et de lumière à chaque fois que vous poserez les yeux sur vos photos.</p>
 	</div>
 </div>
 <div id="gallery">
-	<h3 class="title">Portfolio</h3>
+	<h2 class="title">Portfolio</h2>
 	<div class="container py-3">
 		<div class="gallery" style="display: none">
-			<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg"/>
-			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg"/>
-			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg"/>
-			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg"/>
-			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg"/>
-			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg"/>
-			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/nino-van-prattenburg--443cl1uR_8-unsplash.jpg"/>
-			<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg"/>
-			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg"/>
+			<img data-gallery-tag="Concert" class="gallery-item"  src="./assets/images/gallery/concerts/aaron-paul-wnX-fXzB6Cw-unsplash.jpg" alt="photo de concert">
+			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/ali-morshedlou-WMD64tMfc4k-unsplash.jpg" alt="photo d'un homme d'entreprise en costume">
+			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/jason-goodman-tHO1_OuKbg0-unsplash.jpg" alt="photo d'une femme d'entreprise en reunion">
+			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/hannah-busing-RvF2R_qMpRk-unsplash.jpg" alt="deux fois deux mains qui se tiennent">
+			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/ade-tunji-rVkhWWZFAtQ-unsplash.jpg" alt="visage d'un homme qui ferme les yeux">
+			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/jakob-owens-SiniLJkXhMc-unsplash.jpg" alt="photo d'un couple de mariés">
+			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/nino-van-prattenburg - 443cl1uR_8-unsplash.jpg" alt="femme avec des lunettes">
+			<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/austin-neill-hgO1wFPXl3I-unsplash.jpg" alt="photo du chanteur d'un concert">
+			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/mateus-campos-felipe-Fsgzm8N0hIY-unsplash.jpg" alt="femme d'entreprise qui sourit">
 		</div>
 	</div>
 	<div class="quote">
 		<figure>
 			<blockquote>
-				<h1 class="quote__text">Un portrait n’est pas une ressemblance. Dès lors qu’une émotion ou qu’un fait est traduit en photo, il cesse d’être un fait pour devenir une opinion. L’inexactitude n’existe pas en photographie. Toutes les photos sont exactes. Aucune d’elles n’est la vérité.</h1>
+				<p class="quote__text">Un portrait n’est pas une ressemblance. Dès lors qu’une émotion ou qu’un fait est traduit en photo, il cesse d’être un fait pour devenir une opinion. L’inexactitude n’existe pas en photographie. Toutes les photos sont exactes. Aucune d’elles n’est la vérité</p>
 			</blockquote>
 			<figcaption class="quote__author">- Richard Avedon</figcaption>
 		</figure>
 	</div>
 </div>
 <div id="services">
-	<h3 class="title">Mes services</h3>
+	<h2 class="title">Mes services</h2>
 	<div class="container">
 		<div class="service">
 			<div class="service__description">
@@ -129,30 +170,31 @@ <h4>400€ album A4</h4>
 <div class="quote">
 	<figure>
 		<blockquote>
-			<h1 class="quote__text">De manière inconsciente, je crois, je guette un regard, une expression, des traits ou une nostalgie capable de résumer ou plus exactement de révéler une vie</h1>
+			<p class="quote__text">De manière inconsciente, je crois, je guette un regard, une expression, des traits ou une nostalgie capable de résumer ou plus exactement de révéler une vie</p>
 		</blockquote>
 		<figcaption class="quote__author">- Richard Avedon</figcaption>
 	</figure>
 </div>
 <div id="contact">
 	<div class="container">
 		<div class="form-container">
-			<h3>Une question ? Une demande de devis ?</h3>
+			<h2>Une question ? Une demande de devis ?</h2>
 			<p> N’hésitez pas à m’écrire ! Je vous répondrais en moins de 24 heures</p>
-			<form action="" method="post">
-				<label>Nom</label>
+			<form action="#" method="post">
+				<label for="nom">Nom</label>
 				<input type="text" name="nom" id="nom">
-				<label>Email</label>
+				<label for="email">Email</label>
 				<input type="email" name="email" id="email">
-				<label>Message</label>
+				<label for="message">Message</label>
 				<textarea name="message" id="message" cols="30" rows="10"></textarea>
-				<input type="submit" value="Envoyer"/>
+				<input type="submit" value="Envoyer">
 			</form>
 		</div>
 		<div class="picture right">
-			<img src="./assets/images/camera.png">
+			<img src="./assets/images/camera.png" alt="photo d'un appareil photo">
 		</div>
 	</div>
 </div>
 </body>
+
 </html>