450 lines
6.8 KiB
CSS
450 lines
6.8 KiB
CSS
/* RESET */
|
|
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* FONT */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@500;600;700;800&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
|
|
|
|
/* VAR */
|
|
|
|
:root{
|
|
--Background: #1D1D1F ;
|
|
--White: #ffffff ;
|
|
--Gray: rgba(255, 255, 255, 0.7) ;
|
|
--Orange: #fe6601 ;
|
|
--Hover: #FE7920 ;
|
|
}
|
|
|
|
|
|
/* SCROLL BAR */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 7px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--Orange);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--Background);
|
|
}
|
|
|
|
/* PAGE */
|
|
|
|
body{
|
|
background: #1D1D1F;
|
|
color: var(--White);
|
|
overflow-x: hidden;
|
|
margin: 0 125px;
|
|
}
|
|
|
|
.topbar{
|
|
margin-top: 10px;;
|
|
padding: 15px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.topbar .left{
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topbar .left img{
|
|
border-radius: 50%;
|
|
height: 40px;
|
|
}
|
|
|
|
.topbar .left p{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 22px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.topbar .middle ul{
|
|
display: flex;
|
|
align-items: center;
|
|
list-style: none;
|
|
}
|
|
|
|
.topbar .middle a{
|
|
color: var(--Gray);
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.topbar .middle li {
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.topbar .middle li:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.topbar .middle li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.topbar .middle a:hover{
|
|
color: var(--Hover);
|
|
}
|
|
|
|
.topbar .rigth ul{
|
|
list-style: none;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
background-color: var(--Orange);
|
|
padding: 6px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.topbar .rigth a{
|
|
padding: 6px;
|
|
color: var(--White);
|
|
}
|
|
|
|
.topbar .rigth li{
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.topbar .rigth ul:hover{
|
|
background: var(--Hover);
|
|
}
|
|
|
|
|
|
|
|
/* CONTENT */
|
|
|
|
.box1{
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 125px;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
|
|
.box1 .left h1{
|
|
font-family: 'Sen', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 96px;
|
|
line-height: 96px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.box1 .left p{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 27px;
|
|
font-size: 18px;
|
|
color: var(--Gray);
|
|
}
|
|
|
|
.box1 .button{
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.box1 .button ul,
|
|
.box1 .button a{
|
|
text-decoration: none;
|
|
list-style: none;
|
|
display: flex;
|
|
color: var(--White);
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.box1 .button li{
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.box1 .button .discord{
|
|
padding: 18px;
|
|
background-color: var(--Orange);
|
|
border-radius: 30px;
|
|
width: auto;
|
|
|
|
}
|
|
|
|
.box1 .button .discord:hover{
|
|
background-color: var(--Hover);
|
|
|
|
|
|
}
|
|
|
|
.box1 .button .server{
|
|
padding: 18px;
|
|
background: transparent;
|
|
color: #434A57;
|
|
border: var(--Gray) solid 2px;
|
|
border-radius: 30px;
|
|
width: auto;
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
.box1 .button .server:hover{
|
|
background: var(--Gray);
|
|
|
|
}
|
|
|
|
.box1 .discord i{
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
.box1 .server i{
|
|
margin-left: 10px;
|
|
color: var(--White);
|
|
|
|
|
|
}
|
|
|
|
.box1 .rigth img{
|
|
height: 350px;
|
|
margin-left: 235px;
|
|
}
|
|
|
|
|
|
.box2 {
|
|
margin-bottom: 255px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 175px 125px 0 125px;
|
|
|
|
|
|
}
|
|
|
|
.box2 .left img{
|
|
width: 622px;
|
|
height: 465px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.box2 .right{
|
|
margin-left: 153px;
|
|
}
|
|
|
|
.box2 .right .title{
|
|
font-family: 'Sen', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 62px;
|
|
margin-bottom: 47px;
|
|
color: var(--White);
|
|
|
|
}
|
|
|
|
.box2 .right p{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 27px;
|
|
color: var(--Gray) ;
|
|
|
|
}
|
|
|
|
|
|
.box3 {
|
|
display: flex;
|
|
margin: 175px 125px 255px 125px;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.box3 .rigth img{
|
|
width: 622px;
|
|
height: 465px;
|
|
border-radius: 30px;
|
|
margin-left: 153px;
|
|
}
|
|
|
|
.box3 .left .title{
|
|
font-family: 'Sen', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 62px;
|
|
margin-bottom: 47px;
|
|
color: var(--White);
|
|
|
|
}
|
|
|
|
.box3 .left p{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 27px;
|
|
color: var(--Gray);
|
|
}
|
|
|
|
.box4 {
|
|
display: flex;
|
|
margin: 175px 125px 250px 125px;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
.box4 .left img{
|
|
width: 622px;
|
|
height: 465px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.box4 .right .title{
|
|
font-family: 'Sen', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 48px;
|
|
line-height: 62px;
|
|
margin-bottom: 47px;
|
|
color: var(--White);
|
|
|
|
}
|
|
|
|
.box4 .right{
|
|
margin-left: 153px;
|
|
}
|
|
|
|
.box4 .right p{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 27px;
|
|
color: var(--Gray);
|
|
}
|
|
|
|
.box5{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-bottom: 175px;
|
|
}
|
|
|
|
.box5 p{
|
|
font-family: 'Sen', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 56px;
|
|
line-height: 73px;
|
|
color: var(--White);
|
|
margin-bottom: 57px;
|
|
width: 100%;
|
|
}
|
|
|
|
.box5 .button li, a{
|
|
text-decoration: none;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.box5 .button a{
|
|
color: var(--White);
|
|
padding: 18px;
|
|
background-color: var(--Orange);
|
|
border-radius: 30px;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 25px;
|
|
|
|
}
|
|
|
|
.box5 .button a:hover{
|
|
background-color: var(--Hover);
|
|
}
|
|
|
|
.box5 .button{
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
.box5 .magic {
|
|
background: linear-gradient(90deg, rgba(165,7,255,1) 0%, rgba(8,39,235,1) 35%, rgba(255,0,181,1) 100%);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
|
|
|
|
/* Footer */
|
|
|
|
.footer{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.footer .left ul, .rigth{
|
|
display: flex;
|
|
text-decoration: none;
|
|
list-style: none;
|
|
}
|
|
|
|
.footer .left a{
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: white;
|
|
}
|
|
|
|
.footer .left a:hover{
|
|
color: var(--Hover);
|
|
}
|
|
|
|
|
|
.footer .left li {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.footer .left li:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.footer .left li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.footer .reddit {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.footer .rigth .discord, .reddit, .twitter{
|
|
cursor: pointer;
|
|
background-color: #29292A;
|
|
padding: 10px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.footer .rigth .discord:hover{
|
|
background: #5865F2;
|
|
}
|
|
|
|
.footer .rigth .reddit:hover{
|
|
background: #FF4500;
|
|
}
|
|
|
|
.footer .rigth .twitter:hover{
|
|
background-color: #1DA1F2;
|
|
} |