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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./css/style1.css">
+ <title>CEastwood</title>
+
+
+ </head>
+ <body>
+ <h1>Mes films préférés de Clint Eastwood</h1>
+ <ul>
+ <li>Gran Torino (2008)</li>
+ <li>Impitoyable (1992)</li>
+ <li>Mystic River (2003)</li>
+ <li>Sur la route de Madison (1995)</li>
+ <li>Lettres d'Iwo Jima (2006)</li>
+ <li>L'Échange (2008)</li>
+ <li>Josey Wales hors-la-loi (1976)</li>
+ <li>Breezy (1973)</li>
+ </ul>
+ </body>
+</html>
+
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Smiley</title>
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./css/style2.css">
+
+
+ </head>
+ <body>
+ <main>
+ <header></header>
+ <section></section>
+ <aside></aside>
+ <footer></footer>
+ </main>
+ </body>
+</html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./css/style3.css">
+
+ <title>Liste</title>
+ </head>
+ <body>
+ <ul>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
+ </ul>
+ </body>
+</html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./css/style5.css">
+ <title>Document</title>
+ </head>
+
+ <body>
+ <header>
+ <nav>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <article>
+ <header>
+ <h1>Article title 1</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 2</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ </main>
+ </body>
+</html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="initial-scale=1,witdh=device-width">
+ <link rel="stylesheet" href="./css/style6.css">
+ <title>Document</title>
+ </head>
+
+ <body>
+ <header>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/">Contact</a></li>
+ </ul>
+ </nav>
+ </header>
+ <main>
+ <article>
+ <header>
+ <h1>Article title 1</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 2</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ <article>
+ <header>
+ <h1>Article title 3</h1>
+ </header>
+ <section>
+ <img src="https://picsum.photos/300/200" alt="">
+ <p>lorem ipsum</p>
+ </section>
+ </article>
+ </main>
+ </body>
+</html>