11 changed files with 1113 additions and 1077 deletions
@ -1,21 +1,21 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>Titre</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_home.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<main class="home"> |
|||
<div class="title"> |
|||
<h1><a href="index.html">PopOp</a></h1> |
|||
</div> |
|||
|
|||
</main> |
|||
</body> |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>Titre</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_home.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<main class="home"> |
|||
<div class="title"> |
|||
<h1><a href="index.html">PopOp</a></h1> |
|||
</div> |
|||
|
|||
</main> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,165 +1,165 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>PopOp</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_index.css" rel="stylesheet"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="index.html">Musiques</a></li> |
|||
<li><a href="reading.html">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.php">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="main-side"> |
|||
<a href="https://open.spotify.com/track/2dLLR6qlu5UJ5gk0dKz0h3?si=dce69b1c4a26487d" class="element elmnt1" |
|||
target="_blank"> |
|||
<img src="_content/picture2.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Royals</h2> |
|||
<p>Royals - Lorde<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2"> |
|||
<img src="_content/picture1.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Numb</h2> |
|||
<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 |
|||
en Californie. Il est formé en 1996.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1"> |
|||
<img src="_content/picture3.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Red</h2> |
|||
<p>Red - Survive said the prophet <br></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2"> |
|||
<img src="_content/picture4.jpeg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>命に嫌われて</h2> |
|||
<p>命に嫌われている。- Majiko<br></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element"> |
|||
<img src="_content/picture5.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Symphony</h2> |
|||
<p>Symphony - Clean Bandit (feat. Zara Larsson)></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2"> |
|||
<img src="_content/picture6.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Reckoning song</h2> |
|||
<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 à |
|||
Jérusalem.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<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"> |
|||
<div> |
|||
<h2>Boulevard of..</h2> |
|||
<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 |
|||
Californie.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2"> |
|||
<img src="_content/picture8.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Centuries</h2> |
|||
<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 |
|||
de Chicago.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1"> |
|||
<img src="_content/picture9.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Le temps est bon</h2> |
|||
<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 |
|||
Bonet.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2"> |
|||
<img src="_content/picture10.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Radioactive</h2> |
|||
<p>Radioactive - Imagine Dragons<br></p> |
|||
<p class="hidden">Imagine Dragons est un groupe de pop rock américain, originaire de Las Vegas, dans |
|||
le Nevada.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="main-contents"> |
|||
<aside> |
|||
<h2>À propos...</h2> |
|||
<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 |
|||
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 |
|||
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> |
|||
</aside> |
|||
<aside> |
|||
<h2>Fun Fact</h2> |
|||
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le |
|||
dimanche soir |
|||
précédent la rentrée du |
|||
Lundi 8 Novembre.</p> |
|||
<p>Faire un lien un minimum esthétique c'est long. -_-</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Image aléatoire</h2> |
|||
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image |
|||
aléatoire. Rien de |
|||
plus. |
|||
</p> |
|||
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> |
|||
</aside> |
|||
</div> |
|||
</main> |
|||
<footer> |
|||
<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> |
|||
</footer> |
|||
</body> |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>PopOp</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_index.css" rel="stylesheet"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="index.html">Musiques</a></li> |
|||
<li><a href="reading.html">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.php">Se connecter</a> |
|||
<a href="sign_up.php">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="main-side"> |
|||
<a href="https://open.spotify.com/track/2dLLR6qlu5UJ5gk0dKz0h3?si=dce69b1c4a26487d" class="element elmnt1" |
|||
target="_blank"> |
|||
<img src="_content/picture2.jpg" alt="thumbnail"> |
|||
<div> |
|||
<h2>Royals</h2> |
|||
<p>Royals - Lorde<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2"> |
|||
<img src="_content/picture1.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Numb</h2> |
|||
<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 |
|||
en Californie. Il est formé en 1996.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1"> |
|||
<img src="_content/picture3.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Red</h2> |
|||
<p>Red - Survive said the prophet <br></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2"> |
|||
<img src="_content/picture4.jpeg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>命に嫌われて</h2> |
|||
<p>命に嫌われている。- Majiko<br></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element"> |
|||
<img src="_content/picture5.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Symphony</h2> |
|||
<p>Symphony - Clean Bandit (feat. Zara Larsson)></p> |
|||
<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> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2"> |
|||
<img src="_content/picture6.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Reckoning song</h2> |
|||
<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 à |
|||
Jérusalem.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<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"> |
|||
<div> |
|||
<h2>Boulevard of..</h2> |
|||
<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 |
|||
Californie.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2"> |
|||
<img src="_content/picture8.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Centuries</h2> |
|||
<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 |
|||
de Chicago.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1"> |
|||
<img src="_content/picture9.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Le temps est bon</h2> |
|||
<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 |
|||
Bonet.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2"> |
|||
<img src="_content/picture10.jpg" alt="thumbnail" target="_blank"> |
|||
<div> |
|||
<h2>Radioactive</h2> |
|||
<p>Radioactive - Imagine Dragons<br></p> |
|||
<p class="hidden">Imagine Dragons est un groupe de pop rock américain, originaire de Las Vegas, dans |
|||
le Nevada.</p> |
|||
<u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien (légal)</u> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="main-contents"> |
|||
<aside> |
|||
<h2>À propos...</h2> |
|||
<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 |
|||
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 |
|||
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> |
|||
</aside> |
|||
<aside> |
|||
<h2>Fun Fact</h2> |
|||
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le |
|||
dimanche soir |
|||
précédent la rentrée du |
|||
Lundi 8 Novembre.</p> |
|||
<p>Faire un lien un minimum esthétique c'est long. -_-</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Image aléatoire</h2> |
|||
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image |
|||
aléatoire. Rien de |
|||
plus. |
|||
</p> |
|||
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> |
|||
</aside> |
|||
</div> |
|||
</main> |
|||
<footer> |
|||
<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> |
|||
</footer> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,27 +1,27 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Mentions Légales</title> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
<link rel="stylesheet" href="style/style_main.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.html">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
</body> |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Mentions Légales</title> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
<link rel="stylesheet" href="style/style_main.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="#unlinked">Musiques</a></li> |
|||
<li><a href="#unlinked">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.php">Se connecter</a> |
|||
<a href="sign_up.php">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,206 +1,206 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>PopOp</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_index.css" rel="stylesheet"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="index.html">Musiques</a></li> |
|||
<li><a href="reading.html">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.html">Se connecter</a> |
|||
<a href="sign_up.php">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="main-side"> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La Princesse de Clèves</h2> |
|||
<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, |
|||
morale et société ». |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 2.95€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a15608794/Banana-Fish-Tome-01-Banana-Fish-Perfect-Edition-Akimi-Yoshida#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Banana Fish</h2> |
|||
<p>Akimi Yoshida<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 16€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a13914808/Makoto-Shinkai-Les-Enfants-du-Temps#omnsearchpos=8" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Les enfants du temps</h2> |
|||
<p>Makoto Shinkai<br></p> |
|||
<p class="hidden">Lors des vacances d’été, Hodaka fugue de son île natale pour se rendre à Tokyo, |
|||
terre de liberté. Malheureusement |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 14.95€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/mp34593993/The-Farm?oref=893a8e73-7ef9-2622-ce4c-30bdeafef41a#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>The Farm [EN]</h2> |
|||
<p>Tom Rob Smith<br></p> |
|||
<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 |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 0.90€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a892244/Edmond-Rostand-Cyrano-de-Bergerac#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Edmond Rostand</h2> |
|||
<p>Cyrano de Bergerac<br></p> |
|||
<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, |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="main-contents"> |
|||
<aside> |
|||
<h2>À propos...</h2> |
|||
<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 |
|||
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 |
|||
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> |
|||
</aside> |
|||
<aside> |
|||
<h2>Fun Fact</h2> |
|||
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le |
|||
dimanche soir |
|||
précédent la rentrée du |
|||
Lundi 8 Novembre.</p> |
|||
<p>Faire un lien un minimum esthétique c'est long. -_-</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Image aléatoire</h2> |
|||
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image |
|||
aléatoire. Rien de |
|||
plus. |
|||
</p> |
|||
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> |
|||
</aside> |
|||
</div> |
|||
</main> |
|||
<footer> |
|||
<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> |
|||
</footer> |
|||
</body> |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="fr"> |
|||
|
|||
<head> |
|||
<title>PopOp</title> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<link href="style/style_index.css" rel="stylesheet"> |
|||
<link href="style/style_main.css" rel="stylesheet"> |
|||
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> |
|||
</head> |
|||
|
|||
<body> |
|||
<header> |
|||
<h1><a class="_title" href="home.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> |
|||
<ul> |
|||
<li><a href="#unlinked">Top</a></li> |
|||
<li><a href="index.html">Musiques</a></li> |
|||
<li><a href="reading.html">Lectures</a></li> |
|||
</ul> |
|||
<div> |
|||
<a href="sign_in.php">Se connecter</a> |
|||
<a href="sign_up.php">S'inscrire</a> |
|||
</div> |
|||
</header> |
|||
<main> |
|||
<div class="main-side"> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La Princesse de Clèves</h2> |
|||
<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, |
|||
morale et société ». |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 2.95€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a15608794/Banana-Fish-Tome-01-Banana-Fish-Perfect-Edition-Akimi-Yoshida#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Banana Fish</h2> |
|||
<p>Akimi Yoshida<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 16€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a13914808/Makoto-Shinkai-Les-Enfants-du-Temps#omnsearchpos=8" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Les enfants du temps</h2> |
|||
<p>Makoto Shinkai<br></p> |
|||
<p class="hidden">Lors des vacances d’été, Hodaka fugue de son île natale pour se rendre à Tokyo, |
|||
terre de liberté. Malheureusement |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 14.95€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/mp34593993/The-Farm?oref=893a8e73-7ef9-2622-ce4c-30bdeafef41a#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>The Farm [EN]</h2> |
|||
<p>Tom Rob Smith<br></p> |
|||
<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 |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 0.90€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a892244/Edmond-Rostand-Cyrano-de-Bergerac#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>Edmond Rostand</h2> |
|||
<p>Cyrano de Bergerac<br></p> |
|||
<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, |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 3€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a15171008/Blue-Period-Tome-01-Blue-Period-Tsubasa-Yamaguchi#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
<a href="https://livre.fnac.com/a3784037/Blandine-Le-Callet-La-Ballade-de-Lila-K#omnsearchpos=1" |
|||
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" |
|||
alt="thumbnail"> |
|||
<div> |
|||
<h2>La ballade de Lila K</h2> |
|||
<p>Blandine le callet<br></p> |
|||
<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. |
|||
</p> |
|||
<u><img class="icon" src="_content/fnac-icon.png" alt="spotify-icon">Lien 7.70€</u> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="main-contents"> |
|||
<aside> |
|||
<h2>À propos...</h2> |
|||
<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 |
|||
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 |
|||
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> |
|||
</aside> |
|||
<aside> |
|||
<h2>Fun Fact</h2> |
|||
<p>Je me suis souvenu qu'il fallait faire <a href="index.html" target="_blank">ce site</a> uniquement le |
|||
dimanche soir |
|||
précédent la rentrée du |
|||
Lundi 8 Novembre.</p> |
|||
<p>Faire un lien un minimum esthétique c'est long. -_-</p> |
|||
</aside> |
|||
<aside> |
|||
<h2>Image aléatoire</h2> |
|||
<p>Un site du nom de <a href="https://picsum.photos" target="_blank">picsum</a> affiche une image |
|||
aléatoire. Rien de |
|||
plus. |
|||
</p> |
|||
<img src="https://picsum.photos/400/240" alt="random-pic" height="240" width="400"> |
|||
</aside> |
|||
</div> |
|||
</main> |
|||
<footer> |
|||
<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> |
|||
</footer> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -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> |
|||
@ -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> |
|||
@ -1,110 +1,112 @@ |
|||
<!-- Traitement PHP --> |
|||
<?php |
|||
/* |
|||
Faire de la sécurité et de l'optimisation |
|||
Ce code est pourri |
|||
*/ |
|||
$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'])) { |
|||
|
|||
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']) { |
|||
$password = password_hash(htmlspecialchars($_POST['password']), PASSWORD_BCRYPT); |
|||
$pseudo = htmlspecialchars($_POST['f_pseudo']); |
|||
$mail = htmlspecialchars($_POST['f_email']); |
|||
$mail2 = htmlspecialchars($_POST['f_email2']); |
|||
if($mail == $mail2) { |
|||
if (strlen($pseudo) < 254) { |
|||
if (strlen($mail) < 254) { |
|||
$look = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ?"); |
|||
$look->execute(array($pseudo)); |
|||
$alreadyexist = -1; |
|||
$alreadyexist = $look->rowCount(); |
|||
$lookmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?"); |
|||
$lookmail->execute(array($mail)); |
|||
$alreadyexist2 = -1; |
|||
$alreadyexist2 = $lookmail->rowCount(); |
|||
if ($alreadyexist == 0 AND $alreadyexist2 == 0) { |
|||
$ins = $bdd->prepare("INSERT INTO membres(pseudo, mail, password, signup_date) VALUES(?, ?, ?, now())"); |
|||
$ins->execute(array($pseudo, $mail, $password)); |
|||
$erreur ="Vous avez été correctement inscrit dans notre base de donnée."; |
|||
} else { |
|||
$erreur ="Ce pseudo/mail est déjà utilisé"; |
|||
} |
|||
} else { |
|||
$erreur ="Le mail est trop long (max 255c)"; |
|||
} |
|||
} else { |
|||
$erreur ="Le pseudo est trop long (max 255c)"; |
|||
} |
|||
} else { |
|||
$erreur = "Les mails sont différents."; |
|||
} |
|||
} else { |
|||
$erreur = "Les mots de passe sont différents."; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
?> |
|||
<!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>Inscris-toi pour accéder à plus de foncitonnalités</p> |
|||
<form action="" method="POST"> |
|||
<div class="f_inputs"> |
|||
<div> |
|||
<label for="f_pseudo">Pseudo : </label><input type="text" id="f_pseudo" maxlength="70" |
|||
placeholder="Pseudo" name="f_pseudo" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70" |
|||
placeholder="Adresse mail" name="f_email" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_email2">Confirmer : </label><input type="email" id="f_email2" maxlength="70" |
|||
placeholder="Confirmer" |
|||
name="f_email2" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40" |
|||
placeholder="Mot de passe" |
|||
name="f_password" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_password2"> Confirmer : </label><input type="password" id="f_password2" |
|||
maxlength="40" placeholder="Confirmer" |
|||
name="f_password2" autocomplete="off"> |
|||
</div> |
|||
</div> |
|||
<div class="buttons"> |
|||
<div class="sign_up"> |
|||
<a href="sign_in.html">Déjà un compte ?</a> |
|||
</div> |
|||
<div class="sign_in"> |
|||
<input type="submit" name="submit" value="S'inscrire" id="submit"> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<?= $erreur ?> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</body> |
|||
|
|||
<!-- Traitement PHP --> |
|||
<?php |
|||
/* |
|||
Faire de la sécurité et de l'optimisation |
|||
Ce code est pourri |
|||
*/ |
|||
$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'])) { |
|||
|
|||
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']) { |
|||
$password = password_hash(htmlspecialchars($_POST['f_password']), PASSWORD_DEFAULT); |
|||
$pseudo = htmlspecialchars($_POST['f_pseudo']); |
|||
$mail = htmlspecialchars($_POST['f_email']); |
|||
$mail2 = htmlspecialchars($_POST['f_email2']); |
|||
if($mail == $mail2) { |
|||
if (strlen($pseudo) < 254) { |
|||
if (strlen($mail) < 254) { |
|||
$look = $bdd->prepare("SELECT * FROM membres WHERE pseudo = ?"); |
|||
$look->execute(array($pseudo)); |
|||
$alreadyexist = -1; |
|||
$alreadyexist = $look->rowCount(); |
|||
$lookmail = $bdd->prepare("SELECT * FROM membres WHERE mail = ?"); |
|||
$lookmail->execute(array($mail)); |
|||
$alreadyexist2 = -1; |
|||
$alreadyexist2 = $lookmail->rowCount(); |
|||
if ($alreadyexist == 0 AND $alreadyexist2 == 0) { |
|||
$ins = $bdd->prepare("INSERT INTO membres(pseudo, mail, password, signup_date) VALUES(?, ?, ?, now())"); |
|||
$ins->execute(array($pseudo, $mail, $password)); |
|||
$erreur ="Vous avez été correctement inscrit dans notre base de donnée."; |
|||
} else { |
|||
$erreur ="Ce pseudo/mail est déjà utilisé"; |
|||
} |
|||
} else { |
|||
$erreur ="Le mail est trop long (max 255c)"; |
|||
} |
|||
} else { |
|||
$erreur ="Le pseudo est trop long (max 255c)"; |
|||
} |
|||
} else { |
|||
$erreur = "Les mails sont différents."; |
|||
} |
|||
} else { |
|||
$erreur = "Les mots de passe sont différents."; |
|||
} |
|||
} else { |
|||
$erreur = "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>Inscris-toi pour accéder à plus de foncitonnalités</p> |
|||
<form action="" method="POST"> |
|||
<div class="f_inputs"> |
|||
<div> |
|||
<label for="f_pseudo">Pseudo : </label><input type="text" id="f_pseudo" maxlength="70" |
|||
placeholder="Pseudo" name="f_pseudo" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70" |
|||
placeholder="Adresse mail" name="f_email" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_email2">Confirmer : </label><input type="email" id="f_email2" maxlength="70" |
|||
placeholder="Confirmer" |
|||
name="f_email2" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40" |
|||
placeholder="Mot de passe" |
|||
name="f_password" autocomplete="off"> |
|||
</div> |
|||
<div> |
|||
<label for="f_password2"> Confirmer : </label><input type="password" id="f_password2" |
|||
maxlength="40" placeholder="Confirmer" |
|||
name="f_password2" autocomplete="off"> |
|||
</div> |
|||
</div> |
|||
<div class="buttons"> |
|||
<div class="sign_up"> |
|||
<a href="sign_in.php">Déjà un compte ?</a> |
|||
</div> |
|||
<div class="sign_in"> |
|||
<input type="submit" name="submit" value="S'inscrire" id="submit"> |
|||
</div> |
|||
</div> |
|||
<p> |
|||
<?= $erreur ?> |
|||
</p> |
|||
</form> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -1,39 +1,39 @@ |
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap'); |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
main { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
width: 100vw; |
|||
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%); |
|||
|
|||
& .title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
& h1, & h1:visited, & h1:link, & h1:active { |
|||
padding: 1em; |
|||
background-color: #fff; |
|||
box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75); |
|||
|
|||
& a { |
|||
color: black; |
|||
text-decoration: none; |
|||
font-size: 3.5em; |
|||
font-family: "Playfair Display", sans-serif; |
|||
font-weight: 700; |
|||
transition: font-size 0.75s ease-in-out; |
|||
|
|||
&:hover { |
|||
transition: font-size 0.75s ease-out; |
|||
font-size: 5em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap'); |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
main { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
width: 100vw; |
|||
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%); |
|||
|
|||
& .title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
& h1, & h1:visited, & h1:link, & h1:active { |
|||
padding: 1em; |
|||
background-color: #fff; |
|||
box-shadow:-1px -1px 15px 0px rgba(255, 255, 255, 0.75); |
|||
|
|||
& a { |
|||
color: black; |
|||
text-decoration: none; |
|||
font-size: 3.5em; |
|||
font-family: "Playfair Display", sans-serif; |
|||
font-weight: 700; |
|||
transition: font-size 0.75s ease-in-out; |
|||
|
|||
&:hover { |
|||
transition: font-size 0.75s ease-out; |
|||
font-size: 5em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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=Roboto:wght@300;500&display=swap'); |
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'); |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
margin: 0; |
|||
} |
|||
@media only screen and (min-width: 1080px) { |
|||
.main { |
|||
padding: 0 20vh 0 20vh; |
|||
} |
|||
} |
|||
main { |
|||
padding: 10px; |
|||
background-color: rgb(255, 255, 255); |
|||
display: grid; |
|||
grid-template-columns: 65% 35%; |
|||
font-family: "Roboto", sans-serif; |
|||
font-weight: 300; |
|||
|
|||
& a { |
|||
&:visited, &:active, &:link { |
|||
text-decoration: none; |
|||
color: rgb(0, 0, 0); |
|||
} |
|||
} |
|||
|
|||
& .element { |
|||
position: relative; |
|||
padding-bottom: 24px; |
|||
text-align: justify; |
|||
width: 11em; |
|||
height: 25em; |
|||
padding: 10px 10px 10px 10px; |
|||
margin: 2.5px 2.5px 0px 2.5px; |
|||
overflow: hidden; |
|||
p:not(.hidden) { |
|||
display: block; |
|||
} |
|||
p.hidden { |
|||
margin-top: 15px; |
|||
display: none; |
|||
font-style: italic; |
|||
} |
|||
|
|||
&:hover { |
|||
p:not(.hidden) { |
|||
display: none; |
|||
} |
|||
h2 { |
|||
display: none; |
|||
} |
|||
p.hidden { |
|||
display: block; |
|||
} |
|||
} |
|||
& img { |
|||
border-radius: 10% 40% 40% 40%; |
|||
filter: blur(0.10px); |
|||
} |
|||
&:hover { |
|||
& img { |
|||
border-radius: 10% 10% 10% 10%; |
|||
filter: blur(0); |
|||
transition: 0.3s; |
|||
|
|||
// transition: clip-path 0.3s; |
|||
// clip-path: circle(50%); |
|||
} |
|||
transition: 0.3s; |
|||
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%); |
|||
color: rgb(255, 255, 255); |
|||
& h2 { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& .main-contents { |
|||
background-color: rgb(226, 226, 226); |
|||
padding: inherit; |
|||
border-left: 3px solid black; |
|||
display: flex; |
|||
flex-direction: column; |
|||
& aside { |
|||
display: flex; |
|||
flex-direction: column; |
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
&:hover { |
|||
transition: 0.3s; |
|||
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 |
|||
& h2 { |
|||
&::before { |
|||
transition: 0.2s ease-in; |
|||
bottom: -5px; |
|||
left: 0px; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
} |
|||
& h2 { |
|||
font-style: italic; |
|||
font-family: 'Playfair Display', serif; |
|||
position: relative; |
|||
&::before { |
|||
content: " +++"; |
|||
transition: 0.2s ease-out; |
|||
font-size: 12px; |
|||
color: grey; |
|||
position: absolute; |
|||
background-color: rgb(78, 78, 78); |
|||
bottom: -5px; |
|||
left: 5px; |
|||
width: 6%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
p { |
|||
font-family: 'Montserrat', serif; |
|||
text-align: justify; |
|||
} |
|||
a { // C'est très long pour faire un joli lien :sob-emote: |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#2077d3; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 3px; |
|||
} |
|||
&::after { |
|||
transition: ease-out 0.3s; |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#fcbc3e; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 0%; |
|||
height: 3px; |
|||
} |
|||
&:hover { |
|||
&::after { |
|||
transition: all ease-out 0.3s; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
padding: 20px 10px; |
|||
margin: 15px 0px; |
|||
background-color: #f8f9fa; |
|||
border-radius: 5px; |
|||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; |
|||
} |
|||
|
|||
} |
|||
|
|||
& .main-side { |
|||
background-color: rgb(255, 255, 255); |
|||
padding: inherit; |
|||
align-content: flex-start; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
& img { |
|||
height: 150px; |
|||
width: 150px; |
|||
} |
|||
& u { |
|||
position: absolute; |
|||
bottom: 6px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex-direction: row; |
|||
text-decoration: underline green 2.8px; |
|||
text-decoration-skip-ink: none; |
|||
color: green; |
|||
font-weight: 600; |
|||
|
|||
& img { |
|||
margin-right: 4px; |
|||
height: 18px; |
|||
width: 18px; |
|||
} |
|||
} |
|||
} |
|||
@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=Playfair+Display:wght@500&display=swap'); |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
body { |
|||
margin: 0; |
|||
} |
|||
@media only screen and (min-width: 1080px) { |
|||
.main { |
|||
padding: 0 20vh 0 20vh; |
|||
} |
|||
} |
|||
main { |
|||
padding: 10px; |
|||
background-color: rgb(255, 255, 255); |
|||
display: grid; |
|||
grid-template-columns: 65% 35%; |
|||
font-family: "Roboto", sans-serif; |
|||
font-weight: 300; |
|||
|
|||
& a { |
|||
&:visited, &:active, &:link { |
|||
text-decoration: none; |
|||
color: rgb(0, 0, 0); |
|||
} |
|||
} |
|||
|
|||
& .element { |
|||
position: relative; |
|||
padding-bottom: 24px; |
|||
text-align: justify; |
|||
width: 11em; |
|||
height: 25em; |
|||
padding: 10px 10px 10px 10px; |
|||
margin: 2.5px 2.5px 0px 2.5px; |
|||
overflow: hidden; |
|||
p:not(.hidden) { |
|||
display: block; |
|||
} |
|||
p.hidden { |
|||
margin-top: 15px; |
|||
display: none; |
|||
font-style: italic; |
|||
} |
|||
|
|||
&:hover { |
|||
p:not(.hidden) { |
|||
display: none; |
|||
} |
|||
h2 { |
|||
display: none; |
|||
} |
|||
p.hidden { |
|||
display: block; |
|||
} |
|||
} |
|||
& img { |
|||
border-radius: 10% 40% 40% 40%; |
|||
filter: blur(0.10px); |
|||
} |
|||
&:hover { |
|||
& img { |
|||
border-radius: 10% 10% 10% 10%; |
|||
filter: blur(0); |
|||
transition: 0.3s; |
|||
|
|||
// transition: clip-path 0.3s; |
|||
// clip-path: circle(50%); |
|||
} |
|||
transition: 0.3s; |
|||
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%); |
|||
color: rgb(255, 255, 255); |
|||
& h2 { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& .main-contents { |
|||
background-color: rgb(226, 226, 226); |
|||
padding: inherit; |
|||
border-left: 3px solid black; |
|||
display: flex; |
|||
flex-direction: column; |
|||
& aside { |
|||
display: flex; |
|||
flex-direction: column; |
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
&:hover { |
|||
transition: 0.3s; |
|||
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 |
|||
& h2 { |
|||
&::before { |
|||
transition: 0.2s ease-in; |
|||
bottom: -5px; |
|||
left: 0px; |
|||
width: 100%; |
|||
max-width: 100%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
} |
|||
& h2 { |
|||
font-style: italic; |
|||
font-family: 'Playfair Display', serif; |
|||
position: relative; |
|||
&::before { |
|||
content: " +++"; |
|||
transition: 0.2s ease-out; |
|||
font-size: 12px; |
|||
color: grey; |
|||
position: absolute; |
|||
background-color: rgb(78, 78, 78); |
|||
bottom: -5px; |
|||
left: 5px; |
|||
width: 6%; |
|||
height: 5px; |
|||
} |
|||
} |
|||
p { |
|||
font-family: 'Montserrat', serif; |
|||
text-align: justify; |
|||
} |
|||
a { // C'est très long pour faire un joli lien :sob-emote: |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#2077d3; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 3px; |
|||
} |
|||
&::after { |
|||
transition: ease-out 0.3s; |
|||
content: " "; |
|||
position: absolute; |
|||
background-color:#fcbc3e; |
|||
bottom: -1px; |
|||
left: 0; |
|||
width: 0%; |
|||
height: 3px; |
|||
} |
|||
&:hover { |
|||
&::after { |
|||
transition: all ease-out 0.3s; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
padding: 20px 10px; |
|||
margin: 15px 0px; |
|||
background-color: #f8f9fa; |
|||
border-radius: 5px; |
|||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; |
|||
} |
|||
|
|||
} |
|||
|
|||
& .main-side { |
|||
background-color: rgb(255, 255, 255); |
|||
padding: inherit; |
|||
align-content: flex-start; |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
& img { |
|||
height: 150px; |
|||
width: 150px; |
|||
} |
|||
& u { |
|||
position: absolute; |
|||
bottom: 6px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
flex-direction: row; |
|||
text-decoration: underline green 2.8px; |
|||
text-decoration-skip-ink: none; |
|||
color: green; |
|||
font-weight: 600; |
|||
|
|||
& img { |
|||
margin-right: 4px; |
|||
height: 18px; |
|||
width: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,119 +1,119 @@ |
|||
@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"; |
|||
|
|||
|
|||
/* Reset CSS */ |
|||
input[type="submit" i] { |
|||
appearance: none; |
|||
user-select: none; |
|||
white-space: normal; |
|||
align-items: flex-start; |
|||
text-align: start; |
|||
cursor: default; |
|||
color: black; |
|||
background-color: white; |
|||
box-sizing: border-box; |
|||
padding: 0px; |
|||
border-width: 0px; |
|||
border-style: none; |
|||
border-color: white; |
|||
border-image: initial; |
|||
font-size: 16px; |
|||
} |
|||
a:-webkit-any-link { |
|||
color: black; |
|||
cursor: default; |
|||
text-decoration: none; |
|||
} |
|||
input { |
|||
writing-mode: auto; |
|||
text-rendering: auto; |
|||
color: black; |
|||
letter-spacing: normal; |
|||
word-spacing: normal; |
|||
text-transform: none; |
|||
text-indent: auto; |
|||
text-shadow: none; |
|||
display: inline-block; |
|||
text-align: auto; |
|||
appearance: none; |
|||
background-color: white; |
|||
-webkit-rtl-ordering: none; |
|||
cursor: text; |
|||
margin: 0em; |
|||
font: 400 13.3333px Arial; |
|||
padding: 1px 2px; |
|||
border-width: 2px; |
|||
border-style: none; |
|||
border-color: white; |
|||
border-image: initial; |
|||
} |
|||
input:focus-visible { |
|||
outline: rgba(0, 0, 0, 0) solid 0px; |
|||
outline-offset: 0px; |
|||
} |
|||
/* Fin Reset */ |
|||
input:focus { |
|||
position: relative; |
|||
color: red; |
|||
|
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: red; |
|||
top: 0; |
|||
width: 10px; |
|||
height: 1000px; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
position: relative; |
|||
margin: 0; |
|||
} |
|||
|
|||
.log-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 20vh; |
|||
margin: 30vh 0 50vh 0; |
|||
font-family: 'montserrat', sans-serif; |
|||
} |
|||
.log-area > p { |
|||
text-align: center; |
|||
} |
|||
form { |
|||
font-family: monospace, sans-serif; |
|||
} |
|||
.f_inputs { |
|||
text-align: center; |
|||
} |
|||
.f_inputs > div { |
|||
margin-top: 5px; |
|||
} |
|||
.buttons { |
|||
display : flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 25px; |
|||
} |
|||
.sign_in { |
|||
background-color:#00dc64; |
|||
} |
|||
.sign_up { |
|||
background-color: #6a6a6a; |
|||
} |
|||
.buttons > div { |
|||
padding:10px 40px; |
|||
border-radius: 25px; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
div > input[type="submit"], div > a { |
|||
font-family: roboto, sans-serif; |
|||
background-color: inherit; |
|||
} |
|||
|
|||
|
|||
@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"; |
|||
|
|||
|
|||
/* Reset CSS */ |
|||
input[type="submit" i] { |
|||
appearance: none; |
|||
user-select: none; |
|||
white-space: normal; |
|||
align-items: flex-start; |
|||
text-align: start; |
|||
cursor: default; |
|||
color: black; |
|||
background-color: white; |
|||
box-sizing: border-box; |
|||
padding: 0px; |
|||
border-width: 0px; |
|||
border-style: none; |
|||
border-color: white; |
|||
border-image: initial; |
|||
font-size: 16px; |
|||
} |
|||
a:-webkit-any-link { |
|||
color: black; |
|||
cursor: default; |
|||
text-decoration: none; |
|||
} |
|||
input { |
|||
writing-mode: auto; |
|||
text-rendering: auto; |
|||
color: black; |
|||
letter-spacing: normal; |
|||
word-spacing: normal; |
|||
text-transform: none; |
|||
text-indent: auto; |
|||
text-shadow: none; |
|||
display: inline-block; |
|||
text-align: auto; |
|||
appearance: none; |
|||
background-color: white; |
|||
-webkit-rtl-ordering: none; |
|||
cursor: text; |
|||
margin: 0em; |
|||
font: 400 13.3333px Arial; |
|||
padding: 1px 2px; |
|||
border-width: 2px; |
|||
border-style: none; |
|||
border-color: white; |
|||
border-image: initial; |
|||
} |
|||
input:focus-visible { |
|||
outline: rgba(0, 0, 0, 0) solid 0px; |
|||
outline-offset: 0px; |
|||
} |
|||
/* Fin Reset */ |
|||
input:focus { |
|||
position: relative; |
|||
color: red; |
|||
|
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: red; |
|||
top: 0; |
|||
width: 10px; |
|||
height: 1000px; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
position: relative; |
|||
margin: 0; |
|||
} |
|||
|
|||
.log-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
height: 20vh; |
|||
margin: 30vh 0 50vh 0; |
|||
font-family: 'montserrat', sans-serif; |
|||
} |
|||
.log-area > p { |
|||
text-align: center; |
|||
} |
|||
form { |
|||
font-family: monospace, sans-serif; |
|||
} |
|||
.f_inputs { |
|||
text-align: center; |
|||
} |
|||
.f_inputs > div { |
|||
margin-top: 5px; |
|||
} |
|||
.buttons { |
|||
display : flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 25px; |
|||
} |
|||
.sign_in { |
|||
background-color:#00dc64; |
|||
} |
|||
.sign_up { |
|||
background-color: #6a6a6a; |
|||
} |
|||
.buttons > div { |
|||
padding:10px 40px; |
|||
border-radius: 25px; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
div > input[type="submit"], div > a { |
|||
font-family: roboto, sans-serif; |
|||
background-color: inherit; |
|||
} |
|||
|
|||
|
|||
|
|||
@ -1,155 +1,155 @@ |
|||
body { |
|||
min-height: 100vh; |
|||
margin: 0; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding-bottom: 20vh; |
|||
} |
|||
header { |
|||
background-color:rgb(36, 37, 42); |
|||
padding: 30px 10%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
align-content: center; |
|||
text-decoration: none; |
|||
& h1 { |
|||
margin: 0; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::before { |
|||
animation: border_top_right 0.75s linear forwards; |
|||
} |
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::after { |
|||
animation: border_bottom_left 0.75s linear forwards; |
|||
} |
|||
& a { |
|||
color: rgb(237, 240, 241); |
|||
text-decoration: none; |
|||
font-family: sans-serif; |
|||
letter-spacing: 0px; |
|||
padding: 5px; |
|||
& .word1 { |
|||
color: rgb(146,147,149); |
|||
} |
|||
& .word2 { |
|||
color: rgb(192, 192, 192); |
|||
} |
|||
& .word3 { |
|||
color:rgb(237, 240, 241); |
|||
} |
|||
} |
|||
} |
|||
& ul { |
|||
list-style-type: none; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
text-align: center; |
|||
} |
|||
& a:not(._title) { |
|||
padding: 1em 2em; |
|||
text-decoration: none; |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
&:hover { |
|||
color: rgb(36, 37, 42); |
|||
background-color: rgb(237, 240, 241); |
|||
font-weight: 800; |
|||
transition: 0.2s; |
|||
} |
|||
} |
|||
|
|||
@keyframes border_top_right { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
25% { |
|||
width: 100%; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
} |
|||
@keyframes border_bottom_left { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
75% { |
|||
width: 0; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
} |
|||
} |
|||
footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
background-color:rgb(36, 37, 42); |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
padding: 3vh 0; |
|||
& a { |
|||
color: white; |
|||
} |
|||
} |
|||
body { |
|||
min-height: 100vh; |
|||
margin: 0; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding-bottom: 20vh; |
|||
} |
|||
header { |
|||
background-color:rgb(36, 37, 42); |
|||
padding: 30px 10%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
align-content: center; |
|||
text-decoration: none; |
|||
& h1 { |
|||
margin: 0; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::before { |
|||
animation: border_top_right 0.75s linear forwards; |
|||
} |
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
background-color: rgba(255, 255, 255, 0); |
|||
transition: 1s; |
|||
top: -2px; |
|||
left: -2px; |
|||
width: 0px; |
|||
height: 0px; |
|||
border: 2px solid transparent; |
|||
} |
|||
&:hover::after { |
|||
animation: border_bottom_left 0.75s linear forwards; |
|||
} |
|||
& a { |
|||
color: rgb(237, 240, 241); |
|||
text-decoration: none; |
|||
font-family: sans-serif; |
|||
letter-spacing: 0px; |
|||
padding: 5px; |
|||
& .word1 { |
|||
color: rgb(146,147,149); |
|||
} |
|||
& .word2 { |
|||
color: rgb(192, 192, 192); |
|||
} |
|||
& .word3 { |
|||
color:rgb(237, 240, 241); |
|||
} |
|||
} |
|||
} |
|||
& ul { |
|||
list-style-type: none; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
text-align: center; |
|||
} |
|||
& a:not(._title) { |
|||
padding: 1em 2em; |
|||
text-decoration: none; |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
&:hover { |
|||
color: rgb(36, 37, 42); |
|||
background-color: rgb(237, 240, 241); |
|||
font-weight: 800; |
|||
transition: 0.2s; |
|||
} |
|||
} |
|||
|
|||
@keyframes border_top_right { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
25% { |
|||
width: 100%; |
|||
height: 0; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: rgb(255, 255, 255); |
|||
border-right-color: rgb(255, 255, 255); |
|||
border-bottom-color: transparent; |
|||
border-left-color: transparent; |
|||
} |
|||
} |
|||
@keyframes border_bottom_left { |
|||
0% { |
|||
width: 0; |
|||
height: 0; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: transparent; |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
75% { |
|||
width: 0; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
|
|||
100% { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-top-color: transparent; |
|||
border-right-color: transparent; |
|||
border-bottom-color: rgb(255, 255, 255); |
|||
border-left-color: rgb(255, 255, 255); |
|||
} |
|||
} |
|||
} |
|||
footer { |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 0; |
|||
left: 0; |
|||
text-align: center; |
|||
background-color:rgb(36, 37, 42); |
|||
color: rgb(237, 240, 241); |
|||
font-family: "Montserrat", sans-serif; |
|||
font-weight: 500; |
|||
padding: 3vh 0; |
|||
& a { |
|||
color: white; |
|||
} |
|||
} |
|||
|
|||
Loading…
Reference in new issue