Browse Source

test

master
SERNY Sacha 3 years ago
parent
commit
465cfe29c0
  1. BIN
      _content/Thumbs.db
  2. 167
      index.html
  3. 69
      sign_in.html
  4. 80
      sign_in.php
  5. 112
      sign_up.php
  6. 201
      style/styles_index.scss
  7. 122
      style/styles_log.scss

BIN
_content/Thumbs.db

Binary file not shown.

167
index.html

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
@ -162,4 +163,170 @@
</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="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.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>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</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>

80
sign_in.php

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
@ -74,4 +75,83 @@ if (isset($_POST['submit'])) {
</div> </div>
</body> </body>
=======
<!-- 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->prepare("SELECT * FROM membres WHERE email = :mail");
$look->bindParam(":mail", $mail);
$look->execute();
$userexist = -1;
$userexist = $look->rowCount();
if ($userexist == 0) {
$data = $look->fetch();
var_dump($password,$data['password']);
if (password_verify($password,$data['password'])) {
$erreur = "Vous avez été correctement connecté.";
} else {
$erreur = "Les mots de passe ne correspondent pas.";
}
} 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"
name="f_email">
</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">
</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="submit" value="Se connecter" id="submit">
</div>
</div>
<div>
<?= $erreur ?>
</div>
</form>
</div>
</body>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</html> </html>

112
sign_up.php

@ -1,3 +1,4 @@
<<<<<<< HEAD
<!-- Traitement PHP --> <!-- Traitement PHP -->
<?php <?php
/* /*
@ -109,4 +110,115 @@ if (isset($_POST['submit'])) {
</div> </div>
</body> </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['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>
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
</html> </html>

201
style/styles_index.scss

@ -1,3 +1,4 @@
<<<<<<< HEAD
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
@ -196,4 +197,204 @@ main {
} }
} }
} }
=======
@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;
}
}
}
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1
} }

122
style/styles_log.scss

@ -1,3 +1,4 @@
<<<<<<< HEAD
@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";
@ -117,3 +118,124 @@ div > input[type="submit"], div > a {
} }
=======
@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;
}
>>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1

Loading…
Cancel
Save