Changeset View
Changeset View
Standalone View
Standalone View
landing/landing.css
Show All 37 Lines | .heroContainer { | ||||
overflow: hidden; | overflow: hidden; | ||||
} | } | ||||
.heroImage { | .heroImage { | ||||
flex: 1; | flex: 1; | ||||
position: relative; | position: relative; | ||||
} | } | ||||
.glow { | |||||
position: absolute; | |||||
width: 448px; | |||||
height: 360px; | |||||
border-radius: 50%; | |||||
background-color: var(--violet-dark-40); | |||||
top: 200px; | |||||
left: 224px; | |||||
filter: blur(80px); | |||||
} | |||||
.heroImage picture img { | .heroImage picture img { | ||||
object-fit: cover; | object-fit: cover; | ||||
object-position: left center; | object-position: left center; | ||||
position: absolute; | position: absolute; | ||||
left: 120px; | left: 120px; | ||||
top: 120px; | top: 120px; | ||||
width: 624px; | width: 624px; | ||||
height: 472px; | height: 472px; | ||||
z-index: var(--glow-z-index); | |||||
} | } | ||||
@media screen and (max-width: 1280px) { | @media screen and (max-width: 1280px) { | ||||
.heroContainer { | .heroContainer { | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
padding: 16px 32px; | padding: 16px 32px; | ||||
} | } | ||||
.heroImage { | .heroImage { | ||||
margin-bottom: 24px; | margin-bottom: 24px; | ||||
max-width: 600px; | max-width: 600px; | ||||
} | } | ||||
.glow { | |||||
position: absolute; | |||||
width: 70%; | |||||
height: 70%; | |||||
border-radius: 50%; | |||||
background-color: var(--violet-dark-40); | |||||
top: 112px; | |||||
left: 100px; | |||||
filter: blur(80px); | |||||
} | |||||
.heroImage picture img { | .heroImage picture img { | ||||
top: 0; | top: 0; | ||||
left: 0; | left: 0; | ||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
position: relative; | position: relative; | ||||
} | } | ||||
} | } |