Browse Source

lycee15/11/2021

master
sacha.serny 3 years ago
parent
commit
038ea2a187
  1. 1
      .gitignore
  2. BIN
      _content/Thumbs.db
  3. 73
      index.html
  4. 53
      sign_in.html
  5. 110
      sign_up.php
  6. 26
      style/style_index.css
  7. 2
      style/style_index.css.map
  8. 201
      style/style_log.css
  9. 1
      style/style_log.css.map
  10. 32
      style/styles_index.scss
  11. 119
      style/styles_log.scss

1
.gitignore

@ -0,0 +1 @@
"C:\Users\MiniV\OneDrive - lycée Paul Constans\Cours\1re\NSI\sernyS_nsi_web\style\style_index.css.map"

BIN
_content/Thumbs.db

Binary file not shown.

73
index.html

@ -20,7 +20,7 @@
</ul> </ul>
<div> <div>
<a href="sign_in.html">Se connecter</a> <a href="sign_in.html">Se connecter</a>
<a href="sign_up.html">S'inscrire</a> <a href="sign_up.php">S'inscrire</a>
</div> </div>
</header> </header>
<main> <main>
@ -30,80 +30,101 @@
<img src="_content/picture2.jpg" alt="thumbnail"> <img src="_content/picture2.jpg" alt="thumbnail">
<div> <div>
<h2>Royals</h2> <h2>Royals</h2>
<p>Royals - Lorde<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien <p>Royals - Lorde<br></p>
(payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/search/numb%20link" class="element elmnt2"> <a href="https://open.spotify.com/search/numb%20link" class="element elmnt2">
<img src="_content/picture1.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture1.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Numb</h2> <h2>Numb</h2>
<p>Numb - Linkin Park<br><u><img class="icon" src="_content/spotify-icon.png" <p>Numb - Linkin Park<br></p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1"> <a href="https://open.spotify.com/track/6xWFzrQE9KIioQSYXlVN2t?si=a8ebcfbc70804976" class="element elmnt1">
<img src="_content/picture3.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture3.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Red</h2> <h2>Red</h2>
<p>Red - Survive said the prophet <br><u><img class="icon" src="_content/spotify-icon.png" <p>Red - Survive said the prophet <br></p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2"> <a href="https://open.spotify.com/track/2lXu7SNGIKHJ8EV2EetYFa?si=f29c10aab5964beb" class="element elmnt2">
<img src="_content/picture4.jpeg" alt="thumbnail" target="_blank"> <img src="_content/picture4.jpeg" alt="thumbnail" target="_blank">
<div> <div>
<h2>命に嫌われて</h2> <h2>命に嫌われて</h2>
<p>命に嫌われている。- Majiko<br><u><img class="icon" src="_content/spotify-icon.png" alt="spotify-icon">Lien <p>命に嫌われている。- Majiko<br></p>
(payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element elmnt1"> <a href="https://open.spotify.com/track/1x5sYLZiu9r5E43kMlt9f8?si=631da71145414cc0" class="element">
<img src="_content/picture5.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture5.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Symphony</h2> <h2>Symphony</h2>
<p>Symphony - Clean Bandit (feat. Zara Larsson) <br><u><img class="icon" <p>Symphony - Clean Bandit (feat. Zara Larsson)></p>
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2"> <a href="https://open.spotify.com/track/7djl4lZ6guZYAckDsfzrfs?si=e9c779cc72644f81" class="element elmnt2">
<img src="_content/picture6.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture6.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Reckoning song</h2> <h2>Reckoning song</h2>
<p>Reckoning song (cover) - Asaf Avidan, The Mojos <br><u><img class="icon" <p>Reckoning song (cover) - Asaf Avidan, The Mojos</p>
src="_content/spotify-icon.png" alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt1"> <a href="https://open.spotify.com/track/1hwJKpe0BPUsq6UUrwBWTw?si=71cfd097e58349b0" class="element elmnt2">
<img src="_content/picture7.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture7.jpg" alt="thumbnail" target="_blank" width="150" height="150">
<div> <div>
<h2>Boulevard of Broken Dreams</h2> <h2>Boulevard of..</h2>
<p>Boulevard of Broken Dreams - Green Day<br><u><img class="icon" src="_content/spotify-icon.png" <p>Boulevard of Broken Dreams - Green Day</p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2"> <a href="https://open.spotify.com/album/3zpPQp0SG0voOUtkovK7O5" class="element elmnt2">
<img src="_content/picture8.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture8.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Centuries</h2> <h2>Centuries</h2>
<p>Centuries - Fall Out Boy <br><u><img class="icon" src="_content/spotify-icon.png" <p>Centuries - Fall Out Boy</p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1"> <a href="https://open.spotify.com/track/2U5kSevItDmL0XzSDyemRp?si=dff1294e198f4439" class="element elmnt1">
<img src="_content/picture9.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture9.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Le temps est bon</h2> <h2>Le temps est bon</h2>
<p>Le temps est bon - Bon Entendeur <br><u><img class="icon" src="_content/spotify-icon.png" <p>Le temps est bon - Bon Entendeur </p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
<a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2"> <a href="https://open.spotify.com/track/62yJjFtgkhUrXktIoSjgP2?si=8de8d5f411a04de7" class="element elmnt2">
<img src="_content/picture10.jpg" alt="thumbnail" target="_blank"> <img src="_content/picture10.jpg" alt="thumbnail" target="_blank">
<div> <div>
<h2>Radioactive</h2> <h2>Radioactive</h2>
<p>Radioactive - Imagine Dragons<br><u><img class="icon" src="_content/spotify-icon.png" <p>Radioactive - Imagine Dragons<br></p>
alt="spotify-icon">Lien (payant)</u></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> </div>
</a> </a>
</div> </div>
@ -137,7 +158,7 @@
</main> </main>
<footer> <footer>
<a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par <a href="#mentions-legales" target="_blank">Mentions légales + points d'amélioration.</a> <br> Mise en page par
SERNY Sacha. SERNY Sacha. Données par <a href="https://www.wikipedia.org">Wikipedia</a>
</footer> </footer>
</body> </body>

53
sign_in.html

@ -8,55 +8,36 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Titre</title> <title>Conenxion</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style/style_main.css" rel="stylesheet">
<link href="style/style_log.css" rel="stylesheet"> <link href="style/style_log.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png"> <link rel="icon" type="image/x-icon" href="_content/favicon-32x32.png">
</head> </head>
<body> <body>
<header> <div class="log-area">
<h1><a class="_title" href="index.html"><span class="word1">Pop</span><span class="word3">Op</span></a></h1> <p>Connecte-toi pour accéder à plus de foncitonnalités</p>
<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>
<main>
<div class="red-banner">
En attente de l'ajout d'un systeme PHP.
<br>Cette page est moche et mal faite.
</div>
<form action="" method="POST"> <form action="" method="POST">
<h2>Connexion</h2> <div class="f_inputs">
<div class="form_p_contents">
<div> <div>
<label for="pseudo">Pseudo : </label><input autocomplete="off" name="pseudo" type="text" <label for="f_email">Adresse mail : </label><input type="email" id="f_email" maxlength="70"
placeholder="Pseudo"> placeholder="Adresse mail">
</div> </div>
<div> <div>
<label for="password">Mot de passe : </label><input autocomplete="off" name="password" <label for="f_password">Mot de passe : </label><input type="password" id="f_password" maxlength="40"
type="password" placeholder="Mot de passe"> 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>
<br>
<input name="password" type="submit" value="Valider">
<p><a href="#forget">Mot de passe oublié ?</a></p>
</div> </div>
</form> </form>
</main> </div>
<footer>
<a href="#mentions-legales">Conditions générales d'utilisation.</a> <br> Mise en page par SERNY Sacha.
</footer>
</body> </body>
</html> </html>

110
sign_up.php

@ -0,0 +1,110 @@
<!-- 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>
</html>

26
style/style_index.css

@ -9,6 +9,11 @@ body {
margin: 0; margin: 0;
} }
@media only screen and (min-width: 1080px) {
.main {
padding: 0 20vh 0 20vh;
}
}
main { main {
padding: 10px; padding: 10px;
background-color: white; background-color: white;
@ -26,8 +31,27 @@ main .element {
padding-bottom: 24px; padding-bottom: 24px;
text-align: justify; text-align: justify;
width: 11em; width: 11em;
padding: 10px; height: 25em;
padding: 10px 10px 10px 10px;
margin: 2.5px 2.5px 0px 2.5px; margin: 2.5px 2.5px 0px 2.5px;
overflow: hidden;
}
main .element p:not(.hidden) {
display: block;
}
main .element p.hidden {
margin-top: 15px;
display: none;
font-style: italic;
}
main .element:hover p:not(.hidden) {
display: none;
}
main .element:hover h2 {
display: none;
}
main .element:hover p.hidden {
display: block;
} }
main .element img { main .element img {
border-radius: 10% 40% 40% 40%; border-radius: 10% 40% 40% 40%;

2
style/style_index.css.map

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles_index.scss"],"names":[],"mappings":"AAAQ;AACA;AACA;AACR;EACC;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACD;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAED;EASC;EACA;EACA;EACA;;AAXA;EACC;EACA;EACA;;AASD;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAqEA;EACA;EACA;EACA;EACA;;AAxEA;EACC;EACA;;AAED;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAaL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA","file":"style_index.css"} {"version":3,"sourceRoot":"","sources":["styles_index.scss"],"names":[],"mappings":"AAAQ;AACA;AACA;AACR;EACC;;;AAED;EACC;;;AAED;EACC;IACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACD;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAIA;EACC;;AAED;EACC;;AAED;EACC;;AAGF;EACC;EACA;;AAED;EASC;EACA;EACA;EACA;;AAXA;EACC;EACA;EACA;;AASD;EACC;;AAKH;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EAqEA;EACA;EACA;EACA;EACA;;AAxEA;EACC;EACA;;AAED;EACC;EACA;EACA;;AAEC;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;EACA;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAaL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA","file":"style_index.css"}

201
style/style_log.css

@ -1,87 +1,128 @@
@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"; @import "https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap";
@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap"; @import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap";
/* Reset CSS */
main { input[type=submit i] {
padding: 5px 20%; appearance: none;
height: 79vh; user-select: none;
} white-space: normal;
main .red-banner { align-items: flex-start;
background-color: red; text-align: start;
color: white; cursor: default;
height: auto; color: black;
font-size: 24px; background-color: white;
padding: 30px 0; box-sizing: border-box;
text-align: center; padding: 0px;
font-family: "Montserrat", sans-serif; border-width: 0px;
border-style: none;
border-color: white;
border-image: initial;
font-size: 16px;
} }
form {
display: flex; a:-webkit-any-link {
justify-content: center; color: black;
font-family: "Roboto", sans-serif; cursor: default;
flex-direction: column; text-decoration: none;
align-items: center; }
text-align: center;
} input {
form .names { writing-mode: auto;
display: flex; text-rendering: auto;
flex-direction: row; color: black;
justify-content: space-between; letter-spacing: normal;
margin: 5px 0px; word-spacing: normal;
align-items: inherit; text-transform: none;
} text-indent: auto;
form .form_p_contents { text-shadow: none;
display: flex; display: inline-block;
flex-direction: column; text-align: auto;
justify-content: flex-start; appearance: none;
align-items: center; background-color: white;
} -webkit-rtl-ordering: none;
form .form_p_contents p a { cursor: text;
font-size: 14px; margin: 0em;
color: #696969; font: 400 13.3333px Arial;
text-decoration: none; padding: 1px 2px;
} border-width: 2px;
form .form_p_contents p a:hover { border-style: none;
font-size: 14px; border-color: white;
color: #696969; border-image: initial;
text-decoration: none; }
input:focus-visible {
outline: rgba(0, 0, 0, 0) solid 0px;
outline-offset: 0px;
}
/* Fin Reset */
input:focus {
position: relative;
color: red;
}
input:focus::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 { form {
margin: 5px 0px; font-family: monospace, sans-serif;
font-size: 24px;
} }
label {
letter-spacing: -1px; .f_inputs {
text-align: center;
} }
input {
border: 0px; .f_inputs > div {
background-color: #24252a; margin-top: 5px;
color: rgb(255, 0, 0);
border-radius: 3.5px;
margin-left: 2px;
padding: 3px;
font-size: 18px;
} }
input:focus {
outline: 1px solid #24252a ; .buttons {
transition: 0.2s; display: flex;
text-decoration: underline; align-items: center;
background-color: #edf0f1; justify-content: center;
color: #24252a; margin-top: 25px;
}
}
input[type="submit"] { .sign_in {
border: 0px; background-color: #00dc64;
background-color: #24252a; }
color: #edf0f1;
font-family: "Montserrat", sans-serif; .sign_up {
padding: 10px; background-color: #6a6a6a;
font-weight: 700; }
letter-spacing: 3px;
} .buttons > div {
input[type="submit"]:hover { padding: 10px 40px;
transition: 0.2s; border-radius: 25px;
outline: 4px solid #24252a; margin: 0 20px;
color: #24252a; }
background-color: #edf0f1;
div > input[type=submit], div > a {
font-family: roboto, sans-serif;
background-color: inherit;
} }
/*# sourceMappingURL=style_log.css.map */

1
style/style_log.css.map

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["styles_log.scss"],"names":[],"mappings":"AAAO;AACA;AAGP;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;AACA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA","file":"style_log.css"}

32
style/styles_index.scss

@ -7,7 +7,11 @@
body { body {
margin: 0; margin: 0;
} }
@media only screen and (min-width: 1080px) {
.main {
padding: 0 20vh 0 20vh;
}
}
main { main {
padding: 10px; padding: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
@ -28,10 +32,30 @@ main {
padding-bottom: 24px; padding-bottom: 24px;
text-align: justify; text-align: justify;
width: 11em; width: 11em;
padding: 10px; height: 25em;
padding: 10px 10px 10px 10px;
margin: 2.5px 2.5px 0px 2.5px; 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 { & img {
border-radius: 10% 40% 40% 40%; border-radius: 10% 40% 40% 40%;
filter: blur(0.10px); filter: blur(0.10px);

119
style/styles_log.scss

@ -0,0 +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;
}
Loading…
Cancel
Save