diff --git a/R1.02/tp/tp3/correction/css/style1.css b/R1.02/tp/tp3/correction/css/style1.css
new file mode 100644
index 0000000..5c090b7
--- /dev/null
+++ b/R1.02/tp/tp3/correction/css/style1.css
@@ -0,0 +1,21 @@
+ul {
+ width : 50%;
+ max-width : 700px;
+ margin:auto;
+ border : 1px solid black;
+ padding : 0;
+}
+li {
+ list-style-type: none;
+ padding : 0.25rem;
+ margin : 0.25rem;
+}
+li:nth-child(2n){
+ background-color : #888888;
+ color : rgb(255,255,255);
+
+}
+li:nth-child(2n+1){
+ background-color : #dddddd;
+ font-style:italic;
+}
diff --git a/R1.02/tp/tp3/correction/css/style2.css b/R1.02/tp/tp3/correction/css/style2.css
new file mode 100644
index 0000000..be2a36c
--- /dev/null
+++ b/R1.02/tp/tp3/correction/css/style2.css
@@ -0,0 +1,45 @@
+main {
+ --main-height : 800px;
+ --main-width : 800px;
+ position : relative;
+ width : var(--main-width);
+ height : var(--main-height);;
+ background-color : yellow;
+ border-radius : 10px;
+ border: 4px solid red;
+ margin:auto;
+}
+
+section {
+ position : absolute ;
+ top : calc(var(--main-height) / 4 );
+ right:calc(var(--main-width) / 5);
+ width : calc(var(--main-height) / 4);
+ height : calc(var(--main-height) / 4);
+ height : calc(var(--main-height) / 4);
+ border-radius : calc(var(--main-height) / 4);
+ background-color : red;
+
+}
+
+aside {
+ position : absolute ;
+ top : calc(var(--main-height) / 4 );
+ left:calc(var(--main-width) / 5);
+ width : calc(var(--main-height) / 4);
+ height : calc(var(--main-height) / 4);
+ height : calc(var(--main-height) / 4);
+ border-radius : calc(var(--main-height) / 4);
+
+ background-color : red;
+}
+footer {
+ position : absolute;
+ bottom : calc(var(--main-height) / 8 );
+ --tmp-left : calc(var(--main-width) / 5);
+ left : var(--tmp-left);
+ height : calc(var(--main-height) / 6);
+ width : calc(var(--tmp-left) * 3 );
+ background-color : red;
+}
+
diff --git a/R1.02/tp/tp3/correction/css/style3.css b/R1.02/tp/tp3/correction/css/style3.css
new file mode 100644
index 0000000..b9d6850
--- /dev/null
+++ b/R1.02/tp/tp3/correction/css/style3.css
@@ -0,0 +1,33 @@
+ul {
+ padding : 0.5em;
+ text-align:center;
+ border : 1px solid grey;
+}
+li {
+ list-style-type : none;
+ display : inline;
+ margin:0px 1em 0px 1em;
+ /* vertical-align:middle;*/
+
+}
+li:last-child{
+ margin-right:0px;
+}
+
+li > a {
+ display:inline-block;
+ height:50px;
+ width:50px;
+ vertical-align:middle;
+ font-size : 0px;
+
+}
+li > a[href*="HTML"] {
+ background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg);
+}
+li > a[href*="CSS"] {
+ background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg);
+}
+li > a[href*="Javascript"] {
+ background-image: url(https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg);
+}
diff --git a/R1.02/tp/tp3/correction/css/style5.css b/R1.02/tp/tp3/correction/css/style5.css
new file mode 100644
index 0000000..4f63a5a
--- /dev/null
+++ b/R1.02/tp/tp3/correction/css/style5.css
@@ -0,0 +1,40 @@
+/* media query pour le menu */
+@media screen and (max-width: 640px){
+nav {
+ display : none;
+}
+
+}
+ul {
+ text-align: center;
+ padding:0;
+}
+li {
+ list-style-type: none;
+ list-style-position: inside;
+ display: inline-block;
+ margin-right: 2em;
+ font-size : 2em;
+}
+li:last-child{
+ margin-right:0;
+}
+main{
+ display : flex;
+ flex-direction : row;
+ flex-wrap : wrap;
+ justify-content : center;
+}
+
+article {
+ box-sizing : border-box;
+ margin: 2em;
+ flex-basis : 40%;
+ min-width:300px;
+ text-align: justify;
+ border : 1px solid grey;
+ padding : 1em;
+}
+img {
+ width : 90%;
+}
diff --git a/R1.02/tp/tp3/correction/css/style6.css b/R1.02/tp/tp3/correction/css/style6.css
new file mode 100644
index 0000000..7bec361
--- /dev/null
+++ b/R1.02/tp/tp3/correction/css/style6.css
@@ -0,0 +1,43 @@
+/* media query pour le menu */
+@media screen and (max-width: 640px){
+ nav {
+ display : none;
+ }
+}
+
+ul {
+ text-align: center;
+ padding:0;
+}
+li {
+ list-style-type: none;
+ list-style-position: inside;
+ display: inline-block;
+ margin-right: 2em;
+ font-size : 2em;
+}
+li:last-child{
+ margin-right:0;
+}
+main{
+ display : grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap : 1rem;
+
+}
+
+article:first-child{
+ grid-column : 1 / span 2;
+
+}
+article {
+ box-sizing : border-box;
+ margin: 2em;
+ min-width:300px;
+ text-align: justify;
+ border : 1px solid grey;
+ padding : 1em;
+}
+img {
+ width : 90%;
+}
diff --git a/R1.02/tp/tp3/correction/ex1.html b/R1.02/tp/tp3/correction/ex1.html
new file mode 100644
index 0000000..bc4b07b
--- /dev/null
+++ b/R1.02/tp/tp3/correction/ex1.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ CEastwood
+
+
+
+
+ Mes films préférés de Clint Eastwood
+
+ - Gran Torino (2008)
+ - Impitoyable (1992)
+ - Mystic River (2003)
+ - Sur la route de Madison (1995)
+ - Lettres d'Iwo Jima (2006)
+ - L'Échange (2008)
+ - Josey Wales hors-la-loi (1976)
+ - Breezy (1973)
+
+
+
+
diff --git a/R1.02/tp/tp3/correction/ex2.html b/R1.02/tp/tp3/correction/ex2.html
new file mode 100644
index 0000000..3c80252
--- /dev/null
+++ b/R1.02/tp/tp3/correction/ex2.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Smiley
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/R1.02/tp/tp3/correction/ex3.html b/R1.02/tp/tp3/correction/ex3.html
new file mode 100644
index 0000000..80e7ad2
--- /dev/null
+++ b/R1.02/tp/tp3/correction/ex3.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ Liste
+
+
+
+
+
diff --git a/R1.02/tp/tp3/correction/ex5_flex.html b/R1.02/tp/tp3/correction/ex5_flex.html
new file mode 100644
index 0000000..51ad9d8
--- /dev/null
+++ b/R1.02/tp/tp3/correction/ex5_flex.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+ 
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
diff --git a/R1.02/tp/tp3/correction/ex6_grid.html b/R1.02/tp/tp3/correction/ex6_grid.html
new file mode 100644
index 0000000..bface9f
--- /dev/null
+++ b/R1.02/tp/tp3/correction/ex6_grid.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+