<div class="c-hero pt-0" data-behaviour="HeroText">
<div class="c-hero__clip bg-gradient c-hero__clip--home bg-black relative overflow-hidden">
<svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines data-spon-track="true">
<linearGradient id='grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
</linearGradient>
<linearGradient id='grad3'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='70%' stop-color='#ffffff'/>
</linearGradient>
<linearGradient id='grad4'>
<stop stop-color='#671EB8'/>
<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
</linearGradient>
<path data-speed="-0.13" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M552.444 1.477l332.299 713.979 783.92-349.909"/>
<path data-speed="-0.43" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M2.912 429.659c2 3 255.83 203.797 255.83 203.797l-255.83 32.52"/>
<path data-speed="-0.26" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1670.306 99.759l-645.563 183.697 654.622 380"/>
<path data-speed="-0.18" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M1668.663 269.832l-249.92 410.624 251.563 141.554"/>
</svg>
<div class="flex items-center justify-center pb-5 pt-7 md:pt-10 md:pb-9 lg:pb-8 px-1-5 md:px-2 lg:px-3 xl:wrapper lg:h-full">
<h1 class="c-hero__shout text-xl text-center text-white relative z-50 relative flex flex-col items-center justify-center" data-motion-text data-speed="0.3">
<span id="hero-l1" class="flex items-center c-hero__start">Curiously Creative Digital</span>
<span id="hero-l2" class="flex items-center c-hero__end pin text-center justify-center absolute m-auto whitespace-no-wrap">Our name is Mud.</span>
</h1>
</div>
</div>
</div>
{% import '@helpers' as h %}
<div class="c-hero pt-0" data-behaviour="HeroText">
<div class="c-hero__clip bg-gradient c-hero__clip--home bg-black relative overflow-hidden">
<svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines data-spon-track="true">
<linearGradient id='grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
</linearGradient>
<linearGradient id='grad3'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='70%' stop-color='#ffffff'/>
</linearGradient>
<linearGradient id='grad4'>
<stop stop-color='#671EB8'/>
<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
</linearGradient>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M552.444 1.477l332.299 713.979 783.92-349.909"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M2.912 429.659c2 3 255.83 203.797 255.83 203.797l-255.83 32.52"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1670.306 99.759l-645.563 183.697 654.622 380"/>
<path data-speed="{{ random(range(10, 50)) * -1 / 100 }}" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.5" stroke-miterlimit="10" stroke-width="9" d="M1668.663 269.832l-249.92 410.624 251.563 141.554"/>
</svg>
<div class="flex items-center justify-center pb-5 pt-7 md:pt-10 md:pb-9 lg:pb-8 px-1-5 md:px-2 lg:px-3 xl:wrapper lg:h-full">
<h1 class="c-hero__shout text-xl text-center text-white relative z-50 relative flex flex-col items-center justify-center" data-motion-text data-speed="0.3">
{# {{ heading|raw }}#}
<span id="hero-l1" class="flex items-center c-hero__start">Curiously Creative Digital</span>
{# {{ subheading|default("Our name is Mud") } #}
<span id="hero-l2" class="flex items-center c-hero__end pin text-center justify-center absolute m-auto whitespace-no-wrap">Our name is Mud.</span>
</h1>
</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": "Curiously <br />Creative Digital."
}
.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.