Historisation Exemple

Exemple test historisé

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

ChrisTamplate/css/style.css

@@ -0,0 +1,351 @@
+/*
+width: Largeur	
+height: Taille
+
+*/
+/* Lien Button Style 
+
+.button {
+  font: bold 11px Arial;
+  text-decoration: none;
+  background-color: #EEEEEE;
+  color: #333333;
+  padding: 2px 6px 2px 6px;
+  border-top: 1px solid #CCCCCC;
+  border-right: 1px solid #333333;
+  border-bottom: 1px solid #333333;
+  border-left: 1px solid #CCCCCC;
+}
+
+*/
+/***************ALL***************/
+header{
+background: url('../images/header.jpg');
+text-align: center;
+position: center;
+height: 100px;
+border-color: green;
+border-style: solid;
+border-width: 3px;
+}
+body{
+		background-color: rgba(255, 174, 0, 0.07);
+text-align: center;
+border-color: blue ;
+border-style: solid;
+border-width: 2px;
+}
+footer{
+background: url('../images/header.jpg');
+text-align: center;
+height: 150px;
+border-color: red;
+border-style: solid;
+border-width: 3px;
+width: : 100%;
+}
+
+section{
+overflow: hidden;
+}
+article{
+background-color: rgba(255, 174, 0, 0.07);
+border-color: silver;
+border-style: solid;
+border-width: 1px;
+}
+aside{
+border-color: black;
+border-style: solid;
+border-width: 3px;
+}
+div{
+
+}
+h1{
+
+}
+h2{
+	
+}
+h3{
+	
+}
+h4{
+	
+}
+h5{
+	
+}
+h6{
+
+}
+p{
+
+}
+button {
+
+}
+a{
+
+}
+span{
+
+}
+.grid-container{
+	background-color: #f1f1f1;
+}
+.clear {
+    clear: both;
+    height: 0;
+    line-height: 0;
+    overflow: hidden; /* Précaution pour IE 7 */
+}
+/***************ALL***************/
+/***************Header***************/
+#imageHeader{
+    height: 100%;
+    width: auto;
+}
+/***************Header***************/
+/***************Navigateur***************/
+#nav{
+   margin:0;
+   padding:0;
+   background:#808259 url('../images/footer.jpg') 0 0 repeat-x;
+   float:left;
+   width:100%;
+   border:1px solid #42432d;
+   border-width:1px 0;
+   list-style-type:none /* point de la liste à cacher */
+}
+#nav a:link, #nav a:visited{
+   color:#000;
+   background:#b2b580;
+   padding:20px 40px 4px 10px;
+   float:left;
+   width:auto;
+   border-right:1px solid #42432d;
+   text-decoration:none;
+   font:bold 1em/1em Arial, Helvetica, sans-serif;
+   text-transform:uppercase;
+   text-shadow: 2px 2px 2px #555;
+}
+#nav li:first-child a{
+	border-left:1px solid #42432d;
+}
+#nav a:hover{
+	color:#fff;
+	background:#727454;
+}
+#homeNav #nav-home a, #newsNav #nav-news a, #shopNav #nav-shop a
+{
+	background:#e35a00;
+	color:#fff;
+	text-shadow:none;
+}
+ 
+#homeNav #nav-home a:hover, #newsNav #nav-news a:hover, #shopNav #nav-shop a:hover 
+{
+	background:#e35a00;
+}
+ 
+#nav a:active 
+{
+	background:#e35a00;
+	color:#fff;
+}
+/***************Navigateur***************/
+/***************Home Slide***************/
+@keyframes AutoSlide {
+	0% {
+		left: 0px; /*1ère image*/
+	}
+	15% {
+		left: 0px; /*idem pour attente*/
+	}
+	35% {
+		left: -720px; /*2ème image*/
+	}
+	50% {
+		left: -720px; /*idem pour attente*/
+	}
+	70% {
+		left: -1450px; /*3ème image*/
+	}
+	85% {
+		left: -1450px; /*idem pour attente*/
+	}
+	100% {
+		left: 0px; /*1ère image*/
+	}
+}
+/*Taille du slide*/
+#slideshowhome {
+	position: relative;
+	width: 720px;
+	height: 550px;
+	margin: auto;
+	overflow: hidden;
+}
+/*Taille d'image*/
+#imageSlide{
+	width: 720px;  
+	height: 550px;
+}
+#sContent li {
+	display: inline;
+}
+/*Position du contenue dans le slide*/
+#sContent {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 2170px;  /* image width X3 environ*/
+	margin: 0;            
+	padding: 0;
+	
+	/*CSS3 keyframes animation*/
+	animation-name: AutoSlide;
+	animation-duration: 15s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-in-out;
+}
+/***************Home Slide***************/
+/***************News List Home***************/
+.boxNewsHome{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	width: 50%;
+}
+#imgNewsHome{
+
+}
+.titleNewsHome{
+
+}
+#tdNewsHome{
+
+}
+.descNewsHome{
+	height: 100px;
+	color: blue;
+}
+.overflow-ellipsis{
+	height: 100px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+.boxNewsHomeF{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	width: 100%;
+}
+#imgNewsHomeF{
+	max-height:300px;
+}
+.titleNewsHomeF{
+
+}
+#tdNewsHomeF{
+
+}
+.descNewsHomeF{
+	height: 100px;
+	color: blue;
+}
+.overflow-ellipsisF{
+	height: 100px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+/***************News List Home***************/
+/***************News List***************/
+.boxNews{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	overflow: hidden;
+	min-height: 250px;
+	margin: 1em 0;
+}
+#imgNews{
+	width: auto;/*300350*/
+	height: auto;
+	float: left;
+}
+.titleNews{
+
+}
+#tdNews{
+
+}
+.descNews{
+	height: 70px;
+	color: blue;
+}
+.overflow-ellipsis{
+	height: 70px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+.buttonArt{
+	display: block;
+}
+.buttonComment{
+	font: bold 13px Arial;
+	text-decoration: none;
+	background-color: #EEEEEE;
+	color: #333333;
+	padding: 2px 6px 2px 6px;
+	border-top: 1px solid #CCCCCC;
+	border-right: 1px solid #333333;
+	border-bottom: 1px solid #333333;
+	border-left: 1px solid #CCCCCC;
+	width: 100%;
+	display: inline-block;
+}
+.buttonInfo{
+	font: bold 13px Arial;
+	text-decoration: none;
+	background-color: #EEEEEE;
+	color: #333333;
+	padding: 2px 6px 2px 6px;
+	border-top: 1px solid #CCCCCC;
+	border-right: 1px solid #333333;
+	border-bottom: 1px solid #333333;
+	border-left: 1px solid #CCCCCC;
+	width: 100%;
+	display: inline-block;
+}
+/***************News List***************/
+/***************Footer***************/
+.footLink{
+	width: 200px;
+	height: 100%;
+	float: left;
+}
+#footic{
+	padding-top: 20%;
+}
+.footListLink{
+	width: 200px;
+	height: 100%;
+	float: right;
+}
+#footerNavList{
+	width: 150px;
+	height: 100%;
+	list-style-type:none;
+}
+#footNavTitle{
+	size: 10px;
+	font-weight: bold;
+}
+#footNavLabel{
+	font-size: 12px;
+	text-align: right;
+}
+/***************Footer***************/

