diff --git a/assets/script.js b/assets/script.js
index 4fe57504..4a5c50f9 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -1,18 +1,71 @@
 const slides = [
-	{
-		"image":"slide1.jpg",
-		"tagLine":"Impressions tous formats <span>en boutique et en ligne</span>"
-	},
-	{
-		"image":"slide2.jpg",
-		"tagLine":"Tirages haute définition grand format <span>pour vos bureaux et events</span>"
-	},
-	{
-		"image":"slide3.jpg",
-		"tagLine":"Grand choix de couleurs <span>de CMJN aux pantones</span>"
-	},
-	{
-		"image":"slide4.png",
-		"tagLine":"Autocollants <span>avec découpe laser sur mesure</span>"
-	}
-]
+  {
+    image: "slide1.jpg",
+    tagLine: "Impressions tous formats <span>en boutique et en ligne</span>",
+  },
+  {
+    image: "slide2.jpg",
+    tagLine:
+      "Tirages haute définition grand format <span>pour vos bureaux et events</span>",
+  },
+  {
+    image: "slide3.jpg",
+    tagLine: "Grand choix de couleurs <span>de CMJN aux pantones</span>",
+  },
+  {
+    image: "slide4.png",
+    tagLine: "Autocollants <span>avec découpe laser sur mesure</span>",
+  },
+];
+
+let bannerImg = document.querySelector(".banner-img");
+let bannerTag = document.getElementById("tag");
+const arrowLeft = document.querySelector(".arrow_left");
+const arrowRight = document.querySelector(".arrow_right");
+const dots = document.querySelectorAll(".dot");
+
+let index = 0;
+
+// Initialisation de l'image et du texte
+bannerImg.src = "./assets/images/slideshow/" + slides[0].image;
+bannerTag.innerHTML = slides[0].tagLine;
+
+// Fonction pour mettre à jour l'image, le texte et les dots
+function updateSlide() {
+  bannerImg.src = "./assets/images/slideshow/" + slides[index].image;
+  bannerTag.innerHTML = slides[index].tagLine;
+
+  dots.forEach((dot, idx) => {
+    if (idx === index) {
+      dot.classList.add("dot_selected");
+    } else {
+      dot.classList.remove("dot_selected");
+    }
+  });
+}
+
+// Flèche droite
+arrowRight.addEventListener("click", () => {
+  index++;
+  if (index >= slides.length) {
+    index = 0; // Boucle vers le premier slide
+  }
+  updateSlide();
+});
+
+// Flèche gauche
+arrowLeft.addEventListener("click", () => {
+  index--;
+  if (index < 0) {
+    index = slides.length - 1; // Boucle vers le dernier slide
+  }
+  updateSlide();
+});
+window.onload = setInterval(function () {
+  index++;
+
+  if (index >= slides.length) {
+    index = 0; // Boucle vers le premier slide
+  }
+  updateSlide();
+}, 3000);
diff --git a/assets/style.css b/assets/style.css
index ebec468b..ad18e235 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,297 +1,579 @@
 /* variables declaration */
 :root {
-	--primary-color: #3396C0;
-	--secondary-color: #CD006B;
-	--third-color: #EEE325;
+  --primary-color: #3396c0;
+  --secondary-color: #cd006b;
+  --third-color: #eee325;
 }
 
 /* Reset CSS */
 * {
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font: inherit;
-	font-size: 100%;
-	vertical-align: baseline;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 body {
-
+  max-width: 1440px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+main,
+.container {
+  max-width: 100%;
+  box-sizing: border-box;
+  padding-inline: 0.5%;
 }
+
 section {
-	margin-block: 6em;
+  margin-block: 6em;
 }
 h2 {
-	font-family: 'Roboto Slab', sans-serif;
-	font-size: 40px;
-	font-weight: 900;
-	margin-block: 1em;
+  font-family: "Roboto Slab", sans-serif;
+  font-size: 40px;
+  font-weight: 900;
+  margin-block: 1em;
 }
-h3{
-	font-family: 'Roboto Slab', sans-serif;
-	font-size: 22px;
-	font-weight: 900;
-	margin-block: 1em;
+h3 {
+  font-family: "Roboto Slab", sans-serif;
+  font-size: 22px;
+  font-weight: 900;
+  margin-block: 1em;
 }
 
-p, li {
-	font-family: Roboto, sans-serif;
-	font-size: 16px;
-	line-height: 26px;
-}
-.container {
-	max-width: 1440px;
-	margin-inline:auto;
-	padding-inline: 5%;
+p,
+li {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  line-height: 26px;
 }
+
 header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  max-width: 1440px;
+  margin-inline: auto;
+}
+.recherche {
+  position: relative;
+  opacity: 1;
+  max-width: 100%;
 }
-.logo{
-	width: 260px;
-	margin-block: 10px;
+.user {
+  opacity: 1;
+  max-width: 100%;
+}
+.user i {
+  padding-right: 20px;
+  padding-top: 20px;
+}
+
+.container input {
+  border: none;
+  border-bottom: 1px solid black;
+  padding-top: 40px;
+  width: 300px;
+}
+.fa-magnifying-glass {
+  margin-left: -15px;
+  font-size: 17px;
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+}
+.liens {
+  max-width: 100%;
+  width: 100%;
+  background-color: #e6f4fb;
+  height: 50px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.liens a {
+  text-decoration: none;
+  color: black;
+}
+.logo {
+  width: 260px;
+  margin-block: 10px;
 }
 
 .btn {
-	background-color: var(--primary-color) ;
-	padding: 16px 32px;
-	margin-inline:5px;
-	border-radius: 5px;
-	color: white;
-	text-decoration: none;
+  background-color: var(--primary-color);
+  padding: 16px 32px;
+  margin-inline: 5px;
+  border-radius: 5px;
+  color: white;
+  text-decoration: none;
 }
 .devis {
-	background-color: var(--secondary-color);
+  background-color: var(--secondary-color);
 }
 
 #banner {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 470px;
-	position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 470px;
+  position: relative;
 }
 .banner-img {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	z-index: -1;
-	object-fit: cover;
-	object-position: center;
+  max-width: 1440px;
+  position: absolute;
+  max-width: 100%;
+  height: 100%;
+  z-index: -1;
+  object-fit: cover;
+  object-position: center;
+  overflow: hidden;
 }
 /* Code CSS en prévision de l'ajout d'un carousel pour la bannière */
 /* Gestion des fleches du carrousel */
 #banner .arrow {
-	position: absolute;
+  position: absolute;
+  display: flex;
+  width: 100%;
+
+  padding: 10px;
+  cursor: pointer;
 }
 #banner .arrow_left {
-	left: 10px;
+  left: 14px;
+  position: absolute;
+
+  padding: 5px;
+  border-radius: 20px 0 0 20px;
 }
 #banner .arrow_right {
-	right: 10px;
+  right: 14px;
+  position: absolute;
 }
 /* Gestion des points du carrousel */
 .dots {
-	position: absolute;
-	bottom: 40px;
-	display: flex;
+  position: absolute;
+  bottom: 60px;
+  display: flex;
+  cursor: pointer;
+  justify-content: center;
+  width: 100%;
 }
 .dot {
-	margin-inline: 5px;
-	width: 13px;
-	height: 13px;
-	background-color: #ffffff00;
-	border: 3px solid #fff;
-	border-radius: 100%;
-	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);;
+  margin-inline: 5px;
+  width: 13px;
+  height: 13px;
+  background-color: #ffffff00;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 }
 .dot_selected {
-	background-color: #fff;
+  background-color: #fff;
 }
 /* Fin du code CSS pour le carousel */
 #banner p {
-	font-family: 'Roboto Slab', sans-serif;
-	font-weight: 900;
-	font-size: 50px;
-	line-height: 66px;
-	color: white;
-	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-	text-align: center;
+  font-family: "Roboto Slab", sans-serif;
+  font-weight: 900;
+  font-size: 50px;
+  line-height: 66px;
+  color: white;
+  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  text-align: center;
 }
 #banner span {
