tp3 : css

This commit is contained in:
2025-11-25 10:42:00 +01:00
parent 7d81beb8bb
commit 75865cd076
11 changed files with 356 additions and 0 deletions

View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,witdh=device-width">
<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>

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercice 2</title>
</head>
<body>
<main>
<header></header>
<section></section>
<footer></footer>
</main>
</body>
</html>

View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pulp fiction</title>
<style>
body {
font-family: serif;
}
</style>
</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>

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercice 3</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>

View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,witdh=device-width">
<link rel="stylesheet" href="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>

View File

@@ -0,0 +1,21 @@
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;
}
article {
text-align: justify;
border : 1px solid grey;
padding : 1em;
}