----- TP03 -----

1.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,witdh=device-width">
		<title>CEastwood</title>
		<style>

			ul {
				list-style-type: none;
			}

			li {
				wid
				th: 500px;
				padding-block-end: 50px;
				margin-bottom: 5px;
				padding-left: 10px;
				padding-top: 3px;
				padding-bottom: 3px;
			}

			li:nth-child(even) {
				color: white;
				font-style: normal;
				background-color: grey;
			}

			li:nth-child(odd) {
				background-color: lightgrey;
				font-style: italic;
			}

		</style>
	</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>

2.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Exercice 2</title>
		<style>
			main {
				position: relative;
				width: 300px;
				height: 300px;
				border-style: solid;
				background-color: yellow;
				color: red;
				border-width: 6px;
				border-radius: 15px;
			}

			header {
				position: relative;
				width:75px;
				height:75px;
				left: 60px;
				top: 80px;
				background-color: red;
				border-radius:50px;
			}

			section {
				position: relative;
				width:75px;
				height:75px;
				left: 165px;
				top: 7px;
				background-color: red;
				border-radius:50px;
			}

			aside {
				position: relative;
				width:200px;
				height:50px;
				left: 50px;
				top: 50px;
				background-color: red;
			}

		</style>
	</head>
	<body>
		<main>
			<header></header>
			<section></section>
			<aside></aside>
			<footer></footer>
		</main>
	</body>
</html>


3.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Exercice 3</title>
		<style>

			ul {
				width: 400px;
				list-style-type: none;
				border: solid;
				border-width: 1px;
			}

			li {
				position: relative;
				display: inline;
			}

			img {
				margin-top: 3px;
				width: 100px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="https://developer.mozilla.org/docs/Web/HTML"><img src="html.png"></a></li>
			<li><a href="https://developer.mozilla.org/docs/Web/CSS"><img src="css.png"></a></li>
			<li><a href="https://developer.mozilla.org/docs/Web/Javascript"><img src="javascript.png"></a></li>
		</ul>
	</body>
</html>


4.

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,witdh=device-width">
		<link rel="stylesheet" href="style4.css">
		<title>Document</title>
		<style>

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

			}
			article {
				text-align: justify;
				border : 1px solid grey;
				padding : 1em;
			}

		</style>
	</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>



5.

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1,witdh=device-width">
		<link rel="stylesheet" href="style4.css">
		<title>Document</title>
		<style>

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

			}
			article {
				border:solid;
				border-size:1px;
				border-color: grey;
				margin: 40px;
				float: left;
				text-align: justify;
				border : 1px solid grey;
				padding : 1em;
			}

		</style>
	</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>