-	display: block;
-	font-weight: 400;
-	font-size: 30px;
+  display: block;
+  font-weight: 400;
+  font-size: 30px;
 }
 #about-us {
-	display: flex;
+  display: flex;
 }
-#about-us article, #about-us aside {
-	flex:1;
+#about-us article,
+#about-us aside {
+  flex: 1;
 }
 #about-us li {
-	background: url("./images/tricolor-icon.png") no-repeat left top;
-	font-size: 16px;
-	line-height: 26px;
-	padding-left:2em;
-	width: 65%;
-	margin-bottom: 1em;
-
+  background: url("./images/tricolor-icon.png") no-repeat left top;
+  font-size: 16px;
+  line-height: 26px;
+  padding-left: 2em;
+  width: 65%;
+  margin-bottom: 1em;
 }
 
 #products {
-	display: flex;
-	align-items: flex-start;
-	flex-direction: row-reverse;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row-reverse;
 }
-#products div, #products aside {
-	flex:1;
+#products div,
+#products aside {
+  flex: 1;
 }
 #products div {
-	padding: 0 6em;
+  padding: 0 6em;
 }
 #products h2 {
-	margin-top: 0;
+  margin-top: 0;
 }
 .bg-yellow {
-	background-color: var(--third-color);
+  background-color: var(--third-color);
 }
 #question {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding-block: 3em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-block: 3em;
 }
 #question h2 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 #question p {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 #why-us {
-	display: flex;
-	flex-direction: column;
-	text-align: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
-#why-us > div{
-	display: flex;
-	justify-content: space-evenly;
+#why-us > div {
+  display: flex;
+  justify-content: space-evenly;
 }
 #why-us article {
-	max-width: 320px;
-	display: flex;
-	flex-direction: column;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
 }
 #why-us img {
-	width: 33%;
-	height: 150px;
-	text-align: center;
-	margin-inline: auto;
-	margin-block: 0;
-	object-fit: contain;
+  width: 33%;
+  height: 150px;
+  text-align: center;
+  margin-inline: auto;
+  margin-block: 0;
+  object-fit: contain;
 }
 
-.bg-lightblue{
-	background-color: #E6F4FB;
+.bg-lightblue {
+  background-color: #e6f4fb;
 }
 #contact {
-	margin-bottom: 0;
+  margin-bottom: 0;
+  width: auto;
 }
-#contact article, #contact div {
-	flex:1;
+#contact article,
+#contact div {
+  flex: 1;
 }
 
-
 #contact .container {
-	flex-direction: row;
-	display: flex;
-	padding: 6em ;
+  flex-direction: row;
+  display: flex;
+  padding: 6em;
 }
 
 #contact .container > div > div {
-	display: flex;
-	padding-bottom: 20px;
+  display: flex;
+  padding-bottom: 20px;
 }
 
 #contact h3 {
