246 lines
5.6 KiB
CSS
246 lines
5.6 KiB
CSS
.start-section-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
height: 600px;
|
|
}
|
|
.start-section-left-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: start;
|
|
min-width: min(55vw, 800px);
|
|
}
|
|
.start-section-left-column-title-nocolor {
|
|
font-family: Poppins;
|
|
font-size: clamp(30px, 4.5vw, 64px);
|
|
font-weight: 600;
|
|
cursor: default;
|
|
}
|
|
.start-section-left-column-title-colored {
|
|
font-family: Poppins;
|
|
font-size: clamp(30px, 4.5vw, 64px);
|
|
color: #FF6800;
|
|
font-weight: 600;
|
|
cursor: default;
|
|
}
|
|
.start-section-left-column-description {
|
|
font-family: Poppins;
|
|
font-size: clamp(12px, 1.5vw, 18px);
|
|
line-height: clamp(24px, 3vw, 36px);
|
|
|
|
color: #6B6B6B;
|
|
|
|
width: clamp(200px, 30vw, 420px);
|
|
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: 200px;
|
|
|
|
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: 550px;
|
|
}
|
|
.start-section-right-column-canvas {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.start-section-right-column-art-top-left-pill {
|
|
position: absolute;
|
|
width: 250px;
|
|
height: 88px;
|
|
right: 300px;
|
|
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;
|
|
}
|
|
|
|
.start-section-right-column-art-top-right-pill {
|
|
position: absolute;
|
|
width: 177px;
|
|
height: 400px;
|
|
right: 115px;
|
|
top: 0px;
|
|
|
|
background: #4C40F7;
|
|
border-radius: 80px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-left-pill {
|
|
position: absolute;
|
|
width: 177px;
|
|
height: 400px;
|
|
right: 0;
|
|
top: 150px;
|
|
|
|
background: #FFCC00;
|
|
border-radius: 80px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-right-pill {
|
|
position: absolute;
|
|
width: 289px;
|
|
height: 88px;
|
|
top: 440px;
|
|
|
|
background: #FFCC00;
|
|
box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15);
|
|
border-radius: 80px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.start-section-right-column-subject-1-title {
|
|
font-family: Poppins;
|
|
color: white;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 20px;
|
|
white-space: pre-line;
|
|
text-align: center;
|
|
}
|
|
.start-section-right-column-subject-1-photo {
|
|
object-fit: contain;
|
|
width: 271px;
|
|
}
|
|
.start-section-right-column-subject-2-photo {
|
|
object-fit: cover;
|
|
width: 592px;
|
|
}
|
|
.start-section-right-column-subject-2-title {
|
|
font-family: Poppins;
|
|
color: #2D2D2D;
|
|
font-size: 18px;
|
|
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: 850px) {
|
|
.start-section-left-column-title-nocolor {
|
|
font-size: clamp(30px, 4.5vw, 64px);
|
|
}
|
|
.start-section-left-column-title-colored {
|
|
font-size: clamp(30px, 4.5vw, 64px);
|
|
|
|
}
|
|
.start-section-left-column-description {
|
|
font-size: clamp(12px, 1.5vw, 18px);
|
|
line-height: clamp(24px, 3vw, 36px);
|
|
|
|
width: clamp(200px, 30vw, 420px);
|
|
|
|
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%;
|
|
max-width: 370px;
|
|
height: clamp(100%, 50vw, 750px)
|
|
}
|
|
.start-section-right-column-art-top-left-pill {
|
|
width: clamp(120px, 20vw, 250px);
|
|
height: clamp(60px, 7vw, 80px);
|
|
right: min(200px, 20vw);
|
|
top: 26px;
|
|
}
|
|
|
|
.start-section-right-column-art-top-right-pill {
|
|
width: clamp(150px, 18vw, 180px);
|
|
height: clamp(340px, 40vw, 480px);
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.start-section-right-column-art-bottom-left-pill {
|
|
width: clamp(150px, 18vw, 180px);
|
|
height: clamp(340px, 40vw, 480px);
|
|
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: clamp(0px, 16vw, 190px);
|
|
top: clamp(350px, 42vw, 500px);
|
|
}
|
|
|
|
.start-section-right-column-subject-1-title {
|
|
font-size: clamp(12px, 1.4vw, 21px);
|
|
}
|
|
.start-section-right-column-subject-1-photo {
|
|
width: clamp(220px, 21vw, 280px);
|
|
}
|
|
.start-section-right-column-subject-2-photo {
|
|
width: clamp(500px, 60vw, 650px);
|
|
}
|
|
.start-section-right-column-subject-2-title {
|
|
font-size: clamp(12px, 1.4vw, 21px);
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1000px) {
|
|
}
|
|
@media only screen and (min-width: 1500px) {
|
|
}
|
|
@media only screen and (min-width: 1700px) {
|
|
} |