diff --git a/Page2.html b/Page2.html
index 1550b71631393c854b7abdebfd177d99dff36dcf..35a5f690653b8c7d4e04e1324248c3698fc25ef2 100644
--- a/Page2.html
+++ b/Page2.html
@@ -3,37 +3,28 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Style2.css"/>
- <title>Tableau</title>
+ <title>Top 5 artiste</title>
</head>
<body>
-<div class="conteneur">
-<h1>Tabeau artistes</h1>
- <h1>Top 5 artistes préférer</h1>
-</div>
-<div class="conteneur">
-<table>
- <tr>
- <th>Nom d'artiste</th>
- <th>Prénom</th>
- <th>Âge</th>
- </tr>
- <tr>
- <td>Nekfeu</td>
- <td>Ken</td>
- <td>34</td>
- </tr>
- <tr>
- <td>Damso</td>
- <td>William</td>
- <td>32</td>
- </tr>
- <tr>
- <td>Luidji</td>
- <td>Alexis</td>
- <td>33</td>
- </tr>
-
-</table>
+<header>
+ <table>
+ <tr>
+ <th>
+ <nav>
+ <ul>
+ <li>
+ <a href="index.html">La Poésie Dans La Music</a>
+ </li>
+ <li>
+ <a href="Page2.html">Top 5</a>
+ </li>
+ </ul>
+ </nav>
+ </th>
+ </tr>
+ </table>
+</header>
+<h1>Top 5 artistes préférées</h1>
<table>
<tr>
<th>Top1</th>
@@ -43,17 +34,64 @@
<th>Top5</th>
</tr>
<tr>
- <td>Damso</td>
- <td>Luidji</td>
- <td>Dali</td>
- <td>Nekfeu</td>
- <td>Luv Resval</td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <label for="ameliorer1"></label><br>
+ <textarea name="ameliorer" id="ameliorer1"></textarea>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <label for="ameliorer1"></label><br>
+ <textarea name="ameliorer" id="ameliorer2"></textarea>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <label for="ameliorer1"></label><br>
+ <textarea name="ameliorer" id="ameliorer3"></textarea>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <label for="ameliorer1"></label><br>
+ <textarea name="ameliorer" id="ameliorer4"></textarea>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <label for="ameliorer1"></label><br>
+ <textarea name="ameliorer" id="ameliorer5"></textarea>
+ </p>
+ </form>
+ </td>
</tr>
-
</table>
+<div>
+ <div class="conteneur">
+ <form method="get" action="">
+ <p1>
+ <label for="ameliorer">Que vous inspire la music ?</label><br>
+ <textarea name="ameliorer" id="ameliorer"></textarea>
+ </p1>
+ </form>
+ <form method="get" action="index.html">
+ <p1>
+ <label for="ameliorer1">Avez-vous des artistes peu connu à nous suggérer ?</label><br>
+ <textarea name="ameliorer" id="ameliorer6"></textarea>
+ </p1>
+ </form>
+ </div>
</div>
-
-
-<p><a href="index.html">Previous Page</a></p>
+<p><input type="submit" value="Envoyer"></p>
</body>
</html>
\ No newline at end of file
diff --git a/Style2.css b/Style2.css
index 5fb0015330480a6d677130406a78221b986afc63..81c4732bb146638d90bc7d949ce66276cd12231f 100644
--- a/Style2.css
+++ b/Style2.css
@@ -1,19 +1,26 @@
-.banner {
- padding: 100px 0;
- background-size: cover;
- background-position: center;
+body{
+background-color: white;
+}
+
+h1{
+ color: #5b2c6f;
+ text-align: center;
+ text-decoration: underline;
}
table{
- border-collapse;
- background-color: white;
- color: black;
+ background-color: #fff7fe;
+ color: #8e44ad;
+ margin-left: auto;
+ margin-right: auto;
}
+
td, th {
- border: 1px solid black;
+ border: 2px solid #d2a3ff;
border-radius: 5px;
padding: 20px;
}
+
.conteneur {
display: flex;
flex-direction: row;
@@ -32,21 +39,47 @@ p{
}
a:active {
- color: purple;
+ color: #5b2c6f;
margin: auto;
}
-h1{
-color: blue;
-}
-
-body{
-background-color: white;
+a:hover{
+ text-decoration: underline;
}
a{
- color: blue;
+ color: #8e44ad;
width: 35%;
text-align: justify;
padding: 16px;
- }
\ No newline at end of file
+ text-decoration: none;
+ }
+
+input {
+ padding: 10px;
+ border: 2px solid #white;
+ outline: none;
+ margin-bottom: 80px;
+ border-radius: 10px;
+ margin-left: 1400px;
+ background-color: #f0e7f9;
+}
+
+textarea{
+ color: #8e44ad;
+ text-align: center;
+ border-radius: 5px;
+ font-weight: 900;
+ border-color: #8e44ad;
+ background-color: #white;
+ box-shadow: 2px 2px 2px rgba(0, 0, 0);
+}
+
+p1{
+ font-weight: bold;
+ color: #8e44ad ;
+}
+
+header{
+ margin-right: 1490px;
+}
\ No newline at end of file
diff --git a/d'ou sors-tu.jpeg b/d'ou sors-tu.jpeg
deleted file mode 100644
index 9d3b9d779023fa57647bad9a8529b51b98c3c748..0000000000000000000000000000000000000000
Binary files a/d'ou sors-tu.jpeg and /dev/null differ
diff --git a/index.html b/index.html
index 19cd3f5a174142261bcb9403b3e808f71948285f..dd2ecb7a3d4ef561d26055ae0f58b444390c195d 100644
--- a/index.html
+++ b/index.html
@@ -6,43 +6,44 @@
<link rel="stylesheet" href="style.css"/>
</head>
<body>
+<header>
+ <table>
+ <tr>
+ <th>
+ <nav>
+ <ul>
+ <li>
+ <a href="index.html">La Poésie Dans La Music</a>
+ </li>
+ <li>
+ <a href="Page2.html">Top 5</a>
+ </li>
+ </ul>
+ </nav>
+ </th>
+ </tr>
+ </table>
+</header>
<h1>La poésie dans la music</h1>
<h2>Les artistes utilisent t-il la poésie dans leurs textes ?</h2>
<h3><a href="https://open.spotify.com/intl-fr/artist/4LXBc13z5EWsc5N32bLxfH">Nekfeu:</a></h3>
<div class="conteneur">
- <p>Nekfeu utilise ici dans "<a href="https://open.spotify.com/intl-fr/track/6UeG6DogntZ1s89ejurXhT">Égérie</a>" une
- paronomase ce qui permet d'approfondir ses textes, leurs similitudes laisse croire que leurs sens sont également
- liée. Cette figure de style est souvent utlisier par les proverbes, les titres et les poésies.</p>
+ <p>Nekfeu utilise ici dans "<a href="https://open.spotify.com/intl-fr/track/6UeG6DogntZ1s89ejurXhT">Égérie</a>"
+ une paronomase ce qui permet d'approfondir ses textes, leurs similitudes laisse croire que leurs sens sont
+ également liée. Cette figure de style est souvent utlisier par les proverbes, les titres et les poésies.</p>
<p>Nekfeu utilise ici dans "<a href="https://open.spotify.com/intl-fr/track/5Mjd1MhXkysKHLUCkKT3Wi">Risible
- amour</a>" la personification du ciel pour décrire le mal être et la dépression qui est souvent liée au temps de
- pluie. Elle permet de rendre humain des objets et des réalités abstraite, elle les rapproche du lecteur et
- évoque des images, situation inhabituelle.</p>
+ amour</a>" la personification du ciel pour décrire le mal être et la dépression qui est souvent liée au
+ temps de pluie. Elle permet de rendre humain des objets et des réalités abstraite, elle les rapproche du lecteur
+ et évoque des images, situation inhabituelle.</p>
</div>
<div class="conteneur">
<img src="paronomase.jpg" alt="Elle pleut - Nekfeu" width=70% height=90%/>
+ <img src="soleil%20lune.jpg" alt="Malik al mawt - Népal" width=70% height=90%/>
<img src="personification.jpg" alt="Risible amour - Nekfeu" width=70% height=90%/>
</div>
<h3><a href="https://open.spotify.com/intl-fr/artist/1E8w172gkuT5htpwaIEsEl">Népal:</a></h3>
-<img src="soleil%20lune.jpg" alt="Malik al mawt - Népal" width=20% height=20%/>
<p>Népal utilise ici dans "<a href="https://open.spotify.com/intl-fr/track/3KId9KnkJ1FpdfsP5aKh1j">Malik al mawt</a>"
- une Antithèse, l'antithèse est une figure qui crée un effet de contraste servant à démontrer une contradiction, une
- improbabilité,une indécision. Elle oppose ici le Soleil et la Lune.</p>
-<form method="get" action="">
- <p>
- <label for="ameliorer">Aimez-vous d'autres artistes qui non pas été citer au dessus ?</label><br>
- <textarea name="ameliorer" id="ameliorer"></textarea>
- </p>
-</form>
-
-<form method="get" action="">
- <p>
- <label for="ameliorer1">Avez-vous d'autres artistes peu connu à nous suggérer ?</label><br>
- <textarea name="ameliorer" id="ameliorer1"></textarea>
- </p>
-</form>
-<div class="conteneur">
- <p><a href="Page2.html">Next Page</a></p>
-<p><input type="submit" value="Envoyer"></p>
-</div>
+ une Antithèse, l'antithèse est une figure qui crée un effet de contraste servant à démontrer une contradiction,
+ une improbabilité,une indécision. Elle oppose ici le Soleil et la Lune.</p>
</body>
</html>
\ No newline at end of file
diff --git a/paysage.jpg b/paysage.jpg
deleted file mode 100644
index 4b0a7707a97055c8aa808b1800b118425578f1b0..0000000000000000000000000000000000000000
Binary files a/paysage.jpg and /dev/null differ
diff --git a/site.html b/site.html
deleted file mode 100644
index 7c8ea8d584f9bf1fcd3ef9495c5781a25b08cfdc..0000000000000000000000000000000000000000
--- a/site.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Site</title>
-</head>
-<body>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-</body>
-</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 765342fe390a5c50964b93d50d56f1f47a750abd..4fa3da8b4395f222ab01f5bc6927e5dfc114abaa 100644
--- a/style.css
+++ b/style.css
@@ -1,32 +1,42 @@
-h3{
- color: black;
- text-align: center;
-}
-
-
body {
background-color: white;
- font-family: sans-serif;
+ font-family: Futura;
margin: auto;
}
h1 {
- color: black;
+ color: #5b2c6f ;
text-align: center;
+ text-decoration: underline;
}
-
+
+ h2{
+ color: #5b2c6f ;
+ text-align: center;
+ }
+
+h3{
+ color: black;
+ text-align: center;
+}
a:active {
- color: purple;
+ color: #5b2c6f;
margin: auto;
}
+a:hover{
+text-decoration: underline;
+}
+
a{
- color: blue;
+ color: #8e44ad;
width: 35%;
text-align: justify;
padding: 16px;
margin: auto;
+ font-weight: bold;
+ text-decoration: none;
}
img {
@@ -34,11 +44,8 @@ img {
display: block;
margin-left: auto;
margin-right: auto;
-}
-
-h2{
- color: black;
- text-align: center;
+ border-radius: 15px;
+ box-shadow: 5px 5px 2px rgba(0, 0, 0);
}
.conteneur {
@@ -50,32 +57,33 @@ h2{
align-item: center;
}
-input[type='submit'] {
- margin-top: 20px;
- front-size: 1em;
-}
-
input {
padding: 10px;
- border: 1px solid black;
+ border: 2px solid #white;
outline: none;
margin-bottom: 20px;
border-radius: 10px;
+ background-color: #f0e7f9;
}
-legend{
-background-color: white;
-}
-
-body{
-background-color: white;
-}
-
-
p{
- color: purple;
+ color: #d16ce5 ;
width: 35%;
text-align: justify;
padding: 16px;
- margin: auto;
- }
\ No newline at end of file
+ margin: auto;
+ font-family: Futura;
+ }
+
+
+table{
+ background-color: #fff7fe;
+ color: #8e44ad;
+}
+
+td, th {
+ border: 2px solid #d2a3ff;
+ border-radius: 5px;
+ padding: 20px;
+}
+