ChrisTamplate/css/style2.css

@@ -0,0 +1,393 @@
+/*
+width: Largeur	
+height: Taille
+
+*/
+/* Lien Button Style 
+
+.button {
+  font: bold 11px Arial;
+  text-decoration: none;
+  background-color: #EEEEEE;
+  color: #333333;
+  padding: 2px 6px 2px 6px;
+  border-top: 1px solid #CCCCCC;
+  border-right: 1px solid #333333;
+  border-bottom: 1px solid #333333;
+  border-left: 1px solid #CCCCCC;
+}
+
+*/
+/***************ALL***************/
+header{
+background: url('../images/header.jpg');
+text-align: center;
+position: center;
+height: 100px;
+border-color: green;
+border-style: solid;
+border-width: 3px;
+}
+body{
+background-color: rgba(255, 174, 0, 0.07);
+border-color: blue ;
+border-style: solid;
+border-width: 2px;
+}
+footer{
+background: url('../images/header.jpg');
+text-align: center;
+height: 150px;
+border-color: red;
+border-style: solid;
+border-width: 3px;
+width: : 100%;
+}
+
+section{
+overflow: hidden;
+}
+article{
+background-color: rgba(255, 174, 0, 0.07);
+border-color: silver;
+border-style: solid;
+border-width: 1px;
+}
+aside{
+border-color: black;
+border-style: solid;
+border-width: 3px;
+}
+div{
+
+}
+h1{
+
+}
+h2{
+	
+}
+h3{
+	
+}
+h4{
+	
+}
+h5{
+	
+}
+h6{
+
+}
+p{
+
+}
+button {
+
+}
+img{
+
+}
+a{
+
+}
+span{
+
+}
+.grid-container{
+	background-color: #f1f1f1;
+}
+.clear {
+    clear: both;
+    height: 0;
+    line-height: 0;
+    overflow: hidden; /* Précaution pour IE 7 */
+}
+/***************ALL***************/
+/***************Header***************/
+#imageHeader{
+    height: 100%;
+    width: auto;
+}
+/***************Header***************/
+/***************Navigateur***************/
+#nav{
+   margin:0;
+   padding:0;
+   background:#808259 url('../images/footer.jpg') 0 0 repeat-x;
+   float:left;
+   width:100%;
+   border:1px solid #42432d;
+   border-width:1px 0;
+   list-style-type:none /* point de la liste à cacher */
+}
+#nav a:link, #nav a:visited{
+   color:#000;
+   background:#b2b580;
+   padding:20px 40px 4px 10px;
+   float:left;
+   width:auto;
+   border-right:1px solid #42432d;
+   text-decoration:none;
+   font:bold 1em/1em Arial, Helvetica, sans-serif;
+   text-transform:uppercase;
+   text-shadow: 2px 2px 2px #555;
+}
+#nav li:first-child a{
+	border-left:1px solid #42432d;
+}
+#nav a:hover{
+	color:#fff;
+	background:#727454;
+}
+#homeNav #nav-home a, #newsNav #nav-news a, #shopNav #nav-shop a
+{
+	background:#e35a00;
+	color:#fff;
+	text-shadow:none;
+}
+ 
+#homeNav #nav-home a:hover, #newsNav #nav-news a:hover, #shopNav #nav-shop a:hover 
+{
+	background:#e35a00;
+}
+ 
+#nav a:active 
+{
+	background:#e35a00;
+	color:#fff;
+}
+/***************Navigateur***************/
+/***************Home Slide***************/
+@keyframes AutoSlide {
+	0% {
+		left: 0px; /*1ère image*/
+	}
+	15% {
+		left: 0px; /*idem pour attente*/
+	}
+	35% {
+		left: -720px; /*2ème image*/
+	}
+	50% {
+		left: -720px; /*idem pour attente*/
+	}
+	70% {
+		left: -1450px; /*3ème image*/
+	}
+	85% {
+		left: -1450px; /*idem pour attente*/
+	}
+	100% {
+		left: 0px; /*1ère image*/
+	}
+}
+/*Taille du slide*/
+#slideshowhome {
+	position: relative;
+	width: 720px;
+	height: 550px;
+	margin: auto;
+	overflow: hidden;
+}
+/*Taille d'image*/
+#imageSlide{
+	width: 720px;  
+	height: 550px;
+}
+#sContent li {
+	display: inline;
+}
+/*Position du contenue dans le slide*/
+#sContent {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 2170px;  /* image width X3 environ*/
+	margin: 0;            
+	padding: 0;
+	
+	/*CSS3 keyframes animation*/
+	animation-name: AutoSlide;
+	animation-duration: 15s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-in-out;
+}
+/***************Home Slide***************/
+/***************News List Home***************/
+.boxNewsHome{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	width: 50%;
+}
+#imgNewsHome{
+
+}
+.titleNewsHome{
+
+}
+#tdNewsHome{
+
+}
+.descNewsHome{
+	height: 100px;
+	color: blue;
+}
+.overflow-ellipsis{
+	height: 100px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+.boxNewsHomeF{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	width: 100%;
+}
+#imgNewsHomeF{
+	max-height:300px;
+}
+.titleNewsHomeF{
+
+}
+#tdNewsHomeF{
+
+}
+.descNewsHomeF{
+	height: 100px;
+	color: blue;
+}
+.overflow-ellipsisF{
+	height: 100px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+/***************News List Home***************/
+/***************News List***************/
+.boxNews{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	overflow: hidden;
+	min-height: 250px;
+	margin: 1em 0;
+}
+#imgNews{
+	width: auto;/*300350*/
+	height: auto;
+	float: left;
+}
+.titleNews{
+
+}
+#tdNews{
+
+}
+.descNews{
+	height: 70px;
+	color: blue;
+}
+.overflow-ellipsis{
+	height: 70px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+.buttonArt{
+	display: block;
+}
+.buttonComment{
+	font: bold 13px Arial;
+	text-decoration: none;
+	background-color: #EEEEEE;
+	color: #333333;
+	padding: 2px 6px 2px 6px;
+	border-top: 1px solid #CCCCCC;
+	border-right: 1px solid #333333;
+	border-bottom: 1px solid #333333;
+	border-left: 1px solid #CCCCCC;
+	width: 100%;
+	display: inline-block;
+}
+.buttonInfo{
+	font: bold 13px Arial;
+	text-decoration: none;
+	background-color: #EEEEEE;
+	color: #333333;
+	padding: 2px 6px 2px 6px;
+	border-top: 1px solid #CCCCCC;
+	border-right: 1px solid #333333;
+	border-bottom: 1px solid #333333;
+	border-left: 1px solid #CCCCCC;
+	width: 100%;
+	display: inline-block;
+}
+/***************News List***************/
+/***************Shop List***************/
+.artShop{
+	border-color: silver;
+	border-style: solid;
+	border-width: 1px;
+	height: 150px;
+	margin: 2px;
+}
+#imgShop{
+	width: 100%;
+	height: 100%;
+}
+.imgShop{
+	width: 148px;
+	height: 148px;
+	float: left;
+}
+#imgPanier{
+	width: 20px;
+	height: 20px;
+}
+.titleNews{
+
+}
+#vendShop{
+color: blue
+}
+#priceShop{
+color: green;
+}
+.descNews{
+	height: 70px;
+	color: blue;
+}
+.overflow-ellipsis{
+	height: 70px;
+	overflow: hidden; 
+   	word-wrap: break-word;
+}
+/***************Shop List***************/
+/***************Footer***************/
+.footLink{
+	width: 200px;
+	height: 100%;
+	float: left;
+}
+#footic{
+	padding-top: 20%;
+}
+.footListLink{
+	width: 200px;
+	height: 100%;
+	float: right;
+}
+#footerNavList{
+	width: 150px;
+	height: 100%;
+	list-style-type:none;
+}
+#footNavTitle{
+	size: 10px;
+	font-weight: bold;
+}
+#footNavLabel{
+	font-size: 12px;
+	text-align: right;
+}
+/***************Footer***************/

ChrisTamplate/home.php

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="css/foundation.css">
+<link rel="stylesheet" href="css/app.css">
+<link rel="stylesheet" type="text/css" href="css/style.css">
+<link rel="shortcut icon" href="images/favicon.png" />
+	<title>Home</title>
+</head>
+<div class="grid-container">
+	<header>
+	<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
+	</header>
+	<nav class="menu">
+		<ul id="nav">
+		    <li id="nav-home"><a href="home.php">Accueil</a></li>
+		    <li id="nav-news"><a href="news.php">Nouvelle</a></li>
+		    <li id="nav-shop"><a href="shop.php">Boutique</a></li>
+		</ul>
+	</nav>
+	<body id="homeNav">
+	      <div id="slideshowhome">
+            <ul id="sContent">
+              <li><img src="images/g4.jpg" alt="Image1" id="imageSlide"/></li>
+              <li><img src="images/g4.jpg" alt="Image2" id="imageSlide"/></li>
+              <li><img src="images/g4.jpg" alt="Image3" id="imageSlide"/></li>
+            </ul>
+          </div>
+                      		<h1>Bonjour<br><br><br><br></h1>
+			<section>
+				<article>
+				<span>Toute l'actualité</span>
+				<div class="grid-x grid-padding-x">
+		            <div class="boxNewsHome">
+			            <img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
+			              <div class="titleNewsHome">
+			                <p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
+			              </div>
+				              <div class="descNewsHome">
+				                <p class="overflow-ellipsis">Description</p>
+				                </div>
+			        	<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
+		            </div>
+			            <div class="boxNewsHome">
+				            <img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
+				              <div class="titleNewsHome">
+			                <p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>			                
+				              </div>
+					              <div class="descNewsHome">
+					                <p class="overflow-ellipsis">Description</p>
+					                </div>
+				        	<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
+			            </div>
+				            <div class="boxNewsHome">
+					            <img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
+					              <div class="titleNewsHome">
+			                <p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
+					              </div>
+						              <div class="descNewsHome">
+						                <p class="overflow-ellipsis">Description</p>
+						                </div>
+					        	<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
+				            </div>
+					            <div class="boxNewsHome">
+						            <img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHome"/>
+						              <div class="titleNewsHome">
+			                <p>Title <br> <span id="tdNewsHome"> Type - Date </span></p>
+						              </div>
+							              <div class="descNewsHome">
+							                <p class="overflow-ellipsis">Description</p>
+							                </div>
+						        	<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
+					            </div>
+		        </div>
+    				<div class="boxNewsHomeF">
+			            <img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNewsHomeF"/>
+			              <div class="titleNewsHomeF">
+                <p>Title <br> <span id="tdNewsHomeF"> Type - Date </span></p>
+			              </div>
+				              <div class="descNewsHomeF">
+				                <p class="overflow-ellipsisF">Description</p>
+				                </div>
+			        	<a href="#" class="button">Commentaire</a><a href="#" class="button">En savoir +</a>
+		            </div>
+				</article>
+			</section>
+
+	</body>
+		<footer>
+			<div class="footLink">
+				<a href="http://localhost:82/christamplate/home.php" target="_blank">
+				  <img src="images/footer_icon_01.png" alt="IconFooter" id="footic" />
+				</a>
+				<a href="http://localhost:82/christamplate/home.php" target="_blank">
+				  <img src="images/footer_icon_02.png" alt="IconFooter" id="footic" />
+				</a>
+				<a href="http://localhost:82/christamplate/home.php" target="_blank">
+				  <img src="images/footer_icon_03.png" alt="IconFooter" id="footic" />
+				</a>
+      		</div>
+			<div class="footListLink">
+				<ul id="footerNavList">
+					<span id="footNavTitle">COMPTE</span>
+				    <li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#News">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+					<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#News">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+				</ul>
+			</div>
+			
+		</footer>
+</div>
+</html>

