193 lines
5.0 KiB
SCSS
193 lines
5.0 KiB
SCSS
.DownloadPage{
|
|
background: var(--bg);
|
|
display: flex;
|
|
gap: 50px;
|
|
width: 100%;
|
|
padding-block: 100px;
|
|
position: relative;
|
|
flex-direction: column;
|
|
|
|
>main{
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: max(2vh,25px);
|
|
text-align: center;
|
|
z-index: 99;
|
|
padding-top: 0px ;
|
|
>h1{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
color: var(--white);
|
|
font-size: max(4vw,50px);
|
|
|
|
}
|
|
p{
|
|
color: var(--white);
|
|
font-size: max(1.3vw,15px);
|
|
width: 50%;
|
|
}
|
|
>div{
|
|
display: flex;
|
|
gap: max(1vw,10px);
|
|
button{
|
|
all: unset;
|
|
padding: max(.5vw,8px) max(1.5vw,30px);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: max(1vw,10px);
|
|
color: var(--white);
|
|
border: 1px solid var(--white);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: .5s ease-in-out;
|
|
padding-block: 10px;
|
|
&:hover{
|
|
background: var(--gradient);
|
|
scale: 1.1;
|
|
}
|
|
h6{
|
|
font-size: max(10px,1vw);
|
|
font-weight: normal;
|
|
line-height: 21px;
|
|
}
|
|
h5{
|
|
font-weight: bold;
|
|
font-size: max(12px,1vw);
|
|
line-height: 21px;
|
|
}
|
|
svg{
|
|
font-size: max(20px,1.3vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 700px;
|
|
background: var(--primary);
|
|
overflow: hidden;
|
|
.circle{
|
|
position: absolute;
|
|
width: 66%;
|
|
top: 0%;
|
|
left: 50%;
|
|
transform: translate(-50%,0%);
|
|
z-index: 9999;
|
|
|
|
}
|
|
|
|
}
|
|
.main{
|
|
position: relative;
|
|
z-index: 99999;
|
|
// margin-top: 300px;
|
|
width: 80%;
|
|
object-fit: contain;
|
|
margin-inline: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width:900px) {
|
|
.DownloadPage{
|
|
background: var(--bg);
|
|
display: flex;
|
|
gap: 50px;
|
|
width: 100%;
|
|
padding-block: 100px;
|
|
position: relative;
|
|
flex-direction: column;
|
|
|
|
>main{
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: max(2vh,25px);
|
|
text-align: center;
|
|
z-index: 99;
|
|
padding-top: 0px ;
|
|
>h1{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
color: var(--white);
|
|
font-size: max(4vw,50px);
|
|
|
|
}
|
|
p{
|
|
color: var(--white);
|
|
font-size: max(1.3vw,15px);
|
|
width: 50%;
|
|
}
|
|
>div{
|
|
display: flex;
|
|
gap: max(1vw,10px);
|
|
button{
|
|
all: unset;
|
|
padding: max(.5vw,8px) max(1.5vw,30px);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: max(1vw,10px);
|
|
color: var(--white);
|
|
border: 1px solid var(--white);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
h6{
|
|
font-size: max(12px,1vw);
|
|
}
|
|
h5{
|
|
font-weight: bold;
|
|
font-size: max(14px,1vw);
|
|
}
|
|
svg{
|
|
font-size: max(20px,1.3vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
>div{
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 700px;
|
|
background: var(--primary);
|
|
overflow: hidden;
|
|
.circle{
|
|
position: absolute;
|
|
width: 800px;
|
|
top: 0%;
|
|
left: 50%;
|
|
transform: translate(-50%,0%);
|
|
z-index: 9999;
|
|
|
|
}
|
|
|
|
}
|
|
.main{
|
|
position: relative;
|
|
z-index: 99999;
|
|
// margin-top: 300px;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
margin-inline: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |