SERNY Sacha 3 years ago
parent
commit
782ac4d702
  1. BIN
      _content/Thumbs.db
  2. 9
      index.html
  3. 29
      mentions-legales.html
  4. 222
      reading.html
  5. 69
      sign_in.html
  6. 79
      sign_in.php
  7. 114
      sign_up.php
  8. 158
      style/styles_main.scss
  9. 64
      top.html

BIN
_content/Thumbs.db

Binary file not shown.

9
index.html

@ -14,7 +14,11 @@
<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>
<<<<<<< HEAD
<li><a href="fun.html">Fun</a></li> <li><a href="fun.html">Fun</a></li>
=======
<li><a href="top.html">Top</a></li>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928
<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>
@ -157,4 +161,9 @@
<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>
<<<<<<< HEAD
</body> </body>
=======
</body>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928

29
mentions-legales.html

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
@ -24,4 +25,32 @@
</header> </header>
</body> </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>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928
</html> </html>

222
reading.html

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
@ -219,4 +220,225 @@
</footer> </footer>
</body> </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="top.html">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://www.webtoons.com/fr/fantasy/omniscient-reader/list?title_no=2175"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200814_47/1597371219311kW6GG_JPEG/M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>Omniscient</h2>
<p>Sleepy-C / UMI<br></p>
<p class="hidden">« Je suis le seul lecteur à connaître la fin du monde. »
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20211117_242/1637119335923dHRBM_JPEG/1M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>Ghost King</h2>
<p>Park Jin-Seok / Son Gohu<br></p>
<p class="hidden">Dans un monde où les arts martiaux du passé se prolongent dans le présent… la paix est revenue après la disparition d'un tueur sanguinaire, le Roi Spectral.
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/action/ghost-king/list?title_no=3674"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20191219_16/15766814430890w1m9_JPEG/M_details_720x1230.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>Tower Of God</h2>
<p>SIU <br></p>
<p class="hidden">“Que désirez-vous? La richesse? La gloire? Le pouvoir? La vengeance? Ou une chose qui surpasse toutes les autres ? Quel que soit votre désir, il se trouve ici !”
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/action/the-god-of-high-school/list?title_no=1831"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20191127_291/1574821884836JUV15_JPEG/bg_mobile.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>The God of High School</h2>
<p>Yongje Park<br></p>
<p class="hidden">Le destin de trois lycéens, experts en arts martiaux, se croisent lorsque les Juges font leur apparition, leur proposant de participer à un tournoi :
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/thriller/sweethome/list?title_no=1996"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200428_23/1588053177319xEVr7_JPEG/04_EC9E91ED9288EC8381EC84B8_mobile.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>Sweet home</h2>
<p>Carnby Kim / Youngchan Hwang <br></p>
<p class="hidden">Après une tragédie familiale inattendue, un lycéen solitaire est obligé de quitter son domicile -
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</u>
</div>
</a>
<a href="https://www.webtoons.com/fr/sports/the-boxer/list?title_no=2037"
class="element elmnt1" target="_blank">
<img src="https://swebtoon-phinf.pstatic.net/20200428_54/1588055670703Ehplg_JPEG/M_details.jpg?type=crop540_540"
alt="thumbnail">
<div>
<h2>The Boxer</h2>
<p>JH<br></p>
<p class="hidden">Avoir un talent particulier, bénédiction ou malédiction ?
</p>
<u><img class="icon" src="_content/webtoon-icon.png" alt="spotify-icon">Lien gratuit</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>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928
</html> </html>

69
sign_in.html

@ -0,0 +1,69 @@
<!-- Traitement PHP -->
<?php
/*
Faire de la sécurité et de l'optimisation
Ce code est pourri mais VRAIMENT
*/
$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_password"]) AND !empty($_POST["f_password"])) {
$password = htmlspecialchars($_POST['password']);
$mail = htmlspecialchars($_POST['f_email']);
$look = $bdd->("SELECT * FROM membres WHERE email = ?");
$look->execite(array($mail));
$userexist = -1;
$userexist = $look->rowCount();
if ($userexist == 0) {
} else {
$erreur = "Le mail utilisé est inconnu."
}
}
?>
<!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>
<div>
<?= $erreur ?>
</div>
</form>
</div>
</body>
</html>

79
sign_in.php

@ -1,4 +1,82 @@
<<<<<<< HEAD <<<<<<< HEAD
<<<<<<< HEAD
<!-- 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>
=======
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
@ -75,6 +153,7 @@ if (isset($_POST['submit'])) {
</div> </div>
</body> </body>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928
======= =======
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php

114
sign_up.php

@ -1,4 +1,117 @@
<<<<<<< HEAD <<<<<<< HEAD
<<<<<<< HEAD
<!-- 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>
=======
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
/* /*
@ -110,6 +223,7 @@ if (isset($_POST['submit'])) {
</div> </div>
</body> </body>
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928
======= =======
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php

158
style/styles_main.scss

@ -1,3 +1,4 @@
<<<<<<< HEAD
body { body {
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
@ -153,3 +154,160 @@ footer {
color: white; 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;
}
}
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928

64
top.html

@ -0,0 +1,64 @@
<!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="top.html">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">
</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>
Loading…
Cancel
Save