5 changed files with 0 additions and 603 deletions
@ -1,52 +0,0 @@ |
|||||
* { |
|
||||
box-sizing: content-box; |
|
||||
} |
|
||||
@keyframes defilement { |
|
||||
0% { |
|
||||
top: 0; |
|
||||
transform: rotateX(15deg) translateZ(2200px); |
|
||||
} |
|
||||
100% { |
|
||||
top: -10000px; |
|
||||
transform: rotateX(20deg) translateZ(-2200px); |
|
||||
} |
|
||||
} |
|
||||
@keyframes rainbow { |
|
||||
0% { |
|
||||
color: yellow; |
|
||||
} |
|
||||
25% { |
|
||||
color: yellowgreen; |
|
||||
} |
|
||||
50% { |
|
||||
color: red; |
|
||||
} |
|
||||
75% { |
|
||||
color: blue; |
|
||||
} |
|
||||
100% { |
|
||||
color:yellow; |
|
||||
} |
|
||||
} |
|
||||
.main-contents { |
|
||||
z-index: 9999; |
|
||||
} |
|
||||
.star-wars { |
|
||||
background-color: black; |
|
||||
height: 70%; |
|
||||
margin-right: 10px; |
|
||||
transform: perspective(400px) rotateX(20deg); |
|
||||
overflow: hidden; |
|
||||
background-image: url("../_content/star.png"); |
|
||||
background-repeat: repeat; |
|
||||
background-size: 400px; |
|
||||
padding: 0 10%; |
|
||||
div { |
|
||||
font-family: 'Pathway Gothic One', sans-serif; |
|
||||
text-align: center; |
|
||||
font-size: 28px; |
|
||||
animation: defilement 40s linear infinite; |
|
||||
color: yellow; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,39 +0,0 @@ |
|||||
@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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,238 +0,0 @@ |
|||||
@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; |
|
||||
} |
|
||||
} |
|
||||
@keyframes load-items-left { |
|
||||
0% { |
|
||||
transform: translateX(-100%); |
|
||||
opacity: 0; |
|
||||
} |
|
||||
100% { |
|
||||
transform: translateX(0%); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
@keyframes load-items-right { |
|
||||
0% { |
|
||||
transform: translateX(100%); |
|
||||
opacity: 0; |
|
||||
} |
|
||||
100% { |
|
||||
transform: translateX(0%); |
|
||||
opacity: 1; |
|
||||
} |
|
||||
} |
|
||||
section.mentions-legales { |
|
||||
padding: 20px; |
|
||||
font-family: "Roboto", sans-serif; |
|
||||
h2 { |
|
||||
font-weight: 800; |
|
||||
font-size: 24px; |
|
||||
} |
|
||||
p { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
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; |
|
||||
word-break: break-word; |
|
||||
word-wrap: break-word; |
|
||||
text-align: justify; |
|
||||
hyphens: auto; |
|
||||
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 { |
|
||||
animation: load-items-right 0.2s ease-out; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
word-break: break-all; |
|
||||
word-wrap: break-word; |
|
||||
text-align: justify; |
|
||||
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 { |
|
||||
animation: load-items-left 0.2s ease-out; |
|
||||
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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,119 +0,0 @@ |
|||||
@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; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
@ -1,155 +0,0 @@ |
|||||
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; |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue