bl-frontend-rs/css/start.css

266 lines
6.4 KiB
CSS
Raw Normal View History

.start-section-container {
display: flex;
2023-04-10 13:25:04 +00:00
flex-direction: column-reverse;
2023-04-26 22:20:39 +00:00
justify-content: start;
align-items: center;
}
.start-section-left-column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-items: start;
2023-04-10 20:35:12 +00:00
width: 100%
}
.start-section-left-column-title-nocolor {
2023-04-10 13:25:04 +00:00
white-space: nowrap;
font-family: Poppins;
2023-04-10 20:35:12 +00:00
font-size: 8vw;
font-weight: 600;
cursor: default;
}
.start-section-left-column-title-colored {
2023-04-10 20:35:12 +00:00
white-space: nowrap;
font-family: Poppins;
2023-04-10 20:35:12 +00:00
font-size: 8vw;
color: #FF6800;
font-weight: 600;
cursor: default;
}
.start-section-left-column-description {
font-family: Poppins;
2023-04-10 20:35:12 +00:00
font-size: 2.8vw;
line-height: 5vw;
color: #6B6B6B;
2023-04-10 20:35:12 +00:00
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;
2023-04-26 22:20:39 +00:00
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%;
2023-04-26 22:20:39 +00:00
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;
2023-04-10 20:35:12 +00:00
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;
}
.start-section-right-column-art-top-right-pill {
position: absolute;
2023-04-10 20:35:12 +00:00
width: clamp(80px, 25vw, 140px);
height: clamp(270px, 75vw, 400px);
left: clamp(120px, 43vw, 500px);
top: 0px;
background: #4C40F7;
2023-04-10 20:35:12 +00:00
border-radius: 65px;
display: flex;
justify-content: center;
align-items: end;
}
.start-section-right-column-art-bottom-left-pill {
position: absolute;
2023-04-10 20:35:12 +00:00
width: clamp(80px, 25vw, 140px);
height: clamp(270px, 75vw, 400px);
right: clamp(120px, 43vw, 500px);
top: 120px;
background: #FFCC00;
2023-04-10 20:35:12 +00:00
border-radius: 65px;
display: flex;
justify-content: center;
align-items: end;
}
.start-section-right-column-art-bottom-right-pill {
position: absolute;
2023-04-10 20:35:12 +00:00
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;
}
.start-section-right-column-subject-1-title {
font-family: Poppins;
color: white;
2023-04-10 20:35:12 +00:00
font-size: clamp(10px, 3vw, 21px);
font-weight: 600;
2023-04-10 20:35:12 +00:00
line-height: clamp(18px, 4.5vw, 25px);
white-space: pre-line;
text-align: center;
}
.start-section-right-column-subject-1-photo {
object-fit: contain;
2023-04-10 20:35:12 +00:00
width: clamp(128px, 40vw, 220px);
2023-04-10 13:25:04 +00:00
}
.start-section-right-column-subject-2-photo {
object-fit: cover;
2023-04-10 20:35:12 +00:00
width: clamp(128px, 40vw, 220px);
margin-right: 7px;
}
.start-section-right-column-subject-2-title {
font-family: Poppins;
color: #2D2D2D;
2023-04-10 20:35:12 +00:00
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;}
}
2023-04-10 13:25:04 +00:00
@media only screen and (min-width: 750px) {
2023-04-10 20:35:12 +00:00
2023-04-10 13:25:04 +00:00
.start-section-container {
height: 600px;
flex-direction: row;
}
2023-04-10 20:35:12 +00:00
.start-section-left-column {
width: clamp(360px, 60vw, 650px);
}
.start-section-left-column-title-nocolor {
2023-04-10 13:25:04 +00:00
font-size: clamp(28px, 4.2vw, 64px);
}
.start-section-left-column-title-colored {
2023-04-10 13:25:04 +00:00
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);
2023-04-10 13:25:04 +00:00
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);
2023-04-10 13:25:04 +00:00
left: initial;
right: min(200px, 20vw);
top: 26px;
}
.start-section-right-column-art-top-right-pill {
2023-04-10 20:35:12 +00:00
width: clamp(150px, 18vw, 165px);
2023-04-10 13:25:04 +00:00
height: clamp(380px, 45vw, 480px);
left: initial;
right: 0px;
top: 0px;
}
.start-section-right-column-art-bottom-left-pill {
2023-04-10 20:35:12 +00:00
width: clamp(150px, 18vw, 165px);
height: clamp(380px, 45vw, 480px);
2023-04-10 13:25:04 +00:00
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);
2023-04-10 20:35:12 +00:00
left: initial;
2023-04-10 13:25:04 +00:00
right: 0px;
top: clamp(400px, 47vw, 500px);
2023-04-10 20:35:12 +00:00
}
.start-section-right-column-subject-1-title {
font-size: clamp(12px, 1.4vw, 21px);
2023-04-10 20:35:12 +00:00
line-height: clamp(24px, 2.8vw, 35px);
}
.start-section-right-column-subject-1-photo {
2023-04-10 20:35:12 +00:00
margin-bottom: -2px;
width: clamp(230px, 27vw, 290px);
}
.start-section-right-column-subject-2-photo {
2023-04-10 20:35:12 +00:00
margin-bottom: -2.3px;
width: clamp(230px, 25vw, 290px);
2023-04-10 13:25:04 +00:00
margin-right: 20px;
}
.start-section-right-column-subject-2-title {
font-size: clamp(12px, 1.4vw, 21px);
}
}
2023-04-10 13:25:04 +00:00
@media only screen and (min-width: 1050px) {
.start-section-right-column-art-bottom-right-pill {
right: -4vw;
}
}