Changeset View
Changeset View
Standalone View
Standalone View
landing/landing.css
- This file was copied to landing/hero.css.
Show All 19 Lines | |||||
.innerContainerMobileNav { | .innerContainerMobileNav { | ||||
overflow-y: hidden; | overflow-y: hidden; | ||||
} | } | ||||
.pageContentContainer { | .pageContentContainer { | ||||
position: relative; | position: relative; | ||||
} | } | ||||
.heroSection { | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
.heroContainer { | |||||
width: 1850px; | |||||
display: flex; | |||||
flex-direction: row-reverse; | |||||
overflow: hidden; | |||||
} | |||||
.heroImage { | |||||
flex: 1; | |||||
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 { | |||||
object-fit: cover; | |||||
object-position: left center; | |||||
position: absolute; | |||||
left: 120px; | |||||
top: 120px; | |||||
width: 624px; | |||||
height: 472px; | |||||
z-index: var(--glow-z-index); | |||||
} | |||||
@media screen and (max-width: 1280px) { | |||||
.heroContainer { | |||||
flex-direction: column; | |||||
align-items: center; | |||||
padding: 16px 32px; | |||||
} | |||||
.heroImage { | |||||
margin-bottom: 24px; | |||||
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 { | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
position: relative; | |||||
} | |||||
} |