finalisation

Nathalia.html

@@ -22,7 +22,7 @@
 
 					<div id="logo_titre">
 					    
-						    <img src="images/logo1.jpg">
+						    <img src="images/dent.png">
 						<div id="titre">
 						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
 					        <h2>Chirurgien dentiste</h2>
@@ -42,12 +42,11 @@
 			    <nav>
                     <ul>
 
-			    	    <li><a href="">Acceuil</a></li>
-			    	    <li><a href="">Cabinet</a></li>
-			    	    <li><a href="">&Eacute;quipe</a></li>
-			    	    <li><a href="">Soins</a></li>
-			    	    <li><a href="">Equipements</a></li>
-		    			<li><a href="">Accès et horaires</a></li>
+			    	    <li><a href="#1">Acceuil</a></li>
+			    	    <li><a href="#2">Cabinet</a></li>
+			    	    <li><a href="#3">&Eacute;quipe</a></li>
+			    	    <li><a href="#4">Traitements</a></li>
+		    			<li><a href="#5">Accès</a></li>
 
 		    		</ul>
 
@@ -69,7 +68,7 @@
 
 			
 
-			<article>
+			<article id="1">
 
 				<div class="titre">
 					<span><div class="lign1"></div></span>
@@ -151,7 +150,7 @@
 
 			
 
-			<article>
+			<article id="2">
 				<div class="titre">
 					<span><div class="lign1"></div></span>
 					<h2>Notre Cabinet</h2>
@@ -219,7 +218,7 @@
 
 			</article>
 
-			<article>
+			<article id="3">
 
 				<div class="titre">
 					<span><div class="lign1"></div></span>
@@ -227,21 +226,153 @@
 				    <span><div class="lign1"></div></span>
 				</div>
 
-				<div id="nat">
-					<img src="images/mini_nat.jpg" alt="photo Dr" />
-					<div id="texte">
-						<h2>Docteur Natalya MARACHIAN</h2>
-						<h3>Chirurgien Dentiste</h3>
+				<div id="equipe">
+
+					<div id="profil">
+						<p><img src="images/mini_nat.jpg" alt="photo Dr" /></p>
+						<div id="nom">
+							<h2>Docteur Natalya MARACHIAN</h2>
+							<h3>Chirurgien Dentiste</h3>
+						</div>
+						<div id="exp">
+							<h3>Expertise : </h3>
+							<ul>
+								<li>2013 - Diplôme de la Faculté de Chirurgie Dentaire de Montpelier</li>
+								<li>2018 - Attestation de formation d'Injections d'Acide hyaluronique</li>
+							</ul>
+						</div>
+					</div>
+
+					<p id="lis"></p>
+
+					<div id="profil">
+						<p><img src="images/mini_priscilia.jpg" alt="photo assistante" /></p>
+						<div id="nom">
+							<h2>Priscilia</h2>
+							<h3>Assistante dentaire</h3>
+						</div>
+					</div>
+			    </div>
+
+
+				</article>
+
+
+				<article id="4">
+					<div class="titre">
+						<span><div class="lign1"></div></span>
+						<h2>Nos traitements</h2>
+						<span><div class="lign1"></div></span>
+				    </div>
+
+				    <nav>
+
+					    <div id="traitements">
+						
+							<div class="ensemble">
+								<a href="traitements/Implantologie.html">
+									<p id="img_traitement"><img src="images/implant.jpg" alt="image implant" /><P>
+									<h2>Implantologie</h2>
+							    </a>
+							</div>
+							<div class="ensemble">
+								<a href="traitements/Dentisterie.html">
+									<p id="img_traitement"><img src="images/detartr.jpg" alt="image detatr" /></p>
+									<h2>Dentisterie Omnipratique</h2>
+							    </a>
+							</div>
+							<div class="ensemble">
+								<a href="traitements/sourire.html">
+									<p id="img_traitement"><img src="images/sourire.jpg" alt="image sourire" /></p>
+									<h2>Réhabilitation du sourire</h2>
+								    </a>
+							</div>
+							<div class="ensemble">
+								<a href="traitements/acide.html">
+									<p id="img_traitement"><img src="images/injection.jpg" alt="image injection" /></p>
+									<h2>Injection d'Acide Hyaluronique</h2>
+								</a>
+							</div>
+							<div class="ensemble">
+								<a href="traitements/parodontologie.html">
+									<p id="img_traitement"><img src="images/parodon.jpg" alt="image parodontale" /><p>
+									<h2>Traitement des gencives : Parodontologie</h2>
+								</a>
+							</div>
+							<div class="ensemble">
+								<a href="traitements/Gouttières.html">
+									<p id="img_traitement"><img src="images/gout.png" alt="image gouttiere" /></p>
+									<h2>Alignement par Gouttières transparentes</h2>
+								</a>
+							</div>
+
+					    </div>
+
+					</nav>
+
+			    </article>
+
+			    <article id="5">
+
+
+
+					<div class="titre">
+						<span><div class="lign1"></div></span>
+						<h2>Accéder au cabinet</h2>
+			    		<span><div class="lign1"></div></span>
+					</div>
+                
+
+                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2837.738829614963!2d4.365803423056344!3d44.663687380272705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12b4df0fe407f01d%3A0x428e24baf9f719a5!2s3%20Bd%20de%20Vernon%2C%2007600%20Vals-les-Bains!5e0!3m2!1sfr!2sfr!4v1640273961203!5m2!1sfr!2sfr" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+
+
+
+			    </article>
+
+			    <article id="fin">
+
+			    	<h2>Vous avez une question ou souhaitez prendre rendez-vous ? </h2>
 
+			    	<a href="tel:+33981640809"><h3>Contactez-nous</h3></a>
 
+			    </article>
+
+			</section>
+
+
+			<footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
 				
 
+			</footer>
 
+	</div>
+</body>
+</html>
 
 
 
 
-			</article>
+
+			
+
+
+
+
+
+
+
+
+				
+
 
 
 
@@ -307,6 +438,3 @@
 	
 
 
-	</div>
-</body>
-</html>

style.css

@@ -6,6 +6,7 @@ margin:auto;}
 #bloc_page
 {width: 100%;
 margin:auto;
+background: rgb(189,244,252);
 }
 
 
@@ -72,11 +73,12 @@ color:rgb(193,65,82);
 header nav
 {
 height: 70px;
-font-size:1.4em;
+font-size:1.6em;
 text-align: center;
 padding-top: 35px;
 background-color: rgb(16,99,175);
 
+
 }
 
 header nav ul
@@ -87,7 +89,7 @@ margin:auto;}
 
 header nav li
 {list-style-type: none;
-	padding-right: 20px;
+	padding-right: 30px;
 }
 
 header nav a
@@ -103,6 +105,7 @@ border-bottom: 3px rgb(193,65,82) solid;
 }
 
 
+
 #smile
 {background: url("images/smile.jpeg") no-repeat fixed;
 background-size: cover;
@@ -316,6 +319,455 @@ padding-top: 60px;}
 width:100%;
 margin: auto;
 list-style-type: none;}
