<div class="overflow-hidden relative" data-theme="static-header" data-behaviour="StarFader ScrollMotion ScrollReveal ScrollTo">
<svg data-star-item class="w-full block absolute pin-t pin-l md:w-8/12 z-10 pointer-events-none opacity-0" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1490.13 1095.21">
<path fill="#fff" d="M1334.17 1094.07c-12.07-6.13-25.85-19.44-35-41.42l-116.75-298.54c-8.82-31.11-1.44-55.37 20-76.32l287.68-283.9h-401.8c-36.81 0-49.3-25.77-65.37-64.13L896.89 1 0 0v1095.21z" />
</svg>
<header class="c-header flex items-center z-50 absolute pin-l pin-r pin-t " data-bg-item data-behaviour="Header">
<div class="wrapper w-full flex justify-between items-center">
<a href="/" class="c-header__logo leading-none inline-flex items-center justify-center text-white z-20 lg:text-blush">
<span class="u-vh">Asta Valentaite</span>
<svg id="logo-svg" viewBox="0 0 200 27.95" preserveAspectRatio midXmidY class="fill-current c-header__logo overflow-visible">
<title>Asta Valentaite</title>
<path class="logo-part" id="a1" d="M25.24 22.51L16.36 0h-1.6L6.68 21.29a11.77 11.77 0 0 1-2.6 4.28A7.41 7.41 0 0 1 0 28h10.39s-4.09-.48-4.09-4a6.58 6.58 0 0 1 .33-1.83l5.73-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76h14.57c-2.06-.31-3.71-2.02-5.13-5.45z" />
<path class="logo-part" id="s1" d="M74.9 11.07c-3.75-2-6.48-3.3-6.48-6.47A4.47 4.47 0 0 1 70 1.12a5.58 5.58 0 0 1 4.52-.61 7.29 7.29 0 0 1 4 2.38 6.3 6.3 0 0 1 1 1.61.21.21 0 0 0 .19.13.21.21 0 0 0 .21-.21.22.22 0 0 0 0-.06 6.7 6.7 0 0 0-3-3.32C73-1 67 .19 64.44 3.77a6.85 6.85 0 0 0-1.23 4c0 4.29 3.53 6.64 7.1 8.59 4 2.13 6.35 3.51 6.35 6.33a4.73 4.73 0 0 1-3.14 4.68A9.46 9.46 0 0 1 67 26.22a7 7 0 0 1-2-1.81 8.63 8.63 0 0 1-1.56-4.68.23.23 0 1 0-.46 0 9.1 9.1 0 0 0 1.65 4.94c2.7 3.65 7.94 3.93 11.91 2.44A7.84 7.84 0 0 0 82 19.66c0-4.73-3.49-6.55-7.1-8.59z" />
<path class="logo-part" id="t1" d="M130.83 0h-15.1v5.26l.41-.55c.43-.59 2.85-3.79 5-4.23h.24c1.06-.11 2.16-.11 3.22-.12h1.55V24.41a4.7 4.7 0 0 1-.63 2.86l-.4.66h6.77l-.4-.66a4.7 4.7 0 0 1-.64-2.86V.3h1.55c1.06 0 2.16 0 3.22.12 2.69.29 4.14 2.87 5.61 4.82V0z" />
<path class="logo-part" id="logo-a2" d="M194.87 22.51L186 0h-1.61l-8.08 21.29a11.63 11.63 0 0 1-2.6 4.28 7.41 7.41 0 0 1-4.08 2.43H180s-4.1-.43-4.1-3.92a6.24 6.24 0 0 1 .34-1.83l5.72-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76H200c-2-.39-3.7-2.1-5.13-5.53z" />
</svg>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block absolute z-20 c-nav__btn lg:hidden">
<span class="u-vh">Open Menu</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav data-behaviour="MobileMenu" id="site-menu" class="invisible lg:visible z-10 c-nav fixed lg:relative pin-t pin-l w-full lg:w-auto h-screen lg:h-auto" role="navigation" aria-label="Main menu">
<div id="site-menu-inner" class="w-full p-6 pb-12 flex flex-col items-center bg-black lg:flex-row lg:bg-transparent lg:p-0 lg:justify-end">
<div class="c-nav__logo opacity-0 lg:hidden">
<i class="icon icon--ui-logo-a">
<svg>
<use class="no-barba" xlink:href="#ui-logo-a"></use>
</svg>
</i>
</div>
<ul class="c-nav__list list-reset lg:flex relative mt-8 pt-8 mb-6 text-body lg:m-0 lg:p-0">
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/about">About</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Fashion</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/post">Beauty</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/vertical">Lifestyle</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/collaborations">Collaborations</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Press</a>
</li>
</ul>
<div class="hidden lg:flex items-center lg:ml-4">
<a data-text-item data-transition-item href="" class="block text-white mr-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Instagram</span>
<i class="icon icon--ui-instagram">
<svg>
<use class="no-barba" xlink:href="#ui-instagram"></use>
</svg>
</i>
</a>
<a data-text-item data-transition-item href="" class="block text-white ml-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Twitter</span>
<i class="icon icon--ui-twitter">
<svg>
<use class="no-barba" xlink:href="#ui-twitter"></use>
</svg>
</i>
</a>
</div>
</div>
</nav>
</div>
</header>
<main id="barba-wrapper" class="w-full relative z-20">
<div class="barba-container" data-page-theme="static-header">
<div class="c-about">
<div class="relative z-1">
<div id="hero" class="c-hero c-hero--base pt-8 lg:pt-15 bgi-gradient-lilac">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto pt-16 pb-12 lg:py-18">
<h1 data-animate class="text-xl lg:text-2xl leading-2xl text-black-50 text-center font-thin w-10/12 m-auto">
Asta Valentaite is a public figure, international model, stylist and model scout.
</h1>
</div>
</div>
</div>
</div>
<div class="mb-12 relative z-10" data-motion="fade">
<div class="c-carousel c-carousel--base wrapper overflow-visible" data-behaviour="Carousel">
<div class="js-frame w-full mx-auto relative whitespace-no-wrap flex flex-no-wrap max-w-xl js_frame flex justify-center items-center">
<ul class="list-reset text-center inline-block w-full js-slide-container">
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/asta-valentaite-71065242.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt=""
/>
</div>
</li>
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg" width="" height=""
alt="" />
</div>
</li>
<li class="c-carousel__item w-full lg:px-8 m-auto inline-block" data-carousel-item>
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto absolute pin"
src="/dist/images/img-9303-3-col 3.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="c-carousel__img shadow-card hover:shadow-card-on m-auto lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/img-9303-3-col 3.jpg" width="" height="" alt="" />
</div>
</li>
</ul>
<button class="c-carousel__prev absolute z-10">
<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-prev">
<svg>
<use class="no-barba" xlink:href="#ui-prev"></use>
</svg>
</i>
</div>
</button>
<button class="c-carousel__next absolute z-10">
<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-next">
<svg>
<use class="no-barba" xlink:href="#ui-next"></use>
</svg>
</i>
</div>
</button>
</div>
</div>
</div>
<div class="wrapper mb-12 relative z-10" data-motion="fade">
<div class="s-content max-w-post mx-auto px-4 md:px-0">
<h2 class="text-sm text-center uppercase mb-6 text-black font-bold tracking-wide">About Asta</h2>
<div class="text-black text-body font-light text-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dolores mollitia tenetur, sit magni nemo accusantium nihil ipsa illum distinctio.</p>
</div>
</div>
</div>
<div class="mb-12 relative z-10" data-motion="fade">
<div class="o-line block w-px mx-auto bg-black-5"></div>
</div>
<div class="pt-16 lg:pt-20">
<div class="bgi-gradient-5 relative w-full mb-12" data-behaviour="StickyBg" data-sticky-bg>
<div class="overflow-hidden">
<svg id="sticky-bg" class="absolute pin-t w-full home-grid-sploosh pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2354.04 1969.31"><defs><linearGradient id="linear-gradient" x1="1177.02" y1="1541.31" x2="1177.02" y2="-428" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6e6e6" stop-opacity="0"/><stop offset="1" stop-opacity=".1"/></linearGradient></defs><g style="isolation:isolate"><path d="M0 .25l893 818.21c61.38 59.92 82.49 129.27 57.29 218.23L626.5 1850.52c-26.21 62.85-55.6 101.28-90.13 118.79H2354V0z" opacity=".75" fill="url(#linear-gradient)" style="mix-blend-mode:multiply" id="Layer_1" data-name="Layer 1"/></g></svg>
</div>
<div class="wrapper c-about-list -mt-14 md:flex md:flex-wrap md:justify-around">
<div class="mb-12 md:w-su2-6/12 lg:w-su2-4/12 c-about-list__item" data-motion="fade">
<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-lilac"></div>
<i class="icon icon--ui-email">
<svg>
<use class="no-barba" xlink:href="#ui-email"></use>
</svg>
</i>
</div>
<h4 class="text-body text-black mb-4">Email Asta</h4>
<a href="#0" class="o-btn o-btn--sm o-btn--center"><span class="block">hello@astavalentaite.com</span></a>
</div>
</div>
<div class="mb-12 md:w-su2-6/12 lg:w-su2-4/12 c-about-list__item" data-motion="fade">
<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>
<div class="mb-12 md:w-su2-6/12 lg:w-su2-4/12 c-about-list__item" data-motion="fade">
<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-peach"></div>
<i class="icon icon--ui-tel">
<svg>
<use class="no-barba" xlink:href="#ui-tel"></use>
</svg>
</i>
</div>
<h4 class="text-body text-black mb-4">Contact Asta</h4>
<a href="#0" class="o-btn o-btn--sm o-btn--center"><span class="block">+370 888 88888</span></a>
</div>
</div>
<div class="mb-12 md:w-su2-6/12 lg:w-su2-4/12 c-about-list__item" data-motion="fade">
<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-light-blue"></div>
<i class="icon icon--ui-plus">
<svg>
<use class="no-barba" xlink:href="#ui-plus"></use>
</svg>
</i>
</div>
<h4 class="text-body text-black mb-4">Commission Asta</h4>
<a href="#0" class="o-btn o-btn--sm o-btn--center"><span class="block">See collaborations</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="mb-12 relative z-10" data-motion="fade">
<div class="o-line block w-px mx-auto bg-black-5"></div>
</div>
<div class="wrapper mb-12" data-motion="fade">
<div class="s-content max-w-post mx-auto px-4 md:px-0">
<h2 class="text-sm text-center uppercase mb-6 text-black font-bold tracking-wide">About Asta</h2>
<div class="text-black text-body font-light text-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dolores mollitia tenetur, sit magni nemo accusantium nihil ipsa illum distinctio.</p>
</div>
</div>
</div>
<div class="wrapper -mb-12" data-motion="fade">
<div class="md:hidden">
<div class="c-accordion relative bg-white shadow-fill" data-behaviour="Accordion">
<ul class="list-reset px-4 pb-4">
<li class="relative overflow-hidden border-t-1 border-black-5">
<button data-target="#e0" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
Personal Shopping
<i class="block relative c-accordion__icon"></i>
</button>
<div id="e0">
<div class="py-3 px-2 text-black-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</li>
<li class="relative overflow-hidden border-t-1 border-black-5">
<button data-target="#e1" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
Styling
<i class="block relative c-accordion__icon"></i>
</button>
<div id="e1">
<div class="py-3 px-2 text-black-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</li>
<li class="relative overflow-hidden border-t-1 border-black-5">
<button data-target="#e2" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
Modelling
<i class="block relative c-accordion__icon"></i>
</button>
<div id="e2">
<div class="py-3 px-2 text-black-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</li>
<li class="relative overflow-hidden border-t-1 border-black-5">
<button data-target="#e3" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
Consulting
<i class="block relative c-accordion__icon"></i>
</button>
<div id="e3">
<div class="py-3 px-2 text-black-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</li>
<li class="relative overflow-hidden border-t-1 border-black-5">
<button data-target="#e4" data-accordion-btn class="uppercase text-sm flex justify-between items-center w-full px-2 py-4 text-black-50">
Endorsements
<i class="block relative c-accordion__icon"></i>
</button>
<div id="e4">
<div class="py-3 px-2 text-black-50">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="hidden md:block">
<div class="c-carousel--service js_slider" data-behaviour="CarouselService">
<ul class="list-reset flex justify-center mb-8">
<li class="mx-4">
<a href="#0" data-carousel-pager="0" class="text-black hover:text-blush text-body font-regular no-underline is-current">Personal Shopping</a>
</li>
<li class="mx-4">
<a href="#0" data-carousel-pager="1" class="text-black hover:text-blush text-body font-regular no-underline ">Styling</a>
</li>
<li class="mx-4">
<a href="#0" data-carousel-pager="2" class="text-black hover:text-blush text-body font-regular no-underline ">Modelling</a>
</li>
<li class="mx-4">
<a href="#0" data-carousel-pager="3" class="text-black hover:text-blush text-body font-regular no-underline ">Consulting</a>
</li>
<li class="mx-4">
<a href="#0" data-carousel-pager="4" class="text-black hover:text-blush text-body font-regular no-underline ">Endorsements</a>
</li>
</ul>
<div class="frame js-frame flex flex-no-wrap relative whitespace-no-wrap">
<ul class="list-reset slides flex w-full js-slide-container">
<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
<div class="w-8/12 relative h-full">
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="m-auto object-fit absolute pin"
src="/dist/images/le-labo-boston-5.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/le-labo-boston-5.jpg" width="" height="" alt="" />
</div>
</div>
<div class="w-6/12 absolute z-10" data-carousel-content>
<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Personal Shopping</h2>
<div class="text-black-50 text-body leading-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
<div class="w-8/12 relative h-full">
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="m-auto object-fit absolute pin"
src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-5885cab3a8aa3.jpg" width="" height="" alt="" />
</div>
</div>
<div class="w-6/12 absolute z-10" data-carousel-content>
<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Styling</h2>
<div class="text-black-50 text-body leading-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
<div class="w-8/12 relative h-full">
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="m-auto object-fit absolute pin"
src="/dist/images/asta-valentaite-5899a4abb2ba22.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-5899a4abb2ba22.jpg" width="" height="" alt="" />
</div>
</div>
<div class="w-6/12 absolute z-10" data-carousel-content>
<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Modelling</h2>
<div class="text-black-50 text-body leading-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
<div class="w-8/12 relative h-full">
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="m-auto object-fit absolute pin"
src="/dist/images/asta-valentaite-71072258.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71072258.jpg" width="" height="" alt="" />
</div>
</div>
<div class="w-6/12 absolute z-10" data-carousel-content>
<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Consulting</h2>
<div class="text-black-50 text-body leading-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</div>
</li>
<li data-carousel-item class="c-carousel__item relative flex flex-wrap w-full whitespace-normal">
<div class="w-8/12 relative h-full">
<div class="relative w-full" style="padding-top: 62.5%">
<noscript>
<img class="m-auto object-fit absolute pin"
src="/dist/images/asta-valentaite-71065242.jpg"
width=""
height=""
alt=""
/>
</noscript>
<img class="m-auto object-fit lazyload absolute pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/asta-valentaite-71065242.jpg" width="" height="" alt="" />
</div>
</div>
<div class="w-6/12 absolute z-10" data-carousel-content>
<div class="bg-white p-12 c-carousel__floater shadow-card hover:shadow-card-on" data-carousel-panel>
<h2 class="text-blush text-sm mb-2 font-regular tracking-wide uppercase leading-sm">Endorsements</h2>
<div class="text-black-50 text-body leading-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="c-footer bg-black-5 pt-18 pb-12 md:pt-21 relative z-10">
<div class="mb-8">
<div class="o-line block w-px mx-auto bg-black-5"></div>
</div>
<div class="md:mb-4">
<form action="" class="c-subscribe pt-12 pb-8 px-8 relative m-auto flex flex-col items-center">
<div class="mb-4 lg:mb-8 c-subscribe__logo">
<i class="icon icon--ui-logo-a">
<svg>
<use class="no-barba" xlink:href="#ui-logo-a"></use>
</svg>
</i>
</div>
<div class="mb-4">
<p class="text-body text-center lg:text-lg">Sign up to the newsletter</p>
</div>
<div class="relative c-subscribe--sm w-full mx-auto">
<label class="hidden" for="subscribeEmail">
Email address
</label>
<input class="appearance-none bg-white text-body w-full h-input pt-3 pb-2 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
<button type="submit" class="appearance-none absolute pt-1 pin-t pin-b pin-r pr-4 uppercase text-sm">Submit</button>
</div>
</form>
</div>
<ul class="hidden list-reset md:flex md:justify-center text-body mb-2">
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/about">About</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/press">Fashion</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/post">Beauty</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/vertical">Lifestyle</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/collaborations">Collaborations</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/press">Press</a>
</li>
</ul>
<p class="text-sm text-black-50 text-center">© 2017 Asta Valentaite. All rights reserved.</p>
</footer>
</div>
<div class="c-modal">
<div class="c-modal__inner">
<div class="c-modal__content" id="modal-content"></div>
<button class="c-modal__closer">
<div class="o-icon flex items-center justify-center relative" data-modal-close>
<div class="o-icon__bg absolute pin bg-white"></div>
<i class="icon icon--ui-close">
<svg>
<use class="no-barba" xlink:href="#ui-close"></use>
</svg>
</i>
</div>
</button>
</div>
</div>
<div id="output" class="c-lightbox"></div>
{% import '@helpers' as h %}
{% extends craft.app.config.general.custom.wrapper ~ '_layout.twig' %}
{% block critical_css %}
<!-- build:critical-->
<!-- endbuild -->
{% endblock %}
{% block pageTheme %}static-header{% endblock %}
{% block content %}
<div class="barba-container" data-page-theme="static-header">
<div class="c-about">
<div class="relative z-1">
{% include '@hero--text' with { heading: 'Asta Valentaite is a public figure, international model, stylist and model scout.' } %}
</div>
<div class="mb-12 relative z-10" data-motion="fade">
{% include '@carousel' with {
images: carousel
} %}
</div>
<div class="wrapper mb-12 relative z-10" data-motion="fade">
{% include '@text-panel' with {
heading: textPanel.heading,
body: textPanel.body
} %}
</div>
<div class="mb-12 relative z-10" data-motion="fade">
{% include '@lines' %}
</div>
<div class="pt-16 lg:pt-20">
<div class="bgi-gradient-5 relative w-full mb-12" data-behaviour="StickyBg" data-sticky-bg>
<div class="overflow-hidden">
{{ h.sploosh() }}
</div>
<div class="wrapper c-about-list -mt-14 md:flex md:flex-wrap md:justify-around">
{% for panel in panels %}
<div class="mb-12 md:w-su2-6/12 lg:w-su2-4/12 c-about-list__item" data-motion="fade">
{% include '@card--info' with panel %}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="mb-12 relative z-10" data-motion="fade">
{% include '@lines' %}
</div>
<div class="wrapper mb-12" data-motion="fade">
{% include '@text-panel' with {
heading: textPanel2.heading,
body: textPanel2.body
} %}
</div>
<div class="wrapper -mb-12" data-motion="fade">
<div class="md:hidden">
{% include '@accordion' with { panels: slides } %}
</div>
<div class="hidden md:block">
{% include '@carousel--service' with { slides: slides } %}
</div>
</div>
</div>
</div>
{% endblock %}
{
"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"
}
],
"carousel": [
{
"url": "/dist/images/asta-valentaite-71065242.jpg",
"alt": null
},
{
"url": "/dist/images/asta-valentaite-5885cab3a8aa3.jpg",
"alt": null
},
{
"url": "/dist/images/img-9303-3-col 3.jpg",
"alt": null
}
],
"textPanel": {
"heading": "About Asta",
"body": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dolores mollitia tenetur, sit magni nemo accusantium nihil ipsa illum distinctio.</p>"
},
"textPanel2": {
"heading": "About Asta",
"body": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dolores mollitia tenetur, sit magni nemo accusantium nihil ipsa illum distinctio.</p>"
},
"panels": [
{
"heading": "Email Asta",
"icon": "ui-email",
"color": "lilac",
"link": {
"text": "hello@astavalentaite.com",
"url": "#0"
}
},
{
"heading": "Follow Asta on Instagram",
"icon": "ui-instagram",
"color": "blush",
"link": {
"text": null,
"url": "#0"
}
},
{
"heading": "Contact Asta",
"icon": "ui-tel",
"color": "peach",
"link": {
"text": "+370 888 88888",
"url": "#0"
}
},
{
"heading": "Commission Asta",
"icon": "ui-plus",
"color": "light-blue",
"link": {
"text": "See collaborations",
"url": "#0"
}
}
],
"slides": [
{
"image": {
"url": "/dist/images/le-labo-boston-5.jpg",
"alt": null
},
"heading": "Personal Shopping",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
},
{
"image": {
"url": "/dist/images/asta-valentaite-5885cab3a8aa3.jpg",
"alt": null
},
"heading": "Styling",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
},
{
"image": {
"url": "/dist/images/asta-valentaite-5899a4abb2ba22.jpg",
"alt": null
},
"heading": "Modelling",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
},
{
"image": {
"url": "/dist/images/asta-valentaite-71072258.jpg",
"alt": null
},
"heading": "Consulting",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
},
{
"image": {
"url": "/dist/images/asta-valentaite-71065242.jpg",
"alt": null
},
"heading": "Endorsements",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tortor nec arcu laoreet auctor et ac ipsum. Nulla ac magna nunc. Praesent maximus sapien ac rutrum. Praesent maximus sapien ac rutrum.</p>"
}
]
}
.c-about-list__item {
&:last-child {
margin-bottom: 0;
}
}
@include mq($from: breakpoint('lg')) {
.c-about-list__item {
&:nth-child(even) {
//transform: translate3d(0, -50%, 0);
@apply .-mt-16;
}
}
}
Position of card-info boxes
Swap accordion for service slide at desktop