commit e455d2abf85423629902e751e8326b34bde6d7a6 Author: minivoltrush <38190137+minivoltrush@users.noreply.github.com> Date: Sun Nov 7 19:02:58 2021 +0100 first diff --git a/_content/favicon-32x32.png b/_content/favicon-32x32.png new file mode 100644 index 0000000..7ee25d4 Binary files /dev/null and b/_content/favicon-32x32.png differ diff --git a/_content/logo.png b/_content/logo.png new file mode 100644 index 0000000..c8d4dc1 Binary files /dev/null and b/_content/logo.png differ diff --git a/_content/picture1.jpg b/_content/picture1.jpg new file mode 100644 index 0000000..137b340 Binary files /dev/null and b/_content/picture1.jpg differ diff --git a/_content/picture10.jpg b/_content/picture10.jpg new file mode 100644 index 0000000..2acb678 Binary files /dev/null and b/_content/picture10.jpg differ diff --git a/_content/picture2.jpg b/_content/picture2.jpg new file mode 100644 index 0000000..966b8b1 Binary files /dev/null and b/_content/picture2.jpg differ diff --git a/_content/picture3.jpg b/_content/picture3.jpg new file mode 100644 index 0000000..711d08f Binary files /dev/null and b/_content/picture3.jpg differ diff --git a/_content/picture4.jpeg b/_content/picture4.jpeg new file mode 100644 index 0000000..7a13a91 Binary files /dev/null and b/_content/picture4.jpeg differ diff --git a/_content/picture5.jpg b/_content/picture5.jpg new file mode 100644 index 0000000..81c294e Binary files /dev/null and b/_content/picture5.jpg differ diff --git a/_content/picture6.jpg b/_content/picture6.jpg new file mode 100644 index 0000000..d2c39b2 Binary files /dev/null and b/_content/picture6.jpg differ diff --git a/_content/picture7.jpg b/_content/picture7.jpg new file mode 100644 index 0000000..215b677 Binary files /dev/null and b/_content/picture7.jpg differ diff --git a/_content/picture8.jpg b/_content/picture8.jpg new file mode 100644 index 0000000..eb73a3a Binary files /dev/null and b/_content/picture8.jpg differ diff --git a/_content/picture9.jpg b/_content/picture9.jpg new file mode 100644 index 0000000..306d3de Binary files /dev/null and b/_content/picture9.jpg differ diff --git a/_content/spotify-icon.png b/_content/spotify-icon.png new file mode 100644 index 0000000..58ed0f1 Binary files /dev/null and b/_content/spotify-icon.png differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..3f16bf4 --- /dev/null +++ b/home.html @@ -0,0 +1,21 @@ + + + + + Titre + + + + + + + +
+
+

PopOp

+
+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..05cb856 --- /dev/null +++ b/index.html @@ -0,0 +1,140 @@ + + + + + PopOp + + + + + + + + +
+

PopOp

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

Royals

+

Royals - Lorde
spotify-iconLien + (payant)

+
+ + + thumbnail +
+

Numb

+

Numb - Linkin Park
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Red

+

Red - Survive said the prophet
spotify-iconLien (payant)

+
+ + + thumbnail +
+

命に嫌われて

+

命に嫌われている。- Majiko
spotify-iconLien + (payant)

+
+ + + thumbnail +
+

Symphony

+

Symphony - Clean Bandit (feat. Zara Larsson)
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Reckoning song

+

Reckoning song (cover) - Asaf Avidan, The Mojos
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Boulevard of Broken Dreams

+

Boulevard of Broken Dreams - Green Day
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Centuries

+

Centuries - Fall Out Boy
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Le temps est bon

+

Le temps est bon - Bon Entendeur
spotify-iconLien (payant)

+
+ + + thumbnail +
+

Radioactive

+

Radioactive - Imagine Dragons
spotify-iconLien (payant)