ChrisTamplate/index.html

@@ -0,0 +1,171 @@
+<!doctype html>
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Foundation for Sites</title>
+    <link rel="stylesheet" href="css/foundation.css">
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="large-12 cell">
+          <h1>Welcome to Foundation</h1>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x">
+        <div class="large-12 cell">
+          <div class="callout">
+            <h3>We&rsquo;re stoked you want to try Foundation! </h3>
+            <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+            <p>Once you've exhausted the fun in this document, you should check out:</p>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+              </div>
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
+              </div>
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 medium-push-2 cell">
+                <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+              </div>
+              <div class="large-4 medium-4 medium-pull-2 cell">
+                <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x">
+        <div class="large-8 medium-8 cell">
+          <h5>Here&rsquo;s your basic grid:</h5>
+          <!-- Grid Example -->
+
+          <div class="grid-x grid-padding-x">
+            <div class="large-12 cell">
+              <div class="primary callout">
+                <p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid-x grid-padding-x">
+            <div class="large-6 medium-6 cell">
+              <div class="primary callout">
+                <p>Six cell</p>
+              </div>
+            </div>
+            <div class="large-6 medium-6 cell">
+              <div class="primary callout">
+                <p>Six cell</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid-x grid-padding-x">
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+          </div>
+
+          <hr />
+
+          <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+          <form>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-12.cell" />
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.cell" />
+              </div>
+              <div class="large-4 medium-4 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.cell" />
+              </div>
+              <div class="large-4 medium-4 cell">
+                <div class="grid-x">
+                  <label>Input Label</label>
+                  <div class="input-group">
+                    <input type="text" placeholder="small-9.cell" class="input-group-field" />
+                    <span class="input-group-label">.com</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Select Box</label>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-6 medium-6 cell">
+                <label>Choose Your Favorite</label>
+                <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
+                <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
+              </div>
+              <div class="large-6 medium-6 cell">
+                <label>Check these out</label>
+                <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+                <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Textarea Label</label>
+                <textarea placeholder="small-12.cell"></textarea>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="large-4 medium-4 cell">
+          <h5>Try one of these buttons:</h5>
+          <p><a href="#" class="button">Simple Button</a><br/>
+          <a href="#" class="success button">Success Btn</a><br/>
+          <a href="#" class="alert button">Alert Btn</a><br/>
+          <a href="#" class="secondary button">Secondary Btn</a></p>
+          <div class="callout">
+            <h5>So many components, girl!</h5>
+            <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
+            <a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="js/vendor/jquery.js"></script>
+    <script src="js/vendor/what-input.js"></script>
+    <script src="js/vendor/foundation.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>

ChrisTamplate/js/app.js

@@ -0,0 +1 @@
+$(document).foundation()

ChrisTamplate/js/functionNews.js

@@ -0,0 +1,10 @@
+window.onload = function(){ 
+	document.getElementsByTagName('button')[0].onclick = function () {
+    var _wrapper = document.getElementById('wrapper');
+    if(_wrapper.classList.contains( 'display_cell')) {
+        _wrapper.classList.remove('display_cell');
+    } else {
+        _wrapper.classList.add('display_cell');
+    }
+}
+};

ChrisTamplate/js/vendor/what-input.js

@@ -0,0 +1,361 @@
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v4.2.0
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("whatInput", [], factory);
+	else if(typeof exports === 'object')
+		exports["whatInput"] = factory();
+	else
+		root["whatInput"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+	'use strict';
+
+	module.exports = function () {
+	  /*
+	   * variables
+	   */
+
+	  // last used input type
+	  var currentInput = 'initial';
+
+	  // last used input intent
+	  var currentIntent = null;
+
+	  // cache document.documentElement
+	  var doc = document.documentElement;
+
+	  // form input types
+	  var formInputs = ['input', 'select', 'textarea'];
+
+	  var functionList = [];
+
+	  // list of modifier keys commonly used with the mouse and
+	  // can be safely ignored to prevent false keyboard detection
+	  var ignoreMap = [16, // shift
+	  17, // control
+	  18, // alt
+	  91, // Windows key / left Apple cmd
+	  93 // Windows menu / right Apple cmd
+	  ];
+
+	  // list of keys for which we change intent even for form inputs
+	  var changeIntentMap = [9 // tab
+	  ];
+
+	  // mapping of events to input types
+	  var inputMap = {
+	    keydown: 'keyboard',
+	    mousedown: 'mouse',
+	    mousemove: 'mouse',
+	    MSPointerDown: 'pointer',
+	    MSPointerMove: 'pointer',
+	    pointerdown: 'pointer',
+	    pointermove: 'pointer',
+	    touchstart: 'touch'
+	  };
+
+	  // array of all used input types
+	  var inputTypes = [];
+
+	  // boolean: true if touch buffer is active
+	  var isBuffering = false;
+
+	  // boolean: true if the page is being scrolled
+	  var isScrolling = false;
+
+	  // store current mouse position
+	  var mousePos = {
+	    x: null,
+	    y: null
+	  };
+
+	  // map of IE 10 pointer events
+	  var pointerMap = {
+	    2: 'touch',
+	    3: 'touch', // treat pen like touch
+	    4: 'mouse'
+	  };
+
+	  var supportsPassive = false;
+
+	  try {
+	    var opts = Object.defineProperty({}, 'passive', {
+	      get: function get() {
+	        supportsPassive = true;
+	      }
+	    });
+
+	    window.addEventListener('test', null, opts);
+	  } catch (e) {}
+
+	  /*
+	   * set up
+	   */
+
+	  var setUp = function setUp() {
+	    // add correct mouse wheel event mapping to `inputMap`
+	    inputMap[detectWheel()] = 'mouse';
+
+	    addListeners();
+	    setInput();
+	  };
+
+	  /*
+	   * events
+	   */
+
+	  var addListeners = function addListeners() {
+	    // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
+	    // can only demonstrate potential, but not actual, interaction
+	    // and are treated separately
+
+	    // pointer events (mouse, pen, touch)
+	    if (window.PointerEvent) {
+	      doc.addEventListener('pointerdown', updateInput);
+	      doc.addEventListener('pointermove', setIntent);
+	    } else if (window.MSPointerEvent) {
+	      doc.addEventListener('MSPointerDown', updateInput);
+	      doc.addEventListener('MSPointerMove', setIntent);
+	    } else {
+	      // mouse events
+	      doc.addEventListener('mousedown', updateInput);
+	      doc.addEventListener('mousemove', setIntent);
+
+	      // touch events
+	      if ('ontouchstart' in window) {
+	        doc.addEventListener('touchstart', touchBuffer);
+	        doc.addEventListener('touchend', touchBuffer);
+	      }
+	    }
+
+	    // mouse wheel
+	    doc.addEventListener(detectWheel(), setIntent, supportsPassive ? { passive: true } : false);
+
+	    // keyboard events
+	    doc.addEventListener('keydown', updateInput);
+	  };
+
+	  // checks conditions before updating new input
+	  var updateInput = function updateInput(event) {
+	    // only execute if the touch buffer timer isn't running
+	    if (!isBuffering) {
+	      var eventKey = event.which;
+	      var value = inputMap[event.type];
+	      if (value === 'pointer') value = pointerType(event);
+
+	      if (currentInput !== value || currentIntent !== value) {
+	        var activeElem = document.activeElement;
+	        var activeInput = false;
+	        var notFormInput = activeElem && activeElem.nodeName && formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
+
+	        if (notFormInput || changeIntentMap.indexOf(eventKey) !== -1) {
+	          activeInput = true;
+	        }
+
+	        if (value === 'touch' ||
+	        // ignore mouse modifier keys
+	        value === 'mouse' ||
+	        // don't switch if the current element is a form input
+	        value === 'keyboard' && eventKey && activeInput && ignoreMap.indexOf(eventKey) === -1) {
+	          // set the current and catch-all variable
+	          currentInput = currentIntent = value;
+
+	          setInput();
+	        }
+	      }
+	    }
+	  };
+
+	  // updates the doc and `inputTypes` array with new input
+	  var setInput = function setInput() {
+	    doc.setAttribute('data-whatinput', currentInput);
+	    doc.setAttribute('data-whatintent', currentInput);
+
+	    if (inputTypes.indexOf(currentInput) === -1) {
+	      inputTypes.push(currentInput);
+	      doc.className += ' whatinput-types-' + currentInput;
+	    }
+
+	    fireFunctions('input');
+	  };
+
+	  // updates input intent for `mousemove` and `pointermove`
+	  var setIntent = function setIntent(event) {
+	    // test to see if `mousemove` happened relative to the screen
+	    // to detect scrolling versus mousemove
+	    if (mousePos['x'] !== event.screenX || mousePos['y'] !== event.screenY) {
+	      isScrolling = false;
+
+	      mousePos['x'] = event.screenX;
+	      mousePos['y'] = event.screenY;
+	    } else {
+	      isScrolling = true;
+	    }
+
+	    // only execute if the touch buffer timer isn't running
+	    // or scrolling isn't happening
+	    if (!isBuffering && !isScrolling) {
+	      var value = inputMap[event.type];
+	      if (value === 'pointer') value = pointerType(event);
+
+	      if (currentIntent !== value) {
+	        currentIntent = value;
+
+	        doc.setAttribute('data-whatintent', currentIntent);
+
+	        fireFunctions('intent');
+	      }
+	    }
+	  };
+
+	  // buffers touch events because they frequently also fire mouse events
+	  var touchBuffer = function touchBuffer(event) {
+	    if (event.type === 'touchstart') {
+	      isBuffering = false;
+
+	      // set the current input
+	      updateInput(event);
+	    } else {
+	      isBuffering = true;
+	    }
+	  };
+
+	  var fireFunctions = function fireFunctions(type) {
+	    for (var i = 0, len = functionList.length; i < len; i++) {
+	      if (functionList[i].type === type) {
+	        functionList[i].function.call(undefined, currentIntent);
+	      }
+	    }
+	  };
+
+	  /*
+	   * utilities
+	   */
+
+	  var pointerType = function pointerType(event) {
+	    if (typeof event.pointerType === 'number') {
+	      return pointerMap[event.pointerType];
+	    } else {
+	      // treat pen like touch
+	      return event.pointerType === 'pen' ? 'touch' : event.pointerType;
+	    }
+	  };
+
+	  // detect version of mouse wheel event to use
+	  // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
+	  var detectWheel = function detectWheel() {
+	    var wheelType = void 0;
+
+	    // Modern browsers support "wheel"
+	    if ('onwheel' in document.createElement('div')) {
+	      wheelType = 'wheel';
+	    } else {
+	      // Webkit and IE support at least "mousewheel"
+	      // or assume that remaining browsers are older Firefox
+	      wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
+	    }
+
+	    return wheelType;
+	  };
+
+	  /*
+	   * init
+	   */
+
+	  // don't start script unless browser cuts the mustard
+	  // (also passes if polyfills are used)
+	  if ('addEventListener' in window && Array.prototype.indexOf) {
+	    setUp();
+	  }
+
+	  /*
+	   * api
+	   */
+
+	  return {
+	    // returns string: the current input type
+	    // opt: 'loose'|'strict'
+	    // 'strict' (default): returns the same value as the `data-whatinput` attribute
+	    // 'loose': includes `data-whatintent` value if it's more current than `data-whatinput`
+	    ask: function ask(opt) {
+	      return opt === 'loose' ? currentIntent : currentInput;
+	    },
+
+	    // returns array: all the detected input types
+	    types: function types() {
+	      return inputTypes;
+	    },
+
+	    // overwrites ignored keys with provided array
+	    ignoreKeys: function ignoreKeys(arr) {
+	      ignoreMap = arr;
+	    },
+
+	    // attach functions to input and intent "events"
+	    // funct: function to fire on change
+	    // eventType: 'input'|'intent'
+	    onChange: function onChange(funct, eventType) {
+	      functionList.push({
+	        function: funct,
+	        type: eventType
+	      });
+	    }
+	  };
+	}();
+
+/***/ })
+/******/ ])
+});
+;