+
+
+#equipe
+{width: 80%;
+display: flex;
+margin-left: 10%;
+margin-top: 40px;
+padding-top: 30px;
+background:rgb(1,95,183,0.5);
+border-radius: 10px;
+}
+
+#lis
+{height: 400px;
+border-right: 1px black solid;
+width: 1%;
+
+margin-top: 50px;}
+
+#profil
+{display: inline-block;
+	flex-direction: column;
+	width: 49.5%;
+	color:white;
+}
+
+#profil p
+{text-align: center;
+
+}
+
+	
+
+
+
+
+
+
+
+#nom 
+{display: flex;
+flex-direction: column;
+align-items: center;
+
+}
+
+
+
+
+#nom h2
+{font-size: 1.6em;}
+
+#nom h3
+{font-size: 1.3em;
+color:rgb(222,223,224);
+margin-top: -10px;
+font-weight: normal;}
+
+
+#exp
+{padding-left: 80px;}
+
+#exp h3
+{font-size: 1.3em;
+padding-left: 20px;
+color: rgb(2,77,142);}
+
+#exp ul
+{list-style-image:url("images/valid.png") ;
+
+
+}
+
+#exp li
+{padding-top: 5px;
+}
+
+#traitements
+{display: flex;
+	justify-content: space-between;
+	margin: auto;
+width: 80%;
+margin-top: 50px;
+flex-wrap: wrap;}
+
+.ensemble
+{width: 30%;}
+
+
+.ensemble h2
+{text-align: center;
+	font-weight: normal;
+}
+
+article nav a
+{text-decoration: none;
+color: black;}
+
+article nav a:hover
+{text-decoration:underline;
+color:rgb(119,221,249);}
+
+iframe
+{margin-top: 50px;
+}
+
+
+#fin
+{width: 80%;
+margin: auto;}
+
+#fin h2
+{
+font-size: 3em;
+width: 40%;
+margin:auto;
+margin-top: 150px;
+text-align: center;
+color: rgb(28,51,71);
+}
+
+#fin h3
+
+{font-size: 2em;
+margin-top: 100px;
+width: 18%;
+margin-left: 39%;
+font-weight: initial;
+
+text-align: center;
+padding: 10px;
+background:rgb(8,142,221);}
+
+
+#fin a
+{text-decoration: none;
+color:white;
+}
+
+#fin a:hover
+{color:rgb(8,142,221);}
+
+#fin h3:hover
+{background: white;
+border:1px rgb(8,142,221) solid;}
+
+
+footer
+{margin-top: 100px;
+background-color: rgb(81,98,114);
+height: 300px;}
+
+
+footer h1
+{color: white;
+text-align: center;
+font-weight: initial;
+font-size: 1.6em;
+padding-top: 40px;
+}
+
+
+footer p
+{
+color:white;
+text-align: center;
+font-size: 1.3em;
+padding-top: 20px;
+
+}
+
+footer a
+{
+text-decoration: none;
+}
+
+#mention
+{color:white;
+text-align: center;
+font-size: 1.3em;
+padding-top: 20px;
+padding-bottom: 50px;}
+
+
+@media all and (max-width: 1200px)
+
+{ 
+	#block_page
+	{width: auto;}
+
+
+	#haut_de_page
+	{display:flex;
+		flex-direction: column;
+		width: 100%;
+		padding-top: 25px;
+
+		height: 170px;}
+
+	#logo_titre img
+    {
+      height:50px;
+      margin-top: 16px;
+  }
+
+
+    #titre h1
+    {font-size: 1.5em;
+    	padding-left: 10px;}
+
+    #titre h2
+    {font-size: 1.2em;
+    padding-left: 10px;}
+
+    .adresse
+    {list-style-image: url("images/map16.png")}
+
+    .tel
+	{list-style-image: url("images/tel16.png")}
+
+	#haut_de_page ul
+	{display: flex;
+		justify-content: space-between;}
+
+	#haut_de_page li
+	{width: 40%;}
+
+
+	header nav
+	{font-size: 1.2em;
+		height: 50px;
+		padding-top: 26px;}
+
+	header nav ul
+	{margin: auto;}
+
+	header nav li
+	{padding-right: 15px;}
+
+	#smile
+	{display: none;}
+
+
+	.titre
+	{margin-top: 35px;}
+
+	.titre h2
+	{font-size: 1.4em;}
+
+	#acceuil
+	{width:80%;
+	display: flex;
+    flex-direction: column;
+
+	
+	margin-top: 40px;
+	margin-bottom: 40px;
+
+    }
+
+
+    #acceuil img
+    {margin-left: 47%;
+    	height: 25px;}
+
+    #acceuil h3
+    {text-align: center;
+    	margin-top: 10px;}
+
+    #horaires,#accès,#contact,#urgence
+    {width: 80%;
+    	margin-left: 10%;
+    	margin-bottom: 40px;
+
+    	}
+
+    #horaires table
+    {margin:auto;
+    	padding-bottom: 15px;}
+
+    #accès h3
+    {padding-right: 5%;}
+
+
+    #presentation img
+	{display: none;}
+
+	#text_presentation 
+	{width: 100%;}
+
+	#text_presentation h2
+	{font-size: 1.3em;}
+
+	#text_presentation h3
+	{font-size: 1.1em;}
+
+	#text_presentation h4
+	{font-size: 1.1em;}
+
+	#text_presentation p,#text_presentation ul
+	{font-size: 1em;}
+
+	#text_presentation li
+	{padding-bottom: 8px;}
+
+
+	#photos
+	{padding-top: 20px;}
+
+
+	#photos h2
+	{font-size: 1.3em;
+		text-align: center;
+		padding-bottom: 20px;
+	}
+
+	#photos img
+	{width:100%;}
+
+	#photos ul
+	{display: flex;
+	flex-direction: column;
+	width:80%;
+	
+	list-style-type: none;}
+
+	#photos li
+	{margin: auto;
+		
+        margin-bottom: 8px;
+        
+        width: 80%;
+         }
+
+
+    #equipe
+    {flex-direction: column;
+    	background: rgb(189,244,252); }
+
+    #lis
+    {display: none;}
+
+    #profil
+    {width: 100%;
+    	color:black;}
+
+    #nom h2
+    {font-size: 1.4em;}
+
+    #nom h3
+    {font-size: 1.2em;
+    	color: rgb(8,142,221);}
+
+    #exp
+    {margin-bottom: 80px;}
+
+    #exp h3
+    {font-size: 1.2em;}
+
+    #traitements
+    {flex-direction: column;
+    }
+
+
+    .ensemble
+    {width: 100%;}
+
+    .ensemble h2
+    {font-size: 1.4em;
+    	margin-top: -10px;
+    	}
+    	
+
+    .ensemble img
+    {width: 80%;
+    }
+
+    #img_traitement
+    {text-align: center;
+    	}
+
+    
+
+    
+
+    iframe
+    {height:500px;}
+
+
+    #fin h2
+    {width: 100%;
+
+    	margin-top: 80px;
+    	margin-bottom: 80px;
+    	font-size: 2.4em;
+    	}
+
+    #fin h3
+    {width: 45%;
+    	margin: auto;
+    	font-size: 1.6em;}
+
+
+
+    footer
+    {height: 200px;}
+
+    footer h1
+    {font-size: 1.1em;
+    	padding-top: 20px;}
+
+    footer p
+    {font-size: 1em;
+    	padding-top: 10px;}
+
+    #mention
+    {font-size: 1em;
+    	padding-bottom: 20px;
+    	padding-top: 10px;}
+
+    }
+
+
+
+    
+
+
+
+
+
+
+    
+
+   
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

traitements/Acide.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Acide</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Injection d'Acide Hyaluronique</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/acide.jpg" alt="implant"></p>
+
+        	    <p class="text">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis, sic constituetis, iudices, nec descensurum quemquam ad hanc accusationem fuisse, cui, utrum vellet, liceret, nec, cum descendisset, quicquam habiturum spei fuisse, nisi alicuius intolerabili libidine et nimis acerbo odio.
+        	    <br/>
+        	    <br/> 
+
+        	    Niteretur. Sed ego Atratino, humanissimo atque optimo adulescenti meo necessario, ignosco, qui habet excusationem vel pietatis vel necessitatis vel aetatis. Si voluit accusare, pietati tribuo, si iussus est, necessitati, si speravit aliquid, pueritiae. Ceteris non modo nihil ignoscendum, sed etiam acriter est resistendum.
+        	    <br/>
+        	    <br/>
+
+                Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.
+            </p>
+
+
+        </section>
+
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+		</footer>
+
+
+	</div>
+</body>
+</html>
+
+

traitements/Dentisterie.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Dentisterie Omnipratique</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Dentisterie Omnipratique</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/dentisterie.jpg" alt="dentisterie"></p>
+
+        	    <p class="text">La dentisterie omni pratique répond à vos besoins en terme de soins dentaires les plus fréquents : traitement des caries, détartrage, contrôles bucco dentaires.
+        	    	<br/>
+        	    	<br/>
+
+                Nos traitements ont recours aux matériaux composites et aux céramiques pour éviter l’utilisation des plombages : c’est la dentisterie adhésive.
+                <br/>
+                <br/>
+
+                D’autre part, un des objectifs de la dentisterie moderne est d’empêcher l’apparition des maladies : les traitements de prophylaxie vous seront proposés si vous le souhaitiez, afin d’empêcher les caries et les problèmes de déchaussement.
+                </p>
+        </section>
+
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+		</footer>
+
+
+	</div>
+</body>
+</html>

