monnerat/web_2025
1
2
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correctin tp3

Browse Source
This commit is contained in:
Denis Monnerat
2025-12-03 14:04:41 +01:00
parent f468b0b2e0
commit 148696e062
12 changed files with 424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
R1.02/tp/tp3/correction/css/style1.css Normal file
View File

@@ -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;
}

46
R1.02/tp/tp3/correction/css/style2.css Normal file
View File

@@ -0,0 +1,46 @@
main {
--main-height : 400px;
--main-width : 400px;
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;
}
header {
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;
border-radius : calc(var(--main-height) / 6) calc(var(--main-height) / 6) 0px 0px;
}

20
R1.02/tp/tp3/correction/css/style3.css Normal file
View File

@@ -0,0 +1,20 @@
body {
font-family: serif;
}
h1 + p {
font-variant: small-caps;
}
article p {
font-style: italic;
}
article > p {
text-decoration: underline;
}
article ~ p {
font-family: sans-serif;
}

28
R1.02/tp/tp3/correction/css/style4.css Normal file
View File

@@ -0,0 +1,28 @@
ul {
padding : 1em;
text-align:center;
border : 1px solid grey;
display : flex;
justify-content:space-around;
}
li {
list-style-type : none;
display : flex;
}
li > a {
height:10rem;
width:10rem;
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);
}

51
R1.02/tp/tp3/correction/css/style5.css Normal file
View File

@@ -0,0 +1,51 @@
/* media query pour le menu */
@media screen and (max-width: 640px){
nav {
display : none;
}
}
ul {
padding:0;
display:flex;
list-style-type: none;
justify-content:center;
}
li {
margin-right: 2em;
font-size : 2em;
}
/*
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%;
}

40
R1.02/tp/tp3/correction/css/style6.css Normal file
View File

@@ -0,0 +1,40 @@
/* media query pour le menu */
@media screen and (max-width: 640px){
nav {
display : none;
}
}
ul {
padding:0;
display:flex;
list-style-type: none;
justify-content:center;
}
li {
margin-right: 2em;
font-size : 2em;
}
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%;
}

25
R1.02/tp/tp3/correction/ex1.html Normal file
View File

@@ -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>

18
R1.02/tp/tp3/correction/ex2.html Normal file
View File

@@ -0,0 +1,18 @@
<!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>
<footer></footer>
</main>
</body>
</html>

40
R1.02/tp/tp3/correction/ex3.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pulp fiction</title>
<link rel="stylesheet" href="css/style3.css" type="text/css" media="screen">
</head>
<body>
<h1>Uuummmm, this is a tasty burger!</h1>
<p>
Yeah, I like animals better than people sometimes...
</p>
<p>
Especially dogs.
</p>
<article>
<h2>We happy?</h2>
<p>
Dogs are the best.
</p>
<div>
<p>
And the good thing about dogs...
</p>
<p>
is they got different dogs for different people.
</p>
</div>
</article>
<p>
Give me... Raoul.
</p>
<p>
Right, Omar? Give me Raoul.
</p>
</body>
</html>

17
R1.02/tp/tp3/correction/ex4.html Normal file
View File

@@ -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/style4.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>

59
R1.02/tp/tp3/correction/ex5_flex.html Normal file
View File

@@ -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>

59
R1.02/tp/tp3/correction/ex6_grid.html Normal file
View File

@@ -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/style6.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>