Our Name is Mud - Component Library

404 

<div id="page" class="site relative z-10 bg-black">

    <header id="site-header" class="c-header absolute pin-t z-50 pin-l w-full md:py-0 md:flex md:items-center md:justify-end" data-bg-item>
        <a href="/" class="c-header__logo text-black absolute pin-l z-50 px-1-5 md:px-2 lg:px-3">
		<span class="u-vh">Our Name is Mud</span>
			<i class="icon icon--ui-logo">
		<svg>
			<use class="no-barba pointer-events-none" xlink:href="#ui-logo"></use>
		</svg>
	</i>

	</a>

        <a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block md:hidden absolute pin-r mr-1-25 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--bot absolute h-px bg-white"></span>
	</a>

        <nav id="site-menu" role="navigation" aria-label="Main menu" class="z-10 px-1-5 pt-7 pin-l pin-t w-full fixed min-h-screen invisible opacity-0 pointer-events-none md:px-2 md:my-0 md:p-0 md:min-h-px  md:relative md:pin-r md:opacity-100 md:visible md:pointer-events-auto lg:px-3">
            <div id="site-menu-inner" class="w-full md:flex md:items-center md:flex-row md:p-0 md:justify-end">
                <ul class="list-reset mb-5 md:mb-0 md:flex">
                    <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1 md:mr-1-25 mb-1 md:mb-0">
                        <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/listing"><span class="">Projects</span></a>
                    </li>
                    <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                        <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/about"><span class="">About</span></a>
                    </li>
                    <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                        <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/journal"><span class="">Journal</span></a>
                    </li>
                    <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                        <a id="contact-link" data-contact-link class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/contact"><span class="">Contact</span></a>
                    </li>
                </ul>
                <div class="md:hidden">
                    <a class="block text-white no-underline font-light text-sm" href="tel:01225 471 465">01225 471 465</a>
                    <a class="block text-white no-underline font-light text-sm" href="mailto:hello@ournameismud.co.uk">hello@ournameismud.co.uk</a>
                    <a class="block text-white no-underline font-light text-sm" href="{ twitter }}">@asclearasmud</a>
                </div>
            </div>
        </nav>
    </header>
    <div id="container" class="trans">
        <main id="barba-wrapper" class="w-full bg-white trans overflow-hidden">
            <div class="barba-container bg-gradient" data-route="404" data-behaviour="Madness">

                <div class="px-1-5 md:px-2 lg:px-3 xl:wrapper py-10 min-h-screen flex flex-col items-center justify-center">
                    <div class="w-full flex flex-col items-center justify-center md:items-start md:flex-row">
                        <div class="mb-3 md:mr-2 lg:mr-4 relative overflow-visible">

                            <svg data-shape class="absolute pin w-full h-full" style="overflow: visible">
					<linearGradient id='grad'>
						<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>
				</svg>
                            <h1 class="text-white text-kin-massive relative z-10">404</h1>
                        </div>
                        <div class="text-center md:text-left">
                            <div class="text-white text-h2 mb-1-5 font-light relative inline-flex">
                                <p class="inline">That's not right. <br />Sorry. <img alt="The wobbling face of Dave II" class="inline-block lazyload wobbler" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/face.png"
                                        width="41" height="56" /></p>
                            </div>
                            <p class="text-white text-h4 mb-1-5 font-light">
                                Here's some useful links
                            </p>
                            <ul class="list-reset flex flex-wrap justify-center md:justify-start">
                                <li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/">Home</a></li>
                                <li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/projects">Projects</a></li>
                                <li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/about">About</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>

    <footer class="c-footer pt-6 pb-0 md:pt-8 xl:pt-14 bg-black text-white text-h4 font-light relative overflow-hidden z-100">
        <svg class="absolute pin z-0" style="overflow: visible" data-lines xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 571.563">
		<linearGradient id='cta-grad1'>
			<stop stop-color='#0e0f26'/>
			<stop data-stop-color offset='30%' stop-color='#671eb8'/>
		</linearGradient>
		<linearGradient id='cta-grad2'>
			<stop stop-color='#28BBDE'/>
			<stop data-stop-color offset='50%' stop-color='#1C1E4B'/>
			<stop data-stop-color offset='90%' stop-color='#28BBDE'/>
		</linearGradient>
		<path data-speed="-0.21" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1042.044 1.971l227.612 334.075 515.797-310.067"/>
		<path data-speed="-0.49" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1669.292 21.926L913.734 237.454 3.211 2336.1"/>
	</svg>
        <div class="px-1-5 md:px-2 lg:px-3 xl:wrapper relative z-10">
            <div class="lg:w-su-17/24 xl:w-su-13/24 mb-5 lg:mb-7 c-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,&nbsp;<a href="/contact" data-contact-link="" class="no-barba">drop us a line</a>. We’re always happy to chat...</p>
            </div>

            <div class="pb-4 md:flex md:items-start">
                <address class="text-white font-light text-xs whitespace-pre-line mb-2 md:mb-0 md:mr-2 lg:mr-4">5 Princes Buildings 
Bath 
BA1 2ED</address>
                <dl class="flex flex-col items-start justify-start mb-2 md:mb-0">
                    <dt class="u-vh">Tel</dt>
                    <dd>
                        <a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="tel:01225 471 465"><span>01225 471 465</span></a>
                    </dd>
                    <dt class="u-vh">Email</dt>
                    <dd>
                        <a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="mailto:hello@ournameismud.co.uk"><span>hello@ournameismud.co.uk</span></a>
                    </dd>
                    <dt class="u-vh"></dt>
                    <dd>
                        <a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="asclearasmud"><span>@asclearasmud</span></a>
                    </dd>
                </dl>
                <p class="text-white text-xs font-light md:ml-auto text-right">&copy; 2018 Our Name is Mud <br /><span class="opacity-50">Company No. 8589415</span></p>
            </div>
        </div>
    </footer>

</div>
<div class="c-draw hidden fixed pin-t pin-r h-screen w-full max-w-md bg-black z-0 p-1 md:p-3 xl:p-3 overflow-auto">
    <h2 class="text-h3 text-white mb-1-5 font-light"></h2>
    <div class="text-white text-body mb-3"></div>

    <ul class="list-reset">
        <li class="mb-1">
            <h2 class="text-h6 mb-0-5 text-white">Call us</h2>
            <a href="tel:01225 471 465" class="inline-flex font-bold text-body text-blue linkee"><span>01225 471 465</span></a>
        </li>
        <li class="mb-1">
            <h2 class="text-h6 mb-0-5 text-white">General enquiries</h2>
            <a href="mailto:hello@ournameismud.co.uk" class="inline-flex font-bold text-body text-blue linkee"><span>hello@ournameismud.co.uk</span></a>
        </li>
        <li class="mb-1">
            <h2 class="text-h6 mb-0-5 text-white">Follow</h2>
            <a target="_blank" rel="noopener" href="asclearasmud" class="inline-flex font-bold text-body text-blue linkee"><span>@asclearasmud</span></a>
        </li>
        <li>
            <h2 class="text-h6 mb-0-5 text-white">Visit us</h2>
            <address class="block font-light text-body text-white mb-1-5">5 Princes Buildings 
Bath 
BA1 2ED</address>
            <a href="https://goo.gl/maps/S6RQRy8kSQT2" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center 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">View on Google Maps</span>
</a>
        </li>
    </ul>
</div>

<div id="cursor">
    <div id="c1"></div>
</div>
 
{% import '@helpers' as h %}

{% extends craft.app.config.general.custom.wrapper ~ '_layout.twig' %}

{% block critical_css %}
	<!-- build:critical-->
	<!-- endbuild -->
{% endblock %}


{% block content %}
<div class="barba-container bg-gradient" data-route="404" data-behaviour="Madness">

	<div class="px-1-5 md:px-2 lg:px-3 xl:wrapper py-10 min-h-screen flex flex-col items-center justify-center">
		<div class="w-full flex flex-col items-center justify-center md:items-start md:flex-row">
			<div class="mb-3 md:mr-2 lg:mr-4 relative overflow-visible">

				<svg data-shape class="absolute pin w-full h-full" style="overflow: visible">
					<linearGradient id='grad'>
						<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>
				</svg>
				<h1 class="text-white text-kin-massive relative z-10">404</h1>
			</div>
			<div class="text-center md:text-left">
				<div class="text-white text-h2 mb-1-5 font-light relative inline-flex">
					<p class="inline">That's not right. <br />Sorry. <img alt="The wobbling face of Dave II" class="inline-block lazyload wobbler" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="/dist/images/face.png" width="41" height="56" /></p>
				</div>
				<p class="text-white text-h4 mb-1-5 font-light">
					Here's some useful links
				</p>
				<ul class="list-reset flex flex-wrap justify-center md:justify-start">
					<li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/">Home</a></li>
					<li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/projects">Projects</a></li>
					<li class="mr-0-25 mb-0-25"><a class="inline-flex bg-black text-white text-body px-1 py-0-75 hover:bg-blue hover:text-white trans" href="/about">About</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

{% endblock %}
 
{
  "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": "&copy; 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,&nbsp;<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"
    }
  ]
}

There are no notes for this item.