-	margin-top: 0;
-	background: url("./images/tricolor-icon.png") no-repeat left top;
-	padding-left:1.5em;
-	width: 200px;
+  margin-top: 0;
+  background: url("./images/tricolor-icon.png") no-repeat left top;
+  padding-left: 1.5em;
+  width: 200px;
 }
 .inline-icon {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 footer {
-	background-color: #28363D;
-	color: white;
-	display: flex;
-	padding-block: 3em;
-	justify-content: space-evenly;
-	font-size: 12px;
-	align-items: center;
+  background-color: #28363d;
+  color: white;
+  display: flex;
+  padding-block: 3em;
+  justify-content: space-evenly;
+  font-size: 12px;
+  align-items: center;
+  max-width: 1440px;
+  width: 100%;
 }
 footer div {
-
-	position: relative;
+  position: relative;
 }
 .footer-logo {
-	background-color: white;
-	max-width: 308px;
-	padding: 10px;
+  background-color: white;
+  max-width: 308px;
+  padding: 10px;
 }
 .footer-contact {
-	margin-bottom: 1em;
-	font-weight: 700;
-	font-size: 16px;
-
+  margin-bottom: 1em;
+  font-weight: 700;
+  font-size: 16px;
 }
 
 @media all and (max-width: 1250px) {
-	#contact > article {
-		flex: 2;
-	}
+  header,
+  .container {
+    max-width: 1250px;
+  }
+
+  main {
+    max-width: 1250px;
+    width: 100%;
+  }
+  section h2 {
+    text-align: center;
+  }
+  #contact > article {
+    flex: 2;
+  }
+  #about-us {
+    flex-direction: column-reverse;
+    max-width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #about-us div ul {
+    width: 100%;
+    display: flex;
+
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #about-us aside {
+    object-fit: cover;
+  }
+  #products {
+    flex-direction: column-reverse;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  #why-us > div {
+    max-width: 100%;
+  }
+  #question {
+    max-width: 100%;
+  }
+  #contact .container {
+    flex-direction: column-reverse;
+    display: flex;
+
+    justify-content: center;
+    max-width: 100%;
+  }
+
+  #contact .container > div > div {
+    display: flex;
+    padding-bottom: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+  footer {
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 40px;
+    align-content: baseline;
+    max-width: 100%;
+
+    margin: 0;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 20px;
+    justify-items: start;
+    align-items: center;
+  }
+  footer div {
+    max-width: 100%;
+  }
+  .footer-contact {
+    margin-bottom: 1em;
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
+@media all and (max-width: 768px) {
+  section {
+    max-width: 100%;
+  }
+  header,
+  footer,
+  main,
+  body,
+  .container {
+    max-width: 100%;
+    min-width: 470px;
+    overflow-x: hidden;
+  }
+  .recherche input,
+  .recherche i,
+  .user i {
+    opacity: 0;
+    width: 0;
+  }
+  .liens {
+    display: none;
+  }
+  #banner {
+    max-width: 100%;
+    min-width: 470px;
+  }
+  footer {
+    display: flex;
+    flex-direction: column-reverse;
+    padding: 20px;
+  }
+  footer div {
+    max-width: 100%;
+    margin-top: 20px;
+    margin-left: 10px;
+  }
+
+  #contact {
+    max-width: 100%;
+  }
+  #contact .container > div > div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #contact .container .magnifying-glass {
+    max-width: 100%;
+  }
+  #why-us > div {
+    max-width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 }
diff --git a/index.html b/index.html
index 8c07106a..5e342485 100644
--- a/index.html
+++ b/index.html
@@ -1,128 +1,244 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Print it ! - Impressions d'entreprise</title>
-	<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=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap" rel="stylesheet">
-</head>
-<body>
-<header class="container">
-	<h1>
-		<img class="logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
-	</h1>
-	<a class="btn devis" href="mailto:contact@print-it.tld">Devis</a>
-</header>
-<main>
-	<div id="banner">
-		<img class="banner-img" src="./assets/images/slideshow/slide1.jpg" alt="Banner Print-it">
-		<p>Impressions tous formats <span>en boutique et en ligne</span></p>
-		<div class="dots">
-		</div>
-	</div>
-	<section id="about-us" class="container">
-		<div>
-			<h2>Qui sommes-nous ?</h2>
-			<ul>
-				<li>Depuis près de 60 ans nous sommes un imprimeur familial spécialisé dans les besoins d’entreprises de petite et grande taille. Implantés à Rennes dans le quartier Bréquigny, nous accompagnons nos clients dans leurs projets d’impression.</li>
-				<li>De la création de vos fichiers à la livraison de vos imprimés, nous mettons tout notre savoir-faire à votre disposition afin de répondre au mieux à vos attentes.</li>
-			</ul>
-		</div>
-		<aside>
-			<img src="./assets/images/colors.jpg" alt="palette multicolore">
-		</aside>
-	</section>
-	<section id="products" class="container">
-		<div>
-			<h2>Nos produits</h2>
-			<p>Grâce à nos nombreuses années d'expérience dans l'impression de produits évènementiels et supports de communication, nous ne cessons d'innover et de perfectionner nos services afin de satisfaire au mieux nos clients. Vous pourrez parcourir les différentes rubriques du site afin de découvrir notre large gamme de papiers et finitions, pour des produits aussi divers que les dépliants ou plaquettes promotionnelles, les brochures, les flyers, les goodies d’entreprises, les autocollants de toutes tailles... </p>
-		</div>
-		<aside>
-			<img src="./assets/images/yellow-book.jpg" alt="Imprimeur avec un livre jaune dans les mains">
-		</aside>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Print it ! - Impressions d'entreprise</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <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=Roboto:wght@400;700&family=Roboto+Slab:wght@400;900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
 
