98 lines
1.9 KiB
CSS
98 lines
1.9 KiB
CSS
footer {
|
|
@apply w-full mx-auto px-12 pb-32;
|
|
|
|
.section-title {
|
|
@apply text-lg nunito uppercase font-bold tracking-widest mb-6;
|
|
}
|
|
|
|
.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-y-12 gap-x-8 lg:gap-x-12 grid-cols-1 md:grid-cols-2; /* Mobile-first: 1 column */
|
|
|
|
@screen lg {
|
|
/* column-gap: 100px; */
|
|
grid-auto-flow: column;
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
> :first-child {
|
|
grid-row: span 2;
|
|
}
|
|
}
|
|
}
|
|
.socials {
|
|
a {
|
|
@apply block;
|
|
}
|
|
|
|
.social-networks-links {
|
|
@apply flex gap-2;
|
|
|
|
.social-icon {
|
|
@apply w-full h-auto;
|
|
|
|
width: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes parallax {
|
|
from {
|
|
transform: translateY(-200px);
|
|
}
|
|
to {
|
|
transform: translateY(200px);
|
|
}
|
|
}
|