ChrisTamplate/news.php

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="css/foundation.css">
+<link rel="stylesheet" href="css/app.css">
+<link rel="stylesheet" type="text/css" href="css/style.css">
+<link rel="shortcut icon" href="images/favicon.png" />
+<script src="js/functionNews.js"></script>
+	<title>Home</title>
+</head>
+<div class="grid-container">
+	<header>
+	<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
+	</header>
+	<nav class="menu">
+		<ul id="nav">
+		    <li id="nav-home"><a href="home.php">Accueil</a></li>
+		    <li id="nav-news"><a href="news.php">Nouvelle</a></li>
+		    <li id="nav-shop"><a href="shop.php">Boutique</a></li>
+		</ul>
+	</nav>
+	<body id="newsNav">
+		<div class="grid-x grid-padding-x">
+	        <div class="large-12 cell">
+	        	<h1>Actualité</h1>
+	        </div>
+      	</div>     
+			<section class="grid-x grid-padding-x">
+				<article class="large-8 medium-8 cell">
+					<div class="grid-x grid-padding-x">
+						<div class="large-12 cell">
+							<div class="grid-x grid-padding-x">
+								<div class="large-4 medium-4 cell">
+									<div class="boxNews">
+										<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
+										<div class="titleNews">
+										<p>Title <br> <span id="tdNews"> Type - Date </span></p>
+										</div>
+										<div class="descNews">
+										<p class="overflow-ellipsisNews">Description</p>
+										</div>
+										<div>
+										<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
+										</div>
+									</div>	
+								</div>
+									<div class="large-4 medium-4 cell">
+										<div class="boxNews">
+											<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
+											<div class="titleNews">
+											<p>Title <br> <span id="tdNews"> Type - Date </span></p>
+											</div>
+											<div class="descNews">
+											<p class="overflow-ellipsisNews">Description</p>
+											</div>
+											<div>
+											<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
+											</div>
+										</div>	
+									</div>
+										<div class="large-4 medium-4 cell">
+											<div class="boxNews">
+												<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
+												<div class="titleNews">
+												<p>Title <br> <span id="tdNews"> Type - Date </span></p>
+												</div>
+												<div class="descNews">
+												<p class="overflow-ellipsisNews">Description</p>
+												</div>
+												<div>
+												<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
+												</div>
+											</div>	
+										</div>
+							</div>
+								<div class="grid-x grid-padding-x">
+									<div class="large-4 medium-4 cell">
+										<div class="boxNews">
+											<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
+											<div class="titleNews">
+											<p>Title <br> <span id="tdNews"> Type - Date </span></p>
+											</div>
+											<div class="descNews">
+											<p class="overflow-ellipsisNews">Description</p>
+											</div>
+											<div>
+											<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
+											</div>
+										</div>	
+									</div>
+										<div class="large-4 medium-4 cell">
+											<div class="boxNews">
+												<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgNews"/>
+												<div class="titleNews">
+												<p>Title <br> <span id="tdNews"> Type - Date </span></p>
+												</div>
+												<div class="descNews">
+												<p class="overflow-ellipsisNews">Description</p>
+												</div>
+												<div>
+												<a href="#" class="buttonComment">Commentaire</a><a href="#" class="buttonInfo">En savoir +</a>
+												</div>
+											</div>	
+										</div>
+								</div>
+						</div>
+					</div>
+  				</article>
+  		    	<aside class="large-4 medium-4 cell"><br>
+					<div  class="callout">Filtre								
+						<p>
+							<a href="#" class="button">Type 1</a><br>
+						    <a href="#" class="button">Type 2</a><br>
+						    <a href="#" class="button">Type 3</a><br>
+						</p>
+					</div>	
+						<div class="callout"><p>Liens News</p></div>
+						<div class="callout"><p>Pub News</p></div>
+						<div class="callout"><p>Autres</p></div>
+						<div class="callout"><p>Autre</p></div>
+						<div class="callout"><p>Autre</p></div>
+				</aside>
+			</section>
+	</body>
+	<footer>
+		<div class="footLink">
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_01.png" alt="IconFooter" id="footic" /></a>
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_02.png" alt="IconFooter" id="footic" /></a>
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_03.png" alt="IconFooter" id="footic" /></a>
+  		</div>
+			<div class="footListLink">
+				<ul id="footerNavList">
+					<span id="footNavTitle">COMPTE</span>
+				    <li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#News">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+					<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#News">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+				</ul>
+			</div>		
+	</footer>
+</div>
+</html>

