<div class="c-card c-card--info bg-white flex flex-col justify-between items-center c-card--info m-auto md:w-full max-w-card relative pt-15 pb-13 shadow-card hover:shadow-card-on">
<div class="o-icon flex items-center justify-center relative">
<div class="o-icon__bg absolute pin bg-blush"></div>
<i class="icon icon--ui-instagram">
<svg>
<use class="no-barba" xlink:href="#ui-instagram"></use>
</svg>
</i>
</div>
<h4 class="text-body text-black mb-4">Follow Asta on Instagram</h4>
<a href="#0" class="o-btn o-btn--sm o-btn--center"><span class="block">Button</span></a>
</div>
<div class="c-card c-card--info bg-white flex flex-col justify-between items-center c-card--info m-auto md:w-full max-w-card relative pt-15 pb-13 shadow-card hover:shadow-card-on">
{% include '@icons' with { icon: icon, color: color } %}
<h4 class="text-body text-black mb-4">{{ heading }}</h4>
{% include '@button--center' with { text: link.text, href: link.url } %}
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"heading": "Follow Asta on Instagram",
"icon": "ui-instagram",
"color": "blush",
"link": {
"text": null,
"url": "#0"
}
}
.c-card {
transition: box-shadow 300ms ease, clip-path 300ms ease;
&::after {
@apply .absolute .block .m-auto .pin;
box-shadow: 0 rem(40px) rem(50px) rgba(0, 0, 0, 0.05);
transition: box-shadow 300ms ease, transform 300ms ease;
z-index: -1;
transform-origin: 50%;
content: ' ';
@include mq($from: breakpoint('lg')) {
top: rem(10px);
bottom: rem(10px);
right: rem(10px);
left: rem(10px);
}
}
&:hover {
.c-card-clip {
clip-path: inset(0 0);
}
&::after {
@apply .shadow-card-on;
transform: scale(1);
}
}
}
.c-card--info {
width: rem(280px);
}
.c-card--info::after {
display: none;
}
.c-card-clip {
@include mq($from: breakpoint('lg')) {
transition: clip-path 300ms ease;
clip-path: inset(rem(10px) rem(10px));
}
}
.c-card--collab {
transition: box-shadow 300ms ease;
}
.c-card--info {
.o-icon {
@apply .absolute .pin-t;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.c-card--collaboration {
.c-card__panel {
transform: translate3d(0, rem(60px), 0);
}
}
.c-card-list {
@include mq($from: breakpoint('md')) {
& > div {
&:nth-child(even) {
margin-right: 0;
}
}
}
@include mq($from: breakpoint('lg')) {
& > div {
&:nth-child(even) {
@apply .mr-su;
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
}
// .c-carousel--latest {
// [data-carousel-item] {
// opacity: 0.5;
// transition: opacity 300ms ease;
// //pointer-events: none;
// &.is-selected {
// opacity: 1;
// // pointer-events: auto;
// }
// }
// }
.c-card--info {
&:hover {
.o-icon__bg {
transform: rotate(45deg) scale(1.15);
}
}
}
@include mq($from: breakpoint('lg')) {
.c-card--vertical {
img {
max-height: rem(250px);
}
}
}
.c-card--resp__inner {
min-height: rem(290px);
}
There are no notes for this item.