diff --git a/css/cat_all.css b/css/cat_all.css
new file mode 100644
index 0000000..6917192
--- /dev/null
+++ b/css/cat_all.css
@@ -0,0 +1,16 @@
+
+
+.Liste{
+ width:100%;
+ height:100vh;
+ overflow: scroll;
+}
+
+.Product{
+ float:center;
+ margin : 5vw;
+}
+.Product p, .Product h3{
+ margin-top: -5px;
+
+}
\ No newline at end of file
diff --git a/css/categories.css b/css/categories.css
new file mode 100644
index 0000000..17e2584
--- /dev/null
+++ b/css/categories.css
@@ -0,0 +1,47 @@
+main{
+ margin-top: 10%;
+}
+
+article{
+ margin-top: auto;
+ border: solid;
+ border-width: 1%;
+ border-radius: 5%;
+ background-color: pink;
+}
+
+article h2{
+ text-align: center;
+}
+
+.caramels{
+ float:left;
+ width:40%;
+ margin:2%;
+}
+
+.sirops{
+ float:left;
+ width:40%;
+ margin:2%;
+}
+.pubimg{
+ float:left;
+ width:40%;
+ margin:2%;
+}
+
+.PD{
+ float:left;
+ width:40%;
+ margin:2%;
+}
+
+.Product{
+ float:left;
+ margin : 3%;
+}
+.Product p, .Product h3{
+ margin-top: -5px;
+ width:150px;
+}
\ No newline at end of file
diff --git a/css/header copy.css b/css/header copy.css
new file mode 100644
index 0000000..2c5d3db
--- /dev/null
+++ b/css/header copy.css
@@ -0,0 +1,112 @@
+header{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-rows: minmax(auto, 10);
+ width:100%;
+ text-align: center;
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ background-color: lightsalmon;
+}
+.Titre {
+ grid-column-start:2;
+ grid-row-start:1;
+ width:80%;
+ margin:auto;
+ margin-top:2%;
+ z-index:2;
+}
+.rotate{
+ position: absolute;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ width:70%;
+ margin-top: -30%;
+ z-index:1;
+ animation: rotation 50s infinite linear;
+}
+@keyframes rotation {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(359deg);
+ }
+}
+.rotate2{
+ position: absolute;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ width:40%;
+ margin : auto;
+ margin-top: -15%;
+ z-index:1;
+ animation: rotation2 10s infinite linear;
+}
+@keyframes rotation2 {
+ from {
+ transform: rotate(359deg);
+ }
+ to {
+ transform: rotate(0deg);
+ }
+}
+
+.intro{
+ grid-column-start: 2;
+ grid-row-start : 2;
+}
+/*.navbar{
+ background-color: whitesmoke;
+ padding-bottom: 10px;
+}
+.navbar li{
+ list-style-type: none;
+ display: inline-block;
+}*/
+
+nav{
+ grid-column-start: 1;
+ grid-column-end: 4;
+ z-index:6;
+}
+.navbar ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: #333;
+}
+.navbar li {
+ float: left;
+ margin-left: 2.7%;
+}
+.navbar li #tab{
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+.navbar li a:hover {
+ background-color: #111;
+}
+.login, .panier{
+ margin-left: -15px;
+ background-color: pink;
+}
+.navbar li #login, #panier{
+ padding-top: 16px;
+}
+
+.active {
+ background-color: darkred;
+}
+.active_icon {
+ background-color: darkred;
+ margin-left: -15px;
+
+}
\ No newline at end of file
diff --git a/css/header.css b/css/header.css
index 2b0f152..b934d67 100644
--- a/css/header.css
+++ b/css/header.css
@@ -5,7 +5,7 @@ header{
width:100%;
text-align: center;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
- background-color: lightsalmon;
+ background-color: rgb(134, 196, 221);
}
.Titre {
grid-column-start:2;
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..d6ec57a
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,84 @@
+
+main{
+
+}
+
+.text-intro{
+ width:80%;
+ margin:auto;
+ border: solid;
+ border-width: 5px;
+ background-color: darkorange;
+}
+
+.content{
+ display:grid;
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+ margin-left: 8%;
+}
+
+@media only screen and (min-width: 600px) {
+ .content{
+ margin-left: 8%;
+ }
+}
+
+article{
+ border: solid;
+ border-width: 1%;
+ border-radius: 45px;
+ background-color: rosybrown;
+}
+
+article h2{
+ text-align: center;
+}
+
+.NewsLetter{
+ grid-column-start: 1;
+ grid-column-end: 1;
+ grid-row-start: 1;
+ grid-row-end: 1;
+ width:35%;
+ margin:2%;
+}
+@media only screen and (max-width: 600px) {
+ .NewsLetter{
+ margin-left:-8%;
+ width:45%;
+ }
+}
+
+.Vedette{
+ grid-column-start: 1;
+ grid-column-end: 2;
+ grid-row-start: 1;
+ grid-row-end: 1;
+ width:58%;
+ margin:2%;
+ margin-left: 40%;
+}
+
+.Product{
+ float:left;
+ margin : 1.5%;
+}
+.Product p, .Product h3{
+ margin-top: -5px;
+ width:150px;
+}
+.Product .desc{
+ font-size: 10px;
+}
+.Pack{
+ grid-column-start: 1;
+ grid-column-end: 2;
+ grid-row-start: 2;
+ grid-row-end: 2;
+ width:96%;
+ margin:2%;
+}
+.Pack .Product{
+ float:left;
+}
diff --git a/css/panier.css b/css/panier.css
new file mode 100644
index 0000000..7a7040c
--- /dev/null
+++ b/css/panier.css
@@ -0,0 +1,108 @@
+
+main{
+ display: grid;
+ grid-template-columns: 1fr, 1fr;
+}
+.Liste{
+ grid-column-start: 1;
+ grid-row-start:1;
+ background-color: rgba(226, 180, 127, 0.3);
+ border:solid;
+ border-color: brown;
+ border-width:15px;
+ width:100%;
+ height:100vh;
+ overflow: scroll;
+}
+
+.Product{
+ float:left;
+ margin : 3%;
+ width:25%;
+}
+.Product p, .Product h3{
+ margin-top: -5px;
+ width:150px;
+}
+#panier1{
+ grid-column-start: 2;
+ grid-row-start:1;
+ width:80%;
+ margin:auto;
+}
+
+#panier2{
+ grid-column-start: 1;
+ grid-column-end: 2;
+ grid-row-start:1;
+ width:80%;
+ height: 100%;
+ margin:auto;
+}
+#panier2 form div{
+ margin:4%;
+ margin-left: 35%;
+}
+#panier2 button{
+ margin:4%;
+ margin-left: 35%;
+}
+#panier2 form{
+ border:solid;
+ border-color:tan;
+ margin:4%;
+}
+
+#panier3{
+ height:100vh;
+}
+
+.panier h1{
+ text-align: center;
+ font-weight: bold;
+}
+.panier p{
+ font-weight: bold;
+}
+.panier li{
+ margin-left:15%;
+}
+.panier h1{
+ text-align: center;
+}
+.panier button{
+ position: center;
+ width:20%;
+}
+
+
+
+.Ariane{
+ margin:auto;
+ margin-left: 25%;
+}
+.ligne{
+ width:21%;
+ height: 2px;
+ background-color: black;
+ float:left;
+ margin-left:2%;
+ margin-right:2%;
+ margin-bottom: 10%;
+ margin-top: 10%;
+}
+.point{
+ width:10px;
+ height:10px;
+ background-color: white;
+ border:solid;
+ border-color: black;
+ border-width:1px;
+ border-radius: 50%;
+ float: left;
+ margin-bottom: 10%;
+ margin-top: 10%;
+}
+#active{
+ background-color: crimson;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..8caea84
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,103 @@
+html{
+ font-family: Arial, Helvetica, sans-serif;
+ background:black;
+ width:100%;
+}
+
+
+body{
+ display: grid;
+ width:100%;
+ grid-template-columns: 5% 1fr 5%;
+ grid-template-rows: auto auto auto;
+ grid-auto-rows: minmax(auto, auto);
+ background:linear-gradient(lightgray, sandybrown);
+}
+
+header{
+ grid-column-start: 1;
+ grid-column-end: 4;
+ grid-row-start: 1;
+ grid-row-end: 1;
+ position: static;
+}
+
+.rotate{
+ z-index:1;
+ pointer-events: none;
+}
+.rotate2{
+ z-index:1;
+ pointer-events: none;
+}
+.page{
+ grid-column-start: 1;
+ grid-column-end: 4;
+ background:linear-gradient(rgb(189, 184, 184), sandybrown);
+ z-index:2;
+
+ display: grid;
+ grid-template-columns: auto, auto, auto;
+ grid-template-rows: 5%, auto, 5%;
+ grid-auto-rows: minmax(auto, auto);
+}
+.pubG{
+ grid-column-start : 1;
+ grid-column-end: 1;
+ grid-row-start: 2;
+ grid-row-end: 2;
+ z-index:3;
+ background-color: red;
+ margin:4%;
+}
+.pubD{
+ grid-column-start : 3;
+ grid-column-end: 3;
+ grid-row-start: 2;
+ grid-row-end: 2;
+ z-index:3;
+ background-color: green;
+}
+main{
+ grid-column-start: 2;
+ grid-column-end: 2;
+ grid-row-start: 2;
+ grid-row-end: 2;
+ width: 85%;
+ background: rgba(255, 0, 0, 0.1);
+ margin-left:1.5%;
+ margin-right:1.5%;
+ z-index:3;
+}
+
+
+@media only screen and (max-width: 600px) {
+ main {
+ width:100%;
+ background: none;
+ }
+}
+
+footer {
+ font-size: 11px;
+ grid-column-start: 1;
+ grid-column-end: 4;
+ grid-row-start: 3;
+ grid-row-end: 3;
+ background:rgb(86, 85, 177);
+ bottom:100vh;
+ width:100%;
+}
+footer .divfooter{
+ float:left;
+ margin:3%;
+}
+footer img{
+ margin-left:10%;
+}
+
+form input{
+ background-color: rgba(255, 255, 255, 0.2);
+ border: solid;
+ border-radius: 15px;
+}
\ No newline at end of file
diff --git a/footer.php b/footer.php
new file mode 100644
index 0000000..c018468
--- /dev/null
+++ b/footer.php
@@ -0,0 +1,28 @@
+
\ No newline at end of file
diff --git a/header.php b/header.php
new file mode 100644
index 0000000..2710851
--- /dev/null
+++ b/header.php
@@ -0,0 +1,19 @@
+
\ No newline at end of file
diff --git a/img/arrow_up.png b/img/arrow_up.png
new file mode 100644
index 0000000..acc9793
Binary files /dev/null and b/img/arrow_up.png differ
diff --git a/img/reseaux/facebook.png b/img/reseaux/facebook.png
new file mode 100644
index 0000000..3ad8116
Binary files /dev/null and b/img/reseaux/facebook.png differ
diff --git a/img/reseaux/instagram.png b/img/reseaux/instagram.png
new file mode 100644
index 0000000..d4a030e
Binary files /dev/null and b/img/reseaux/instagram.png differ
diff --git a/img/reseaux/twitter.png b/img/reseaux/twitter.png
new file mode 100644
index 0000000..ec84b19
Binary files /dev/null and b/img/reseaux/twitter.png differ
diff --git a/img/reseaux/youtube.png b/img/reseaux/youtube.png
new file mode 100644
index 0000000..2add036
Binary files /dev/null and b/img/reseaux/youtube.png differ
diff --git a/index.php b/index.php
index 24fcf87..43d35bf 100644
--- a/index.php
+++ b/index.php
@@ -10,15 +10,177 @@
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Caramel 7up
+
4,99 - En stock
+
+
+
Caramel Beurre Salé
+
4,99 - En stock
+
+
+
Caramel Coca-Cola
+
4,99 - En stock
+
+
+
Caramel Dr Pepper
+
4,99 - En stock
+
+
+
Caramel Fanta
+
4,99 - En stock
+
+
+
Caramel Monster
+
4,99 - En stock
+
+
+
Cramel Oasis
+
4,99 - En stock
+
+
+
Caramel Orangina
+
4,99 - En stock
+
+
+
Caramel Pepsi
+
4,99 - En stock
+
+
+
Caramel Redbull
+
4,99 - En stock
+
+
+
Caramel Sprite
+
4,99 - En stock
+
+
+
Caramel Swhepps
+
4,99 - En stock
+
+
+
Caramel Mountain Dew
+
4,99 - En stock
+
+
+
Sirop 7up
+
6,85€ - En stock
+
+
+
Sirop Coca-Cola
+
6,85€ - En stock
+
+
+
Sirop DrPepper
+
6,85€ - En stock
+
+
+
Sirop Fanta
+
6,85€ - En stock
+
+
+
Sirop Monster
+
6,85€ - En stock
+
+
+
Sirop Mountain Dew
+
6,85€ - En stock
+
+
+
+
Sirop Oasis
+
6,85€ - En stock
+
+
+
Sirop Orangina
+
6,85€ - En stock
+
+
+
Sirop Pepsi
+
6,85€ - En stock
+
+
+
Sirop Red Bull
+
6,85€ - En stock
+
+
+
Sirop Sprite
+
6,85€ - En stock
+
+
+
Sirop Swhepps
+
6,85€ - En stock
+
+
+
Pack Coca Oasis
+
24,99€ - En stock
+
+
+
Pack 5 paquet Caramel Coca
+
30,99€ - En stock
+
+
+
Pack 5 paquet Caramel Coca
+
30,99€ - En stock
+
+
+
Pack 5 paquet Caramel Coca
+
30,99€ - En stock
+
+
+
Figurines Sodaramel pour embouts de crayons
+
0,99€ - En stock
+
+
+
Peluche Samuel Caramel
+
8,99€ - En stock
+
+
+
Figurine Samuel Caramel
+
6.99€ - En stock
+
+
+
-
+ 
+