+
+ +
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/mentions-legales.html b/mentions-legales.html new file mode 100644 index 0000000..b2ce164 --- /dev/null +++ b/mentions-legales.html @@ -0,0 +1,27 @@ + + + + + + + Mentions Légales + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+ + + \ No newline at end of file diff --git a/sign_in.html b/sign_in.html new file mode 100644 index 0000000..7805a8e --- /dev/null +++ b/sign_in.html @@ -0,0 +1,61 @@ + + + + + + + Titre + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ En attente de l'ajout d'un systeme PHP. +
+
+

Connexion

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

Mot de passe oublié ?

+
+
+
+ + + + \ No newline at end of file diff --git a/sign_up.html b/sign_up.html new file mode 100644 index 0000000..cc063a0 --- /dev/null +++ b/sign_up.html @@ -0,0 +1,68 @@ + + + + + + + Titre + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ En attente de l'ajout d'un systeme PHP. +
+
+

Inscription

+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/style/style_home.css b/style/style_home.css new file mode 100644 index 0000000..06f709f --- /dev/null +++ b/style/style_home.css @@ -0,0 +1,37 @@ +@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%); +} +main .title { + display: flex; + flex-direction: column; + justify-content: center; +} +main .title h1, main .title h1:visited, main .title h1:link, main .title h1:active { + padding: 1em; + background-color: #fff; + box-shadow: -1px -1px 15px 0px rgba(255, 255, 255, 0.75); +} +main .title h1 a, main .title h1:visited a, main .title h1:link a, main .title h1:active 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; +} +main .title h1 a:hover, main .title h1:visited a:hover, main .title h1:link a:hover, main .title h1:active a:hover { + transition: font-size 0.75s ease-out; + font-size: 5em; +} + +/*# sourceMappingURL=style_home.css.map */ diff --git a/style/style_home.css.map b/style/style_home.css.map new file mode 100644 index 0000000..4f50ce1 --- /dev/null +++ b/style/style_home.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles_home.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA","file":"style_home.css"} \ No newline at end of file diff --git a/style/style_index.css b/style/style_index.css new file mode 100644 index 0000000..4c4cb42 --- /dev/null +++ b/style/style_index.css @@ -0,0 +1,160 @@ +@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; +} + +main { + padding: 10px; + background-color: white; + display: grid; + grid-template-columns: 65% 35%; + font-family: "Roboto", sans-serif; + font-weight: 300; +} +main a:visited, main a:active, main a:link { + text-decoration: none; + color: black; +} +main .element { + position: relative; + padding-bottom: 24px; + text-align: justify; + width: 11em; + padding: 10px; + margin: 2.5px 2.5px 0px 2.5px; +} +main .element img { + border-radius: 10% 40% 40% 40%; + filter: blur(0.1px); +} +main .element:hover { + 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: white; +} +main .element:hover img { + border-radius: 10% 10% 10% 10%; + filter: blur(0); + transition: 0.3s; +} +main .element:hover h2 { + text-decoration: underline; +} +main .main-contents { + background-color: #e2e2e2; + padding: inherit; + border-left: 3px solid black; + display: flex; + flex-direction: column; +} +main .main-contents aside { + display: flex; + flex-direction: column; + 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 .main-contents aside img { + max-width: 100%; + height: auto; +} +main .main-contents aside: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; +} +main .main-contents aside:hover h2::before { + transition: 0.2s; + bottom: -5px; + left: 0px; + width: 100%; + max-width: 100%; + height: 5px; +} +main .main-contents aside h2 { + font-style: italic; + font-family: "Playfair Display", serif; + position: relative; +} +main .main-contents aside h2::before { + content: " +++"; + font-size: 12px; + color: grey; + position: absolute; + background-color: #4e4e4e; + bottom: -5px; + left: 5px; + width: 6%; + height: 5px; +} +main .main-contents aside p { + font-family: "Montserrat", serif; + text-align: justify; +} +main .main-contents aside a { + position: relative; +} +main .main-contents aside a::before { + content: " "; + position: absolute; + background-color: #2077d3; + bottom: -1px; + left: 0; + width: 100%; + height: 3px; +} +main .main-contents aside a::after { + transition: ease-out 0.3s; + content: " "; + position: absolute; + background-color: #fcbc3e; + bottom: -1px; + left: 0; + width: 0%; + height: 3px; +} +main .main-contents aside a:hover::after { + transition: all ease-out 0.3s; + width: 100%; +} +main .main-side { + background-color: white; + padding: inherit; + align-content: flex-start; + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; +} +main .main-side img { + height: 150px; + width: 150px; +} +main .main-side 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; +} +main .main-side u img { + margin-right: 4px; + height: 18px; + width: 18px; +} + +/*# sourceMappingURL=style_index.css.map */ diff --git a/style/style_index.css.map b/style/style_index.css.map new file mode 100644 index 0000000..8277073 --- /dev/null +++ b/style/style_index.css.map @@ -0,0 +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;EAoEA;EACA;EACA;EACA;EACA;;AAvEA;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;;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"} \ No newline at end of file diff --git a/style/style_log.css b/style/style_log.css new file mode 100644 index 0000000..99e67c1 --- /dev/null +++ b/style/style_log.css @@ -0,0 +1,87 @@ +@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"; + +main { + padding: 5px 20%; + height: 79vh; +} +main .red-banner { + background-color: red; + color: white; + height: auto; + font-size: 24px; + padding: 30px 0; + text-align: center; + font-family: "Montserrat", sans-serif; +} +form { + display: flex; + justify-content: center; + font-family: "Roboto", sans-serif; + flex-direction: column; + align-items: center; + text-align: center; +} +form .names { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 5px 0px; + align-items: inherit; +} +form .form_p_contents { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +form .form_p_contents p a { + font-size: 14px; + color: #696969; + text-decoration: none; +} +form .form_p_contents p a:hover { + font-size: 14px; + color: #696969; + text-decoration: none; +} +form { + margin: 5px 0px; + font-size: 24px; +} +label { + letter-spacing: -1px; +} +input { + border: 0px; + background-color: #24252a; + color: rgb(255, 0, 0); + border-radius: 3.5px; + margin-left: 2px; + padding: 3px; + font-size: 18px; + +} +input:focus { + outline: 1px solid #24252a ; + transition: 0.2s; + text-decoration: underline; + background-color: #edf0f1; + color: #24252a; + +} +input[type="submit"] { + border: 0px; + background-color: #24252a; + color: #edf0f1; + font-family: "Montserrat", sans-serif; + padding: 10px; + font-weight: 700; + letter-spacing: 3px; +} +input[type="submit"]:hover { + transition: 0.2s; + outline: 4px solid #24252a; + color: #24252a; + background-color: #edf0f1; +} diff --git a/style/style_main.css b/style/style_main.css new file mode 100644 index 0000000..ca25600 --- /dev/null +++ b/style/style_main.css @@ -0,0 +1,154 @@ +body { + min-height: 100vh; + margin: 0; + box-sizing: border-box; + position: relative; + padding-bottom: 20vh; +} + +header { + background-color: #24252a; + padding: 30px 10%; + display: flex; + justify-content: space-around; + align-items: center; + align-content: center; + text-decoration: none; +} +header h1 { + margin: 0; + position: relative; +} +header h1::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; +} +header h1:hover::before { + animation: border_top_right 0.75s linear forwards; +} +header h1::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; +} +header h1:hover::after { + animation: border_bottom_left 0.75s linear forwards; +} +header h1 a { + color: #edf0f1; + text-decoration: none; + font-family: sans-serif; + letter-spacing: 0px; + padding: 5px; +} +header h1 a .word1 { + color: #929395; +} +header h1 a .word2 { + color: silver; +} +header h1 a .word3 { + color: #edf0f1; +} +header ul { + list-style-type: none; + display: flex; + justify-content: space-around; + text-align: center; +} +header a:not(._title) { + padding: 1em 2em; + text-decoration: none; + color: #edf0f1; + font-family: "Montserrat", sans-serif; + font-weight: 500; +} +header a:not(._title):hover { + color: #24252a; + background-color: #edf0f1; + font-weight: 800; + transition: 0.2s; +} +@keyframes border_top_right { + 0% { + width: 0; + height: 0; + border-top-color: white; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + } + 25% { + width: 100%; + height: 0; + border-top-color: white; + border-right-color: white; + border-bottom-color: transparent; + border-left-color: transparent; + } + 100% { + width: 100%; + height: 100%; + border-top-color: white; + border-right-color: white; + 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: white; + } + 75% { + width: 0; + height: 100%; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: white; + border-left-color: white; + } + 100% { + width: 100%; + height: 100%; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: white; + border-left-color: white; + } +} + +footer { + position: absolute; + bottom: 0; + right: 0; + left: 0; + text-align: center; + background-color: #24252a; + color: #edf0f1; + font-family: "Montserrat", sans-serif; + font-weight: 500; + padding: 3vh 0; +} +footer a { + color: white; +} + +/*# sourceMappingURL=style_main.css.map */ diff --git a/style/style_main.css.map b/style/style_main.css.map new file mode 100644 index 0000000..d5e5ef7 --- /dev/null +++ b/style/style_main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles_main.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;;AAED;EACC;;AAIH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AAIF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;EAGD;IACC;IACA;IACA;IACA;IACA;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC","file":"style_main.css"} \ No newline at end of file diff --git a/style/styles_home.scss b/style/styles_home.scss new file mode 100644 index 0000000..19a2192 --- /dev/null +++ b/style/styles_home.scss @@ -0,0 +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; + } + } + } + } + } \ No newline at end of file diff --git a/style/styles_index.scss b/style/styles_index.scss new file mode 100644 index 0000000..c9ef99d --- /dev/null +++ b/style/styles_index.scss @@ -0,0 +1,174 @@ +@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; +} + +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; + padding: 10px; + margin: 2.5px 2.5px 0px 2.5px; + + + & 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; + bottom: -5px; + left: 0px; + width: 100%; + max-width: 100%; + height: 5px; + } + } + } + & h2 { + font-style: italic; + font-family: 'Playfair Display', serif; + position: relative; + &::before { + content: " +++"; + 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_main.scss b/style/styles_main.scss new file mode 100644 index 0000000..198afef --- /dev/null +++ b/style/styles_main.scss @@ -0,0 +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; + } +} diff --git a/style_log.css b/style_log.css new file mode 100644 index 0000000..4836c77 --- /dev/null +++ b/style_log.css @@ -0,0 +1,78 @@ +@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"; + +main { + padding: 5px 20%; + height: 79vh; +} +form { + display: flex; + justify-content: center; + font-family: "Roboto", sans-serif; + flex-direction: column; + align-items: center; + text-align: center; +} +form .names { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 5px 0px; + align-items: inherit; +} +form .form_p_contents { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +form .form_p_contents p a { + font-size: 14px; + color: #696969; + text-decoration: none; +} +form .form_p_contents p a:hover { + font-size: 14px; + color: #696969; + text-decoration: none; +} +form { + margin: 5px 0px; + font-size: 24px; +} +label { + letter-spacing: -1px; +} +input { + border: 0px; + background-color: #24252a; + color: rgb(255, 0, 0); + border-radius: 3.5px; + margin-left: 2px; + padding: 3px; + font-size: 18px; + +} +input:focus { + outline: 1px solid #24252a ; + transition: 0.2s; + text-decoration: underline; + background-color: #edf0f1; + color: #24252a; + +} +input[type="submit"] { + border: 0px; + background-color: #24252a; + color: #edf0f1; + font-family: "Montserrat", sans-serif; + padding: 10px; + font-weight: 700; + letter-spacing: 3px; +} +input[type="submit"]:hover { + transition: 0.2s; + outline: 4px solid #24252a; + color: #24252a; + background-color: #edf0f1; +}