diff --git a/resources/css/blocks/statistiques-collections.css b/resources/css/blocks/statistiques-collections.css index 48b090b..7785005 100644 --- a/resources/css/blocks/statistiques-collections.css +++ b/resources/css/blocks/statistiques-collections.css @@ -86,4 +86,61 @@ @apply lg:hidden; } } + + .collection-cover-pictures-container { + @apply pt-12 pb-32 mb-12 hidden md:block; + } + + .collection-cover-pictures { + @apply max-w-screen-xl mx-auto relative; + .pictures { + @apply grid grid-cols-3 2xl:gap-20 xl:gap-12 lg:gap-12 gap-8 items-center px-6; + } + img { + @apply p-4 border border-primary h-auto bg-white; + } + img:nth-child(n + 1) { + @apply -rotate-6; + } + img:nth-child(n + 2) { + @apply rotate-3; + } + :nth-child(n + 3) { + @apply -rotate-2; + } + + .decorative-square-right, + .decorative-square-left { + @apply absolute block top-0 border border-primary h-full; + + &:after { + @apply w-16 h-16 bg-primary absolute content-[''] block z-50; + + background-size: 60% 60%; + background-repeat: no-repeat; + background-position: center; + } + } + .decorative-square-left { + @apply left-0; + transform: translateY(70%) translateX(-20px) rotate(2deg); + height: 80%; + width: 40%; + &:after { + @apply bottom-0 right-12 translate-y-1/2; + background-image: url('../resources/img/icons/carhop-outils.svg'); + } + } + .decorative-square-right { + @apply right-0; + width: 40%; + height: 90%; + transform: translateY(40%) translateX(20px) rotate(-10deg); + + &:after { + @apply right-0 top-1/2 translate-x-1/2 p-4; + background-image: url('../resources/img/icons/carhop-reportage.svg'); + } + } + } } diff --git a/resources/img/icons/carhop-outils.svg b/resources/img/icons/carhop-outils.svg new file mode 100644 index 0000000..de21342 --- /dev/null +++ b/resources/img/icons/carhop-outils.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/resources/img/icons/carhop-reportage.svg b/resources/img/icons/carhop-reportage.svg new file mode 100644 index 0000000..217f569 --- /dev/null +++ b/resources/img/icons/carhop-reportage.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +