Changeset View
Changeset View
Standalone View
Standalone View
web/e.cash/styles/pages/homepage.js
Show First 20 Lines • Show All 78 Lines • ▼ Show 20 Lines | export const Hero = styled.div` | ||||
} | } | ||||
`; | `; | ||||
export const ButtonCtn = styled.div` | export const ButtonCtn = styled.div` | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
margin-top: 40px; | margin-top: 40px; | ||||
`; | `; | ||||
export const HeroImage = styled.div` | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
margin: auto; | |||||
width: 80%; | |||||
height: 100%; | |||||
z-index: -1; | |||||
animation: bounce 6s infinite; | |||||
img { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
object-fit: contain; | |||||
${props => props.theme.filters.grayscale}; | |||||
} | |||||
@keyframes bounce { | |||||
0% { | |||||
transform: translateY(0); | |||||
} | |||||
50% { | |||||
transform: translateY(-20px); | |||||
} | |||||
100% { | |||||
transform: translateY(0); | |||||
} | |||||
} | |||||
`; |