270 lines
6.4 KiB
CSS
270 lines
6.4 KiB
CSS
.start-section-container {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
.start-section-left-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: start;
|
|
width: 100%
|
|
}
|
|
.start-section-left-column-title-nocolor {
|
|
white-space: nowrap;
|
|
font-family: Poppins;
|
|
font-size: 8vw;
|
|
font-weight: 600;
|
|
cursor: default;
|
|
}
|
|
.start-section-left-column-title-colored {
|
|
white-space: nowrap;
|
|
font-family: Poppins;
|
|
font-size: 8vw;
|
|
color: #FF6800;
|
|
font-weight: 600;
|
|
cursor: default;
|
|
}
|
|
.start-section-left-column-description {
|
|
font-family: Poppins;
|
|
font-size: 2.8vw;
|
|
line-height: 5vw;
|
|
|
|
color: #6B6B6B;
|
|
|
|
width: 80%;
|
|
margin: 24px 0px 30px 0px;
|
|
cursor: default;
|
|
}
|
|
.start-section-left-column-button {
|
|
background: #4C40F7;
|
|
border-radius: 12px;
|
|
font-family: Poppins;
|
|
font-size: 18px;
|
|
font-weight: 600px;
|
|
color: white;
|
|
padding: 20px;
|
|
width: clamp(200px, 40vw, 400px);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5));
|
|
}
|
|
.start-section-left-column-button:hover {
|
|
cursor: pointer;
|
|
background: #8982f0;
|
|
|
|
scale: 1.1;
|
|
transition-duration: 0.4s;
|
|
}
|
|
|
|
.start-section-right-column {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
width: 100%;
|
|
height: clamp(500px, 105vw, 620px);
|
|
scale: 0.9;
|
|
}
|
|
.start-section-right-column-canvas {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.start-section-right-column-art-top-left-pill {
|
|
position: absolute;
|
|
width: clamp(120px, 37.5vw, 220px);
|
|
height: clamp(50px, 15vw, 80px);
|
|
right: clamp(120px, 43vw, 500px);
|
|
top: 26px;
|
|
|
|
background: #4C40F7;
|
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
|
border-radius: 80px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.start-section-right-column-art-top-right-pill {
|
|
position: absolute;
|
|
width: clamp(80px, 25vw, 140px);
|
|
height: clamp(270px, 75vw, 400px);
|
|
left: clamp(120px, 43vw, 500px);
|
|
top: 0px;
|
|
|
|
background: #4C40F7;
|
|
border-radius: 65px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-left-pill {
|
|
position: absolute;
|
|
width: clamp(80px, 25vw, 140px);
|
|
height: clamp(270px, 75vw, 400px);
|
|
right: clamp(120px, 43vw, 500px);
|
|
top: 120px;
|
|
|
|
background: #FFCC00;
|
|
border-radius: 65px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-right-pill {
|
|
position: absolute;
|
|
width: clamp(120px, 37.5vw, 220px);
|
|
height: clamp(50px, 15vw, 80px);
|
|
top: clamp(300px, 80vw, 450px);
|
|
left: clamp(120px, 43vw, 500px);
|
|
|
|
background: #FFCC00;
|
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
|
border-radius: 80px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.start-section-right-column-subject-1-title {
|
|
font-family: Poppins;
|
|
color: white;
|
|
font-size: clamp(10px, 3vw, 21px);
|
|
font-weight: 600;
|
|
line-height: clamp(18px, 4.5vw, 25px);
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
}
|
|
.start-section-right-column-subject-1-photo {
|
|
object-fit: contain;
|
|
width: clamp(128px, 40vw, 220px);
|
|
|
|
}
|
|
.start-section-right-column-subject-2-photo {
|
|
object-fit: cover;
|
|
width: clamp(128px, 40vw, 220px);
|
|
margin-right: 7px;
|
|
}
|
|
.start-section-right-column-subject-2-title {
|
|
font-family: Poppins;
|
|
color: #2D2D2D;
|
|
font-size: clamp(10px, 3vw, 21px);
|
|
font-weight: 600;
|
|
line-height: clamp(18px, 4.5vw, 25px);
|
|
font-weight: 600;
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes twitch {
|
|
0% {scale: 1;}
|
|
5% {scale: 1.1;}
|
|
10% {scale: 1;}
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 750px) {
|
|
|
|
.start-section-container {
|
|
height: 600px;
|
|
flex-direction: row;
|
|
}
|
|
.start-section-left-column {
|
|
width: clamp(360px, 60vw, 650px);
|
|
}
|
|
.start-section-left-column-title-nocolor {
|
|
font-size: clamp(28px, 4.2vw, 64px);
|
|
}
|
|
.start-section-left-column-title-colored {
|
|
font-size: clamp(28px, 4.2vw, 64px);
|
|
|
|
}
|
|
.start-section-left-column-description {
|
|
font-size: clamp(12px, 1.5vw, 18px);
|
|
line-height: clamp(24px, 3vw, 36px);
|
|
|
|
width: clamp(200px, 30vw, 390px);
|
|
|
|
margin: 20px 0px 26px 0px;
|
|
margin-top: clamp(20px, 2.5vw, 50px);
|
|
margin-bottom: clamp(26px, 3vw, 65px);
|
|
}
|
|
.start-section-left-column-button {
|
|
font-size: clamp(13px, 1.6vw, 20px);
|
|
padding: clamp(15px, 1.8vw, 25px);
|
|
width: clamp(150px, 17vw, 250px);
|
|
}
|
|
|
|
.start-section-right-column {
|
|
width: 100%;
|
|
height: clamp(100%, 50vw, 750px)
|
|
}
|
|
.start-section-right-column-art-top-left-pill {
|
|
width: clamp(120px, 20vw, 250px);
|
|
height: clamp(60px, 7vw, 80px);
|
|
left: initial;
|
|
right: min(200px, 20vw);
|
|
top: 26px;
|
|
}
|
|
|
|
.start-section-right-column-art-top-right-pill {
|
|
width: clamp(150px, 18vw, 165px);
|
|
height: clamp(380px, 45vw, 480px);
|
|
left: initial;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-left-pill {
|
|
width: clamp(150px, 18vw, 165px);
|
|
height: clamp(380px, 45vw, 480px);
|
|
left: initial;
|
|
right: min(200px, 20vw);
|
|
top: 120px;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-right-pill {
|
|
width: clamp(120px, 20vw, 250px);
|
|
height: clamp(60px, 7vw, 80px);
|
|
left: initial;
|
|
right: 0px;
|
|
top: clamp(400px, 47vw, 500px);
|
|
|
|
}
|
|
|
|
.start-section-right-column-subject-1-title {
|
|
font-size: clamp(12px, 1.4vw, 21px);
|
|
line-height: clamp(24px, 2.8vw, 35px);
|
|
}
|
|
.start-section-right-column-subject-1-photo {
|
|
margin-bottom: -2px;
|
|
width: clamp(230px, 27vw, 290px);
|
|
}
|
|
.start-section-right-column-subject-2-photo {
|
|
margin-bottom: -2.3px;
|
|
width: clamp(230px, 25vw, 290px);
|
|
margin-right: 20px;
|
|
}
|
|
.start-section-right-column-subject-2-title {
|
|
font-size: clamp(12px, 1.4vw, 21px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1050px) {
|
|
.start-section-right-column-art-bottom-right-pill {
|
|
right: -4vw;
|
|
}
|
|
} |