Asta Valentaite

Hero 

<div id="hero" class="c-hero c-hero--home pt-12 lg:pt-15 bg-blush">
    <div class="md:wrapper relative z-10">
        <div class="flex flex-col items-center justify-center lg:w-10/12 m-auto">
            <div class="relative c-hero__img shadow lg:m-auto w-full">
                <div class="relative w-full" style="padding-top: 62.5%">
                    <noscript>
			<img class="object-fit shadow-card absolute pin" 
				src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg" 
				width="" 
				height="" 
				alt="" 
			/>
		</noscript>
                    <img class="object-fit shadow-card lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg" width="" height="" alt="" />
                </div>

                <div class="absolute pin-b flex justify-center w-full c-hero__icon">
                    <a class="block" href="#page" data-scroll-to>

                        <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-down">
		<svg>
			<use class="no-barba" xlink:href="#ui-down"></use>
		</svg>
	</i>

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% import '@helpers' as h %}

<div id="hero" class="c-hero c-hero--home pt-12 lg:pt-15 bg-blush">
	<div class="md:wrapper relative z-10">
		<div class="flex flex-col items-center justify-center lg:w-10/12 m-auto">
			<div class="relative c-hero__img shadow lg:m-auto w-full">
				{{ h.image(image, '8:5', 'object-fit shadow-card') }}
				<div class="absolute pin-b flex justify-center w-full c-hero__icon">
					<a class="block" href="{{ target|default('#page') }}" data-scroll-to>
						{% include '@icons' with { color: 'blush', icon: 'ui-down' } %}
					</a>
				</div>
			</div>
		</div>
	</div>
</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"
    }
  ],
  "target": "#page",
  "image": {
    "url": "/dist/images/asta-valentaite-5885cab3a8aa3.jpg",
    "alt": null,
    "width": null,
    "height": null
  }
}
  • Content: 
    .c-hero__icon {
	.o-icon {
		transform: translate3d(0, 50%, 0);
	}
}

.c-hero--home {
	@include mq($from: breakpoint('lg')) {
		margin-bottom: rem(200px);
	}
}

.c-hero__img {
	transform: translate3d(0, rem(60px), 0);

	@include mq($from: breakpoint('lg')) {
		transform: translate3d(0, rem(120px), 0);
	}
}

.c-hero {
	//aspect-ratio: '1:1';

	@include mq($from: breakpoint('md')) {
		&::before {
			display: none;
		}

		& > div {
			position: relative;
		}
	}
}

.c-hero__inner {
	@include mq($from: breakpoint('md')) {
		padding-top: rem(100px);
		padding-bottom: rem(100px);
	}
}

.c-hero--tags {
	min-height: rem(300px);

	[data-accordion-btn].is-active {
		@apply .text-white;
	}
}

[id='tags'] {
	li {
		opacity: 0;
		transform: translate3d(0, rem(10px), 0);
		transition: opacity 300ms 100ms ease, transform 300ms 100ms ease;

		@include mq($from: breakpoint('lg')) {
			opacity: 1;
			transform: none;
		}
	}

	&.is-expanded {
		li {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition-delay: 0ms;
		}
	}
}
  • URL: /components/raw/hero/_hero.scss
  • Filesystem Path: src/templates/04-components/hero/_hero.scss
  • Size: 1 KB

There are no notes for this item.