179 lines
3.5 KiB
CSS
179 lines
3.5 KiB
CSS
|
.start-section-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
height: 600px;
|
||
|
|
padding: 0px 10vw;
|
||
|
|
}
|
||
|
|
.start-section-left-column {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: start;
|
||
|
|
min-width: 571px;
|
||
|
|
}
|
||
|
|
.start-section-left-column-title-nocolor {
|
||
|
|
font-family: Poppins;
|
||
|
|
font-size: 56px;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.start-section-left-column-title-colored {
|
||
|
|
font-family: Poppins;
|
||
|
|
font-size: 56px;
|
||
|
|
color: #FF6800;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.start-section-left-column-description {
|
||
|
|
font-family: Poppins;
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 32px;
|
||
|
|
color: #6B6B6B;
|
||
|
|
|
||
|
|
width: 365px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.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: 200px;
|
||
|
|
top: 26px;
|
||
|
|
|
||
|
|
background: #4C40F7;
|
||
|
|
box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15);
|
||
|
|
border-radius: 80px;
|
||
|
|
|
||
|
|
animation-name: twitch;
|
||
|
|
animation-duration: 8s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.start-section-right-column-art-top-right-pill {
|
||
|
|
position: absolute;
|
||
|
|
width: 177px;
|
||
|
|
height: 400px;
|
||
|
|
right: 15px;
|
||
|
|
top: 0px;
|
||
|
|
|
||
|
|
background: #4C40F7;
|
||
|
|
border-radius: 80px;
|
||
|
|
|
||
|
|
animation-name: twitch;
|
||
|
|
animation-duration: 11s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.start-section-right-column-art-bottom-left-pill {
|
||
|
|
position: absolute;
|
||
|
|
width: 177px;
|
||
|
|
height: 400px;
|
||
|
|
right: 220px;
|
||
|
|
top: 150px;
|
||
|
|
|
||
|
|
background: #FFCC00;
|
||
|
|
border-radius: 80px;
|
||
|
|
|
||
|
|
animation-name: twitch;
|
||
|
|
animation-duration: 10s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.start-section-right-column-art-bottom-right-pill {
|
||
|
|
position: absolute;
|
||
|
|
width: 289px;
|
||
|
|
height: 88px;
|
||
|
|
right: -100px;
|
||
|
|
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;
|
||
|
|
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;}
|
||
|
|
}
|