8 500
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 741: | Linha 741: | ||
/* Testes */ | /* Testes */ | ||
body { | |||
margin: 0; | |||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", | |||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", | |||
sans-serif; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
background-color: rgb(22, 20, 24); | |||
color: #eee; | |||
user-select: none; | |||
} | |||
code { | |||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", | |||
monospace; | |||
} | |||
.nft{ | |||
user-select:none; | |||
max-width: 300px; | |||
margin: 5rem auto; | |||
border: 1px solid #ffffff22; | |||
background-color: #282c34; | |||
background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%); | |||
box-shadow: 0 7px 20px 5px #00000088; | |||
border-radius: .7rem; | |||
backdrop-filter: blur(7px); | |||
-webkit-backdrop-filter: blur(7px); | |||
overflow: hidden; | |||
transition: .5s all; | |||
hr{ | |||
width: 100%; | |||
border: none; | |||
border-bottom: 1px solid #88888855; | |||
margin-top: 0; | |||
} | |||
ins{ | |||
text-decoration: none; | |||
} | |||
.main{ | |||
display: flex; | |||
flex-direction: column; | |||
width: 90%; | |||
padding: 1rem; | |||
.tokenImage{ | |||
border-radius: .5rem; | |||
max-width: 100%; | |||
height: 250px; | |||
object-fit: cover; | |||
} | |||
.description{ | |||
margin: .5rem 0; | |||
color: #a89ec9; | |||
} | |||
.tokenInfo{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.price{ | |||
display: flex; | |||
align-items: center; | |||
color: #ee83e5; | |||
font-weight: 700; | |||
ins{ | |||
margin-left: -.3rem; | |||
margin-right: .5rem; | |||
} | |||
} | |||
.duration{ | |||
display: flex; | |||
align-items: center; | |||
color: #a89ec9; | |||
margin-right: .2rem; | |||
ins{ | |||
margin: .5rem; | |||
margin-bottom: .4rem; | |||
} | |||
} | |||
} | |||
.creator{ | |||
display: flex; | |||
align-items: center; | |||
margin-top: .2rem; | |||
margin-bottom: -.3rem; | |||
ins{ | |||
color: #a89ec9; | |||
text-decoration: none; | |||
} | |||
.wrapper{ | |||
display: flex; | |||
align-items: center; | |||
border: 1px solid #ffffff22; | |||
padding: .3rem; | |||
margin: 0; | |||
margin-right: .5rem; | |||
border-radius: 100%; | |||
box-shadow: inset 0 0 0 4px #000000aa; | |||
img{ | |||
border-radius: 100%; | |||
border: 1px solid #ffffff22; | |||
width: 2rem; | |||
height: 2rem; | |||
object-fit: cover; | |||
margin: 0; | |||
} | |||
} | |||
} | |||
} | |||
::before{ | |||
position: fixed; | |||
content: ""; | |||
box-shadow: 0 0 100px 40px #ffffff08; | |||
top: -10%; | |||
left: -100%; | |||
transform: rotate(-45deg); | |||
height: 60rem; | |||
transition: .7s all; | |||
} | |||
&:hover{ | |||
border: 1px solid #ffffff44; | |||
box-shadow: 0 7px 50px 10px #000000aa; | |||
transform: scale(1.015); | |||
filter: brightness(1.3); | |||
::before{ | |||
filter: brightness(.5); | |||
top: -100%; | |||
left: 200%; | |||
} | |||
} | |||
} | |||
.bg{ | |||
position: fixed; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
h1{ | |||
font-size: 20rem; | |||
filter: opacity(0.5); | |||
} | |||
} |