<style>
.bleu{color:blue;}
.rouge{color:red;
cursor: pointer;
}
.souligne{text-decoration:underline;}
.article1{
background-color:rgb(227, 6, 161);
border-radius: 50px;
text-align: center;
}
.article1:hover {
background-color: #555;
}
.article2 {
background-color:blue;
border-radius: 34px;
text-align: center;
}
.article2:hover {
background-color: #af1818;
}
.article3 {
background-color:lightblue;
border-radius: 34px;
text-align: center;
}
.article3:hover {
background-color: #8217b3;
}
.article4 {
background-color:darkblue;
border-radius: 34px;
border: 2px solid #555;
text-align: center;
transition: all 0.3s ease;
}
.article4:hover {
background-color: #f8c304;
}
li{display: inline-block;
margin-right: 1rem;
border-radius: 34px;
margin: 1rem;
text-align: center;
}
header, footer {
background-color: white;
padding: 2rem;}
main {
padding: 2rem;}
body{
margin: 1rem;
}
.container {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
padding: 1rem;
text-align: center;
box-shadow: 0px 0px 10px rgba(16, 13, 13, 0.1);
border-radius: 34px;
}
.container footer{
background: white;
box-shadow: #0d0c0c;
}
header li a {
text-decoration: none;
color: black;
background-color: white;
border-radius: 34px;
cursor: pointer;
box-shadow: 5px 5px 5px rgba(5, 5, 5, 0.678);
container-type: inline-size;
container-name: main;
grid-template-columns: 2fr 2fr 2fr;
text-align: right;
max-width: 100%;
}
footer li a {
text-align: left;
border-radius: 42;
box-shadow: #0d0c0c;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: white;
}
li a {
background: scroll;
color:rgb(64, 61, 56);
text-align: center;
padding: 1rem;
}
h1{
text-align: center;
color:black;
text-shadow: 0px 0px 5px rgba(5, 5, 5, 0.678);
}
h2{
text-align: center;
color:black;
}
img{max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 34px;
box-shadow: 0px 0px 10px rgba(16, 13, 13, 0.1);
}
header li a:hover {
background-color: #555;
}
.jaune{color:rgb(6, 75, 194);}
footer {
background-color: white;
padding: 2rem;
text-align: left;
}
time {
display: block;
margin-top: 1rem;
color: #0d0c0c;
font-size: 0.9rem;
text-align: right;
}
a:hover {
color: #2d0aee;
}
footer p {
display: block;
margin-top: 1rem;
text-shadow: #555;
text-align: left;
font-size: 0.9rem;
}
header {
background-image: url('https://2.bp.blogspot.com/-I0rNCDrDKEg/UtwpPNEwdPI/AAAAAAAAAto/k-6fJmpIdi0/s1600/Meilleurs+Fond+Ecran+Pc++-++(6).jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
border-radius: 5px;
}
iframe {
display: block;
width: 100%;
height: 315px;
border-radius: 19px;
box-shadow: 0px 0px 10px rgba(16, 13, 13, 0.1);
margin: 2rem 0;
box-shadow: #0d0c0c;
}
.article1:hover{
background-clip: content-box;
}
.article2:hover{
background-clip: content-box;
}
.article3:hover{
background-clip: content-box;
}
.article4:hover{
background-clip: content-box;
}
table{
width:100%;
border-collapse: collapse;
color: #2d0aee;
border-radius: 34px;
}
.container table{
border-radius: 34;
}
caption{
font-weight: bold;
text-align: center;
background-color: black;
color: rgb(86, 76, 76);
padding: 1rem;
}
td{
border: 1px solid rgb(50, 42, 42);
background-origin: padding-box;
padding: 0.5rem;
text-align: center;
}
th{
border: 1px solid black;
color: #2a2424;
padding: 0.5em;
text-align: center;
}
body td:nth-of-type(1){
background-color: #0d0c0c;
color: rgb(248, 246, 246);
}
tr{
border: #0f066f;
}
tbody tr:nth-of-type(2n+2){
background-color: #8217b3;
}
</style>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jean Ives</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=home" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=home" />
</head>
<body>
<header class="flex">
<a href="index.html">
<img src="https://th.bing.com/th/id/OIP.n05tQMMus0e_ciQf2X0GpgHaHa?w=161&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" width="100">
</a>
<ul class="flex">
<li><a href="index.html"><i class="fa-solid fa-house"></i>Accueil</a></li>
<li><a href="tarifs.html"><i class="fa-solid fa-hand-holding-dollar"></i>Tarifs</a></li>
<li><a href="contact.html"><i class="fa-solid fa-address-book"></i>Contact</a></li>
</ul>
</header>
<h1>Hello world !</h1>
<p class="rouge souligne"></p>
<p class="bleu"></p>
<main class="container">
<section class="flex">
<article class="article1"><h2><img src="https://th.bing.com/th/id/OIP.n05tQMMus0e_ciQf2X0GpgHaHa?w=161&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" width="67" alt="cet article est en rupture"> Article 1</h2></article>
<article class="article2"><h2><img src="https://th.bing.com/th/id/OIP.n05tQMMus0e_ciQf2X0GpgHaHa?w=161&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" width="67" alt="cet article est en rupture"> Article 2</h2></article>
<article class="article3"><h2><img src="https://th.bing.com/th/id/OIP.n05tQMMus0e_ciQf2X0GpgHaHa?w=161&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" width="67" alt="cet article est en rupture"> Article 3</h2></article>
<article class="article4"><h2><img src="https://th.bing.com/th/id/OIP.n05tQMMus0e_ciQf2X0GpgHaHa?w=161&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3" width="67" alt="cet article est en rupture"> Article 4</h2></article>
</section>
<hr>
<h2>Bienvenue sur mon site web !</h2>
<p>Ce <span class="jaune">site</span> est en cours de construction.</p>
<hr>
</main>
<iframe width="560" height="315" src="https://www.youtube.com/embed/SX6UX4JMD-Q?si=2tLIGyMaN0qUYkzj" title="LES 7 MEILLEURS ANIMES ISEKAI DE L'ANNÉE 2026! (masterclass)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Amusez-vous !</h3>
<br>
<table>
<caption>Nos Tarifs</caption>
<thead>
<tr>
<th></th>
<th>Martin</th>
<th>Apres-midi</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>lundi</td>
<td>45</td>
<td>45</td>
</tr>
<tr>
<td>mardi</td>
<td>54</td>
<td>87</td>
</tr>
<tr>
<td>mercredi</td>
<td>32</td>
<td>45</td>
</tr>
<tr>
<td>jeudi</td>
<td>45</td>
<td>67</td>
</tr>
<tr>
<td>vendredi</t>
<td>76</td>
<td>09</td>
</tr>
<tr>
<td>samedi</td>
<td colspan="2">09</td>
</tr>
<tr>
<td>dimanche</td>
<td colspan="2">09</td>
</tr>
</tbody>
</table>
<footer>
<ul class="flex
">
<li><a href="index.html"><i class="fa-solid fa-house"></i>Accueil</a></li>
<li><a href="https://www.instagram.com"><i class="fa-brands fa-instagram"></i>Instagram</a></li>
<li><a href="https://www.linkedin.com"><i class="fa-brands fa-linkedin"></i>LinkedIn</a></li>
</ul>
<br>
<hr>
<time datetime="2026-10-02">02 octobre 2026</time>
<p>© 2024 Mon site web. Tous droits réservés.</p>
</footer>
</body>
</html>