8 changed files with 241 additions and 18 deletions
After Width: | Height: | Size: 9.6 KiB |
@ -0,0 +1,111 @@
|
||||
:root { |
||||
|
||||
--rouge: hsl(0, 98.8%, 33.5%); |
||||
--noir-fonce: hsl(0, 30%, 2.1%); |
||||
--noir-moyen: hsl(0, 15%, 3.1%); |
||||
--noir-clair: hsl(0, 5%, 7.1%); |
||||
} |
||||
|
||||
body { |
||||
|
||||
background: var(--noir-fonce); |
||||
color: white; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-family: Roboto,sans-serif; |
||||
} |
||||
|
||||
header { |
||||
|
||||
background: var(--noir-clair); |
||||
overflow: hidden; |
||||
margin-bottom: 2rem; |
||||
|
||||
} |
||||
|
||||
header * { |
||||
|
||||
font-size: 1.5rem; |
||||
padding: 0.5rem; |
||||
margin: 0; |
||||
color: var(--rouge); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
header span { |
||||
|
||||
color: white; |
||||
} |
||||
|
||||
|
||||
main { |
||||
|
||||
width: 80%; |
||||
margin: auto; |
||||
} |
||||
|
||||
#videosList { |
||||
|
||||
display: grid; |
||||
grid-gap: 1rem 1rem; |
||||
grid-auto-flow: row; |
||||
grid-template-columns: 322px 322px 322px; |
||||
|
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
#videosList li { |
||||
|
||||
background: var(--noir-clair); |
||||
border-color: var(--rouge); |
||||
border-radius: 0.25rem; |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#videosList .video-title { |
||||
|
||||
padding: 0.5rem 1rem; |
||||
} |
||||
|
||||
.video-title, |
||||
.video-title a, |
||||
.video-title a:visited { |
||||
|
||||
color: white; |
||||
font-weight: bold; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
article { |
||||
|
||||
border-radius: 0.25rem; |
||||
background: var(--noir-clair); |
||||
width: 58.3%; |
||||
margin: auto; |
||||
overflow: hidden; |
||||
|
||||
} |
||||
|
||||
article video { |
||||
|
||||
width: 100%; |
||||
max-height: 50vh; |
||||
background: black; |
||||
} |
||||
|
||||
article .video-title { |
||||
|
||||
font-weight: bold; |
||||
padding: 1rem 1rem; |
||||
font-size: 1.25rem; |
||||
margin: 0; |
||||
} |
||||
|
||||
footer { |
||||
|
||||
display: none; |
||||
} |
@ -0,0 +1,104 @@
|
||||
:root { |
||||
|
||||
--pink: hsl(338.5, 72.8%, 36.1%); |
||||
--canard: hsl(200.8, 100%, 9.6%); |
||||
} |
||||
|
||||
body { |
||||
|
||||
background: #121212; |
||||
color: white; |
||||
margin: 0; |
||||
padding: 0; |
||||
font-family: Roboto,sans-serif; |
||||
} |
||||
|
||||
header { |
||||
|
||||
background: var(--canard); |
||||
overflow: hidden; |
||||
margin-bottom: 2rem; |
||||
|
||||
} |
||||
|
||||
header * { |
||||
|
||||
font-size: 1.5rem; |
||||
padding: 0.5rem; |
||||
margin: 0; |
||||
color: var(--pink); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
header span { |
||||
|
||||
color: white; |
||||
} |
||||
|
||||
|
||||
main { |
||||
|
||||
width: 80%; |
||||
margin: auto; |
||||
} |
||||
|
||||
#videosList { |
||||
|
||||
display: grid; |
||||
grid-gap: 1rem 1rem; |
||||
grid-auto-flow: row; |
||||
grid-template-columns: 322px 322px 322px; |
||||
|
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
#videosList li { |
||||
|
||||
background: var(--canard); |
||||
border-color: var(--pink); |
||||
border-radius: 0.25rem; |
||||
border-width: 1px; |
||||
border-style: solid; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#videosList .video-title { |
||||
|
||||
padding: 0.5rem 1rem; |
||||
} |
||||
|
||||
.video-title, |
||||
.video-title a, |
||||
.video-title a:visited { |
||||
|
||||
color: white; |
||||
font-weight: bold; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
article { |
||||
|
||||
border-radius: 0.25rem; |
||||
background: var(--canard); |
||||
width: 58.3%; |
||||
margin: auto; |
||||
overflow: hidden; |
||||
|
||||
} |
||||
|
||||
article video { |
||||
|
||||
width: 100%; |
||||
max-height: 50vh; |
||||
background: black; |
||||
} |
||||
|
||||
article .video-title { |
||||
|
||||
font-weight: bold; |
||||
padding: 1rem 1rem; |
||||
font-size: 1.25rem; |
||||
margin: 0; |
||||
} |
Loading…
Reference in new issue