traitements/Gouttières.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Parodontologie</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Alignement par Gouttières transparantes</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/gouttiere.png" alt="gouttière"></p>
+
+        	    <p class="text">Les aligneurs correspondent à un traitement orthodontique invisible préconisé dans les cas suivants : traitement.
+        	    	<br/>
+        	    	<br/>
+        	    </p>
+        	    <ul>
+        	    	<li>Dents qui se chevauchent</li>
+        	    	<li>Dents mal alignées</li>
+        	    	<li>Trop d'espace entre les dents</li>
+        	    	<li>Dents manquantes</li>
+        	    </ul>
+        	    <p class="text">
+        	    	Le cabinet propose un protocole de traitement avec la fabrication sur mesure de gouttières transparentes, et qui sont évolutives (DENTOSMILE). L’avantage est d’éviter les inesthétiques bagues en métal, difficilement compatibles avec une vie sociale ; en outre ces gouttières sont entièrement amovibles permettant de manger ainsi sans contrainte en particulier.
+        	    	<br/>
+        	    	<br/>
+
+					Portées quotidiennement pendant des laps de temps de deux à trois semaines, elles vont redresser les dents progressivement et en douceur. A la fin de chaque période, un autre jeu de gouttières prend la relève. Il faut, en général, environ un an pour obtenir un alignement parfait.
+
+               
+                </p>
+        </section>
+
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+		</footer>
+
+
+	</div>
+</body>
+</html>

traitements/Implantologie.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Implantologie</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Implantologie</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/implant1.jpg" alt="implant"></p>
+
+        	    <p class="text">L’implantologie permet de remplacer des dents manquantes ou malsaines et de répondre plus globalement aux besoins de stabilité masticatoire, fonctionnelle et esthétique.
+        	    	<br/>
+        	    	<br/>
+
+                Les implants dentaires sont des racines artificielles qui sont posées pour être au service des futures dents. L’objectif est d’obtenir des dents fixes.
+                <br/>
+                <br/>
+
+                Nous proposons les traitements implantaires en plusieurs étapes que sont le diagnostic, la planification et l’intégration de l’implant.
+                <br/>
+                <br/>
+
+                En effet un implant bien positionné ne se remarquera pas, ni au niveau fonctionnel qu’au niveau esthétique. Cette approche nous invite à planifier correctement la position idéale des implants dentaires et le moment idéal dans la séquence de traitement. Cette planification peut être matérialisée dans des guides chirurgicaux pour les cas complexes. De cette façon, la chirurgie est précise, prévisible et sûre.</p>
+
+
+        </section>
+
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+		</footer>
+
+
+	</div>
+</body>
+</html>
+
+
+
+
+
+

