165 lines
2.7 KiB
SCSS
165 lines
2.7 KiB
SCSS
|
||
#carry {
|
||
position: static;
|
||
background: white;
|
||
padding-top: 20vh;
|
||
min-height: 100vh;
|
||
|
||
.title {
|
||
margin-bottom: 46px;
|
||
|
||
font-size: 60px;
|
||
line-height: 110%;
|
||
}
|
||
|
||
.description {
|
||
margin-top: 270px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
font-size: 270px;
|
||
line-height: 65%;
|
||
text-align: center;
|
||
letter-spacing: -0.06em;
|
||
color: rgba(30, 51, 218, 0.15);
|
||
}
|
||
|
||
.description2 {
|
||
|
||
font-weight: 600;
|
||
font-size: 60px;
|
||
line-height: 110%;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.color-emphasis {
|
||
color: #1e33da;
|
||
}
|
||
|
||
.bubbles {
|
||
margin-top: -65vh;
|
||
|
||
p {
|
||
position: relative;
|
||
padding: 7.6rem 4rem;
|
||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||
background-size: contain;
|
||
font-weight: 400;
|
||
font-size: 24px;
|
||
line-height: 130%;
|
||
width: 20rem;
|
||
height: 30vh;
|
||
mix-blend-mode: darken;
|
||
|
||
&:nth-of-type(1) {
|
||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||
padding-left: 3.7rem;
|
||
width: 350px;
|
||
height: 451.56px;
|
||
left: 70%;
|
||
top: 0;
|
||
}
|
||
|
||
&:nth-of-type(2) {
|
||
background: url("img/Ellipse 777.4.png") no-repeat;
|
||
width: 308px;
|
||
height: 451.56px;
|
||
left: 60%;
|
||
margin-top: -20vh;
|
||
}
|
||
|
||
&:nth-of-type(3) {
|
||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||
width: 315px;
|
||
height: 316px;
|
||
left: 50vw;
|
||
margin-top: -9vh;
|
||
z-index: 20;
|
||
padding: 8rem 4rem;
|
||
}
|
||
|
||
&:nth-of-type(4) {
|
||
|
||
width: 315px;
|
||
height: 285px;
|
||
left: 16vw;
|
||
margin-top: -50vh;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.gradient-bg-yellow {
|
||
position: absolute;
|
||
width: 50vw;
|
||
height: 58vh;
|
||
left: 14vw;
|
||
top: 90vh;
|
||
background: radial-gradient(50% 50% at 50% 50%, #FFBA99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%);
|
||
opacity: 0.5;
|
||
transform: rotate(197.68deg);
|
||
}
|
||
|
||
.gradient-bg {
|
||
position: relative;
|
||
width: 50vw;
|
||
height: 58vh;
|
||
left: 22vw;
|
||
top: 98vh;
|
||
background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%);
|
||
opacity: 0.5;
|
||
transform: rotate(-17.32deg);
|
||
}
|
||
|
||
.computer-block {
|
||
background: url('img/Macbook_color 1.png') no-repeat center;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 1080px;
|
||
left: 0;
|
||
top: -4rem;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1600px) {
|
||
#carry {
|
||
.description {
|
||
margin-top: 3vh;
|
||
font-size: 8rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1023px) {
|
||
#carry {
|
||
padding-left: 10vw;
|
||
padding-right: 10vw;
|
||
|
||
|
||
.title {
|
||
font-size: 4rem;
|
||
}
|
||
|
||
.description {
|
||
margin-top: 3vh;
|
||
font-size: 10rem;
|
||
}
|
||
|
||
.computer-block {
|
||
background-size: contain;
|
||
position: relative;
|
||
height: 100vh;
|
||
margin-top: -73vh;
|
||
}
|
||
.bubbles{
|
||
position: relative;
|
||
left: -5vw;
|
||
}
|
||
.gradient-bg{
|
||
top: 19vh;
|
||
left:15vw;
|
||
}
|
||
}
|
||
|
||
}
|