premier site web

2023-04-20 14:21:24 +02:00
parent f87a304958
commit fc823ef22e
74 changed files with 1431 additions and 0 deletions
--- a/Scolaire/DevWeb/Projet_Site_S1/CSS/style_mobile.css
+++ b/Scolaire/DevWeb/Projet_Site_S1/CSS/style_mobile.css
@@ -0,0 +1,155 @@
+body{
+    margin:0px;
+}
+
+h1{
+    text-align:center;
+    font-size: 150%;
+    color:#344DC9;
+}
+
+p{
+    width:90%;
+}
+
+ul{
+    flex:auto;
+    list-style-type:none;
+}
+
+dl{
+    width:90%;
+}
+
+dd{
+    color: #566573;
+    font-style: italic;
+}
+
+iframe{
+    width:65em;
+    height:35em;
+}
+
+header{
+    display:flex;
+    background-color:#C5C8C9;
+    flex-direction:column;
+    align-items:center;
+}
+
+header a{
+    flex:1;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+header a:visited{
+    color:#344DC9;
+}
+
+header a:hover{
+    color:black;
+}
+
+footer{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    jusify-content:space-around;
+    width:100%;
+    margin-top:2%;
+    background-color:#C5C8C9;
+}
+
+footer a{
+    flex:auto;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+footer a:visited{
+    color:#344DC9;
+}
+
+footer a:hover{
+    color:black;
+}
+
+#bandeau_page{
+    margin:5%;
+    width:10%;
+}
+
+nav{
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+    margin-top:2%;
+}
+
+nav ul li a{
+    flex:auto;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+nav ul li a:visited{
+    color:#344DC9;
+}
+
+nav ul li a:hover{
+    color:black;
+}
+
+section{
+    margin-top:2%;
+    margin-left:5%;
+}
+
+table{
+    width:90%;
+}
+
+section ul {
+    width : 90%;
+    border : 1px solid black;
+    padding : 0;
+}
+
+section li {
+    padding : 0.25rem;
+    margin : 0.25rem;
+}
+
+section li:nth-child(2n){
+    background-color:#888888;
+    color:white;
+}
+
+section li:nth-child(2n+1){
+    background-color : #dddddd;
+    font-style:italic;
+}
+
+.centrer_texte{
+    text-align:center;
+    width:90%;
+}
+
+.formulaire{
+    text-align:center;
+}
+
+textarea{
+    resize:none;
+    overflow:scroll;
+    height:20em;
+    width:65%;
+}
+
+@media print{
+    #CV{
+	display:none;
+    }
+}
--- a/Scolaire/DevWeb/Projet_Site_S1/CSS/style_ordinateur.css
+++ b/Scolaire/DevWeb/Projet_Site_S1/CSS/style_ordinateur.css
@@ -0,0 +1,159 @@
+body{
+    margin:0px;
+}
+
+h1{
+    text-align:justify;
+    font-size: 300%;
+    color:#344DC9;
+}
+
+p{
+    width:85%;
+}
+
+ul{
+    flex:auto;
+    list-style-type:none;
+}
+
+dl{
+    width:85%;
+}
+
+dd{
+    color: #566573;
+    font-style: italic;
+}
+
+iframe{
+    width:65em;
+    height:35em;
+}
+    
+header{
+    display:flex;
+    background-color:#C5C8C9;
+    flex-wrap:nowrap;
+    flex-direction:row;
+    align-items:center;
+}
+
+header a{
+    flex:1;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+header a:visited{
+    color:#344DC9;
+}
+
+header a:hover{
+    color:black;
+}
+
+footer{
+    display:flex;
+    flex-direction:row;
+    align-items:center;
+    jusify-content:space-around;
+    width:100%;
+    margin-top:2%;
+    background-color:#C5C8C9;
+}
+
+footer a{
+    flex:auto;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+footer a:visited{
+    color:#344DC9;
+}
+
+footer a:hover{
+    color:black;
+}
+
+#bandeau_page{
+    margin:5%;
+    width:10%;
+}
+
+nav{
+    float:left;
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+    width:15%;
+    margin-top:2%;
+}
+
+nav ul li a{
+    flex:auto;
+    color:#344DC9;
+    text-decoration:none;
+}
+
+nav ul li a:visited{
+    color:#344DC9;
+}
+
+nav ul li a:hover{
+    color:black;
+}
+
+section{
+    margin-top:2%;
+    margin-left:15%;
+}
+
+table{
+    width:85%;
+    border-spacing: 20px 5px;
+}
+
+section ul {
+    width : 85%;
+    border : 1px solid black;
+    padding : 0;
+}
+
+section li {
+    padding : 0.25rem;
+    margin : 0.25rem;
+}
+
+section li:nth-child(2n){
+    background-color:#888888;
+    color:white;
+}
+
+section li:nth-child(2n+1){
+    background-color : #dddddd;
+    font-style:italic;
+}
+
+.centrer_texte{
+    text-align:justify;
+    width:85%;
+}
+
+.formulaire{
+    text-align:justify;
+}
+
+textarea{
+    resize:none;
+    overflow:scroll;
+    height:20em;
+    width:65%;
+}
+
+@media print{
+    #CV{
+	display:none;
+    }
+}
--- a/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Andres.pdf
+++ b/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Andres.pdf
--- a/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Helo.pdf
+++ b/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Helo.pdf
--- a/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Loryne.pdf
+++ b/Scolaire/DevWeb/Projet_Site_S1/CV/CV_Loryne.pdf
--- a/Scolaire/DevWeb/Projet_Site_S1/FAQ.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/FAQ.html
@@ -0,0 +1,94 @@
+<!--Page de FAQ-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <title>FAQ</title>
+    <script>
+      var bouton = 0;
+      function DeroulerTexte(idTexte,idBouton, texte){
+	  if (bouton == 0){
+	      document.getElementById(idTexte).textContent= texte;
+	      document.getElementById(idBouton).textContent= ' - ';
+	      bouton = 1;
+	  }
+	  else{
+	      document.getElementById(idTexte).textContent= '';
+	      document.getElementById(idBouton).textContent= ' + ';
+	      bouton = 0;
+	  }
+      }
+    </script>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <section>
+      <h1>Questions fréquentes</h1>
+      <ul>
+	<li><p>Comment rechercher un produit ? <button class="button" id="boutonQ1" type="button" onclick="DeroulerTexte('Q1','boutonQ1','2 solutions s\u2019offrent à vous : Si vous savez précisemment quel produit vous souhaitez, rendez vous à la boutique qui répondra à vos attentes. Sinon, notre onglet recherche personnalisée répondra à vos besoins, aussi précis soient-ils.')"> + </button></p>
+	  <div id="Q1"></div></li>
+	
+	<li><p>Qu'est-ce que la recherche personnalisée ? <button class="button" id="boutonQ2" type="button" onclick="DeroulerTexte('Q2','boutonQ2','L\u2019onglet recherche personnalisée vous permet de faire des recherches précises qui répondent à vos besoins. Vous devez y indiquer si vous cherchez un ordinateur fixe ou portable, les logiciels que vous souhaitez faire tourner dessus, la couleur des composants ou encore votre budget.')"> + </button></p>
+	  <div id="Q2"></div></li>
+
+	<li><p>A quoi sert l'option BUILD ? <button class="button" id="boutonQ3" type="button" onclick="DeroulerTexte('Q3','boutonQ3','Lorsque vous commandez un produit via notre onglet recherche personnalisée, vous pouvez choisir l\u2019option BUILD. Cela vous permettra de recevoir votre ordinateur monté et personnalisé selon vos envies. Vous pouvez choisir la peinture, les stickers, le fond d\u2019écran, le système d\u2019exploitation, les logiciels à installer... Votre ordinateur arrivera chez vous prêt à l\u2019emploi !')"> + </button></p>
+	  <div id="Q3"></div></li>
+
+	<li><p>Quels sont les modes de paiement que vous acceptez ? <button class="button" id="boutonQ4" type="button" onclick="DeroulerTexte('Q4','boutonQ4','Le paiement s\u2019effectue exclusivement par carte bancaire.')"> + </button></p>
+	  <div id="Q4"></div></li>
+
+	<li><p>Peut on payer en plusieurs fois ? <button class="button" id="boutonQ5" type="button" onclick="DeroulerTexte('Q5','boutonQ5','Pour vous adapter à votre rythme, vous pouvez décider lors de votre achat de payer en 5 ou 10 fois')."> + </button></p>
+	  <div id="Q5"></div></li>
+
+	<li><p>Quels sont les délais de livraison ? <button class="button" id="boutonQ6" type="button" onclick="DeroulerTexte('Q6','boutonQ6','Votre produit sera livré chez vous ou au point relais le plus proche. Le prix et le temps de livraison varie selon le délai de confirmation, d\u2019expédition et d\u2019acheminement de votre produit. Si vous avez ajouté l\u2019option BUILD, le temps de livraison peut être prolongé jusqu\u2019à 1 semaine pendant laquelle nous nous occupons de votre futur ordinateur.')"> + </button></p>
+	  <div id="Q6"></div></li>
+
+	<li><p>A-t-on besoin d'un compte ? <button class="button" id="boutonQ7" type="button" onclick="DeroulerTexte('Q7','boutonQ7','Pour pouvoir acheter des produits sur notre site, il vous faudra créer un compte. Cela vous permettra d\u2019enregistrer vos informations de paiement (si vous le souhaitez), de suivre votre commande ou encore de consulter vos achats ultérieurs')"> + </button></p>
+	  <div id="Q7"></div></li>
+ 
+	<li><p>Que faire pour éviter que mon compte soit piraté ? <button class="button" id="boutonQ8" type="button" onclick="DeroulerTexte('Q8','boutonQ8','Lors de la création du compte, veuilez entrer un mot de passe d\u2019au moins 8 caractères, contenant des majuscules, des minuscules, des caractères spéciaux et des chiffres. Méfiez-vous toujours quand des informations personnelles vous sont demandées. Il faut que vous soyez sûr d\u2019etre sur notre site avant de renseigner vos informations de paiement et connexion. Si vous avez le moindre doute, n\u2019hésitez pas à changer votre mot de passe.')"> + </button></p>
+	  <div id="Q8"></div></li>
+
+	<li><p>D'où viennent les produits ? <button class="button" id="boutonQ9" type="button" onclick="DeroulerTexte('Q9','boutonQ9','Nous sommez une Market Place. Nos produits proviennent des sites internets de nos partenaires tels que Amazon, FNAC, Boulanger...')"> + </button></p>
+	  <div id="Q9"></div></li>
+
+	<li><p>Pour plus d'informations <button class="button" id="boutonQ10" type="button" onclick="DeroulerTexte('Q10','boutonQ10','Pour plus d\u2019informations, n\u2019hésitez pas à nous poser des questions sur notre page contact accessible depuis l\u2019onglet contact. Nous vous répondrons aussi vite que possible.')"> + </button></p>
+	  <div id="Q10"></div></li>
+      </ul>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href=#top>FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/Acer.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/Acer.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/Andres.JPG
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/Andres.JPG
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/CB.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/CB.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/Heloise.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/Heloise.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/MSI.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/MSI.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/Vibox-I-11-PC-Gamer-photo-1.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/Vibox-I-11-PC-Gamer-photo-1.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/asus_image.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/asus_image.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/carte_graphique.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/carte_graphique.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/carte_mere.png
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/carte_mere.png
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/casque.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/casque.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/clavier_souris.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/clavier_souris.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/creation_1.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/creation_1.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/creation_2.webp
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/creation_2.webp
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/disque_dur.webp
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/disque_dur.webp
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/logo.png
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/logo.png
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/loryne.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/loryne.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/sac.webp
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/sac.webp
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/souris.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/souris.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/stickers_1.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/stickers_1.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/tapis.avif
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/tapis.avif
--- a/Scolaire/DevWeb/Projet_Site_S1/Images/test.jpg
+++ b/Scolaire/DevWeb/Projet_Site_S1/Images/test.jpg
--- a/Scolaire/DevWeb/Projet_Site_S1/README.md
+++ b/Scolaire/DevWeb/Projet_Site_S1/README.md
@@ -0,0 +1,2 @@
+# SAE_web_S1
+
--- a/Scolaire/DevWeb/Projet_Site_S1/boutique_accessoires.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/boutique_accessoires.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <link rel='stylesheet' type='text/css' href='style.css'>
+    <title>Boutique accessoires</title>
+  </head>
+  
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    
+    <nav>
+      <ul>
+ 	<li><a href="boutique_ordinateurs.html">Ordinateurs</a></li>
+	<br>
+	<li><a href=#top>Accessoires</a><li>
+	<br>
+	<li><a href="boutique_composants.html">Composants</a></li>
+      </ul>
+    </nav>
+    
+    <section>
+      <h1>Les Accessoires</h1>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2>Sticker Seamless géométrique</h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/stickers_1.jpg" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br>Dimensions : 63x63cm</td>
+	  <div id="O1"></div></center>
+	</tr>
+	<tr>
+	  <td><center><b>Prix</b> : 18€</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      
+      <br><br>
+
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2>Chicago-sac ordinateur</h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/sac.webp" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br>1 sac ordinateur et 2 poches<br>Dimensions : ordinateurs entre 15 et 16 pouces</td>
+	  <div id="O2"></div></center>
+	</tr>
+	<tr>
+	  <td><center><b>Prix</b> : 89€</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table> 
+      
+      <br><br>
+      
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2>TECURS Souris Gaming sans Fil</h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/souris.jpg" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br> Souris Rechargeable Sans Fil : Batterie rechargeable intégrée de 500 mAh, facile à transporter.<br>Optique RGB : Lumière LED librement commutable. Longue durée de vie (3 à 7 jours).<br>Gaming et Bureautiques: Equipée de 5 DPI réglables (800-1200-1600-2400-4800), 9 boutons pour petits jeux et travail de bureau quotidien.<br> Ergonomique : Design très durable, sensibilité élevée, connexion stable, molette fluide, adaptée aux gauchers. <br>Ordinateur Portable : Compatible avec Windows/XP/VISTA/7/8/10/11/mac OS, Ordinateurs portables, PC, Apple Macbook, Macbook pro/air, PS4...</td>
+	  <div id="O3"></div></center>
+	</tr>
+	<tr>
+	  <td><center><b>Prix</b> : 19€99</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      
+      <br><br>
+      
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2> Generic - Ensemble clavier et souris sans fil rechargeables Accessoires pour ordinateur de bureau de jeu</h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/clavier_souris.jpg" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br>Type : combinaison sans fil<br> Méthode de travail : photoélectrique <br>Résolution photoélectrique : 2400 dpi<br>Objet applicable : ordinateur portable <br>Longueur du cordon : 1,5 <br>Taille du produit : 445*175*45 mm <br>Poids du produit : 1,3 </td>
+	  <div id="4"></div></center>
+	</tr>
+	<tr>
+	  <td><center><b>Prix</b> : 60€</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      
+      <br><br>
+      
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2>Tapis de bureau de carte du monde XXL</h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/tapis.avif" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br>Fait main<br>Matériaux : Caoutchouc, Néoprène, Tissu, Base antidérapante, Tissu antistatique </td>
+	  <div id="O5"></div></center>
+	      </tr>
+	<tr>
+	  <td><center><b>Prix</b> : 57€02</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      
+      <br><br>
+
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><h2>Casque gaming sans fil avec micro Jbl Quantum 600 - Noir </h2></center></td>
+	</tr>
+	<tr>
+	  <td><center><img src="Images/casque.jpg" width="25%"></center></td>
+	  <td><center><b>Caracteristiques </b>:<br>Bluetooth <br>Sans fil<br>Couleur : Noir <br> Modèle : Quantum 600<br>Gaming<br>Microphone<br>Marque : JBL <br>Poids : 346 g</td>
+	  <div id="O6"></div></center>
+	</tr>
+	<tr>
+	  <td><center><b>Prix</b> : 129€</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+    </section>
+    
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href=#top>Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/boutique_composants.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/boutique_composants.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <link rel='stylesheet' type='text/css' href='style.css'>
+    <title>Boutique composants</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    
+    <nav>
+      <ul>
+	<li><a href="boutique_ordinateurs.html">Ordinateurs</a></li>
+	<br>
+	<li><a href="boutique_accessoires.html">Accessoires</a></li>
+	<br>
+	<li><a href=#top>Composants</a></li>
+      </ul>
+    </nav>
+    
+    <section>
+      <h1>Composants</h1>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/carte_graphique.jpg" width="25%"></center></td>
+	  <td><center>Coprocesseur graphique : NVIDIA GeForce RTX 3070 Ti<br>Marque : GIGABYTE<br>Taille de la RAM graphique : 8 Go<br>Fréquence du GPU : 1830 MHz<br>Interface de sortie vidéo : DisplayPort<br>Marque chipset graphique : NVIDIA<br>Type de RAM graphique : GDDR6X<br>Usages recommandés pour le produit : Gaming<br>Composants inclus : NVIDIA GV-N307TGAMING OC-8GD</center></td>
+	</tr>
+	<tr>
+	  <td><center><h2>Carte Graphique NVIDIA GeForce RTX 3070</h2></center></td>
+	  <td><center><b>Prix</b> : 771€<center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      <br>
+      <br>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/carte_mere.png" width="25%"></center></td>
+	  <td><center>
+	      Adapté aux processeurs multicoeurs 
+	      <br> Outils de contrôle intelligent Asus
+	      <br> Audio de qualité
+	      <br> Refroidissement optimisé
+	  </center></td>
+	</tr>
+	<tr>
+	  <td><center><h2> Asus - ROG STRIX Z590-E GAMING WIFI</h2></center></td>
+	  <td><center><b>Prix</b> : 452€50<center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      <br>
+      <br>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/disque_dur.webp" width="25%"></center></td>
+	  <td><center>
+	      Taille mémoire : 6To	
+	      <br>Facteur de forme : 3,5po	
+	      <br>Tension - Alimentation : 5V, 12V	
+	      <br>Type : SATA III	
+	      <br>Température de fonctionnement : 5°C ~ 55°C</center></td>
+	</tr>
+	<tr>
+	  <td><center><h2>Disque dur SSD - HDEPV23GEA51F</h2></center></td>
+	  <td><center><b>Prix</b> : 213€19<center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+    </section>
+    
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href=#top>Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/boutique_ordinateurs.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/boutique_ordinateurs.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8"/>
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <link rel='stylesheet' href='style.css'>
+    <title>Boutique ordinateur</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    
+    <nav>
+      <ul>
+	<li><a href=#top>Ordinateurs</a></li>
+	<br>
+	<li><a href="boutique_accessoires.html">Accessoires</a></li>
+	<br>
+	<li><a href="boutique_composants.html">Composants</a></li>
+      </ul>
+    </nav>
+    <section>
+      <h1>Les Ordinateurs</h1>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/Vibox-I-11-PC-Gamer-photo-1.jpg" width="25%"></center></td>
+	  <td><center><b>Caractéristiques</b>:<br>Proccesseur : AMD Ryzen 3 <br> Disque SSD : 500GB NVMe M.2 <br> Mémoire RAM  : 16Go <br> carte graphique : Rdeon Vega 8 <br> ports de connexion : 4 ports USB et 1 port jack <br> Capacité du disque dur SSD : 1,00To</td>
+	  <div id="O1"></div></center>
+	</tr>
+	<tr>
+	  <td><center><h2>VIBOX I-11 PC GAMER</h2></center></td>
+	  <td><center><b>Prix</b> : 590€</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      <br>
+      <br>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/asus_image.jpg" width="25%"></center></td>
+	  <td><center><b>Caractéristiques</b>:<br>Utilisation : Bureautique <br>Taille PC Portable : 14"<br>Résolution : 1366x768<br> Processeur : INTEL Celeron<br> Mémoire RAM : 4 Go<br> SSD : SSD 64 Go<br>Constructeur GPU : Intel<br> Chipset graphique : Intel Intégré<br>Couleur : Bleu<br> OS : Windows 11 S<br> Poids Net : 1 -> 1.5 Kg<br> Fréquences : 60Hz</td>
+	  <div id="O1"></div></center>
+	</tr>
+	<tr>
+	  <td><center><h2>PC portable Asus ASUS 14 E410MANS-BV1315WS</h2></center></td>
+	  <td><center><b>Prix</b> : 258€33</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      <br>
+      <br>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/MSI.jpg" width="25%"></center></td>
+	  <td><center><b>Caractéristiques </b>:<br>Ecran : 17.3" UHD 120Hz<br>Carte graphique : RTX 3080 GDDR6 16Go<br>Processeur : intel Core i9-12900HK<br>RAM : DDR5 64 Go<br>Stockage : SSD 2 To<br>Système d'exploitation : Windows 11 Pro</td>
+	  <div id="O1"></div></center>
+	</tr>
+	<tr>
+	  <td><center><h2> Msi - Raider GE76 12UH-094FR</h2></center></td>
+	  <td><center><b>Prix</b> : 4 463€45</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+      <br>
+      <br>
+      <table style="border:solid 1px black">
+	<tr>
+	  <td><center><img src="Images/Acer.jpg" width="25%"></center></td>
+	  <td><center><b>Caractéristiques </b>:<br>Processeur Intel Core 10ème génération<br>NVIDIA GeForce RTX 3070<br>17.3'' FULL HD 144Hz Technologie IPS - Bordures Fines<br>Système de ventilation 5ème génération Aeroblade 3D PredatorSense</td>
+	  <div id="O1"></div></center>
+	</tr>
+	<tr>
+	  <td><center><h2> Acer - Predator Helios 300 PH317-55-77D5</h2></center></td>
+	  <td><center><b>Prix</b> : 1 699€99</center></td>
+	</tr>
+	<tfoot>
+	  <td COLSPAN="2"><font color = "#344DC9"><center><button>Ajouter au panier</button></center></font><td>
+	</tfoot>
+      </table>
+    </section>
+    
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href=#top>Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/index.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/index.html
@@ -0,0 +1,120 @@
+<!--ceci est le fichier html de la page d'accueil-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <title>Index</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <nav>
+      <ul>
+	<li><a href=#Nous>A propos de nous</a></li>
+	<br>
+	<li><a href=#promos>Les promos</a></li>
+	<br>
+	<li><a href=#bestAvisCli>Les meilleurs avis client</a></li>
+	<br>
+	<li><a href=#coupdecoeur>Les coups de coeur de l'équipe</a></li>
+	<br>
+	<li><a href=#NosCreations>Nos créations</a></li>
+      </ul>
+    </nav>
+    <section>
+      <div id="Nous">
+	<h1>A propos de nous</h1>
+	<p>Find'IT est une market place spécialisée dans le domaine des ordinateurs. Vous y trouverez une boutique contenant de nombreux ordinateurs, accessoires et composants mais également une option de recherche personnalisée vous permettant de trouver un ordinateur parfaitement adapté à vos besoins et à votre budget.</p>
+      </div>
+      <div id="promos">
+	<h1>Les meilleures promotions</h1>
+	<table>
+	  <tr>
+	    <td><a href="boutique_accessoires.html"><img src="Images/tapis.avif" alt="image du produit 1" width="100%"></a></td>
+	    <td><a href="boutique_accessoires.html"><img src="Images/souris.jpg" alt="image du produit 2" width="100%"></a></td>
+	    <td><a href="boutique_ordinateurs.html"><img src="Images/Acer.jpg" alt="image du produit 3" width="100%"></a></td>
+	  </tr>
+	  <tr>
+	    <th>Tapis de bureau de carte du monde XXL - 57€02</th>
+	    <th>TECURS Souris Gaming sans Fil - 19€99</th>
+	    <th>Acer - Predator Helios 300 PH317-55-77D5 - 1 699€99</th>
+	  </tr>
+	</table>
+      </div>
+      <br>
+      <br>
+      <div id="bestAvisCli">
+	<h1>Les mieux notés par les clients</h1>
+	<table>
+	  <tr>
+	    <td><a href="boutique_ordinateurs.html"><img src="Images/MSI.jpg" alt="image du produit 1" width="100%"></a></td>
+	    <td><a href="boutique_accessoires.html"><img src="Images/sac.webp" alt="image du produit 2" width="100% "></a></td>
+	    <td><a href="boutique_composants.html"><img src="Images/carte_graphique.jpg" alt="image du produit 3" width="100%"></a></td>
+	  </tr>
+	  <tr>
+	    <th>Msi - Raider GE76 12UH-094FR - 4 463€45</th>
+	    <th>Chicago - sac ordinateur - 89€</th>
+	    <th>Carte Graphique NVIDIA GeForce RTX 3070 - 771€</th>
+	  </tr>
+	</table>
+      </div>
+      <br>
+      <br>
+      <div id="coupdecoeur">
+	<h1>Les coups de coeur de l'équipe</h1>
+	<table>
+	  <tr>
+	    <td><a href="boutique_accessoires.html"><img src="Images/casque.jpg" alt="image du produit 1" width="100%"></a></td>
+	    <td><a href="boutique_ordinateurs.html"><img src="Images/Vibox-I-11-PC-Gamer-photo-1.jpg" alt="image du produit 2" width="100%"></a></td>
+	    <td><a href="boutique_composants.html"><img src="Images/clavier_souris.jpg" alt="image du produit 3" width="100%"></a></td>
+	  </tr>
+	  <tr>
+	    <th>Casque gaming sans fil - 129€</th>
+	    <th>VIBOX I-11 PC GAMER - 590€</th>
+	    <th>Ensemble clavier et souris sans fil - 60€</th>
+	  </tr>
+	</table>
+      </div>
+      <div id="NosCreations">
+	<h1>Nos créations avec l'option BUILD</h1>
+	<p>Avec l'option BUILD, décidez de la personnalisation de votre ordinateur lors de l'achat afin qu'il arrive monté et décoré selon vos envies :
+	  <br><img src="Images/creation_1.jpg" alt="image du produit 1" width="35%">
+	  <br>
+	  <br><img src="Images/creation_2.webp" alt="image du produit 2" width="35%"></p>
+      </div>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href=#top>Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/monter_un_ordinateur.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/monter_un_ordinateur.html
@@ -0,0 +1,92 @@
+<!--Page de Blog-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <title>Monter un ordinateur</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <nav>
+      <ul>
+	<li><a href=#besoins_materiel>Matériel</a></li>
+	<li><a href=#montage>Montage</a></li>
+      </ul>
+    </nav>
+    <section>
+      <h1>Comment monter un ordinateur fixe ?</h1>
+
+      <h2 id="besoins_materiel">Il vous faut :</h2>
+      <dl>
+	<dt>Le boitier</dt>
+	<dd>Le boitier est le support qui contient tous les composants de l'ordinateur. Il faut le choisir selon son esthétique, mais surtout selon les composants qu'il peut contenir, car un boitier n'est pas compatible avec tous les composants.</dd>
+	<br>
+	<dt>L'alimentation</dt>
+	<dd>La puissance de l'alimentation varie d'une alimentation à l'autre. Elle doit donc être choisie selon vos besoins. Pour un PC Gamer, par exemple, l'idéal est un alimentation de 500 à 700 Watts.</dd>
+	<br>
+	<dt>La carte mère</dt>
+	<dd>La carte mère est le composant qui relie tous les autres composants entre eux, les deux éléments déterminants pour le choix de la carte mère sont le socket et le chipset, qui définissent le processeur que tu pourras connecter à ta carte mère. Il faut aussi vérifier que la carte mère choisie possède suffisamment de ports pour connecter tous les composants désirés.</dd>
+	<br>
+	<dt>Le processeur</dt>
+	<dd>Le processeur est la calculatrice de l'ordinateur. Les processeurs sont mesurés par le nombre de coeurs, la vitesse de l'horloge et la consommation d'énergie. Plus il a de coeurs, et plus la vitesse de l'horloge est élevée, plus il est efficace. Sa consommation d'énergie doit également être la plus faible possible pour qu'il ne chauffe pas trop.</dd>
+	<br>
+	<dt>La pate thermique</dt>
+	<dd>Un processeur chauffe énormément. Il est donc nécessaire d'utiliser de la pâte thermique à appliquer directement sur le processeur. Cette pate, en contact avec le ventilateur cité ci-dessous, permettra de refroidir au maximum le processeur. Pour appliquer la pâte, il est conseillé de regarder des tutos.</dd>
+	<br>
+	<dt>Le ventilateur pour processeur</dt>
+	<dd>Le ventilateur de processeur, ou ventirad, permet de refroidir le processeur. Il faut choisir un ventirad avec une puissance supérieure ou égale à celle du processeur. Plus le débit d'air et la vitesse de rotation du ventirad est élevé, plus il est efficace. Si vous voulez un ordinateur silencieux, néanmoins, il vous faut choisir un ventirad avec une vitesse de rotation faibe. A vous de choisir un compromis satisfaisant.</dd>
+	<br>
+	<dt>La RAM</dt>
+	<dd>La RAM est l'espace de stockage à court terme. C'est à dire le stockage nécessaire à l'ordinateur pour faire des actions à l'instant t. Plus de RAM augmente la rapidité de l'ordinateur.</dd>
+	<br>
+	<dt>La carte graphique</dt>
+	<dd>La carte graphique est un mini ordinateur dans l'ordinateur. Elle doit être choisie selon l'écran que vous souhaitez utiliser, la consommation électrique, la fréquence, la mémoire, le nombre de ports... Il y a de nombreux sites où sont référencés les meilleures cartes graphiques du moment.</dd>
+	<br>
+	<dt>Le disque dur</dt>
+	<dd>Le disque dur est la bibliothèque de votre ordinateur. Il s'agit de l'espace de stockage principal. Vous pouvez en mettre plusieurs sur votre ordinateur.</dd>
+	<br>
+	<dt>Le ventilateur de boitier</dt>
+	<dd>Le ventilateur de boitier permet de chasser la chaleur de l'ordinateur pour lui éviter de trop chauffer. sa taille doit être choisie en fonction de la taille de votre boitier. Plus le ventilateur est puissant, plus il est efficace, mais plus il est bruyant.</dd>
+      </dl>
+      <p>Tous les composants doivent être choisis pour être compatible avec leurs voisins. Ils doivent être à la bonne taille pour pouvoir être contenus dans le boitier. Ensuite, l'éclairage et l'esthétique varient beaucoup en fonction des composants choisis.</p>
+
+      <h2 id="montage">Montage :</h2>
+      <p>Les composants doivent être montés dans l'ordre cité ci-dessus. N'oubliez pas de brancher les composants les uns après les autres à la carte mère. Munissez vous également de tournevis.</p>
+      <p><iframe src="https://www.youtube.com/embed/huMoftnkLHs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></p>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href=#top>Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/nous_contacter.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/nous_contacter.html
@@ -0,0 +1,103 @@
+<!--Page de nous contacter-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <title>Nous contacter</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <section>
+      <h1>Posez vos questions / Donnez-nous votre avis</h1>
+      <p class="centrer_texte">Vous vous posez une question et n'avez pas trouvé la réponse sur le site, ou vous souhaitez simplement \n donner votre avis ? Renseignez ce formulaire en nous laissant votre message et nous vous répondrons sur votre adresse mail ! <em>Les champs marqués d'une étoile (*) sont obligatoires.</em></p>
+      <form class="formulaire" method="POST" action="https://dwarves.iut-fbleau.fr/requete.php">
+	<div>
+	  <label for="lastname">Nom : *</label>
+	  <input type="text" name="lastname" id="lastname" placeholder="ex: Dupré" required>
+	</div>
+	<br>
+	<div>
+	  <label for="firstname">Prénom : *</label>
+	  <input type="text" name="firstname" id="firstname" placeholder="ex: Paul" required>
+	</div>
+	<br>
+	<div>
+	  <label for="birthdate">Date de naissance : </label>
+	  <input type="date" name="birthdate" id="birthdate">
+	</div>
+	<br>
+	<div>
+	  <label for="email">Adresse email : *</label>
+	  <input type="email" name="email" id="email" placeholder="ex: paul.dupre@gmail.com" required>
+	</div>
+	<br>
+	<div>
+	  <label for="postcode">Code postal : </label>
+	  <input type="number" name="postcode" id="postcode" placeholder="ex: 77300" min="5" max="99999">
+	</div>
+	<br>
+	<div>
+	  <label for="phonenumber">N° Télephone portable : </label>
+	  <input type="text" name="phonenumber" id="phonenumber" placeholder="ex: 0655667788" pattern="^(\+33|0)[6-7](\d\d){4}$">
+	</div>
+	<br>
+	<div>
+	  <label for="categorie">Catégorie : *</label>
+	  <select name="categorie" id="categorie" required>
+	    <option value="">--Choisissez une option--</option>
+	    <option value="Ordinateur Fixe">Ordinateur fixe</option>
+	    <option value="Ordinateur Portable">Ordinateur portable</option>
+	    <option value="Accessoires">Accessoires</option>
+	    <option value="Autres">Autre</option>
+	  </select>
+	</div>
+	<br>
+	<div>
+	  <label for="message">Message : *</label>
+	  <br>
+	  <br>
+	  <textarea name="message" id="message" required></textarea>
+	</div>
+	<br>
+	<div>
+	  <input type="submit" value="Envoyer">
+	  <input type="reset" value="Remettre à zéro">
+	</div>
+      </form>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href=#top>Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/qui_sommes_nous.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/qui_sommes_nous.html
@@ -0,0 +1,67 @@
+<!--ce document html contient la page infoservice du site. cette page doit contenir la description de notre service et le fonctionnement général du site (la FAQ se concentre elle sur des question plus précises)-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <title>Qui sommes-nous</title>
+  </head>
+  <body>
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <section>
+      <h1>Qui sommes-nous ?</h1>
+      <p>Trois jeunes diplômés en informatique, nous avons tous étudiés et obtenu notre diplôme dans le BUT de Fontainebleau puis avons décidés de lancer notre start up, Find'IT, après avoir remarqué à quel point il est difficile pour un non-initié de s'acheter un ordinateur portable répondant à ses besoins. </p>
+      <br>
+      <h2>VALLEJOS Robert Andres</h2>
+      <p>Notre WebDesigner. </p>
+      <img src="Images/Andres.JPG" alt="Photo d'Andres" width="25%">
+      <br>
+      <a id="CV" href="CV/CV_Andres.pdf" target="_blank">Voir le CV</a>
+      <br>
+      <h2>LAFFEA-DIDOT Loryne</h2>
+      <p>Notre cheffe de projet.</p>
+      <img src="Images/loryne.jpg" alt="Photo de Loryne" width="25%">
+      <br>
+      <a id="CV" href="CV/CV_Loryne.pdf" target="_blank">Voir le CV</a>
+      <br>
+      <h2>BOUSSON Héloïse</h2>
+      <p>Notre développeuse web.</p>
+      <img src="Images/Heloise.jpg" alt="Photo d'Héloïse" width="25%">
+      <br>
+      <a id="CV" href="CV/CV_Helo.pdf" target="_blank">Voir le CV</a>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href="recherche_personnalisee.html">Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href=#top>Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/recherche_personnalisee.html
+++ b/Scolaire/DevWeb/Projet_Site_S1/recherche_personnalisee.html
@@ -0,0 +1,157 @@
+<!--ce fichier html contient le service de recherche personnalisé. il doit pouvoir afficher des articles de la boutique et contenir un fil d'arianne-->
+
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" media="(max-width: 320px)" type="text/css" href="CSS/style_mobile.css">
+    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="CSS/style_ordinateur.css">
+    <script type="text/javascript" src="recherche_personnalisee.js"></script> 
+    <title>Recherche personnalisée</title>
+  </head>
+  <body onload="demarrer()">
+    <header>
+      <a href="index.html"><img src="Images/logo.png" width="85%"></a>
+      <a href="recherche_personnalisee.html">Recherche Personnalisée</a>
+      <a href="boutique_ordinateurs.html">Boutique</a>
+      <a href="FAQ.html">FAQ</a>
+      <a href="monter_un_ordinateur.html">Tuto montage</a>
+      <a href="qui_sommes_nous.html">Qui sommes-nous</a>
+      <a href="nous_contacter.html">Nous contacter</a>
+    </header>
+    <section>
+      <form class="formulaire" method="POST" action="https://dwarves.iut-fbleau.fr/recherche.php">
+	<div id="partie0">
+	  <h1>Recherche Personnalisée</h1>
+	  <h2>Budget</h2>
+	  <p>Quel est votre budget ?</p>
+	  <label for="prix_mini">Budget minimum : </label>
+	  <input type="number" name="prix_mini" id="prix_mini" placeholder="ex: 200" min="0" max="30000" required>
+	  <br>
+	  <br>
+	  <label for="prix_maxi">Budget maximum : </label>
+	  <input type="number" name="prix_maxi" id="prix_maxi" placeholder="ex: 1000" min="0" max="30000" required>
+	  <br>
+	  <br>
+	  <button class="button" id="bouton1" type="button" onclick="partie0()"> Suivant </button>
+	</div>
+	<div id="partie1">
+	  <h2>Logiciel</h2>
+	  <p>Quels logiciels voulez vous faire tourner ? Séparez les différents logiciels par une virgule si vous en mettez plusieurs.</p>
+	  <label for="logiciels">Logiciel(s) : </label>
+	  <input type="text" name="logiciels" id="logiciels" placeholder="ex: Android Studio" required>
+	  <br>
+	  <br>
+	  <button class="button" id="bouton2" type="button" onclick="partie1()"> Suivant </button>
+	</div>
+	<div id="partie2">
+	  <h2>Type d'ordinateur</h2>
+	  <p>Vous voulez un PC portable ou un PC fixe ?</p>
+	  <button class="button" id="bouton3" type="button" onclick="partie3()"> PC Portable </button>
+	  <button class="button" id="bouton4" type="button" onclick="partie4()"> PC fixe </button>
+	</div>
+	<div id="partie3">
+	  <h2>Les ordinateurs portables</h2>
+	  <img src="Images/Acer.jpg" width="15%">
+	  <button class="button" id="bouton5" type="button" onclick="partie6()"> Je veux celui-là </button>
+	  <img src="Images/asus_image.jpg" width="15%">
+	  <button class="button" id="bouton5" type="button" onclick="partie6()"> Je veux celui-là </button>
+	  <img src="Images/MSI.jpg" width="15%">
+	  <button class="button" id="bouton5" type="button" onclick="partie6()"> Je veux celui-là </button>
+	</div>
+	<div id="partie4">
+	  <h2>Les ordinateurs fixes</h2>
+	  <img src="Images/Vibox-I-11-PC-Gamer-photo-1.jpg" width="15%">
+	  <button class="button" id="bouton6" type="button" onclick="partie5()"> Je veux celui-là </button>
+	</div>
+	<div id="partie5">
+	  <h2>BUILD</h2>
+	  <p>Voulez-vous activer l'option BUILD ? <a href="FAQ.html">FAQ</a></p>
+	  <button class="button" id="bouton12" type="button" onclick="partie6()"> OUI </button>
+	  <button class="button" id="bouton7" type="button" onclick="partie12()"> NON </button>
+	</div>
+	<div id="partie6">
+	  <h2>Personnaliser</h2>
+	  <p>Voulez-vous personnaliser votre ordinateur ? </p>
+	  <button class="button" id="bouton8" type="button" onclick="partie8()"> OUI </button>
+	  <button class="button" id="bouton9" type="button" onclick="partie7()"> NON </button>
+	</div>
+	<div id="partie8">
+	  <h2>Accessoires</h2>
+	  <img src="Images/casque.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	  <img src="Images/clavier_souris.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	  <img src="Images/sac.webp" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	  <img src="Images/souris.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	  <img src="Images/stickers_1.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	  <img src="Images/tapis.avif" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie10()"> Je veux celui-là </button>
+	</div>
+	<div id="partie9">
+	  <h2>Installer des logiciels</h2>
+	  <p>Voulez-vous que des logiciels soient installés ? </p>
+	  <label for="installer_logiciels">Logiciel(s) : </label>
+	  <input type="text" name="installer_logiciels" id="installer_logiciels" placeholder="ex: Android Studio">
+	  <br>
+	  <br>
+	  <button class="button" id="bouton14" type="button" onclick="partie7()"> Suivant </button>
+	</div>
+	<div id="partie12">
+	  <h2>Personnaliser</h2>
+	  <p>Voulez-vous personnaliser votre ordinateur ? </p>
+	  <button class="button" id="bouton15" type="button" onclick="partie14()"> OUI </button>
+	  <button class="button" id="bouton16" type="button" onclick="partie7()"> NON </button>
+	</div>
+	<div id="partie14">
+	  <h2>Accessoires</h2>
+	  <img src="Images/casque.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	  <img src="Images/clavier_souris.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	  <img src="Images/sac.webp" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	  <img src="Images/souris.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	  <img src="Images/stickers_1.jpg" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	  <img src="Images/tapis.avif" width="15%">
+	  <button class="button" id="bouton17" type="button" onclick="partie7()"> Je veux celui-là </button>
+	</div>
+	<div id="partie11">
+	  <h2>Autre</h2>
+	  <p>Avez-vous des précisions à nous donner ? </p>
+	  <textarea name="message" id="message"></textarea>
+	  <br>
+	  <button class="button" id="bouton7" type="submit"><a href="index.html"> Mettre dans le panier et retour à la page d'accueil</a></button>
+	</div>
+      </form>
+    </section>
+    <footer id="footer">
+      <img id="bandeau_page" src="Images/CB.jpg" alt="Nous acceptons les CB, VISA et MasterCard">
+      <ul>Tous nos liens
+	<li><a href="index.html">Accueil</a></li>
+	<li><a href=#top>Recherche Personnalisée</a></li>
+	<li><a href="boutique_ordinateurs.html">Boutique ordinateurs</a></li>
+	<li><a href="boutique_composants.html">Boutique composants</a></li>
+	<li><a href="boutique_accessoires.html">Boutique accessoires</a></li>
+	<li><a href="FAQ.html">FAQ</a></li>
+	<li><a href="monter_un_ordinateur.html">Tuto montage</a></li>
+	<li><a href="qui_sommes_nous.html">Qui sommes-nous</a></li>
+	<li><a href="nous_contacter.html">Nous contacter</a></li>
+      </ul>
+      <ul>Les Créateurs de Find'IT :
+	<br><br>
+	<li>VALLEJOS Robert Andres</li>
+	<br>
+	<li>LAFFEA-DIDOT Loryne</li>
+	<br>
+	<li>BOUSSON Héloïse</li>
+      </ul>
+      <a id="bandeau_page" href=#top>Haut de page</a>
+    </footer>
+  </body>
+</html>
--- a/Scolaire/DevWeb/Projet_Site_S1/recherche_personnalisee.js
+++ b/Scolaire/DevWeb/Projet_Site_S1/recherche_personnalisee.js
@@ -0,0 +1,79 @@
+function demarrer(){
+    document.getElementById('partie1').style= 'display:none';
+    document.getElementById('partie2').style= 'display:none';
+    document.getElementById('partie3').style= 'display:none';
+    document.getElementById('partie4').style= 'display:none';
+    document.getElementById('partie5').style= 'display:none';
+    document.getElementById('partie6').style= 'display:none';
+    //document.getElementById('partie7').style= 'display:none';
+    document.getElementById('partie8').style= 'display:none';
+    document.getElementById('partie9').style= 'display:none';
+    //document.getElementById('partie10').style= 'display:none';
+    document.getElementById('partie11').style= 'display:none';
+    document.getElementById('partie12').style= 'display:none';
+    document.getElementById('partie14').style= 'display:none';
+}
+
+function partie0(){ //budget
+    document.getElementById('bouton1').style= 'display:none';
+    document.getElementById('partie1').style= 'display:block';
+}
+
+function partie1(){ //logiciel
+    document.getElementById('bouton2').style= 'display:none';
+    document.getElementById('partie2').style= 'display:block';
+}
+
+function partie3(){ //type ordi : portable
+    document.getElementById('bouton3').style= 'display:none';
+    document.getElementById('bouton4').style= 'display:none';
+    document.getElementById('partie3').style= 'display:block';
+}
+
+function partie4(){ //type ordi : fixe
+    document.getElementById('bouton3').style= 'display:none';
+    document.getElementById('bouton4').style= 'display:none';
+    document.getElementById('partie4').style= 'display:block';
+}
+
+function partie5(){ //build
+    document.getElementById('bouton6').style= 'display:none';
+    document.getElementById('partie5').style= 'display:block';
+}
+
+function partie6(){ //personnaliser avec build
+    document.getElementById('bouton5').style= 'display:none';
+    document.getElementById('partie6').style= 'display:block';
+}
+
+function partie7(){ //autre
+    document.getElementById('bouton8').style= 'display:none';
+    document.getElementById('bouton9').style= 'display:none';
+    document.getElementById('bouton14').style= 'display:none';
+    document.getElementById('bouton12').style= 'display:none';
+    document.getElementById('bouton17').style= 'display:none';
+    document.getElementById('partie11').style= 'display:block';
+}
+
+function partie8(){ //accessoires avec build
+    document.getElementById('bouton8').style= 'display:none';
+    document.getElementById('bouton9').style= 'display:none';
+    document.getElementById('partie8').style= 'display:block';
+}
+
+function partie10(){ //logiciel avec build
+    document.getElementById('bouton17').style= 'display:none';
+    document.getElementById('partie9').style= 'display:block';
+}
+
+function partie12(){ //personnaliser sans l'option build
+    document.getElementById('bouton12').style= 'display:none';
+    document.getElementById('bouton7').style= 'display:none';
+    document.getElementById('partie12').style= 'display:block';
+}
+
+function partie14(){ //accessoires sans l'option build
+    document.getElementById('bouton16').style= 'display:none';
+    document.getElementById('bouton15').style= 'display:none';
+    document.getElementById('partie14').style= 'display:block';
+}