diff --git a/Jeu.html b/Jeu.html
new file mode 100644
index 0000000000000000000000000000000000000000..df3989d7604ee28fb11f7e8f885169f1d76c3158
--- /dev/null
+++ b/Jeu.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="Style3.css"/>
+ <title>Jeu</title>
+ <script src="script.js" defer ></script>
+
+</head>
+<body>
+<header>
+ <div class="nav-bar">
+ <nav>
+ <ul>
+ <a href="index.html">La Poésie Dans La Musique</a>
+ <a href="Page2.html">Tableau top 5</a>
+ <a href="Jeu.html">Jeu Écrit</a>
+ </ul>
+ </nav>
+ </div>
+</header>
+
+<h1>Jeu Écrit</h1>
+<h2>Ce jeu va vous permettre d'écrire plus rapidement !</h2>
+
+<main>
+
+ <table>
+ <tr>
+ <th>
+ <div class="zoneOptions">
+ <p>Choisissez votre option et tapez la proposition qui s'affiche dans le champ en-dessous.</p>
+ <div class="optionSource">
+ <input type="radio" name="optionSource" id="mots" value="1" checked>
+ <label for="mots">Mots</label>
+ <input type="radio" name="optionSource" id="phrases" value="2">
+ <label for="phrases">Phrases</label>
+
+
+
+
+ </div>
+ </div>
+
+ <div class="zoneProposition">
+ Azerty
+ </div>
+ <div class="timer">
+ <div id="wrapper">
+ <div id="chrono">00:00:00</div>
+ <div id="buttons">
+ <button id="reset" class="button">Reset</button>
+ <button id="stop" class="button">Arrêter</button>
+ <button id="start" class="button">Démarrer</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="zoneSaisie">
+ <input type="text" id="inputEcriture" name="inputEcriture">
+ <button id="btnValiderMot">Valider</button>
+ </div>
+ <div class="zoneScore">
+ Votre score : <span>0</span>
+ </div>
+
+</th>
+</tr>
+</table>
+
+<div class="popupBackground">
+ <div class="popup">
+ <div>Partagez votre score :</div>
+ <form>
+ <label for="nom">Nom :</label>
+ <input type="text" id="nom" name="nom" placeholder="Votre nom">
+ <label for="email">Email :</label>
+ <input type="email" id="email" name="email" placeholder="Exemple@gmail.com">
+ <button id="btnEnvoyerMail">Envoyer</button>
+ </form>
+</div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/Page2.html b/Page2.html
index 35a5f690653b8c7d4e04e1324248c3698fc25ef2..63b8e29ecbbe89b30ba230caca6f7fb9a1b5ec6c 100644
--- a/Page2.html
+++ b/Page2.html
@@ -3,95 +3,162 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Style2.css"/>
- <title>Top 5 artiste</title>
+ <title>Top 5 artistes</title>
+ <script src="Page2.js" defer ></script>
+
</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>
+ <div class="nav-bar">
+ <nav>
+ <ul>
+ <a href="index.html">La Poésie Dans La Musique</a>
+ <a href="Page2.html">Tableau top 5</a>
+ <a href="Jeu.html">Jeu Écrit</a>
+ </ul>
+ </nav>
+ </div>
</header>
-<h1>Top 5 artistes préférées</h1>
+
+<h1>Top 5 artistes préférés</h1>
<table>
<tr>
- <th>Top1</th>
- <th>Top2</th>
- <th>Top3</th>
- <th>Top4</th>
- <th>Top5</th>
+ <th>Top 1</th>
+ <th>Top 2</th>
+ <th>Top 3</th>
+ <th>Top 4</th>
+ <th>Top 5</th>
+
</tr>
<tr>
<td>
<form method="get" action="">
<p>
- <label for="ameliorer1"></label><br>
- <textarea name="ameliorer" id="ameliorer1"></textarea>
+ <textarea id="top1"></textarea>
</p>
</form>
</td>
<td>
<form method="get" action="">
<p>
- <label for="ameliorer1"></label><br>
- <textarea name="ameliorer" id="ameliorer2"></textarea>
+ <textarea id="top2"></textarea>
</p>
</form>
</td>
<td>
<form method="get" action="">
<p>
- <label for="ameliorer1"></label><br>
- <textarea name="ameliorer" id="ameliorer3"></textarea>
+ <textarea id="top3"></textarea>
</p>
</form>
</td>
<td>
<form method="get" action="">
<p>
- <label for="ameliorer1"></label><br>
- <textarea name="ameliorer" id="ameliorer4"></textarea>
+ <textarea id="top4"></textarea>
</p>
</form>
</td>
<td>
<form method="get" action="">
<p>
- <label for="ameliorer1"></label><br>
- <textarea name="ameliorer" id="ameliorer5"></textarea>
+ <textarea id="top5"></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><input type="submit" value="Envoyer"></p>
+
+<script type="text/javascript">
+ function maFonction(){
+ var text = document.getElementById('top1').value;
+ document.getElementById("Top1").innerHTML = text;
+}
+</script>
+
+<script type="text/javascript">
+ function maFonctionn(){
+ var text = document.getElementById('top2').value;
+ document.getElementById("Top2").innerHTML = text;
+}
+ </script>
+
+
+<script type="text/javascript">
+ function maFonctionnn(){
+ var text = document.getElementById('top3').value;
+ document.getElementById("Top3").innerHTML = text;
+}
+ </script>
+
+<script type="text/javascript">
+ function maFonctionnnn(){
+ var text = document.getElementById('top4').value;
+ document.getElementById("Top4").innerHTML = text;
+}
+ </script>
+
+<script type="text/javascript">
+ function maFonctionnnnn(){
+ var text = document.getElementById('top5').value;
+ document.getElementById("Top5").innerHTML = text;
+}
+ </script>
+
+
+ <a class="BoutonsEnBas" href="javascript: maFonction();">Voir Top1</a>
+ <a class="BoutonsEnBas" href="javascript: maFonctionn();">Voir Top2</a>
+ <a class="BoutonsEnBas" href="javascript: maFonctionnn();">Voir Top3</a>
+ <a class="BoutonsEnBas" href="javascript: maFonctionnnn();">Voir Top4</a>
+ <a class="BoutonsEnBas" href= "javascript: maFonctionnnnn();">Voir Top5</a>
+
+ <table class="tbl2">
+ <tr>
+ <th>Top 1</th>
+ <th>Top 2</th>
+ <th>Top 3</th>
+ <th>Top 4</th>
+ <th>Top 5</th>
+
+ </tr>
+ <tr>
+ <td>
+ <form method="get" action="">
+ <p>
+ <div class="Top1" id="Top1"></div>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <div class="Top2" id="Top2"></div>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <div class="Top3" id="Top3"></div>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <div class="Top4" id="Top4"></div>
+ </p>
+ </form>
+ </td>
+ <td>
+ <form method="get" action="">
+ <p>
+ <div class="Top5" id="Top5"></div>
+ </p>
+ </form>
+ </td>
+ </tr>
+ </table>
+
</body>
</html>
\ No newline at end of file
diff --git a/Page2.js b/Page2.js
new file mode 100644
index 0000000000000000000000000000000000000000..18d83f5b2c4d76ea61fae2ce008b2e5d725175af
--- /dev/null
+++ b/Page2.js
@@ -0,0 +1,6 @@
+document.getElementById("Top1").innerHTML = document.getElementById('top1').value;
+document.getElementById("Top2").innerHTML = document.getElementById('top2').value;
+document.getElementById("Top3").innerHTML = document.getElementById('top3').value;
+document.getElementById("Top4").innerHTML = document.getElementById('top4').value;
+document.getElementById("Top5").innerHTML = document.getElementById('top5').value;
+
diff --git a/Style2.css b/Style2.css
index 81c4732bb146638d90bc7d949ce66276cd12231f..e38eb91b52ae0cf25f1520e196e4a206e2a08b0f 100644
--- a/Style2.css
+++ b/Style2.css
@@ -1,11 +1,21 @@
body{
-background-color: white;
+ background-color: #eef0ff;
+ font-family: Futura, Trebuchet MS, Arial, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: 500;
+ line-height: 26.4px;
+ margin: auto;
}
h1{
color: #5b2c6f;
text-align: center;
text-decoration: underline;
+ font-size: 24px;
+ font-weight: 700;
+ margin-top: 100px;
}
table{
@@ -13,6 +23,7 @@ table{
color: #8e44ad;
margin-left: auto;
margin-right: auto;
+ margin-top: 30px;
}
td, th {
@@ -25,9 +36,10 @@ td, th {
display: flex;
flex-direction: row;
justify-content: space-around;
- height: 200px;
- width: 1900px;
- align-item: center;
+ height: 150px;
+ width: 1800px;
+ align-self: center;
+ margin-top: 30px;
}
@@ -47,39 +59,58 @@ a:hover{
text-decoration: underline;
}
-a{
+a {
color: #8e44ad;
width: 35%;
text-align: justify;
padding: 16px;
+ margin: auto;
+ font-weight: bold;
text-decoration: none;
- }
+}
input {
padding: 10px;
- border: 2px solid #white;
+ border: 2px solid white;
outline: none;
- margin-bottom: 80px;
+ margin-bottom: 150px;
border-radius: 10px;
margin-left: 1400px;
background-color: #f0e7f9;
}
+input:active{
+ background-color: #d1d5ff;
+ border-color: #d2a3ff;
+}
+
textarea{
color: #8e44ad;
- text-align: center;
border-radius: 5px;
font-weight: 900;
- border-color: #8e44ad;
- background-color: #white;
+ border-color: #eef0ff;
+ background-color: white;
box-shadow: 2px 2px 2px rgba(0, 0, 0);
}
+.ameliorerr{
+ width: 500px;
+ height: 100px;
+}
+
p1{
font-weight: bold;
color: #8e44ad ;
}
-header{
- margin-right: 1490px;
-}
\ No newline at end of file
+.nav-bar{
+ background-color: #d1d5ff;
+ padding: 5px;
+ box-shadow: 0px 0px 10px 0px #111;
+}
+
+
+.tbl2{
+ height: 300px;
+ width: 1150px;
+}
diff --git a/Style3.css b/Style3.css
new file mode 100644
index 0000000000000000000000000000000000000000..67ad2257d58e253175c3aab70c8d80ed46cf9f6f
--- /dev/null
+++ b/Style3.css
@@ -0,0 +1,124 @@
+body{
+ background-color: #eef0ff;
+ font-family: Futura, Trebuchet MS, Arial, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: 500;
+ line-height: 26.4px;
+ margin: auto;
+}
+
+h1{
+ color: #5b2c6f;
+ text-align: center;
+ text-decoration: underline;
+ font-size: 24px;
+ font-weight: 700;
+ margin-top: 50px;
+}
+h2{
+ color: #5b2c6f ;
+ text-align: center;
+}
+
+a:active {
+ color: #5b2c6f;
+ margin: auto;
+}
+
+a:hover{
+ text-decoration: underline;
+}
+
+a {
+ color: #8e44ad;
+ width: 35%;
+ text-align: justify;
+ padding: 16px;
+ margin: auto;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+
+
+.nav-bar{
+ background-color: #d1d5ff;
+ padding: 5px;
+ box-shadow: 0px 0px 10px 0px #111;
+}
+
+table{
+ background-color: #d1d5ff;
+ color: #a162bb;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 50px;
+ border-radius: 10px;
+ width: 800px;
+ height: 500px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+
+}
+
+.optionSource{
+ margin-bottom: 80px;
+}
+
+.zoneProposition{
+ margin-bottom: 80px;
+ border: 3px solid #8e44ad;
+ border-radius: 10px;
+ height: 45px;
+ padding-top: 15px;
+ font-size: xx-large;
+}
+
+.zoneSaisie{
+ margin-bottom: 80px;
+}
+
+.zoneScore{
+ margin-bottom: 80px;
+}
+
+.popupBackground{
+ background-color: #d1d5ff;
+ margin-left: 525px;
+ border-radius: 10px;
+ size: 400px;
+ line-height: 40px;
+ width: 800px;
+ font-family: Arial, Helvetica, sans-serif;
+ border-top-right-radius: 0px;
+ border-top-left-radius: 0px;
+ text-align: center;
+ color: #a162bb;
+ font-weight: bold;
+ border-top: 2px solid #8e44ad;
+}
+
+button{
+ border: 2px solid #a162bb;
+ outline: none;
+ border-radius: 10px;
+ background-color: #f0e7f9;
+ align-items: center;
+}
+
+input{
+ border-radius: 10px;
+ color: #8e44ad;
+ height: 20px;
+}
+
+button:active{
+ background-color: #d1d5ff;
+ border-color: #d2a3ff;
+}
+
+.timer{
+margin-bottom: 45px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index dd2ecb7a3d4ef561d26055ae0f58b444390c195d..08352c61ecced61aa0e7e6193ba0152337079c8e 100644
--- a/index.html
+++ b/index.html
@@ -2,48 +2,47 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
- <title>La poésie dans la music</title>
+ <title>La poésie dans la musique</title>
<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>
+ <div class="nav-bar">
+ <nav>
+ <ul>
+ <a href="index.html">La Poésie Dans La Musique</a>
+ <a href="Page2.html">Tableau top 5</a>
+ <a href="Jeu.html">Jeu Écrit</a>
+ </ul>
+ </nav>
+ </div>
+ <div class="en-tete">
+ <h1>La poésie dans la musique</h1>
+ <h2>Les artistes utilisent-ils la poésie dans leurs textes ?</h2>
+ </div>
</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>
+ une paronomase ce qui permet d'approfondir ses textes, leurs similitudes laissent croire que leurs sens sont
+ également liée. Cette figure de style est souvent utilisée 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
+ 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 abstraites, 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%/>
+ <img src="paronomase.jpg" alt="Elle pleut - Nekfeu"/>
+ <div class="image-népal">
+ <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"/>
+ </div>
+ <img src="personification.jpg" alt="Risible amour - Nekfeu"/>
</div>
-<h3><a href="https://open.spotify.com/intl-fr/artist/1E8w172gkuT5htpwaIEsEl">Népal:</a></h3>
-<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>
+<p class="descendre">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>
</body>
</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb5a4ae001b55902ef40cf9597a100a8f34733e1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,173 @@
+const listeMots = ['damso', 'luidji', 'nekfeu', 'luv resval', 'dali']
+const listePhrases = ["damso est le meilleur rappeur francophone", "le dernier album de luidji est exceptionnel", "nekfeu a une des meilleur plume du rap français", "luv resval est décédé il y a peu de temps", "dali n'est pas très connu alors qu'il le mérite"]
+lancerJeu()
+let inputEcriture = document.getElementById("inputEcriture")
+console.log(inputEcriture)
+
+let btnValiderMot = document.getElementById("btnValiderMot")
+console.log(btnValiderMot)
+
+let zoneProposition = document.querySelector(".zoneProposition")
+console.log(zoneProposition)
+
+let spanScore = document.querySelector(".zoneScore span")
+console.log(spanScore)
+
+let listeBtnRadio = document.querySelectorAll(".optionSource input")
+console.log(listeBtnRadio)
+
+function afficherResultat(score, nbMotsProposes) {
+ console.log("Votre score est de " + score + " sur " + nbMotsProposes)
+ let spanScore = document.querySelector(".zoneScore span")
+
+ let affichageScore = `${score} / ${nbMotsProposes}`
+ spanScore.innerText = affichageScore
+}
+
+function afficherProposition(proposition) {
+ let zoneProposition = document.querySelector(".zoneProposition")
+ zoneProposition.innerText = proposition
+}
+
+function afficherEmail(nom, email, score) {
+ let mailto = `mailto:${email}+?subject=Partage du score sur le Jeu Écrit`
+ location.href = mailto
+}
+
+
+ function lancerJeu() {
+ let score = 0
+ let i = 0
+ let listeProposition = listeMots
+
+ let btnValiderMot = document.getElementById ("btnValiderMot")
+ let inputEcriture = document.getElementById ("inputEcriture")
+ afficherProposition(listeProposition[i])
+ btnValiderMot.addEventListener("click", () => {
+ console.log(inputEcriture.value)
+ if(inputEcriture.value === listeProposition[i]) {
+ score++
+ }
+ i++
+ afficherResultat(score, i)
+ inputEcriture.value = ''
+ if(listeProposition[i] === undefined){
+ afficherProposition("Le jeu est fini")
+ btnValiderMot.disabled = true
+ } else {
+ afficherProposition(listeProposition[i])
+ }
+ })
+
+
+ let listeBtnRadio = document.querySelectorAll(".optionSource input")
+ for (let index = 0; index < listeBtnRadio.length; index++){
+ listeBtnRadio[index].addEventListener("change", (event) => {
+
+ if(event.target.value === "1"){
+ listeProposition = listeMots
+ } else {
+ listeProposition = listePhrases
+ }
+ afficherProposition(listeProposition[i])
+ })
+ }
+
+
+ let form = document.querySelector("form")
+ form.addEventListener("submit", (event) => {
+ event.preventDefault()
+
+ let baliseNom = document.getElementById("nom")
+ let nom = baliseNom.value
+
+ let baliseEmail = document.getElementById("email")
+ let email = baliseEmail.value
+
+ let scoreEmail = `${score} / ${i}`
+
+
+ afficherEmail(nom, email, scoreEmail)
+ })
+
+
+ afficherResultat(score, i)
+ }
+
+
+ let chrono = document.getElementById("chrono");
+ let resetBtn = document.getElementById("reset");
+ let stopBtn = document.getElementById("stop");
+ let startBtn = document.getElementById("start");
+
+ let heures = 0;
+ let minutes = 0;
+ let secondes = 0;
+
+ let timeout;
+
+ let estArrete = true;
+
+ const demarrer = () => {
+ if (estArrete) {
+ estArrete = false;
+ defilerTemps();
+ }
+ };
+
+ const arreter = () => {
+ if (!estArrete) {
+ estArrete = true;
+ clearTimeout(timeout);
+ }
+ };
+
+ const defilerTemps = () => {
+ if (estArrete) return;
+
+ secondes = parseInt(secondes);
+ minutes = parseInt(minutes);
+ heures = parseInt(heures);
+
+ secondes++;
+
+ if (secondes == 60) {
+ minutes++;
+ secondes = 0;
+ }
+
+ if (minutes == 60) {
+ heures++;
+ minutes = 0;
+ }
+
+ if (secondes < 10) {
+ secondes = "0" + secondes;
+ }
+
+ if (minutes < 10) {
+ minutes = "0" + minutes;
+ }
+
+ if (heures < 10) {
+ heures = "0" + heures;
+ }
+
+ chrono.textContent = `${heures}:${minutes}:${secondes}`;
+
+ timeout = setTimeout(defilerTemps, 1000);
+ };
+
+ const reset = () => {
+ chrono.textContent = "00:00:00";
+ estArrete = true;
+ heures = 0;
+ minutes = 0;
+ secondes = 0;
+ clearTimeout(timeout);
+ };
+
+ startBtn.addEventListener("click", demarrer);
+ stopBtn.addEventListener("click", arreter);
+ resetBtn.addEventListener("click", reset);
+
\ No newline at end of file
diff --git a/style.css b/style.css
index 4fa3da8b4395f222ab01f5bc6927e5dfc114abaa..215e9be0173379fd52e09a182c28ad82f0923067 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,11 @@
body {
- background-color: white;
- font-family: Futura;
+ background-color: #eef0ff;
+ font-family: Futura, Trebuchet MS, Arial, sans-serif;
+ font-size: 18px;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: 500;
+ line-height: 26.4px;
margin: auto;
}
@@ -46,6 +51,7 @@ img {
margin-right: auto;
border-radius: 15px;
box-shadow: 5px 5px 2px rgba(0, 0, 0);
+ overflow: hidden;
}
.conteneur {
@@ -53,13 +59,13 @@ img {
flex-direction: row;
justify-content: space-around;
height: 200px;
- width: 1900px;
- align-item: center;
+ width: 1850px;
+ align-items: center;
}
input {
padding: 10px;
- border: 2px solid #white;
+ border: 2px solid white;
outline: none;
margin-bottom: 20px;
border-radius: 10px;
@@ -75,15 +81,21 @@ p{
font-family: Futura;
}
+.en-tete{
+ align-items: center;
+ justify-content: space-between;
+}
-table{
- background-color: #fff7fe;
- color: #8e44ad;
+.image-népal{
+ margin-top: 60px;
}
-td, th {
- border: 2px solid #d2a3ff;
- border-radius: 5px;
- padding: 20px;
+.descendre{
+ margin-top: 180px;
}
+.nav-bar{
+ background-color: #d1d5ff;
+ padding: 5px;
+ box-shadow: 0px 0px 10px 0px #111;
+}
\ No newline at end of file