traitements/Parodontologie.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Parodontologie</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Parodontologie</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/parodont.jpg" alt="dentisterie"></p>
+
+        	    <p class="text">Les maladies parodontales sont des infections bactériennes (microbiennes) qui affectent et détruisent les tissus qui entourent et supportent les dents (le parodonte). Les tissus concernés sont la gencive, les fibres d’attachement (ligament ou desmodonte) et l’os qui supporte les dents. Les maladies parodontales constituent un problème important de santé et représentent, avec la carie dentaire, les affections principales de la cavité buccale.
+        	    	<br/>
+        	    	<br/>
+
+                Le développement et la progression de la maladie varient en fonction de :
+                <br/>
+                <br/>
+                </p>
+                <ul>
+                	<li>La susceptibilité de chacun aux bactéries pathogènes, régulée par l’efficacité de ses mécanismes de défense et la présence de certaines pathologies systémiques (diabète en particulier) ou la prise de médicaments.</li>
+                	<li>Des facteurs de risque tels que le tabac.</li>
+                	<li>Le stress peut diminuer les capacités de défense contre les bactéries.</li>
+                	<li>Des facteurs aggravants tels que les caries, les restaurations prothétiques inadaptées, les malpositions dentaires, …</li>
+                </ul>
+                <p class="text">
+                	Pour traiter cette affection, nous réalisons avec le patient son historique médical et dentaire (maladies, prises de médicaments, etc.), examinons ses gencives (radio, prises de mesures..) et proposons ensuite un plan de traitement.
+               
+                </p>
+        </section>
+
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+		</footer>
+
+
+	</div>
+</body>
+</html>

traitements/Sourire.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+    <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Corinthia&family=Dancing+Script:wght@600&family=El+Messiri&display=swap" rel="stylesheet">
+	<title>Réhabilitation du sourire</title>
+
+</head>
+
+<body>
+	<div id="bloc_page">
+
+		<header>
+
+			
+
+				<div id="haut_de_page">	
+
+
+					<div id="logo_titre">
+					    
+						    <img src="../images/dent.png">
+						<div id="titre">
+						    <h1>Cabinet du Dr Natalya MARACHIAN</h1>
+					        <h2>Chirurgien dentiste</h2>
+					    </div>
+					</div>
+
+
+
+					<ul>
+						<li class="adresse"> 3 Boulevard Vernon 07600 Vals Les Bains</li>
+					    <li class="tel"><a href="tel:+33981640809" title="Contactez nous"> +33 9 81 64 08 09</a></li>
+			        </ul>
+
+			    </div>
+
+
+			    <nav>
+                    <ul>
+
+			    	    <li><a href="file:///C:/Users/Matthieu/Desktop/siteNath/Nathalia.html">Acceuil</a></li>
+			    	    <li><a href="">Cabinet</a></li>
+			    	    <li><a href="">&Eacute;quipe</a></li>
+			    	    <li><a href="">Traitements</a></li>
+		    			<li><a href="">Accès</a></li>
+
+		    		</ul>
+
+			    </nav>
+
+
+
+
+		</header>
+
+        <section>
+
+
+				<div class="titre">
+					<span><div class="lign1"></div></span>
+					<h2>Réhabilitation du sourire</h2>
+					<span><div class="lign1"></div></span>
+				</div>
+
+        	    <p id="img"><img src="../images/sourire1.jpg" alt="dentisterie"></p>
+
+        	    <p class="text">Pour chacun d’entre nous  santé et harmonie  sont des facteurs importants de notre sourire et aussi de notre capacité à sourire.
+        	    	<br/>
+        	    	<br/>
+
+                Le défi est ici d’avoir  un sourire sain et beau en accord avec son visage.
+                <br/>
+                <br/>
+
+                Ce défi, notre équipe vous promet de le relever à l’aide des outils les plus appropriés : implants, facettes ou traitements orthodontiques adaptés à votre cas, avec une réelle fiabilité dans le temps.
+                <br/>
+                <br/>
+
+                Ces derniers ne sont que des outils pour atteindre le but de votre voyage : VOTRE SOURIRE.
+                <br/>
+                <br/>
+
+                La réhabilitation du sourire passe par quatre phases :
+                <br/>
+                <br/>
+                </p>
+                <ol>
+                	<li>Nous débutons par un entretien durant lequel nous cherchons à comprendre quels sont vos rêves, vos objectifs. Un bilan complet sera nécessaire (Radio panoramique, Empreintes, 3D si nécessaire, Bilan photo).</li>
+                	<li>A l’issue de ce bilan, nous proposons un plan de traitement dentaire ainsi qu’un SMILE DESIGN. Les outils numériques que nous utilisons nous permettent de dessiner votre sourire en fonction de votre visage, afin que l’ensemble, visage, sourire, dents soient en totale harmonie.</li>
+                	<li>Lors du traitement dentaire, nous solutionnons les problèmes éventuels tels que les caries, les infections des gencives, les dents manquantes, les malpositions des dents, les problèmes musculaires des mâchoires.</li>
+                	<li>Lorsque l’ensemble des problèmes de santé dentaire est réglé, tout est enfin possible et on peut passer à l’étape esthétique pour avoir le sourire idéal. Cela peut passer par des facettes, des couronnes, du blanchiment.</li>
+                </ol>
+               <p class="text">
+                Votre objectif est le nôtre : un beau sourire et une bouche stable et fonctionnelle.
+                </p>
+        </section>
+
+        <footer>
+				<h1>Cabinet dentaire Vals les Bains</h1>
+
+				<p>Docteur Natalya Marachian © 2021 - Tous droits réservés
+					<br/>
+					<br/>
+					Conception et résalisation : Matthieu Hertaut
+					
+				</p>
+					<a href=""><p id="mention">Mentions légales</p></a>
+				
+
+			</footer>
+
+
+	</div>
+</body>
+</html>

