<div class="c-person pb-1-5">
<div class="mb-1-5 relative c-person__flip overflow-hidden">
<div class="w-full relative image-container" style="padding-top: 66.68%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg" srcset="https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=768 768w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1024 1024w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1600 1400w" alt="Unsplash Placeholder 4" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg"
data-srcset="https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=768 768w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1024 1024w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1600 1400w"
alt="Unsplash Placeholder 4" />
</div>
<div class="opacity-0 z-10 absolute c-person__target p-2-5 hidden lg:block">
<h2 class="text-white text-h4 mb-0-25 c-person__fact mb-1-5">Curious fact</h2>
<div class="text-white font-light text-lg mb-1-5 c-person__fact">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt nemo ex voluptatum impedit officia doloribus! Eligendi dicta maiores repellendus ipsum.</p>
</div>
</div>
</div>
<h2 class="text-black text-h4 mb-0-25">Mr Blam Blops</h2>
<h5 class="text-black font-light text-lg mb-0-75">Captain</h5>
<div class="text-black font-light text-lg mb-0-75">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>
</div>
<a href="mailto:lamp@ournameislamp.com" class="text-black inline-flex font-bold text-blue hover:text-blue text-sm linkee linkee--blue">
<span>lamp@ournameislamp.com</span>
</a>
</div>
{% import '@helpers' as h %}
<div class="c-person pb-1-5">
<div class="mb-1-5 relative c-person__flip overflow-hidden">
{{ h.srcset(image) }}
<div class="opacity-0 z-10 absolute c-person__target p-2-5 hidden lg:block">
<h2 class="text-white text-h4 mb-0-25 c-person__fact mb-1-5">Curious fact</h2>
<div class="text-white font-light text-lg mb-1-5 c-person__fact">
{{ fact|raw }}
</div>
</div>
</div>
<h2 class="text-black text-h4 mb-0-25">{{ name }}</h2>
<h5 class="text-black font-light text-lg mb-0-75">{{ job }}</h5>
<div class="text-black font-light text-lg mb-0-75">
{{ body|raw }}
</div>
<a href="mailto:{{ email }}" class="text-black inline-flex font-bold text-blue hover:text-blue text-sm linkee linkee--blue">
<span>{{ email }}</span>
</a>
</div>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "lamp@ournameislamp.com",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, <a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
],
"image": {
"url": "http://mud-assets.s3.amazonaws.com/transforms/media/55/unsplash-placeholder-4_094bd4636f1c06a70632ae770e8c111c.jpg",
"aspect": 66.68,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=768 768w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1024 1024w, https://mud-assets.imgix.net/team//stockley.jpg?auto=compress%2Cformat&fit=max&format=&q=93&w=1600 1400w",
"alt": "Unsplash Placeholder 4"
},
"name": "Mr Blam Blops",
"job": "Captain",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ea architecto adipisci ducimus officia repellat cumque perferendis asperiores, officiis nobis.</p>",
"fact": "<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt nemo ex voluptatum impedit officia doloribus! Eligendi dicta maiores repellendus ipsum.</p>"
}
.c-person {
}
.c-person__target {
clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
transition: clip-path 300ms ease-in-out, opacity 300ms ease,
transform 300ms ease;
top: -1px;
bottom: -1px;
right: -1px;
left: -1px;
background-color: rgba(40, 187, 222, 0.99);
}
.c-person__flip {
&:hover {
.c-person__target {
opacity: 0.93;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.c-person__fact {
transform: translate3d(0, 0, 0);
transition-delay: 100ms;
opacity: 1;
&:nth-child(2) {
transition-delay: 150ms;
}
}
}
}
.c-person__fact {
transform: translate3d(0, rem(60px), 0);
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
opacity: 0;
&:nth-child(2) {
transition-delay: 50ms;
}
}
There are no notes for this item.