initial commit
This commit is contained in:
450
style.css
Normal file
450
style.css
Normal file
@ -0,0 +1,450 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user