-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
21 additions
and
183 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,178 +1,8 @@ | ||
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Silkscreen:wght@700&display=swap'); | ||
|
||
body { | ||
background-color: #000; | ||
} | ||
|
||
.main { | ||
position: fixed; | ||
top: 50%; | ||
left: 50%; | ||
height: 1px; | ||
width: 1px; | ||
background-color: #fff; | ||
border-radius: 50%; | ||
box-shadow: -42vw -4vh 0px 0px #fff, 25vw -41vh 0px 0px #fff, | ||
-20vw 49vh 0px 1px #fff, 5vw 40vh 1px 1px #fff, 29vw 19vh 1px 0px #fff, | ||
-44vw -13vh 0px 0px #fff, 46vw 41vh 0px 1px #fff, -3vw -45vh 0px 1px #fff, | ||
47vw 35vh 1px 0px #fff, 12vw -8vh 1px 0px #fff, -34vw 48vh 1px 1px #fff, | ||
32vw 26vh 1px 1px #fff, 32vw -41vh 1px 1px #fff, 0vw 37vh 1px 1px #fff, | ||
34vw -26vh 1px 0px #fff, -14vw -49vh 1px 0px #fff, -12vw 45vh 0px 1px #fff, | ||
-44vw -33vh 0px 1px #fff, -13vw 41vh 0px 0px #fff, -36vw -11vh 0px 1px #fff, | ||
-23vw -24vh 1px 0px #fff, -38vw -27vh 0px 1px #fff, 16vw -19vh 0px 0px #fff, | ||
28vw 33vh 1px 0px #fff, -49vw -4vh 0px 0px #fff, 16vw 32vh 0px 1px #fff, | ||
36vw -18vh 1px 0px #fff, -25vw -30vh 1px 0px #fff, -23vw 24vh 0px 1px #fff, | ||
-2vw -35vh 1px 1px #fff, -25vw 9vh 0px 0px #fff, -15vw -34vh 0px 0px #fff, | ||
-8vw -19vh 1px 0px #fff, -20vw -20vh 1px 1px #fff, 42vw 50vh 0px 1px #fff, | ||
-32vw 10vh 1px 0px #fff, -23vw -17vh 0px 0px #fff, 44vw 15vh 1px 0px #fff, | ||
-40vw 33vh 1px 1px #fff, -43vw 8vh 0px 0px #fff, -48vw -15vh 1px 1px #fff, | ||
-24vw 17vh 0px 0px #fff, -31vw 50vh 1px 0px #fff, 36vw -38vh 0px 1px #fff, | ||
-7vw 48vh 0px 0px #fff, 15vw -32vh 0px 0px #fff, 29vw -41vh 0px 0px #fff, | ||
2vw 37vh 1px 0px #fff, 7vw -40vh 1px 1px #fff, 15vw 18vh 0px 0px #fff, | ||
25vw -13vh 1px 1px #fff, -46vw -12vh 1px 1px #fff, -18vw 22vh 0px 0px #fff, | ||
23vw -9vh 1px 0px #fff, 50vw 12vh 0px 1px #fff, 45vw 2vh 0px 0px #fff, | ||
14vw -48vh 1px 0px #fff, 23vw 43vh 0px 1px #fff, -40vw 16vh 1px 1px #fff, | ||
20vw -31vh 0px 1px #fff, -17vw 44vh 1px 1px #fff, 18vw -45vh 0px 0px #fff, | ||
33vw -6vh 0px 0px #fff, 0vw 7vh 0px 1px #fff, -10vw -18vh 0px 1px #fff, | ||
-19vw 5vh 1px 0px #fff, 1vw 42vh 0px 0px #fff, 22vw 48vh 0px 1px #fff, | ||
39vw -8vh 1px 1px #fff, -6vw -42vh 1px 0px #fff, -47vw 34vh 0px 0px #fff, | ||
-46vw 19vh 0px 1px #fff, -12vw -32vh 0px 0px #fff, -45vw -38vh 0px 1px #fff, | ||
-28vw 18vh 1px 0px #fff, -38vw -46vh 1px 1px #fff, 49vw -6vh 1px 1px #fff, | ||
-28vw 18vh 1px 1px #fff, 10vw -24vh 0px 1px #fff, -5vw -11vh 1px 1px #fff, | ||
33vw -8vh 1px 0px #fff, -16vw 17vh 0px 0px #fff, 18vw 27vh 0px 1px #fff, | ||
-8vw -10vh 1px 1px #fff; | ||
box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, | ||
-45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, | ||
4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, | ||
-47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, | ||
4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, | ||
-16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, | ||
-34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, | ||
48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, | ||
43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, | ||
39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, | ||
11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, | ||
-2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, | ||
42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, | ||
-44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, | ||
18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, | ||
27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, | ||
-43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, | ||
-45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, | ||
-39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, | ||
48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, | ||
21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, | ||
-15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, | ||
-31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, | ||
3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, | ||
35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, | ||
3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, | ||
48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, | ||
-48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, | ||
29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff; | ||
animation: zoom 16s alternate infinite; | ||
} | ||
|
||
@keyframes zoom { | ||
0% { | ||
transform: scale(1); | ||
} | ||
100% { | ||
transform: scale(1.5); | ||
} | ||
} | ||
|
||
.onrir { | ||
font-family: 'Silkscreen', sans-serif; | ||
} | ||
|
||
.paragraph { | ||
font-family: 'Pixelify Sans', sans-serif; | ||
} | ||
|
||
|
||
.ico { | ||
color: var(--color-primary); | ||
} | ||
|
||
.ico:hover { | ||
color: var(--color-secondary); | ||
} | ||
|
||
.card { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
aspect-ratio: 1; | ||
position: relative; | ||
margin: 1rem; | ||
border-radius: 2rem; | ||
overflow: hidden; | ||
cursor: pointer; | ||
width: 300px; | ||
} | ||
|
||
.card-image { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
position: relative; | ||
z-index: 4; | ||
} | ||
|
||
.card-image > img { | ||
width: var(--logo-size); | ||
} | ||
|
||
.card-gradient { | ||
height: 100%; | ||
width: 100%; | ||
position: absolute; | ||
background: radial-gradient( | ||
rgb(85, 108, 240) 40%, | ||
rgb(97, 128, 233) 50%, | ||
rgb(56, 136, 255), | ||
rgb(140, 42, 252) | ||
); | ||
mix-blend-mode: darken; | ||
pointer-events: none; | ||
z-index: 3; | ||
} | ||
|
||
.card-letters { | ||
--x: 0px; | ||
--y: 0px; | ||
position: absolute; | ||
left: 0px; | ||
top: 0px; | ||
height: 100%; | ||
width: 100%; | ||
color: white; | ||
font-size: 0.8rem; | ||
font-weight: 500; | ||
word-wrap: break-word; | ||
opacity: 0; | ||
transition: opacity 400ms; | ||
-webkit-mask-image: radial-gradient( | ||
calc(480px * 0.8) circle at var(--x) var(--y), | ||
rgb(255 255 255) 20%, | ||
rgb(255 255 255 / 25%), | ||
transparent | ||
); | ||
scale: 1.03; | ||
} | ||
|
||
.card:hover .card-letters { | ||
opacity: 1; | ||
} | ||
|
||
@media (max-width: 600px) { | ||
:root { | ||
--card-size: 480px; | ||
} | ||
|
||
.card { | ||
border-radius: 1rem; | ||
} | ||
} | ||
|
||
:root { | ||
--primary: #9137A8; | ||
--secondary: #CB384A; | ||
--accent: #C95C85; | ||
--background: #1E1C45; | ||
--background-gray: #323239; | ||
--text: #D1CFEC; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters