8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 398: | Linha 398: | ||
font-size: 1.2em; | font-size: 1.2em; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
:root{ | |||
--background-dark: #2d3548; | |||
--text-light: rgba(255,255,255,0.6); | |||
--text-lighter: rgba(255,255,255,0.9); | |||
--spacing-s: 8px; | |||
--spacing-m: 16px; | |||
--spacing-l: 24px; | |||
--spacing-xl: 32px; | |||
--spacing-xxl: 64px; | |||
--width-container: 1200px; | |||
} | |||
.hero-section{ | |||
margin: 5%; | |||
padding-bottom: 53%; | |||
} | |||
.hero-section2{ | |||
margin: 5%; | |||
padding-bottom: 88%; | |||
} | |||
.card-grid{ | |||
display: grid; | |||
width: 100%; | |||
} | |||
.card{ | |||
list-style: none; | |||
position: relative; | |||
} | |||
.card:before{ | |||
content: ''; | |||
display: block; | |||
width: 100%; | |||
} | |||
.card__background{ | |||
width: 100%; | |||
height: auto; | |||
background-size: cover; | |||
background-position: center; | |||
bottom: 0; | |||
filter: brightness(0.95) saturate(1) contrast(0.95); | |||
left: 0; | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
transform-origin: center; | |||
trsnsform: scale(1) translateZ(0); | |||
transition: | |||
filter 1s, | |||
transform 1s; | |||
} | |||
.card:hover .card__background{ | |||
transform: scale(1.05) translateZ(0); | |||
} | |||
.card__content{ | |||
left: 0; | |||
margin: var(--spacing-l); | |||
position: absolute; | |||
top: 0; | |||
text-align: left; | |||
} | |||
.card__category{ | |||
color: var(--text-light); | |||
font-size: 0.9rem; | |||
margin-bottom: var(--spacing-s); | |||
text-transform: uppercase; | |||
} | |||
.card__heading{ | |||
color: var(--text-lighter); | |||
font-size: 1.9rem; | |||
text-shadow: 2px 2px 20px rgba(0,0,0,0.2); | |||
line-height: 1.4; | |||
} | |||
h3.card__heading { | |||
margin-top: -10px; | |||
} | } | ||
Linha 492: | Linha 579: | ||
/* Tests */ | /* Tests */ | ||
* { | |||
box-sizing: border-box; | |||
} | |||
.slideshow-container { | |||
max-width: 1000px; | |||
position: relative; | |||
margin: auto; | |||
} | |||
} | |||
. | .mySlides { | ||
display: none; | |||
} | |||
} | |||
. | .prev, | ||
.next { | |||
cursor: pointer; | |||
} | position: absolute; | ||
top: 50%; | |||
width: auto; | |||
margin-top: -22px; | |||
padding: 16px; | |||
color: white; | |||
font-weight: bold; | |||
font-size: 18px; | |||
transition: 0.6s ease; | |||
border-radius: 0 3px 3px 0; | |||
} | |||
. | .next { | ||
right: 0; | |||
border-radius: 3px 0 0 3px; | |||
} | } | ||
. | .prev:hover, | ||
.next:hover { | |||
background-color: rgba(0, 0, 0, 0.8); | |||
} | } | ||
. | .text { | ||
color: #f2f2f2; | |||
font-size: 15px; | |||
padding: 8px 12px; | |||
} | position: absolute; | ||
bottom: 8px; | |||
width: 100%; | |||
text-align: center; | |||
} | |||
. | .numbertext { | ||
color: #f2f2f2; | |||
font-size: 12px; | |||
padding: 8px 12px; | |||
position: absolute; | |||
top: 0; | |||
} | |||
} | |||
. | .dot { | ||
cursor: pointer; | |||
} | height: 15px; | ||
width: 15px; | |||
margin: 0 2px; | |||
background-color: #bbb; | |||
border-radius: 50%; | |||
display: inline-block; | |||
transition: background-color 0.6s ease; | |||
} | |||
. | .active, | ||
.dot:hover { | |||
background-color: #717171; | |||
} | |||
} | |||
. | .fade { | ||
-webkit-animation-name: fade; | |||
-webkit-animation-duration: 1.5s; | |||
animation-name: fade; | |||
animation-duration: 1.5s; | |||
} | } | ||
@-webkit-keyframes fade { | |||
from { | |||
opacity: .4; | |||
} | |||
to { | |||
} | opacity: 1; | ||
} | |||
} | |||
@keyframes fade { | |||
from { | |||
} | opacity: .4; | ||
} | |||
to { | |||
opacity: 1; | |||
} | |||
} |