-	</section>
-	<section id="question" class="bg-yellow">
-		<h2>Une question? Un devis?</h2>
-		<p>Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :</p>
-		<a href="mailto:contact@print-it.tld" class="btn devis">Devis</a>
-	</section>
-	<section id="why-us" class="container">
-		<h2>Pourquoi faire appel à nous?</h2>
-		<div>
-			<article>
-				<img src="./assets/images/proximity-icon.png" alt="Icone Proximité">
-				<h3>Proximité</h3>
-				<p>Facile d’accès, une équipe compétente et à l'écoute des clients vous attend pour tous vos besoins d'impression et en communication visuelle.</p>
-			</article>
-			<article>
-				<img src="./assets/images/quality-icon.png" alt="Icone Qualité">
-				<h3>Qualité</h3>
-				<p>Qu'il s'agisse de copies simples, de brochures, de cartes de visite ou de conception, nous vous garantissons toujours des résultats optimaux.</p>
-			</article>
-			<article>
-				<img src="./assets/images/speedy-icon.png" alt="Rapidité Qualité">
-				<h3>Rapidité</h3>
-				<p>Vous pouvez compter sur nous pour répondre à vos sollicitations en temps et en heure.</p>
-			</article>
-		</div>
-	</section>
-	<section id="contact" class="bg-lightblue">
-		<div class="container">
-			<div>
-				<h2>Contact</h2>
-				<div>
-					<h3>Par téléphone</h3>
-					<ul>
-						<li>Appelez-nous au 02 12 34 56 78</li>
-						<li>Lun-Ven : 9h30-18h30</li>
-						<li>Sam : 10h-13h et 14h-18h30</li>
-					</ul>
-				</div>
-				<div>
-					<h3>Par e-mail</h3>
-					<p>
-						<a href="mailto:contact@print-it.tld" class="btn">Nous écrire</a>
-					</p>
-				</div>
-				<div>
-					<h3>Se rendre en boutique</h3>
-					<p>5, rue Yves Noël,<br>
-						35200 Rennes<br>
-						<img class="inline-icon" src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
-				</div>
-			</div>
-			<div>
-				<img src="./assets/images/magnifying-glass.jpg" alt="Loupe avec palette bleue">
-			</div>
+  <body>
+    <header class="container">
+      <h1>
+        <img
+          class="logo"
+          src="./assets/images/logo.png"
+          alt="Print it ! Impressions d'entreprises"
+        />
+      </h1>
+      <div class="recherche">
+        <input type="text" placeholder="Rechercher un produit..." />
+        <i class="fa-solid fa-magnifying-glass"></i>
+      </div>
+      <a class="btn devis" href="mailto:contact@print-it.tld">Devis</a>
+      <div class="user">
+        <i class="fa-regular fa-user"></i>
+        <i class="fa-solid fa-cart-shopping"></i>
+      </div>
+    </header>
+    <div class="liens">
+      <a href="">Accueil</a>
+      <a href="">Catalogue produits</a>
+      <a href="">Tarifs</a>
+      <a href="">Nos papiers</a>
+      <a href="">Impressions online</a>
+      <a href="">Textiles et goodies</a>
+      <a href="">Adhésifs</a>
+      <a href="">Infos pratiques</a>
+      <a href="">Contact</a>
+    </div>
+    <main>
+      <div id="banner">
+        <img
+          class="banner-img"
+          src="./assets/images/slideshow/slide1.jpg"
+          alt="Banner Print-it"
+        />
+        <p id="tag">
+          Impressions tous formats <span>en boutique et en ligne</span>
+        </p>
 