traitements/style.css

@@ -0,0 +1,344 @@
+body
+{width: auto;
+margin:auto;}
+
+
+#bloc_page
+{width: 100%;
+margin:auto;
+background: rgb(189,244,252);
+}
+
+
+
+
+
+#haut_de_page
+{height:200px;
+display:flex;
+justify-content: space-between;
+align-items: center;
+font-family: 'El Messiri', sans-serif;
+width: 80%;
+margin: auto;
+
+}
+
+#titre
+{display: flex;
+flex-direction: column;
+}
+
+#titre h2
+{
+	margin-top:-25px;
+}
+
+#titre h1
+{font-size: 2em;
+	font-weight: bold;
+	font-style: italic;
+
+}
+
+#titre h2
+{font-weight:normal; }
+
+#logo_titre
+{display: flex;}
+
+#logo_titre img
+{
+height:100px;}
+
+.adresse
+{list-style-image: url("images/map.png")}
+
+.tel
+{list-style-image: url("images/tel.png")}
+
+#haut_de_page li
+{margin-top: 3px;}
+
+#haut_de_page a
+{color: black;
+text-decoration: none;}
+
+#haut_de_page a:hover
+{
+text-decoration: underline;
+color:rgb(193,65,82);
+}
+
+header nav
+{
+height: 70px;
+font-size:1.4em;
+text-align: center;
+padding-top: 35px;
+background-color: rgb(16,99,175);
+
+}
+
+header nav ul
+{display: flex;
+flex-wrap: wrap;
+justify-content: center;
+margin:auto;}
+
+header nav li
+{list-style-type: none;
+	padding-right: 20px;
+}
+
+header nav a
+{color: white;
+
+text-decoration:none;
+
+}
+
+header nav a:hover
+{color:rgb(193,65,82);
+border-bottom: 3px rgb(193,65,82) solid; 
+}
+
+
+.titre
+{display: block;
+margin-top: 90px;
+margin-left: 10%;
+width: 80%;
+}
+
+.titre span
+{display:table-cell; 
+	vertical-align: middle;
+width: 50%;
+
+
+
+}
+
+.lign1
+{display:inline-block;
+border-bottom: 1px rgb(159,160,160) solid;
+width: 100%;}
+
+.titre h2
+{
+display: table-cell;
+padding-left: 5px;
+padding-right: 5px;
+font-size:1.9em;
+white-space: nowrap;
+}
+
+
+
+section img
+{width: 80%;
+margin: auto;
+}
+
+#img
+{text-align: center;
+margin-top: 50px;}
+
+.text
+{margin-top: 50px;
+font-size: 1.4em;
+width: 80%;
+margin-left: 10%;
+color: rgb(2,77,142);}
+
+section ol,section ul
+{font-size: 1.4em;
+width: 80%;
+margin-left: 10%;
+color: rgb(2,77,142);}
+
+section li
+{margin-top: 7px;}
+
+
+
+
+#fin
+{width: 80%;
+margin: auto;}
+
+#fin h2
+{padding-top: 150px;
+font-size: 3em;
+width: 40%;
+margin:auto;
+text-align: center;
+color: rgb(28,51,71);
+}
+
+#fin h3
+
+{font-size: 2em;
+margin-top: 80px;
+width: 18%;
+margin-left: 40%;
+font-weight: initial;
+
+text-align: center;
+padding: 10px;
+background:rgb(8,142,221);}
+
+
+#fin a
+{text-decoration: none;
+color:white;
+}
+
+#fin a:hover
+{color:rgb(8,142,221);}
+
+#fin h3:hover
+{background: white;
+border:1px rgb(8,142,221) solid;}
+
+
+footer
+{margin-top: 100px;
+background-color: rgb(81,98,114);
+height: 300px;}
+
+
+footer h1
+{color: white;
+text-align: center;
+font-weight: initial;
+font-size: 1.6em;
+padding-top: 40px;
+}
+
+
+footer p
+{
+color:white;
+text-align: center;
+font-size: 1.3em;
+padding-top: 20px;
+
+}
+
+footer a
+{
+text-decoration: none;
+}
+
+#mention
+{color:white;
+text-align: center;
+font-size: 1.3em;
+padding-top: 20px;
+padding-bottom: 50px;}
+
+
+@media all and (max-width: 1200px)
+
+{ 
+	#block_page
+	{width: auto;}
+
+
+	#haut_de_page
+	{display:flex;
+		flex-direction: column;
+		width: 100%;
+		padding-top: 25px;
+
+		height: 170px;}
+
+	#logo_titre img
+    {
+      height:50px;
+      margin-top: 16px;
+     }
+
+
+    #titre h1
+    {font-size: 1.5em;
+    	padding-left: 10px;}
+
+    #titre h2
+    {font-size: 1.2em;
+    padding-left: 10px;}
+
+    .adresse
+    {list-style-image: url("images/map16.png")}
+
+    .tel
+	{list-style-image: url("images/tel16.png")}
+
+	#haut_de_page ul
+	{display: flex;
+		justify-content: space-between;}
+
+	#haut_de_page li
+	{width: 40%;}
+
+
+	header nav
+	{font-size: 1.2em;
+		height: 50px;
+		padding-top: 26px;}
+
+	header nav ul
+	{margin: auto;}
+
+	header nav li
+	{padding-right: 15px;}
+
+	.titre
+	{margin-top: 35px;}
+
+	.titre h2
+	{font-size: 1.4em;}
+
+
+	.text,section ul,section ol
+	{font-size: 1.2em;}
+
+	
+
+
+	 #fin h2
+    {width: 100%;
+
+    	margin-top: 80px;
+    	margin-bottom: 80px;
+    	font-size: 2.4em;
+    	}
+
+    #fin h3
+    {width: 45%;
+    	margin: auto;
+    	font-size: 1.6em;}
+
+
+
+    footer
+    {height: 200px;}
+
+    footer h1
+    {font-size: 1.1em;
+    	padding-top: 20px;}
+
+    footer p
+    {font-size: 1em;
+    	padding-top: 10px;}
+
+    #mention
+    {font-size: 1em;
+    	padding-bottom: 20px;
+    	padding-top: 10px;}
+
+    }
+
+}