You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.0 KiB
SCSS
132 lines
2.0 KiB
SCSS
.card {
|
|
--on-background: #122F60;
|
|
--on-background-secondary: #2C4678;
|
|
--background: #D8E2FF;
|
|
width: 100%;
|
|
height: 580px;
|
|
position: relative;
|
|
}
|
|
|
|
.mockupPhoneContainer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.backdropImage {
|
|
z-index: 1;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
height: 650px;
|
|
}
|
|
|
|
.ridebusImageMask {
|
|
z-index: 1;
|
|
position: absolute;
|
|
width: 640px;
|
|
height: 640px;
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
mask-position: 50%;
|
|
bottom: -140px;
|
|
right: -140px;
|
|
}
|
|
|
|
.ridebusImageAnchor {
|
|
bottom: 320px;
|
|
left: 320px;
|
|
position: absolute;
|
|
}
|
|
|
|
.ridebusImage {
|
|
z-index: 1;
|
|
bottom: -400px;
|
|
left: -400px;
|
|
position: absolute;
|
|
width: 800px;
|
|
height: 800px;
|
|
}
|
|
|
|
.screenshot {
|
|
z-index: 1;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
width: auto;
|
|
height: 650px;
|
|
}
|
|
|
|
.smallCitiesLine {
|
|
z-index: 1;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
right: -50px;
|
|
bottom: 260px;
|
|
transform-origin: right center;
|
|
transform: rotate(4deg);
|
|
|
|
svg {
|
|
width: 220px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.bigCitiesLine {
|
|
z-index: 1;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
right: -280px;
|
|
bottom: 100px;
|
|
transform-origin: right center;
|
|
transform: rotate(356deg);
|
|
gap: 9px;
|
|
|
|
svg {
|
|
width: 260px;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.card {
|
|
height: 490px;
|
|
}
|
|
.ridebusImageMask {
|
|
width: 440px;
|
|
height: 440px;
|
|
bottom: -70px;
|
|
right: -110px;
|
|
}
|
|
.ridebusImageAnchor {
|
|
bottom: 220px;
|
|
left: 220px;
|
|
}
|
|
.smallCitiesLine {
|
|
bottom: 200px;
|
|
}
|
|
.bigCitiesLine {
|
|
bottom: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
@media (max-width: 800px) {
|
|
.card {
|
|
height: 390px;
|
|
}
|
|
.smallCitiesLine {
|
|
bottom: 160px;
|
|
|
|
svg {
|
|
width: 170px;
|
|
}
|
|
}
|
|
.bigCitiesLine svg {
|
|
width: 200px;
|
|
}
|
|
} |