serny.s
/
siteWeb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

test

master
SERNY Sacha 3 years ago
parent
ef802b0a2b
commit
1fa6d08bba
11 changed files with 1113 additions and 1077 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      home.html
  2. 328
      index.html
  3. 52
      mentions-legales.html
  4. 410
      reading.html
  5. 43
      sign_in.html
  6. 77
      sign_in.php
  7. 220
      sign_up.php
  8. 76
      style/styles_home.scss
  9. 396
      style/styles_index.scss
  10. 238
      style/styles_log.scss
  11. 310
      style/styles_main.scss

40
home.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Titre</title> <title>Titre</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_home.css" rel="stylesheet"> <link href="style/style_home.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head> </head>
<body> <body>
<main class="home"> <main class="home">
<div class="title"> <div class="title">
<h1><a href="index.html">PopOp</a></h1> <h1><a href="index.html">PopOp</a></h1>
</div> </div>
</main> </main>
</body> </body>
</html> </html>

328
index.html
View File

@ -1,165 +1,165 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>PopOp</title> <title>PopOp</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_index.css" rel="stylesheet"> <link href="style/style_index.css" rel="stylesheet">
<link href="style/style_main.css" rel="stylesheet"> <link href="style/style_main.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head> </head>
<body> <body>
<header> <header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul> <ul>
<li><a href="#unlinked">Top</a></li> <li><a href="#unlinked">Top</a></li>
<li><a href="index.html">Musiques</a></li> <li><a href="index.html">Musiques</a></li>
<li><a href="reading.html">Lectures</a></li> <li><a href="reading.html">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.php">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
<main> <main>
<div class="main-side"> <div class="main-side">
<a href="https://open.spotify.com/track/2dLLR6qlu5UJ5gk0dKz0h3?si=dce69b1c4a26487d" class="element elmnt1" <a href="https://open.spotify.com/track/2dLLR6qlu5UJ5gk0dKz0h3?si=dce69b1c4a26487d" class="element elmnt1"
target="_blank"> target="_blank">
<img src="_content/picture2.jpg" alt="thumbnail"> <img src="_content/picture2.jpg" alt="thumbnail">
<div> <div>
<h2>Royals</h2> <h2>Royals</h2>
<p>Royals - Lorde<br></p> <p>Royals - Lorde<br></p>
<p class="hidden">Ella Marija Lani Yelich-O'Connor dite Lorde, née le 7 novembre 1996 à Auckland, en <p class="hidden">Ella Marija Lani Yelich-O'Connor dite Lorde, née le 7 novembre 1996 à Auckland, en
Nouvelle-Zélande, est une auteure-compositrice-interprétatrice et productrice néo-zélandaise. Nouvelle-Zélande, est une auteure-compositrice-interprétatrice et productrice néo-zélandaise.
</p> </p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2"> <a href="https://open.spotify.com/search/numb%20link" class="element elmnt2">
<img src="_content/picture1.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture1.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Numb</h2> <h2>Numb</h2>
<p>Numb - Linkin Park<br></p> <p>Numb - Linkin Park<br></p>
<p class="hidden">Linkin Park est un groupe de rock et de metal américain, originaire d'Agoura Hills <p class="hidden">Linkin Park est un groupe de rock et de metal américain, originaire d'Agoura Hills
en Californie. Il est formé en 1996.</p> en Californie. Il est formé en 1996.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1"> <a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1">
<img src="_content/picture3.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture3.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Red</h2> <h2>Red</h2>
<p>Red - Survive said the prophet <br></p> <p>Red - Survive said the prophet <br></p>
<p class="hidden">Survive Said The Prophet est un groupe de rock alternatif japonais originaire de <p class="hidden">Survive Said The Prophet est un groupe de rock alternatif japonais originaire de
Tōkyō. Il est actuellement composé de 5 membres : Yosh, Yudai, Ivan, Tatsuya et Show.</p> Tōkyō. Il est actuellement composé de 5 membres : Yosh, Yudai, Ivan, Tatsuya et Show.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2"> <a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2">
<img src="_content/picture4.jpeg" alt="thumbnail" target="_blank"> <img src="_content/picture4.jpeg" alt="thumbnail" target="_blank">
<div> <div>
<h2>命に嫌われて</h2> <h2>命に嫌われて</h2>
<p>命に嫌われている。- Majiko<br></p> <p>命に嫌われている。- Majiko<br></p>
<p class="hidden">majiko (まじ娘) est un auteur-compositeur-interprète japonais. Elle a commencé sa <p class="hidden">majiko (まじ娘) est un auteur-compositeur-interprète japonais. Elle a commencé sa
carrière en faisant des reprises de chansons sur Nico Nico Douga.</p> carrière en faisant des reprises de chansons sur Nico Nico Douga.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element"> <a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element">
<img src="_content/picture5.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture5.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Symphony</h2> <h2>Symphony</h2>
<p>Symphony - Clean Bandit (feat. Zara Larsson)></p> <p>Symphony - Clean Bandit (feat. Zara Larsson)></p>
<p class="hidden">Clean Bandit est un groupe de musique électronique anglais, fondé à Cambridge en <p class="hidden">Clean Bandit est un groupe de musique électronique anglais, fondé à Cambridge en
2009. Il est composé de trois membres : Grace Chatto, Luke Patterson et Jack Patterson.</p> 2009. Il est composé de trois membres : Grace Chatto, Luke Patterson et Jack Patterson.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2"> <a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2">
<img src="_content/picture6.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture6.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Reckoning song</h2> <h2>Reckoning song</h2>
<p>Reckoning song (cover) - Asaf Avidan, The Mojos</p> <p>Reckoning song (cover) - Asaf Avidan, The Mojos</p>
<p class="hidden">Asaf Avidan est un auteur-compositeur-interprète israélien né le 23 mars 1980 à <p class="hidden">Asaf Avidan est un auteur-compositeur-interprète israélien né le 23 mars 1980 à
Jérusalem.</p> Jérusalem.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt2"> <a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt2">
<img src="_content/picture7.jpg" alt="thumbnail" target="_blank" width="150" height="150"> <img src="_content/picture7.jpg" alt="thumbnail" target="_blank" width="150" height="150">
<div> <div>
<h2>Boulevard of..</h2> <h2>Boulevard of..</h2>
<p>Boulevard of Broken Dreams - Green Day</p> <p>Boulevard of Broken Dreams - Green Day</p>
<p class="hidden">Green Day est un groupe de punk rock américain, originaire de Berkeley, en <p class="hidden">Green Day est un groupe de punk rock américain, originaire de Berkeley, en
Californie.</p> Californie.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2"> <a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2">
<img src="_content/picture8.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture8.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Centuries</h2> <h2>Centuries</h2>
<p>Centuries - Fall Out Boy</p> <p>Centuries - Fall Out Boy</p>
<p class="hidden">Fall Out Boy (FOB) est un groupe de rock américain, originaire de Wilmette, près <p class="hidden">Fall Out Boy (FOB) est un groupe de rock américain, originaire de Wilmette, près
de Chicago.</p> de Chicago.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1"> <a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1">
<img src="_content/picture9.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture9.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Le temps est bon</h2> <h2>Le temps est bon</h2>
<p>Le temps est bon - Bon Entendeur </p> <p>Le temps est bon - Bon Entendeur </p>
<p class="hidden">Bon Entendeur est le nom d’un collectif musical français, fondé en 2012 par Arnaud <p class="hidden">Bon Entendeur est le nom d’un collectif musical français, fondé en 2012 par Arnaud
Bonet.</p> Bonet.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2"> <a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2">
<img src="_content/picture10.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture10.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Radioactive</h2> <h2>Radioactive</h2>
<p>Radioactive - Imagine Dragons<br></p> <p>Radioactive - Imagine Dragons<br></p>
<p class="hidden">Imagine Dragons est un groupe de pop rock américain, originaire de Las Vegas, dans <p class="hidden">Imagine Dragons est un groupe de pop rock américain, originaire de Las Vegas, dans
le Nevada.</p> le Nevada.</p>
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> <u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u>
</div> </div>
</a> </a>
</div> </div>
<div class="main-contents"> <div class="main-contents">
<aside> <aside>
<h2>À propos...</h2> <h2>À propos...</h2>
<p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum <p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum
complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce
système n'est pas mis en place ou effectif. Sur mon "test" de <a système n'est pas mis en place ou effectif. Sur mon "test" de <a
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p> système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p>
</aside> </aside>
<aside> <aside>
<h2>Fun Fact</h2> <h2>Fun Fact</h2>
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le <p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le
dimanche soir dimanche soir
précédent la rentrée du précédent la rentrée du
Lundi 8 Novembre.</p> Lundi 8 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p> <p>Faire un lien un minimum esthétique c'est long. -_-</p>
</aside> </aside>
<aside> <aside>
<h2>Image aléatoire</h2> <h2>Image aléatoire</h2>
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image <p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image
aléatoire. Rien de aléatoire. Rien de
plus. plus.
</p> </p>
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> <img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400">
</aside> </aside>
</div> </div>
</main> </main>
<footer> <footer>
<a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par <a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par
SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a> SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer> </footer>
</body> </body>
</html> </html>

