81 lines
1.6 KiB
CSS
81 lines
1.6 KiB
CSS
footer {
|
|
@apply w-full mx-auto px-12;
|
|
.branding {
|
|
@apply w-full mb-12 grid relative mt-24 md:mt-32 xl:mt-48;
|
|
z-index: -1;
|
|
.square,
|
|
.rectangle-rotated {
|
|
z-index: -1;
|
|
}
|
|
.circle,
|
|
.rectangle-vertical {
|
|
z-index: -3;
|
|
}
|
|
|
|
.website-title {
|
|
z-index: -2;
|
|
}
|
|
|
|
&__shapes {
|
|
@apply w-full max-w-full grid gap-2 md:gap-24 xl:gap-32 2xl:gap-48 grid-cols-4 h-full absolute left-0;
|
|
top: 0px;
|
|
|
|
div.shape {
|
|
@apply shrink flex flex-col w-full h-full;
|
|
/* background-color: rgba(219, 234, 254, 0.5); */
|
|
top: 0;
|
|
flex-shrink: 1;
|
|
aspect-ratio: 1/1;
|
|
justify-self: center;
|
|
transform-origin: bottom center;
|
|
position: relative;
|
|
bottom: 0;
|
|
}
|
|
div.square:first-child,
|
|
div.rectangle-rotated {
|
|
@apply justify-end;
|
|
}
|
|
img {
|
|
@apply w-full h-fit object-contain;
|
|
aspect-ratio: 1/1;
|
|
flex-grow: 0;
|
|
width: 100%;
|
|
}
|
|
img:last-child {
|
|
@apply object-right;
|
|
}
|
|
}
|
|
|
|
.website-title {
|
|
@apply w-full;
|
|
}
|
|
}
|
|
|
|
.credits {
|
|
@apply w-full grid gap-x-24 gap-y-12;
|
|
display: grid;
|
|
column-gap: 100px;
|
|
grid-auto-flow: column; /* clé ici */
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
> :first-child {
|
|
grid-row: span 2;
|
|
}
|
|
}
|
|
.socials {
|
|
a {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes parallax {
|
|
from {
|
|
transform: translateY(-200px);
|
|
}
|
|
to {
|
|
transform: translateY(200px);
|
|
}
|
|
}
|