8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 737: | Linha 737: | ||
/* Teste */ | /* Teste */ | ||
.center { | |||
display: flex; | |||
height: 100vh; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.article-card { | |||
width: 350px; | |||
height: 220px; | |||
border-radius: 12px; | |||
overflow: hidden; | |||
position: relative; | |||
font-family: Arial, Helvetica, sans-serif; | |||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |||
transition: all 300ms; | |||
border-top: solid 5px red; | |||
} | |||
.article-card:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); | |||
} | |||
.article-card img { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | |||
.article-card .content { | |||
box-sizing: border-box; | |||
width: 100%; | |||
position: absolute; | |||
padding: 30px 20px 20px 20px; | |||
height: auto; | |||
bottom: 0; | |||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); | |||
} | |||
.article-card .date, | |||
.article-card .title { | |||
margin: 0; | |||
} | |||
.article-card .date { | |||
font-size: 12px; | |||
color: rgba(255, 255, 255, 0.9); | |||
margin-bottom: 4px; | |||
} | |||
.article-card .title { | |||
font-size: 17px; | |||
color: #fff; | |||
} |