52
mentions-legales.html
View File

@ -1,27 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mentions Légales</title> <title>Mentions Légales</title>
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
<link rel="stylesheet" href="style/style_main.css"> <link rel="stylesheet" href="style/style_main.css">
</head> </head>
<body> <body>
<header> <header>
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul> <ul>
<li><a href="#unlinked">Top</a></li> <li><a href="#unlinked">Top</a></li>
<li><a href="#unlinked">Musiques</a></li> <li><a href="#unlinked">Musiques</a></li>
<li><a href="#unlinked">Lectures</a></li> <li><a href="#unlinked">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.html">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
</body> </body>
</html> </html>

410
reading.html
View File

@ -1,206 +1,206 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>PopOp</title> <title>PopOp</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_index.css" rel="stylesheet"> <link href="style/style_index.css" rel="stylesheet">
<link href="style/style_main.css" rel="stylesheet"> <link href="style/style_main.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head> </head>
<body> <body>
<header> <header>
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1>
<ul> <ul>
<li><a href="#unlinked">Top</a></li> <li><a href="#unlinked">Top</a></li>
<li><a href="index.html">Musiques</a></li> <li><a href="index.html">Musiques</a></li>
<li><a href="reading.html">Lectures</a></li> <li><a href="reading.html">Lectures</a></li>
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.php">Se connecter</a>
<a href="sign_up.php">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
<main> <main>
<div class="main-side"> <div class="main-side">
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/fd/04/a9/11076861/1540-1/tsp20190829135208/La-Princee-de-Cleves-Bac-2020.jpg" <img src="https://static.fnac-static.com/multimedia/Images/FR/NR/fd/04/a9/11076861/1540-1/tsp20190829135208/La-Princee-de-Cleves-Bac-2020.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La Princesse de Clèves</h2> <h2>La Princesse de Clèves</h2>
<p>Madame de Lafayette<br></p> <p>Madame de Lafayette<br></p>
<p class="hidden">Le célèbre roman de Mme de Lafayette, suivi d’un parcours littéraire « Individu, <p class="hidden">Le célèbre roman de Mme de Lafayette, suivi d’un parcours littéraire « Individu,
morale et société ». morale et société ».
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 2.95€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 2.95€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a15608794/Banana-Fish-Tome-01-Banana-Fish-Perfect-Edition-Akimi-Yoshida#omnsearchpos=1" <a href="https://livre.fnac.com/a15608794/Banana-Fish-Tome-01-Banana-Fish-Perfect-Edition-Akimi-Yoshida#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/88/03/c9/13173640/1540-1/tsp20210310071957/Banana-Fish-Perfect-Edition.jpg" <img src="https://static.fnac-static.com/multimedia/Images/FR/NR/88/03/c9/13173640/1540-1/tsp20210310071957/Banana-Fish-Perfect-Edition.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>Banana Fish</h2> <h2>Banana Fish</h2>
<p>Akimi Yoshida<br></p> <p>Akimi Yoshida<br></p>
<p class="hidden">" - Une nuit au Vietnam, un mec de mon unité a complètement disjoncté. Il a chopé <p class="hidden">" - Une nuit au Vietnam, un mec de mon unité a complètement disjoncté. Il a chopé
un M16 et il a tué trois de mes hommes. un M16 et il a tué trois de mes hommes.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 16€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 16€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a13914808/Makoto-Shinkai-Les-Enfants-du-Temps#omnsearchpos=8" <a href="https://livre.fnac.com/a13914808/Makoto-Shinkai-Les-Enfants-du-Temps#omnsearchpos=8"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/eb/67/af/11495403/1540-1/tsp20191212070455/Les-Enfants-du-Temps.jpg" <img src="https://static.fnac-static.com/multimedia/Images/FR/NR/eb/67/af/11495403/1540-1/tsp20191212070455/Les-Enfants-du-Temps.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>Les enfants du temps</h2> <h2>Les enfants du temps</h2>
<p>Makoto Shinkai<br></p> <p>Makoto Shinkai<br></p>
<p class="hidden">Lors des vacances d’été, Hodaka fugue de son île natale pour se rendre à Tokyo, <p class="hidden">Lors des vacances d’été, Hodaka fugue de son île natale pour se rendre à Tokyo,
terre de liberté. Malheureusement terre de liberté. Malheureusement
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 14.95€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 14.95€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/mp34593993/The-Farm?oref=893a8e73-7ef9-2622-ce4c-30bdeafef41a#omnsearchpos=1" <a href="https://livre.fnac.com/mp34593993/The-Farm?oref=893a8e73-7ef9-2622-ce4c-30bdeafef41a#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/MC/c9/dc/0f/34593993/1540-1/tsp20180412213418/The-Farm.jpg#9e5621e2-1042-4e2c-aea8-069eb6e87108" <img src="https://static.fnac-static.com/multimedia/Images/FR/MC/c9/dc/0f/34593993/1540-1/tsp20180412213418/The-Farm.jpg#9e5621e2-1042-4e2c-aea8-069eb6e87108"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>The Farm [EN]</h2> <h2>The Farm [EN]</h2>
<p>Tom Rob Smith<br></p> <p>Tom Rob Smith<br></p>
<p class="hidden">A suspenseful psychological thriller from the author of Booker-longlisted Child <p class="hidden">A suspenseful psychological thriller from the author of Booker-longlisted Child
44, now a film starring Tom Hardy, Noomi Rapace and Gary Oldman 44, now a film starring Tom Hardy, Noomi Rapace and Gary Oldman
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 0.90€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 0.90€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a892244/Edmond-Rostand-Cyrano-de-Bergerac#omnsearchpos=1" <a href="https://livre.fnac.com/a892244/Edmond-Rostand-Cyrano-de-Bergerac#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/Images/FR/NR/54/9d/0d/892244/1540-1/tsp20211015181720/Cyrano-de-Bergerac.jpg" <img src="https://static.fnac-static.com/multimedia/Images/FR/NR/54/9d/0d/892244/1540-1/tsp20211015181720/Cyrano-de-Bergerac.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>Edmond Rostand</h2> <h2>Edmond Rostand</h2>
<p>Cyrano de Bergerac<br></p> <p>Cyrano de Bergerac<br></p>
<p class="hidden">Aimable jeune homme et auteur à demi-succès patronné par Sarah Bernhardt, Rostand <p class="hidden">Aimable jeune homme et auteur à demi-succès patronné par Sarah Bernhardt, Rostand
devient du jour au lendemain avec Cyrano de Bergerac un héros national, devient du jour au lendemain avec Cyrano de Bergerac un héros national,
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1" <a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" <a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1"
class="element elmnt1" target="_blank"> class="element elmnt1" target="_blank">
<img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg" <img src="https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/5/7/9782253161752/tsp20121009132147/La-ballade-de-Lila-K.jpg"
alt="thumbnail"> alt="thumbnail">
<div> <div>
<h2>La ballade de Lila K</h2> <h2>La ballade de Lila K</h2>
<p>Blandine le callet<br></p> <p>Blandine le callet<br></p>
<p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour, <p class="hidden">Une jeune femme, Lila K., fragile et volontaire, raconte son histoire. Un jour,
des hommes en noir l'ont brutalement arrachée à sa mère. des hommes en noir l'ont brutalement arrachée à sa mère.
</p> </p>
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> <u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u>
</div> </div>
</a> </a>
</div> </div>
<div class="main-contents"> <div class="main-contents">
<aside> <aside>
<h2>À propos...</h2> <h2>À propos...</h2>
<p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum <p>Voici un site ma foi très peu utile et pertinent afin de rendre un travail un minimum
complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion complété. Ce site n'a pas vraiment d'objectif. Dans l'état actuel des choses le système de connexion
et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce et d'inscription requiert de "simuler" un serveur ou d'en être sur un réel. Par conséquent ce
système n'est pas mis en place ou effectif. Sur mon "test" de <a système n'est pas mis en place ou effectif. Sur mon "test" de <a
href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce href="https://minivoltrush.alwaysdata.net/signup.php" target="_blank">site à ce lien</a>, ce
système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p> système fonctionne très bien. Cependant je n'assume plus son contenu ^-^.</p>
</aside> </aside>
<aside> <aside>
<h2>Fun Fact</h2> <h2>Fun Fact</h2>
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le <p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le
dimanche soir dimanche soir
précédent la rentrée du précédent la rentrée du
Lundi 8 Novembre.</p> Lundi 8 Novembre.</p>
<p>Faire un lien un minimum esthétique c'est long. -_-</p> <p>Faire un lien un minimum esthétique c'est long. -_-</p>
</aside> </aside>
<aside> <aside>
<h2>Image aléatoire</h2> <h2>Image aléatoire</h2>
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image <p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image
aléatoire. Rien de aléatoire. Rien de
plus. plus.
</p> </p>
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> <img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400">
</aside> </aside>
</div> </div>
</main> </main>
<footer> <footer>
<a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par <a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par
SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a> SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer> </footer>
</body> </body>
</html> </html>

