<div class="c-hero pt-0 c-hero--h c-hero--project relative bg-white mb-2 lg:mb-0 lg:pb-15 w-full overflow-hidden" data-behaviour="Tilt" data-tilt>
<div class="c-hero__clip c-hero__clip--project bg-gradient c-hero--h relative overflow-hidden mb-2 lg:aspect-16-9 lg:mb-0">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp" srcset="http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp 768w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_9ed0fd83c0e67da5bb1852cd50586505.webp 1024w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_353fe568217a4ecd8f2727f818d6534e.webp 1600w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_adb24536154ae8016dd2dd1912ceb897.webp 2800w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_68687b105f3dcfe2f21a876ff8b02555.webp 4000w" alt="Unsplash Placeholder 4" />
</noscript>
<img class="lazyload object-fit h-full w-full lg:absolute lg:pin" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp"
data-srcset="http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp 768w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_9ed0fd83c0e67da5bb1852cd50586505.webp 1024w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_353fe568217a4ecd8f2727f818d6534e.webp 1600w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_adb24536154ae8016dd2dd1912ceb897.webp 2800w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_68687b105f3dcfe2f21a876ff8b02555.webp 4000w"
alt="Unsplash Placeholder 4" />
</div>
<div class="lg:absolute lg:pin lg:h-full flex items-center">
<div class="px-1-5 md:px-2 lg:px-3 flex flex-col items-start lg:grid c-hero__grid mb-1-25 xl:wrapper">
<div class="c-hero__title-col lg:mb-0">
<h1 class="c-hero__heading absolute lg:relative z-10 text-h2 text-white tracking-normal" data-motion-text data-speed="0.2">Environmental Justice Foundation</h1>
</div>
<div class="c-hero__body-col" data-motion-text data-speed="0.2">
<ul class="list-reset flex items-center mb-0-5 opacity-50">
<li class="text-black lg:text-white font-light text-xs slash ">Design</li>
<li class="text-black lg:text-white font-light text-xs slash ">UX</li>
<li class="text-black lg:text-white font-light text-xs ">UI</li>
</ul>
<p class="text-black text-h6 font-light lg:text-white mb-1">An inspiring site for an award-winning charity. Supporting people after prison.</p>
<a href="#" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center text-black lg:text-white" target="_blank">
<span class="o-btn__line h-px flex-1 mr-0-5 w-full bg-currentColor opacity-25 block"></span>
<span class="block ml-auto mr-0 whitespace-no-wrap">Visit site</span>
</a>
</div>
</div>
</div>
</div>
{% set base64 = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
{% import '@helpers' as h %}
<div class="c-hero pt-0 c-hero--h c-hero--project relative bg-white mb-2 lg:mb-0 lg:pb-15 w-full overflow-hidden" data-behaviour="Tilt" data-tilt>
<div class="c-hero__clip c-hero__clip--project bg-gradient c-hero--h relative overflow-hidden mb-2 lg:aspect-16-9 lg:mb-0">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="{{ image.url }}" srcset="{{ image.srcset }}" alt="{{ image.alt }}" />
</noscript>
<img class="lazyload object-fit h-full w-full lg:absolute lg:pin" src="{{ base64 }}" data-src="{{ image.url }}" data-srcset="{{ image.srcset }}" alt="{{ image.alt }}" />
</div>
<div class="lg:absolute lg:pin lg:h-full flex items-center">
<div class="px-1-5 md:px-2 lg:px-3 flex flex-col items-start lg:grid c-hero__grid mb-1-25 xl:wrapper">
<div class="c-hero__title-col lg:mb-0">
<h1 class="c-hero__heading absolute lg:relative z-10 text-h2 text-white tracking-normal" data-motion-text data-speed="0.2">{{ heading|raw }}</h1>
</div>
<div class="c-hero__body-col" data-motion-text data-speed="0.2">
<ul class="list-reset flex items-center mb-0-5 opacity-50">
{% for tag in tags %}
<li class="text-black lg:text-white font-light text-xs {% if loop.index < tags|length %} slash {% endif %}">{{ tag }}</li>
{% endfor %}
</ul>
<p class="text-black text-h6 font-light lg:text-white mb-1">{{ body|raw }}</p>
{% include '@button' with { url: slug, text: 'Visit site', modifiers: 'text-black lg:text-white', target: '_blank', attr: 'rel="noopener"' } %}
</div>
</div>
</div>
</div>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"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"
}
],
"heading": "Environmental Justice Foundation",
"image": {
"url": "http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp",
"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": "http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_8877a1e41a9899e9d1bb1f264f777a6f.webp 768w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_9ed0fd83c0e67da5bb1852cd50586505.webp 1024w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_353fe568217a4ecd8f2727f818d6534e.webp 1600w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_adb24536154ae8016dd2dd1912ceb897.webp 2800w, http://mud-assets.s3.amazonaws.com/transforms/hero/290/godolphin_header_6_68687b105f3dcfe2f21a876ff8b02555.webp 4000w",
"alt": "Unsplash Placeholder 4"
},
"tags": [
"Design",
"UX",
"UI"
],
"body": "An inspiring site for an award-winning charity. Supporting people after prison.",
"slug": "#"
}
.c-hero {
@apply .pt-6 .overflow-hidden .relative;
@screen md {
@apply .pt-10;
}
@screen xl {
@apply .pt-12;
}
}
@screen lg {
.c-hero__clip--home {
height: 80vh;
}
}
.c-hero__clip--project {
height: 60vh;
perspective: 600px;
@screens md {
height: 50vh;
}
}
.c-hero__clip--post {
height: 90%;
}
.c-hero__clip {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.c-hero--h {
@screen lg {
min-height: rem(600px);
height: 70vh;
}
@screen xl {
min-height: rem(800px);
}
}
.c-hero__heading {
transform: translate3d(0, rem(-130px), 0);
top: 50%;
@screen md {
transform: translate3d(0, rem(-100px), 0);
}
@screen lg {
top: 0;
transform: none;
}
}
.c-hero__title-col {
@screen lg {
grid-column: 1 / 11;
}
}
.c-hero__body-col {
@screen lg {
grid-column: 14 / 22;
}
}
.c-hero__end {
@apply .font-bold;
opacity: 1;
text-align: center;
}
.c-hero__shout {
perspective: 1200px;
}
.c-hero__start {
transform: rotateX(-90deg);
max-width: 90%;
flex-wrap: wrap;
@screen md {
white-space: nowrap;
}
}
.c-hero__end {
transform: rotateX(-90deg);
}
There are no notes for this item.