-		</div>
-	</section>
-</main>
-<footer>
-	<div>
-		<p class="footer-contact">Contact</p>
-		<ul>
-			<li>Appelez-nous au 02 12 34 56 78</li>
-			<li>Lun-Ven : 9h30-18h30</li>
-			<li>Sam : 10h-13h et 14h-18h30</li>
-		</ul>
-	</div>
-	<div>
-		<p>5, rue Yves Noël,35200 Rennes<br>
-			<img src="./assets/images/metro.png" alt="metro"/> Clémenceau</p>
-	</div>
-	<div>
-		<a href="mailto:contact@print-it.tld" class="btn">Nous écrire</a>
-		<a href="mailto:contact@print-it.tld?subject=Demande&nbsp;de&nbsp;devis" class="btn devis">Devis</a>
-	</div>
-	<div>
-		<img class="footer-logo" src="./assets/images/logo.png" alt="Print it ! Impressions d'entreprises" >
-	</div>
-</footer>
-<script src="./assets/script.js"></script>
-</body>
+        <div class="arrow">
+          <img
+            class="arrow_left"
+            src="./assets/images/arrow_left.png"
+            alt="arrow_left"
+          />
+          <img
+            class="arrow_right"
+            src="./assets/images/arrow_right.png"
+            alt="arrow_right"
+          />
+        </div>
+
+        <div class="dots">
+          <div class="dot dot_selected"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+      </div>
+      <section id="about-us" class="container">
+        <div>
+          <h2>Qui sommes-nous ?</h2>
+          <ul>
+            <li>
+              Depuis près de 60 ans nous sommes un imprimeur familial spécialisé
+              dans les besoins d’entreprises de petite et grande taille.
+              Implantés à Rennes dans le quartier Bréquigny, nous accompagnons
+              nos clients dans leurs projets d’impression.
+            </li>
+            <li>
+              De la création de vos fichiers à la livraison de vos imprimés,
+              nous mettons tout notre savoir-faire à votre disposition afin de
+              répondre au mieux à vos attentes.
+            </li>
+          </ul>
+        </div>
+        <aside>
+          <img src="./assets/images/colors.jpg" alt="palette multicolore" />
+        </aside>
+      </section>
+      <section id="products" class="container">
+        <div>
+          <h2>Nos produits</h2>
+          <p>
+            Grâce à nos nombreuses années d'expérience dans l'impression de
+            produits évènementiels et supports de communication, nous ne cessons
+            d'innover et de perfectionner nos services afin de satisfaire au
+            mieux nos clients. Vous pourrez parcourir les différentes rubriques
+            du site afin de découvrir notre large gamme de papiers et finitions,
+            pour des produits aussi divers que les dépliants ou plaquettes
+            promotionnelles, les brochures, les flyers, les goodies
+            d’entreprises, les autocollants de toutes tailles...
+          </p>
+        </div>
+        <aside>
+          <img
+            src="./assets/images/yellow-book.jpg"
+            alt="Imprimeur avec un livre jaune dans les mains"
+          />
+        </aside>
+      </section>
+      <section id="question" class="bg-yellow">
+        <h2>Une question? Un devis?</h2>
+        <p>
+          Appelez-nous au 02 12 34 56 78 ou faites une demande de devis ici :
+        </p>
+        <a href="mailto:contact@print-it.tld" class="btn devis">Devis</a>
+      </section>
+      <section id="why-us" class="container">
+        <h2>Pourquoi faire appel à nous?</h2>
+        <div>
+          <article>
+            <img
+              src="./assets/images/proximity-icon.png"
+              alt="Icone Proximité"
+            />
+            <h3>Proximité</h3>
+            <p>
+              Facile d’accès, une équipe compétente et à l'écoute des clients
+              vous attend pour tous vos besoins d'impression et en communication
+              visuelle.
+            </p>
+          </article>
+          <article>
+            <img src="./assets/images/quality-icon.png" alt="Icone Qualité" />
+            <h3>Qualité</h3>
+            <p>
+              Qu'il s'agisse de copies simples, de brochures, de cartes de
+              visite ou de conception, nous vous garantissons toujours des
+              résultats optimaux.
+            </p>
+          </article>
+          <article>
+            <img src="./assets/images/speedy-icon.png" alt="Rapidité Qualité" />
+            <h3>Rapidité</h3>
+            <p>
+              Vous pouvez compter sur nous pour répondre à vos sollicitations en
+              temps et en heure.
+            </p>
+          </article>
+        </div>
+      </section>
+      <section id="contact" class="bg-lightblue">
+        <div class="container">
+          <div>
+            <h2>Contact</h2>
+            <div>
+              <h3>Par téléphone</h3>
+              <ul>
+                <li>Appelez-nous au 02 12 34 56 78</li>
+                <li>Lun-Ven : 9h30-18h30</li>
+                <li>Sam : 10h-13h et 14h-18h30</li>
+              </ul>
+            </div>
+            <div>
+              <h3>Par e-mail</h3>
+              <p>
+                <a href="mailto:contact@print-it.tld" class="btn"
+                  >Nous écrire</a
+                >
+              </p>
+            </div>
+            <div>
+              <h3>Se rendre en boutique</h3>
+              <p>
+                5, rue Yves Noël,<br />
+                35200 Rennes<br />
+                <img
+                  class="inline-icon"
+                  src="./assets/images/metro.png"
+                  alt="metro"
+                />
+                Clémenceau
+              </p>
+            </div>
+          </div>
+          <div>
+            <img
+              class="magnifying-glass"
+              src="./assets/images/magnifying-glass.jpg"
+              alt="Loupe avec palette bleue"
+            />
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div>
+        <p class="footer-contact">Contact</p>
+        <ul>
+          <li>Appelez-nous au 02 12 34 56 78</li>
+          <li>Lun-Ven : 9h30-18h30</li>
+          <li>Sam : 10h-13h et 14h-18h30</li>
+        </ul>
+      </div>
+      <div>
+        <p>
+          5, rue Yves Noël,35200 Rennes<br />
+          <img src="./assets/images/metro.png" alt="metro" /> Clémenceau
+        </p>
+      </div>
+      <div>
+        <a href="mailto:contact@print-it.tld" class="btn">Nous écrire</a>
+        <a
+          href="mailto:contact@print-it.tld?subject=Demande&nbsp;de&nbsp;devis"
+          class="btn devis"
+          >Devis</a
+        >
+      </div>
+      <div>
+        <img
+          class="footer-logo"
+          src="./assets/images/logo.png"
+          alt="Print it ! Impressions d'entreprises"
+        />
+      </div>
+    </footer>
+    <script src="./assets/script.js" defer></script>
+  </body>
 </html>