diff --git a/home.html b/home.html index 3f16bf4..1234383 100644 --- a/home.html +++ b/home.html @@ -1,21 +1,21 @@ - - - - - Titre - - - - - - - -
-
-

PopOp

-
- -
- - + + + + + Titre + + + + + + + +
+
+

PopOp

+
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index f4f8c50..445d0bc 100644 --- a/index.html +++ b/index.html @@ -1,165 +1,165 @@ - - - - - PopOp - - - - - - - - -
-

PopOp

- -
- Se connecter - S'inscrire -
-
-
-
- - thumbnail -
-

Royals

-

Royals - Lorde

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Numb

-

Numb - Linkin Park

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Red

-

Red - Survive said the prophet

- - spotify-iconLien (légal) -
- - - thumbnail -
-

命に嫌われて

-

命に嫌われている。- Majiko

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Symphony

-

Symphony - Clean Bandit (feat. Zara Larsson)>

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Reckoning song

-

Reckoning song (cover) - Asaf Avidan, The Mojos

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Boulevard of..

-

Boulevard of Broken Dreams - Green Day

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Centuries

-

Centuries - Fall Out Boy

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Le temps est bon

-

Le temps est bon - Bon Entendeur

- - spotify-iconLien (légal) -
- - - thumbnail -
-

Radioactive

-

Radioactive - Imagine Dragons

- - spotify-iconLien (légal) -
- -
-
- - - -
-
- - - + + + + + PopOp + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ + thumbnail +
+

Royals

+

Royals - Lorde

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Numb

+

Numb - Linkin Park

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Red

+

Red - Survive said the prophet

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

命に嫌われて

+

命に嫌われている。- Majiko

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Symphony

+

Symphony - Clean Bandit (feat. Zara Larsson)>

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Reckoning song

+

Reckoning song (cover) - Asaf Avidan, The Mojos

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Boulevard of..

+

Boulevard of Broken Dreams - Green Day

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Centuries

+

Centuries - Fall Out Boy

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Le temps est bon

+

Le temps est bon - Bon Entendeur

+ + spotify-iconLien (légal) +
+ + + thumbnail +
+

Radioactive

+

Radioactive - Imagine Dragons

+ + spotify-iconLien (légal) +
+ +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/mentions-legales.html b/mentions-legales.html index b2ce164..2e3ec70 100644 --- a/mentions-legales.html +++ b/mentions-legales.html @@ -1,27 +1,27 @@ - - - - - - - Mentions Légales - - - - - -
-

PopOp

- -
- Se connecter - S'inscrire -
-
- - + + + + + + + Mentions Légales + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+ + \ No newline at end of file diff --git a/reading.html b/reading.html index 4c1fee4..d13e733 100644 --- a/reading.html +++ b/reading.html @@ -1,206 +1,206 @@ - - - - - PopOp - - - - - - - - -
-

PopOp

- -
- Se connecter - S'inscrire -
-
-
-
- - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- - - thumbnail -
-

La Princesse de Clèves

-

Madame de Lafayette

- - spotify-iconLien 2.95€ -
- - - thumbnail -
-

Banana Fish

-

Akimi Yoshida

- - spotify-iconLien 16€ -
- - - thumbnail -
-

Les enfants du temps

-

Makoto Shinkai

- - spotify-iconLien 14.95€ -
- - - thumbnail -
-

The Farm [EN]

-

Tom Rob Smith

- - spotify-iconLien 0.90€ -
- - - thumbnail -
-

Edmond Rostand

-

Cyrano de Bergerac

- - spotify-iconLien 3€ -
- - - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- - - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- - - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- - - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- - - thumbnail -
-

La ballade de Lila K

-

Blandine le callet

- - spotify-iconLien 7.70€ -
- -
-
- - - -
-
- - - + + + + + PopOp + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La Princesse de Clèves

+

Madame de Lafayette

+ + spotify-iconLien 2.95€ +
+ + + thumbnail +
+

Banana Fish

+

Akimi Yoshida

+ + spotify-iconLien 16€ +
+ + + thumbnail +
+

Les enfants du temps

+

Makoto Shinkai

+ + spotify-iconLien 14.95€ +
+ + + thumbnail +
+

The Farm [EN]

+

Tom Rob Smith

+ + spotify-iconLien 0.90€ +
+ + + thumbnail +
+

Edmond Rostand

+

Cyrano de Bergerac

+ + spotify-iconLien 3€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ + + thumbnail +
+

La ballade de Lila K

+

Blandine le callet

+ + spotify-iconLien 7.70€ +
+ +
+
+ + + +
+
+ + + \ No newline at end of file diff --git a/sign_in.html b/sign_in.html deleted file mode 100644 index 14dc6ea..0000000 --- a/sign_in.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - Conenxion - - - - - - -
-

Connecte-toi pour accéder à plus de foncitonnalités

-
-
-
- -
-
- -
-
-
- - -
-
-
- - - \ No newline at end of file diff --git a/sign_in.php b/sign_in.php new file mode 100644 index 0000000..a5f6683 --- /dev/null +++ b/sign_in.php @@ -0,0 +1,77 @@ + +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."; + } +} + +?> + + + + + Conenxion + + + + + + +
+

Connecte-toi pour accéder à plus de foncitonnalités

+
+
+
+ +
+
+ +
+
+
+ + +
+

+
+
+ + + \ No newline at end of file diff --git a/sign_up.php b/sign_up.php index ca7d0f2..4d6134d 100644 --- a/sign_up.php +++ b/sign_up.php @@ -1,110 +1,112 @@ - -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."; - } - } -} - - -?> - - - - - Conenxion - - - - - - -
-

Inscris-toi pour accéder à plus de foncitonnalités

-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- - -
-
- -
-
-
- - + +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."; + } +} + + +?> + + + + + Conenxion + + + + + + +
+

Inscris-toi pour accéder à plus de foncitonnalités

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+

+ +

+
+
+ + \ No newline at end of file diff --git a/style/styles_home.scss b/style/styles_home.scss index 19a2192..0f98952 100644 --- a/style/styles_home.scss +++ b/style/styles_home.scss @@ -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; + } + } + } + } } \ No newline at end of file diff --git a/style/styles_index.scss b/style/styles_index.scss index d48a494..ded06bc 100644 --- a/style/styles_index.scss +++ b/style/styles_index.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/style/styles_log.scss b/style/styles_log.scss index 2bb5dc7..335b661 100644 --- a/style/styles_log.scss +++ b/style/styles_log.scss @@ -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; +} + + diff --git a/style/styles_main.scss b/style/styles_main.scss index 198afef..0ee36d2 100644 --- a/style/styles_main.scss +++ b/style/styles_main.scss @@ -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; + } +}