<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Tom Leadbetter | freelance web design and development - Liverpool, UK</title>
        <meta name="description" content="Tom Leadbetter - freelance web design and development">
        <meta name="keywords" content="Tom Leadbetter, freelance, contract, web design, web development, CSS, responsive, WordPress, JavaScript, UK, Liverpool, Chester, Manchester">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>

            @font-face {
                font-family: 'texgyreadventorbold';
                src: url('texgyreadventor-bold-webfont.eot');
                src: url('texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
                    url('texgyreadventor-bold-webfont.woff') format('woff'),
                    url('texgyreadventor-bold-webfont.ttf') format('truetype'),
                    url('texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: 'texgyreadventorregular';
                src: url('texgyreadventor-regular-webfont.eot');
                src: url('texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
                    url('texgyreadventor-regular-webfont.woff') format('woff'),
                    url('texgyreadventor-regular-webfont.ttf') format('truetype'),
                    url('texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            * {
                margin: 0;
                padding: 0;
            }

            html {
                box-sizing: border-box;
            }
            *, *:before, *:after {
                box-sizing: inherit;
            }

            body {
                background: rgba(0,0,0,.9);
                background: rgba(0,0,0,1);
                background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 100%);
                background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,.9)));
                background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 100%);
                background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 100%);
                background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 100%);
                background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 100%);
                color: rgba(255,255,255,.9);
                font-family: 'texgyreadventorregular', sans-serif;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                flex-direction: column;
                font-size: 1.2rem;
                padding: 1rem;
            }

            h1 {
                font-size: 1.7rem;
                line-height: 1.3;
            }
            
            h1 strong {
                font-family: 'texgyreadventorbold', sans-serif;
            }

            h2 {
                display: block;
                font-size: 2.5rem;
                line-height: 1;
                text-transform: uppercase;
                font-family: 'texgyreadventorbold', sans-serif;
            }

            h2, p {
                margin-top: 2rem;
            }

            .you-cant-see-me {
                font-size: 0;
            }

            a {
                color: white;
                display: inline-block;
                text-decoration: none;
                position: relative;
            }

            a:after {
                content: '';
                height: 2px;
                background: white;
                left: 0;
                position: absolute;
                bottom: 0;
                width: 100%;
            }


            @media only screen and (min-width: 480px) {
                body {
                    padding: 1.5rem;
                }
                
                h1 {
                    font-size: 2rem;
                    line-height: 1.3;
                }

                h2 {
                    font-size: 3rem;
                }
            }

        </style>
    </head>
    <body>
         <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <h1>Hi, I'm <strong>Tom Leadbetter</strong> a freelance web designer <b>&amp;</b> developer based in Liverpool, UK.</h1>
        <h2>I design and build websites.</h2>
        <p>If you need a hand with something, please <a href="/cdn-cgi/l/email-protection#51253e3c11253e3c3d3430353334252534237f323e7f243a">get in touch</a>.</p>
        <ul class="you-cant-see-me">
            <li>Responsive</li>
            <li>JavaScript</li>
            <li>WordPress</li>
            <li>eCommerce</li>
            <li>all that sort of thing really</li>
        </ul>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>