47 lines
1.1 KiB
CSS
47 lines
1.1 KiB
CSS
.ball {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 38.197vw;
|
|
height: 38.197vw;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
.noise {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
filter: contrast(200%) brightness(1000%) grayscale(100%);
|
|
}
|
|
#gradient {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
section {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
width: 80vw;
|
|
height: 100vh;
|
|
}
|
|
section h1 {
|
|
z-index: 1;
|
|
margin-right: -20vw;
|
|
mix-blend-mode: multiply;
|
|
color: rgba(0,0,0,0.8);
|
|
font-size: 7vw;
|
|
font-style: italic;
|
|
line-height: 0.92;
|
|
letter-spacing: -0.023em;
|
|
text-align: right;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "DM Serif Display";
|
|
} |