ChrisTamplate/shop.php

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="css/foundation.css">
+<link rel="stylesheet" href="css/app.css">
+<link rel="stylesheet" type="text/css" href="css/style2.css">
+<link rel="shortcut icon" href="images/favicon.png" />
+	<title>Shop</title>
+</head>
+<div class="grid-container">
+	<header>
+	<img src="images/favicon.png" alt="HeaderImage" id="imageHeader"/>
+	</header>
+	<nav class="menu">
+		<ul id="nav">
+		    <li id="nav-home"><a href="home.php">Accueil</a></li>
+		    <li id="nav-News"><a href="News.php">Nouvelle</a></li>
+		    <li id="nav-shop"><a href="shop.php">Boutique</a></li>
+		</ul>
+	</nav>
+	<body id="shopNav">
+		<div class="grid-x grid-padding-x">
+	        <div class="large-12 cell">
+	        	<h1>Boutique</h1>
+	        </div>
+      	</div>     
+			<section class="grid-x grid-padding-x">
+				<aside class="large-4 medium-4 cell"><br>
+					<div class="callout"><p>Trier par </p> 
+						<select>
+		                  <option value="toto">1</option>
+		                  <option value="titi">2</option>
+		                  <option value="tata">3</option>
+		               	</select>
+		            </div>
+					<div  class="callout">Filtre								
+						<p>
+							<a href="#" class="button">Type 1</a><br>
+						    <a href="#" class="button">Type 2</a><br>
+						    <a href="#" class="button">Type 3</a><br>
+						</p>
+					</div>	
+						<div class="callout"><p>Mon Panier <img src="images/panier.png" alt="Image3" id="imgPanier"/></p></div>
+						<div class="callout"><p>Autres</p></div>
+						<div class="callout"><p>Autre</p></div>
+						<div class="callout"><p>Autre</p></div>
+				</aside>
+				<article class="large-8 medium-8 cell">
+					<div class="grid-x grid-padding-x">
+						<div class="large-12 cell">
+							<div class="grid-x grid-padding-x">
+								<div class="large-12 cell">
+									<div class="artShop">
+										<div class="imgShop">
+											<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
+										</div>
+											<div class="titleShop">
+												<p>Title<br>
+													<span id="vendShop">Vendeur<br></span>
+													<span id="priceShop">Prix</span>
+												</p>
+											</div>
+												<div class="descShop">
+													<p class="overflow-ellipsisShop">Description</p>
+												</div>
+									</div>
+										<div class="artShop">
+											<div class="imgShop">
+												<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
+											</div>
+												<div class="titleShop">
+													<p>Title<br>
+														<span id="vendShop">Vendeur<br></span>
+														<span id="priceShop">Prix</span>
+													</p>
+												</div>
+													<div class="descShop">
+														<p class="overflow-ellipsisShop">Description</p>
+													</div>
+										</div>
+											<div class="artShop">
+												<div class="imgShop">
+													<img src="images/rasp_appareil.jpeg" alt="Image3" id="imgShop"/>
+												</div>
+													<div class="titleShop">
+														<p>Title<br>
+															<span id="vendShop">Vendeur<br></span>
+															<span id="priceShop">Prix</span>
+														</p>
+													</div>
+														<div class="descShop">
+															<p class="overflow-ellipsisShop">Description</p>
+														</div>
+											</div>						
+								</div>
+							</div>
+						</div>
+  					</div>
+  				</article>
+			</section>
+	</body>
+	<footer>
+		<div class="footLink">
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_01.png" alt="IconFooter" id="footic" /></a>
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_02.png" alt="IconFooter" id="footic" /></a>
+			<a href="http://localhost:82/christamplate/home.php" target="_blank">
+			  <img src="images/footer_icon_03.png" alt="IconFooter" id="footic" /></a>
+  		</div>
+			<div class="footListLink">
+				<ul id="footerNavList">
+					<span id="footNavTitle">COMPTE</span>
+				    <li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#Shop">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+					<li id="footNavLabel"><a href="#Accueil">Option1</a></li>
+				    <li id="footNavLabel"><a href="#Shop">Option2</a></li>
+				    <li id="footNavLabel"><a href="#Boutique">Option3</a></li>
+				</ul>
+			</div>		
+	</footer>
+</div>
+</html>

