www-new/components/ShapesBackground.module.css

95 lines
1.3 KiB
CSS

.shapesContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -10;
}
.shape {
position: absolute;
}
.blue {
filter: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
brightness(92%) contrast(93%);
}
.teal {
filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
brightness(91%) contrast(88%);
}
.opacity20 {
opacity: 20%;
}
.opacity25 {
opacity: 25%;
}
.opacity30 {
opacity: 30%;
}
/* * * HOME PAGE * * */
.homeDots {
top: 6vh;
left: calc(-32rem / 16);
width: calc(168rem / 16);
height: calc(204rem / 16);
}
.homeHash1 {
top: 32vh;
left: 12vw;
width: calc(60rem / 16);
height: calc(60rem / 16);
}
.homeTriangle1 {
top: 5vh;
left: 20vw;
width: calc(68rem / 16);
height: calc(68rem / 16);
transform: rotate(18deg);
}
.homeWaves1 {
top: 50vh;
left: 24vw;
width: calc(116rem / 16);
height: calc(58rem / 16);
}
.homeTriangle2 {
top: 2vh;
right: 40vw;
width: calc(68rem / 16);
height: calc(68rem / 16);
transform: rotate(-26deg);
}
.homePlus {
top: 42vh;
right: 22vw;
width: calc(48rem / 16);
height: calc(48rem / 16);
}
.homeWaves2 {
top: 10vh;
right: 18vw;
width: calc(102rem / 16);
height: calc(50rem / 16);
}
.homeHash2 {
top: 25vh;
right: 9vw;
width: calc(60rem / 16);
height: calc(60rem / 16);
}