From e12cea8d37364faffc73d2f48954705bab766fcc Mon Sep 17 00:00:00 2001 From: "serny.s" Date: Wed, 1 Dec 2021 14:01:38 +0100 Subject: [PATCH] test lycee --- index.html | 169 +-------------------------------- reading.html | 2 +- style/styles_index.scss | 201 ---------------------------------------- style/styles_log.scss | 122 ------------------------ top.html | 64 +++++++++++++ 5 files changed, 66 insertions(+), 492 deletions(-) create mode 100644 top.html diff --git a/index.html b/index.html index f83bc57..9e4fb7a 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

PopOp

@@ -162,170 +162,3 @@ -======= - - - - - 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) -
- -
-
- - - -
-
- - - ->>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1 - \ No newline at end of file diff --git a/reading.html b/reading.html index d13e733..0f42429 100644 --- a/reading.html +++ b/reading.html @@ -14,7 +14,7 @@

PopOp

diff --git a/style/styles_index.scss b/style/styles_index.scss index cf227b7..d48a494 100644 --- a/style/styles_index.scss +++ b/style/styles_index.scss @@ -1,203 +1,3 @@ -<<<<<<< HEAD -@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'); @@ -396,5 +196,4 @@ main { } } } ->>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1 } \ No newline at end of file diff --git a/style/styles_log.scss b/style/styles_log.scss index fe611a9..2bb5dc7 100644 --- a/style/styles_log.scss +++ b/style/styles_log.scss @@ -1,124 +1,3 @@ -<<<<<<< HEAD -@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"; @@ -238,4 +117,3 @@ div > input[type="submit"], div > a { } ->>>>>>> 24db56327fed9097898d28c291f7d01a5d9802b1 diff --git a/top.html b/top.html new file mode 100644 index 0000000..379a9da --- /dev/null +++ b/top.html @@ -0,0 +1,64 @@ + + + + + PopOp + + + + + + + + +
+

PopOp

+ +
+ Se connecter + S'inscrire +
+
+
+
+ +
+
+ + + +
+
+ + + + \ No newline at end of file