Exemplehtml/FormsPageWebAnimaux.css

@@ -0,0 +1,19 @@
+
+h1
+{
+	color:blue;
+}
+
+nav
+ 
+{
+float: center; 
+width: 150px; 
+border: 1px solid black; 
+
+}
+h1 
+{
+border: 1px solid black; 	
+}
+

Exemplehtml/FormsPageWebAnimaux.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<!--option de page-->
+<head>	
+			<meta charset="utf-8"/>
+			<link rel="stylesheet" href ="FormsPageWebAnimaux.css"/>
+			<title>Hello</title>
+<head>	
+<!--Corps de la page-->
+<body>
+<!--En Tete-->
+<header>
+		<nav>	
+			<ul>
+			<li>Acceuil</li>
+			<li>Blog </li>
+			<li>Carriere </li>
+			<li>Contact </li>
+			</ul>
+		<nav>
+</header>
+				
+<!--Premiere Article-->
+<Section>	
+		
+		<h1>	Bonjour et  bienvenue sur le Site de christian 	</h1>
+	<article>
+			Tout Les Information de ce site se trouve ICI
+	</article>
+		
+		<aside>
+			Présentation de mon site et sa creation 
+		</aside>
+		
+	<article>
+		2 eme article 
+	</article>
+		
+		<aside>
+			deuxieme  presentation 
+		</aside>
+	<article>
+	Les annimaux 
+	</article> 
+	
+	<aside>
+	Info annimaux 
+	</aside>
+	
+<footer>
+
+collaborateur 
+photo
+		
+</footer>
+</section>
+				
+</body>
+			
+</html>
+