43
sign_in.html
View File

@ -1,43 +0,0 @@
<!-- Traitement PHP -->
<?php
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Adresse mail">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
placeholder="Mot de passe">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_up.html">Pas de compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="" value="Se connecter" id="submit">
</div>
</div>
</form>
</div>
</body>
</html>

77
sign_in.php
View File

@ -0,0 +1,77 @@
<!-- Traitement PHP -->
<?php
$servername = 'mysql-serny-nsi.alwaysdata.net';
$username = 'serny-nsi';
$mdp = 'ecole9090*';
$bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp);
if (isset($_POST['submit'])) {
$response ="here2";
if (isset($_POST['f_email']) AND !empty($_POST['f_email']) AND isset($_POST['f_password']) AND !empty($_POST['f_password'])) {
$email = htmlspecialchars($_POST['f_email']);
$password = htmlspecialchars($_POST['f_password']);
$look = $bdd->prepare("SELECT * FROM membres WHERE mail = ?");
$look->execute(array($email));
$check = $look->fetch();
var_dump($check['password']);
var_dump($password);
var_dump(password_verify($password, $check['password']));
$response ="here";
if ($check['mail'] != $email) {
$response = "Ce compte n'existe pas.";
}
else {
if (password_verify($password, $check['password'])) {
$response = "Vous êtes maintenant connecté.";
header('location: https://serny-nsi.alwaysdata.net');
} else {
$response = "Le mot de passe n'est pas valide.";
}
}
} else {
$response ="Veuillez remplir les champs ci-dessus.";
}
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Conenxion</title>
<meta charset="UTF-8">
<link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head>
<body>
<div class="log-area">
<p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<form action="" method="POST">
<div class="f_inputs">
<div>
<label for="f_email">Adresse mail : </label><input type="email" name="f_email" id="f_email" maxlength="70"
placeholder="Adresse mail">
</div>
<div>
<label for="f_password">Mot de passe : </label><input type="password" name="f_password" id="f_password" maxlength="40"
placeholder="Mot de passe">
</div>
</div>
<div class="buttons">
<div class="sign_up">
<a href="sign_up.php">Pas de compte ?</a>
</div>
<div class="sign_in">
<input type="submit" name="submit" value="Se connecter" id="submit">
</div>
</div>
<p><?= $response ?></p>
</form>
</div>
</body>
</html>

220
sign_up.php
View File

@ -1,110 +1,112 @@
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
/* /*
Faire de la sécurité et de l'optimisation Faire de la sécurité et de l'optimisation
Ce code est pourri Ce code est pourri
*/ */
$servername = 'mysql-serny-nsi.alwaysdata.net'; $servername = 'mysql-serny-nsi.alwaysdata.net';
$username = 'serny-nsi'; $username = 'serny-nsi';
$mdp = 'ecole9090*'; $mdp = 'ecole9090*';
$bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp); $bdd = new PDO('mysql:host=mysql-serny-nsi.alwaysdata.net;dbname=serny-nsi_main', $username, $mdp);
if (isset($_POST['submit'])) { if (isset($_POST['submit'])) {
if (isset($_POST["f_email"]) AND !empty($_POST["f_email"]) AND isset($_POST["f_pseudo"]) AND !empty($_POST["f_pseudo"])AND isset($_POST["f_password"]) AND !empty($_POST["f_password"]) AND isset($_POST['f_password2']) AND !empty($_POST['f_password2'])) { if (isset($_POST["f_email"]) AND !empty($_POST["f_email"]) AND isset($_POST["f_pseudo"]) AND !empty($_POST["f_pseudo"])AND isset($_POST["f_password"]) AND !empty($_POST["f_password"]) AND isset($_POST['f_password2']) AND !empty($_POST['f_password2'])) {
if ($_POST['f_password'] == $_POST['f_password2']) { if ($_POST['f_password'] == $_POST['f_password2']) {
$password = password_hash(htmlspecialchars($_POST['password']), PASSWORD_BCRYPT); $password = password_hash(htmlspecialchars($_POST['f_password']), PASSWORD_DEFAULT);
$pseudo = htmlspecialchars($_POST['f_pseudo']); $pseudo = htmlspecialchars($_POST['f_pseudo']);
$mail = htmlspecialchars($_POST['f_email']); $mail = htmlspecialchars($_POST['f_email']);
$mail2 = htmlspecialchars($_POST['f_email2']); $mail2 = htmlspecialchars($_POST['f_email2']);
if($mail == $mail2) { if($mail == $mail2) {
if (strlen($pseudo) < 254) { if (strlen($pseudo) < 254) {
if (strlen($mail) < 254) { if (strlen($mail) < 254) {
$look = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ?"); $look = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ?");
$look->execute(array($pseudo)); $look->execute(array($pseudo));
$alreadyexist = -1; $alreadyexist = -1;
$alreadyexist = $look->rowCount(); $alreadyexist = $look->rowCount();
$lookmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?"); $lookmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?");
$lookmail->execute(array($mail)); $lookmail->execute(array($mail));
$alreadyexist2 = -1; $alreadyexist2 = -1;
$alreadyexist2 = $lookmail->rowCount(); $alreadyexist2 = $lookmail->rowCount();
if ($alreadyexist == 0 AND $alreadyexist2 == 0) { if ($alreadyexist == 0 AND $alreadyexist2 == 0) {
$ins = $bdd->prepare("INSERT INTO membres(pseudo, mail, password, signup_date) VALUES(?, ?, ?, now())"); $ins = $bdd->prepare("INSERT INTO membres(pseudo, mail, password, signup_date) VALUES(?, ?, ?, now())");
$ins->execute(array($pseudo, $mail, $password)); $ins->execute(array($pseudo, $mail, $password));
$erreur ="Vous avez été correctement inscrit dans notre base de donnée."; $erreur ="Vous avez été correctement inscrit dans notre base de donnée.";
} else { } else {
$erreur ="Ce pseudo/mail est déjà utilisé"; $erreur ="Ce pseudo/mail est déjà utilisé";
} }
} else { } else {
$erreur ="Le mail est trop long (max 255c)"; $erreur ="Le mail est trop long (max 255c)";
} }
} else { } else {
$erreur ="Le pseudo est trop long (max 255c)"; $erreur ="Le pseudo est trop long (max 255c)";
} }
} else { } else {
$erreur = "Les mails sont différents."; $erreur = "Les mails sont différents.";
} }
} else { } else {
$erreur = "Les mots de passe sont différents."; $erreur = "Les mots de passe sont différents.";
} }
} } else {
} $erreur = "Veuillez remplir les champs ci-dessus.";
}
}
?>
<!DOCTYPE html>
<html lang="fr"> ?>
<!DOCTYPE html>
<head> <html lang="fr">
<title>Conenxion</title>
<meta charset="UTF-8"> <head>
<link href="style/style_log.css" rel="stylesheet"> <title>Conenxion</title>
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <meta charset="UTF-8">
</head> <link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
<body> </head>
<div class="log-area">
<p>Inscris-toi pour accéder à plus de foncitonnalités</p> <body>
<form action="" method="POST"> <div class="log-area">
<div class="f_inputs"> <p>Inscris-toi pour accéder à plus de foncitonnalités</p>
<div> <form action="" method="POST">
<label for="f_pseudo">Pseudo       : </label><input type="text" id="f_pseudo" maxlength="70" <div class="f_inputs">
placeholder="Pseudo" name="f_pseudo" autocomplete="off"> <div>
</div> <label for="f_pseudo">Pseudo       : </label><input type="text" id="f_pseudo" maxlength="70"
<div> placeholder="Pseudo" name="f_pseudo" autocomplete="off">
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70" </div>
placeholder="Adresse mail" name="f_email" autocomplete="off"> <div>
</div> <label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
<div> placeholder="Adresse mail" name="f_email" autocomplete="off">
<label for="f_email2">Confirmer    : </label><input type="email" id="f_email2" maxlength="70" </div>
placeholder="Confirmer" <div>
name="f_email2" autocomplete="off"> <label for="f_email2">Confirmer    : </label><input type="email" id="f_email2" maxlength="70"
</div> placeholder="Confirmer"
<div> name="f_email2" autocomplete="off">
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40" </div>
placeholder="Mot de passe" <div>
name="f_password" autocomplete="off"> <label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
</div> placeholder="Mot de passe"
<div> name="f_password" autocomplete="off">
<label for="f_password2"> Confirmer    : </label><input type="password" id="f_password2" </div>
maxlength="40" placeholder="Confirmer" <div>
name="f_password2" autocomplete="off"> <label for="f_password2"> Confirmer    : </label><input type="password" id="f_password2"
</div> maxlength="40" placeholder="Confirmer"
</div> name="f_password2" autocomplete="off">
<div class="buttons"> </div>
<div class="sign_up"> </div>
<a href="sign_in.html">Déjà un compte ?</a> <div class="buttons">
</div> <div class="sign_up">
<div class="sign_in"> <a href="sign_in.php">Déjà un compte ?</a>
<input type="submit" name="submit" value="S'inscrire" id="submit"> </div>
</div> <div class="sign_in">
</div> <input type="submit" name="submit" value="S'inscrire" id="submit">
<div> </div>
<?= $erreur ?> </div>
</div> <p>
</form> <?= $erreur ?>
</div> </p>
</body> </form>
</div>
</body>
</html> </html>

