8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 741: | Linha 741: | ||
/* Testes */ | /* Testes */ | ||
// Colors | |||
$color-primary-white: rgb(240, 240, 240); | |||
main { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 50px; | |||
font-family: 'Roboto', sans-serif; | |||
} | |||
.card { | |||
width: 24rem; | |||
height: 36rem; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
cursor: pointer; | |||
position: relative; | |||
color: $color-primary-white; | |||
box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2); | |||
img { | |||
position: absolute; | |||
object-fit: cover; | |||
width: 100%; | |||
height: 100%; | |||
top: 0; | |||
left: 0; | |||
opacity: 0.9; | |||
transition: opacity .2s ease-out; | |||
} | |||
h2 { | |||
position: absolute; | |||
inset: auto auto 30px 30px; | |||
margin: 0; | |||
transition: inset .3s .3s ease-out; | |||
font-family: 'Roboto Condensed', sans-serif; | |||
font-weight: normal; | |||
text-transform: uppercase; | |||
} | |||
p, a { | |||
position: absolute; | |||
opacity: 0; | |||
max-width: 80%; | |||
transition: opacity .3s ease-out; | |||
} | |||
p { | |||
inset: auto auto 80px 30px; | |||
} | |||
a { | |||
inset: auto auto 40px 30px; | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
&:hover h2 { | |||
inset: auto auto 220px 30px; | |||
transition: inset .3s ease-out; | |||
} | |||
&:hover p, &:hover a { | |||
opacity: 1; | |||
transition: opacity .5s .1s ease-in; | |||
} | |||
&:hover img { | |||
transition: opacity .3s ease-in; | |||
opacity: 1; | |||
} | |||
} | |||
.material-symbols-outlined { | |||
vertical-align: middle; | |||
} |