76
style/styles_home.scss
View File

@ -1,39 +1,39 @@
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap');
body { body {
margin: 0; margin: 0;
} }
main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%);
& .title { & .title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
& h1, & h1:visited, & h1:link, & h1:active { & h1, & h1:visited, & h1:link, & h1:active {
padding: 1em; padding: 1em;
background-color: #fff; background-color: #fff;
box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75); box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75);
& a { & a {
color: black; color: black;
text-decoration: none; text-decoration: none;
font-size: 3.5em; font-size: 3.5em;
font-family: "Playfair Display", sans-serif; font-family: "Playfair Display", sans-serif;
font-weight: 700; font-weight: 700;
transition: font-size 0.75s ease-in-out; transition: font-size 0.75s ease-in-out;
&:hover { &:hover {
transition: font-size 0.75s ease-out; transition: font-size 0.75s ease-out;
font-size: 5em; font-size: 5em;
} }
} }
} }
} }
} }

396
style/styles_index.scss
View File

@ -1,199 +1,199 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
} }
@media only screen and (min-width: 1080px) { @media only screen and (min-width: 1080px) {
.main { .main {
padding: 0 20vh 0 20vh; padding: 0 20vh 0 20vh;
} }
} }
main { main {
padding: 10px; padding: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
display: grid; display: grid;
grid-template-columns: 65% 35%; grid-template-columns: 65% 35%;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 300; font-weight: 300;
& a { & a {
&:visited, &:active, &:link { &:visited, &:active, &:link {
text-decoration: none; text-decoration: none;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
} }
& .element { & .element {
position: relative; position: relative;
padding-bottom: 24px; padding-bottom: 24px;
text-align: justify; text-align: justify;
width: 11em; width: 11em;
height: 25em; height: 25em;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
margin: 2.5px 2.5px 0px 2.5px; margin: 2.5px 2.5px 0px 2.5px;
overflow: hidden; overflow: hidden;
p:not(.hidden) { p:not(.hidden) {
display: block; display: block;
} }
p.hidden { p.hidden {
margin-top: 15px; margin-top: 15px;
display: none; display: none;
font-style: italic; font-style: italic;
} }
&:hover { &:hover {
p:not(.hidden) { p:not(.hidden) {
display: none; display: none;
} }
h2 { h2 {
display: none; display: none;
} }
p.hidden { p.hidden {
display: block; display: block;
} }
} }
& img { & img {
border-radius: 10% 40% 40% 40%; border-radius: 10% 40% 40% 40%;
filter: blur(0.10px); filter: blur(0.10px);
} }
&:hover { &:hover {
& img { & img {
border-radius: 10% 10% 10% 10%; border-radius: 10% 10% 10% 10%;
filter: blur(0); filter: blur(0);
transition: 0.3s; transition: 0.3s;
// transition: clip-path 0.3s; // transition: clip-path 0.3s;
// clip-path: circle(50%); // clip-path: circle(50%);
} }
transition: 0.3s; transition: 0.3s;
box-shadow:-1px -1px 30px 1px #ffb200; box-shadow:-1px -1px 30px 1px #ffb200;
background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%); background-image: radial-gradient(circle at 32.47% 115.42%, #ffc100 0, #ffb200 8.33%, #ffa014 16.67%, #ff8c2a 25%, #ff7638 33.33%, #ff5e41 41.67%, #f94646 50%, #e12e49 58.33%, #cb164b 66.67%, #b7004e 75%, #a60052 83.33%, #970056 91.67%, #8a005c 100%);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
& h2 { & h2 {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
& .main-contents { & .main-contents {
background-color: rgb(226, 226, 226); background-color: rgb(226, 226, 226);
padding: inherit; padding: inherit;
border-left: 3px solid black; border-left: 3px solid black;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
& aside { & aside {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
&:hover { &:hover {
transition: 0.3s; transition: 0.3s;
background-color: white; background-color: white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; // Pris sur https://getcssscan.com/css-box-shadow-examples box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; // Pris sur https://getcssscan.com/css-box-shadow-examples
& h2 { & h2 {
&::before { &::before {
transition: 0.2s ease-in; transition: 0.2s ease-in;
bottom: -5px; bottom: -5px;
left: 0px; left: 0px;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 5px; height: 5px;
} }
} }
} }
& h2 { & h2 {
font-style: italic; font-style: italic;
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
position: relative; position: relative;
&::before { &::before {
content: " +++"; content: " +++";
transition: 0.2s ease-out; transition: 0.2s ease-out;
font-size: 12px; font-size: 12px;
color: grey; color: grey;
position: absolute; position: absolute;
background-color: rgb(78, 78, 78); background-color: rgb(78, 78, 78);
bottom: -5px; bottom: -5px;
left: 5px; left: 5px;
width: 6%; width: 6%;
height: 5px; height: 5px;
} }
} }
p { p {
font-family: 'Montserrat', serif; font-family: 'Montserrat', serif;
text-align: justify; text-align: justify;
} }
a { // C'est très long pour faire un joli lien :sob-emote: a { // C'est très long pour faire un joli lien :sob-emote:
position: relative; position: relative;
&::before { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
background-color:#2077d3; background-color:#2077d3;
bottom: -1px; bottom: -1px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 3px; height: 3px;
} }
&::after { &::after {
transition: ease-out 0.3s; transition: ease-out 0.3s;
content: " "; content: " ";
position: absolute; position: absolute;
background-color:#fcbc3e; background-color:#fcbc3e;
bottom: -1px; bottom: -1px;
left: 0; left: 0;
width: 0%; width: 0%;
height: 3px; height: 3px;
} }
&:hover { &:hover {
&::after { &::after {
transition: all ease-out 0.3s; transition: all ease-out 0.3s;
width: 100%; width: 100%;
} }
} }
} }
padding: 20px 10px; padding: 20px 10px;
margin: 15px 0px; margin: 15px 0px;
background-color: #f8f9fa; background-color: #f8f9fa;
border-radius: 5px; border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
} }
} }
& .main-side { & .main-side {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: inherit; padding: inherit;
align-content: flex-start; align-content: flex-start;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
& img { & img {
height: 150px; height: 150px;
width: 150px; width: 150px;
} }
& u { & u {
position: absolute; position: absolute;
bottom: 6px; bottom: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
flex-direction: row; flex-direction: row;
text-decoration: underline green 2.8px; text-decoration: underline green 2.8px;
text-decoration-skip-ink: none; text-decoration-skip-ink: none;
color: green; color: green;
font-weight: 600; font-weight: 600;
& img { & img {
margin-right: 4px; margin-right: 4px;
height: 18px; height: 18px;
width: 18px; width: 18px;
} }
} }
} }
} }

238
style/styles_log.scss
View File

@ -1,119 +1,119 @@
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; @import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap";
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; @import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap";
/* Reset CSS */ /* Reset CSS */
input[type="submit" i] { input[type="submit" i] {
appearance: none; appearance: none;
user-select: none; user-select: none;
white-space: normal; white-space: normal;
align-items: flex-start; align-items: flex-start;
text-align: start; text-align: start;
cursor: default; cursor: default;
color: black; color: black;
background-color: white; background-color: white;
box-sizing: border-box; box-sizing: border-box;
padding: 0px; padding: 0px;
border-width: 0px; border-width: 0px;
border-style: none; border-style: none;
border-color: white; border-color: white;
border-image: initial; border-image: initial;
font-size: 16px; font-size: 16px;
} }
a:-webkit-any-link { a:-webkit-any-link {
color: black; color: black;
cursor: default; cursor: default;
text-decoration: none; text-decoration: none;
} }
input { input {
writing-mode: auto; writing-mode: auto;
text-rendering: auto; text-rendering: auto;
color: black; color: black;
letter-spacing: normal; letter-spacing: normal;
word-spacing: normal; word-spacing: normal;
text-transform: none; text-transform: none;
text-indent: auto; text-indent: auto;
text-shadow: none; text-shadow: none;
display: inline-block; display: inline-block;
text-align: auto; text-align: auto;
appearance: none; appearance: none;
background-color: white; background-color: white;
-webkit-rtl-ordering: none; -webkit-rtl-ordering: none;
cursor: text; cursor: text;
margin: 0em; margin: 0em;
font: 400 13.3333px Arial; font: 400 13.3333px Arial;
padding: 1px 2px; padding: 1px 2px;
border-width: 2px; border-width: 2px;
border-style: none; border-style: none;
border-color: white; border-color: white;
border-image: initial; border-image: initial;
} }
input:focus-visible { input:focus-visible {
outline: rgba(0, 0, 0, 0) solid 0px; outline: rgba(0, 0, 0, 0) solid 0px;
outline-offset: 0px; outline-offset: 0px;
} }
/* Fin Reset */ /* Fin Reset */
input:focus { input:focus {
position: relative; position: relative;
color: red; color: red;
&::before { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
background-color: red; background-color: red;
top: 0; top: 0;
width: 10px; width: 10px;
height: 1000px; height: 1000px;
} }
} }
body { body {
position: relative; position: relative;
margin: 0; margin: 0;
} }
.log-area { .log-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 20vh; height: 20vh;
margin: 30vh 0 50vh 0; margin: 30vh 0 50vh 0;
font-family: 'montserrat', sans-serif; font-family: 'montserrat', sans-serif;
} }
.log-area > p { .log-area > p {
text-align: center; text-align: center;
} }
form { form {
font-family: monospace, sans-serif; font-family: monospace, sans-serif;
} }
.f_inputs { .f_inputs {
text-align: center; text-align: center;
} }
.f_inputs > div { .f_inputs > div {
margin-top: 5px; margin-top: 5px;
} }
.buttons { .buttons {
display : flex; display : flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 25px; margin-top: 25px;
} }
.sign_in { .sign_in {
background-color:#00dc64; background-color:#00dc64;
} }
.sign_up { .sign_up {
background-color: #6a6a6a; background-color: #6a6a6a;
} }
.buttons > div { .buttons > div {
padding:10px 40px; padding:10px 40px;
border-radius: 25px; border-radius: 25px;
margin: 0 20px; margin: 0 20px;
} }
div > input[type="submit"], div > a { div > input[type="submit"], div > a {
font-family: roboto, sans-serif; font-family: roboto, sans-serif;
background-color: inherit; background-color: inherit;
} }

310
style/styles_main.scss
View File

@ -1,155 +1,155 @@
body { body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
padding-bottom: 20vh; padding-bottom: 20vh;
} }
header { header {
background-color:rgb(36, 37, 42); background-color:rgb(36, 37, 42);
padding: 30px 10%; padding: 30px 10%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
align-content: center; align-content: center;
text-decoration: none; text-decoration: none;
& h1 { & h1 {
margin: 0; margin: 0;
position: relative; position: relative;
&::before { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
transition: 1s; transition: 1s;
top: -2px; top: -2px;
left: -2px; left: -2px;
width: 0px; width: 0px;
height: 0px; height: 0px;
border: 2px solid transparent; border: 2px solid transparent;
} }
&:hover::before { &:hover::before {
animation: border_top_right 0.75s linear forwards; animation: border_top_right 0.75s linear forwards;
} }
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
transition: 1s; transition: 1s;
top: -2px; top: -2px;
left: -2px; left: -2px;
width: 0px; width: 0px;
height: 0px; height: 0px;
border: 2px solid transparent; border: 2px solid transparent;
} }
&:hover::after { &:hover::after {
animation: border_bottom_left 0.75s linear forwards; animation: border_bottom_left 0.75s linear forwards;
} }
& a { & a {
color: rgb(237, 240, 241); color: rgb(237, 240, 241);
text-decoration: none; text-decoration: none;
font-family: sans-serif; font-family: sans-serif;
letter-spacing: 0px; letter-spacing: 0px;
padding: 5px; padding: 5px;
& .word1 { & .word1 {
color: rgb(146,147,149); color: rgb(146,147,149);
} }
& .word2 { & .word2 {
color: rgb(192, 192, 192); color: rgb(192, 192, 192);
} }
& .word3 { & .word3 {
color:rgb(237, 240, 241); color:rgb(237, 240, 241);
} }
} }
} }
& ul { & ul {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
text-align: center; text-align: center;
} }
& a:not(._title) { & a:not(._title) {
padding: 1em 2em; padding: 1em 2em;
text-decoration: none; text-decoration: none;
color: rgb(237, 240, 241); color: rgb(237, 240, 241);
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 500; font-weight: 500;
&:hover { &:hover {
color: rgb(36, 37, 42); color: rgb(36, 37, 42);
background-color: rgb(237, 240, 241); background-color: rgb(237, 240, 241);
font-weight: 800; font-weight: 800;
transition: 0.2s; transition: 0.2s;
} }
} }
@keyframes border_top_right { @keyframes border_top_right {
0% { 0% {
width: 0; width: 0;
height: 0; height: 0;
border-top-color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255);
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: transparent; border-left-color: transparent;
} }
25% { 25% {
width: 100%; width: 100%;
height: 0; height: 0;
border-top-color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255);
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: transparent; border-left-color: transparent;
} }
100% { 100% {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-top-color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255);
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: transparent; border-left-color: transparent;
} }
} }
@keyframes border_bottom_left { @keyframes border_bottom_left {
0% { 0% {
width: 0; width: 0;
height: 0; height: 0;
border-top-color: transparent; border-top-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255);
} }
75% { 75% {
width: 0; width: 0;
height: 100%; height: 100%;
border-top-color: transparent; border-top-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255);
} }
100% { 100% {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-top-color: transparent; border-top-color: transparent;
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255);
} }
} }
} }
footer { footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
text-align: center; text-align: center;
background-color:rgb(36, 37, 42); background-color:rgb(36, 37, 42);
color: rgb(237, 240, 241); color: rgb(237, 240, 241);
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 500; font-weight: 500;
padding: 3vh 0; padding: 3vh 0;
& a { & a {
color: white; color: white;
} }
} }

Write Preview
Loading…
Cancel
Save