gistfile1.html

5/28/2014 - 8:41 PM
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>
<html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" data-ng-app="hinchasApp"> <!--<![endif]-->
<head>
<title>HINCH.AS</title>

<style>
    body{
    background: url(https://d2xju4w2ez22ih.cloudfront.net/landing_players/20140314/images/fondo-1.jpg) no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-color: black;
    background-size: 1344px;
    background-position: 50% 0%;
    margin: 0px;
    font-family: Roboto,sans-serif;
    color: white;
    height: 900px;
    overflow-y: scroll;
    text-align: center;
    height: 880px;
    }

    .footer {
       height: 40px;
        padding-top: 120px;
        position: absolute;
        top: 718px;
        margin-left: 50%;
    }

    .footer a{
    width: 19px;
    height: 19px;
    position: absolute;
    background-size: contain;
    }

    .footer a.twitter {
    background-image: url(https://d2xju4w2ez22ih.cloudfront.net/landing_players/20140314/images/twitter.png);
    margin-left: 18px;
    }
    .footer a.facebook {
    background-image: url(https://d2xju4w2ez22ih.cloudfront.net/landing_players/20140314/images/facebook.png);
    margin-left: -40px;
    }
    .footer a.pinterest {
    background-image: url(https://d2xju4w2ez22ih.cloudfront.net/landing_players/20140314/images/pinterest.png);
    margin-left: -11px;
    }

    div.container{
        position: absolute;
        width: 760px;
        margin: 0px auto 0 auto;
        height: 100%;
        left: 50%;
        margin-left: -376px;
    }

    .video{
        position: absolute;
        top: 267px;
        left: 125px;
    }

    .subText{
        position: absolute;
        top: 677px;
        width: 100%;
    }

    body > div > div.video {
    margin: 267px 0 0 90px;
    }

    body > div > div.video > p {
    display: none;
    }

    body > div > div > h5 {
    color: #87c677;
    /* text-transform: uppercase; */
    font-weight: 500;
    margin: 17px 0 24px 0;
    font-size: 25px;
    }

    body > div > div > h3 {
    font-size: 39px;
    text-transform: uppercase;
    margin: 0;
    font-weight: 600;
    }

    body > div > div > h4 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 51px 0 0 0;
    }

    body > div > div > h6 {
    margin: 0 0 35px 0;
    font-size: 28px;
    font-weight: 200;
    text-transform: uppercase;
    }

    body > div > div > a button {
    width: 330px;
    position: absolute;
    top: 570px;
    left: 212px;
    padding: 16px;
    margin: 20px 0 66px 0;
    border-radius: 7px;
    border-style: none;
    background-color: white;
    font-size: 19px;
    font-weight: 700;
    color: #323232;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#E6E6E6), color-stop(82%,#B4BDB3), color-stop(99%,#ACACAC));
    background: -webkit-linear-gradient(top, #E6E6E6 8%,#B4BDB3 82%,#ACACAC 99%);
    background: -o-linear-gradient(top, #E6E6E6 8%,#B4BDB3 82%,#ACACAC 99%);
    background: -ms-linear-gradient(top, #E6E6E6 8%,#B4BDB3 82%,#ACACAC 99%);
    background: linear-gradient(to bottom, #E6E6E6 8%,#B4BDB3 82%,#ACACAC 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E6E6', endColorstr='#ACACAC',GradientType=0 );
    }

    body > div > div > a button:hover{
    background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#C7C7C7), color-stop(82%,#B4BDB3), color-stop(99%,#ACACAC));
    background: -webkit-linear-gradient(top, #C7C7C7 8%,#B4BDB3 82%,#ACACAC 99%);
    background: -o-linear-gradient(top, #C7C7C7 8%,#B4BDB3 82%,#ACACAC 99%);
    background: -ms-linear-gradient(top, #C7C7C7 8%,#B4BDB3 82%,#ACACAC 99%);
    background: linear-gradient(to bottom, #C7C7C7 8%,#B4BDB3 82%,#ACACAC 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C7C7C7', endColorstr='#ACACAC',GradientType=0 );
    }

    body > div > div > p {
    margin: 0 0 7px 0;
    font-size: 16px;
    }

    @media (max-width: 800px){
    body{
    background-size: 800px;
    height: 552px;
    }
    body > div > div > h3 {
    font-size: 17px!important;
    margin-top: 5px;
    }
    body > div > div > h4 {
    font-size: 12px;
    margin: 28px 0 0 0;
    }
    body > div > div > h5 {
    font-weight: 500;
    margin: 6px auto 0 auto;
    font-size: 12px;
    width: 299px;
    }
    body > div > div > h6 {
    margin: 0 0 35px 0;
    font-size: 18px;
    }
    iframe {
    width: 300px;
    top: 20px;
    height: 169px;
    margin-top: -16px;
    }
    p {
    font-size: 14px;
    margin: 0 0 2px 0;
    }
    p:nth-of-type(1){
    margin-top: -40px;
    }
    body > div > div > a button {
    width: 270px;
    padding: 16px;
    border-radius: 7px;
    border-style: none;
    background-color: white;
    font-size: 15px;
    font-weight: 700;
    position: absolute;
    top: 316px;
    left: 239px;
    }
    .video{
        top: 175px;
        left: 226px;
    }
    .subText{
        top: 450px;
    }
    .subText p{
        font-size: 11px;
    }
    .footer{
        top:382px;
    }
    }


</style>


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--Object tag begin-->
<meta property="og:site_name" content="HINCH.AS" />
<meta property="og:title" content="HINCH.AS" />
<meta property="og:description" content="${description}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://d2xju4w2ez22ih.cloudfront.net/fb_img/IFFD_objetag-EN.jpg" />
<!--Object tags ends-->

<link rel="shortcut icon" href="favicon.ico"/>
<!-- <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:400,300,500,700' type='text/css'> -->

<!-- build:css styles/main.css -->

<!-- start GoogleAnalytics -->
<!-- <script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', "${googleUA}", { 'cookieDomain': 'none' });
</script> -->
<!-- end GoogleAnalytics -->
<!-- ${videoUrl} -->
</head>
<body>
<div class="container">
    <div>
        <h4 data-i18n="ha"></h4>
        <h3 data-i18n="hb"></h3>
        <!-- Variable nombre -->
        <h5 data-i18n="description"></h5>
        <div class="video">
            <!-- Variable video -->
            <!-- <iframe src="${playerUrl}" width="502" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->
        </div>
        <a href="http://www.hinch.as/" target="_blank">
            <button data-i18n="hc"></button>
        </a>
        <div class="subText">
            <p data-i18n="hd"></p>
            <p>
                <span data-i18n="hv"></span>
                &nbsp;<a href="http://www.hinch.as">www.hinch.as</a>&nbsp;
                <span data-i18n="he"></span>
            </p>
        </div>
    </div>
    <div class="footer">
        <a class="twitter" target="_blank" href="https://twitter.com/hinchasok"></a>
        <a class="facebook" target="_blank" href="https://www.facebook.com/hinchasok"></a>
        <a class="pinterest" target="_blank" href="http://www.pinterest.com/hinchas/"></a>
    </div>

    <select class="lang">
        <option value="es">Español</option>
        <option value="en">English</option>
        <option value="de">Deutsch</option>
        <option value="fr">Fran&ccedil;ais</option>
        <option value="it">Italiano</option>
        <option value="pt">Português</option>
    </select>
</div>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.js"></script>
    <script>

        var translations = {
            'en': {
                ha: 'THE FOOTBALL WORLD IS CHOOSING THE',
                hb: 'INTERNATIONAL FOOTBALL FAN DAY',
                description: '${desc_en}',
                hc: 'Choose your day!',
                hd: 'We, the world\'s football fans, are creating our own network.',
                hv: 'Visit',
                he: 'and join us!'
            },
            'es': {
                ha: 'EL MUNDO DEL F&Uacute;TBOL EST&Aacute; ELIGIENDO EL',
                hb: 'D&Iacute;A INTERNACIONAL DEL HINCHA',
                description: '${desc_es}',
                hc: '&iexcl;Elige tu d&iacute;a!',
                hd: 'Nosotros, los hinchas del mundo, estamos creando nuestra red.',
                hv: 'Visita',
                he: 'y sumate tu tambi&eacute;n.'
            },
            'de': {
                ha: 'DIE FUSSBALLWELT W&Auml;HLT SCHON DEN',
                hb: 'INTERNATIONALEN TAG DES FUSSBALLFANS',
                description: '${desc_de}',
                hc: 'W&auml;hle f&uuml;r deinen Tag!',
                hd: 'Wir, die Fans weltweit, schaffen unser eigenes Netzwerk.',
                hv: 'Schaue bei',
                he: 'vorbei und mache auch du mit.'
            },
            'fr': {
                ha: 'LE MONDE DU FOOTBALL VA &Eacute;LIRE LA',
                hb: 'JOURN&Eacute;E MONDIALE DU SUPPORTER',
                description: '${desc_fr}',
                hc: 'Choisissez votre journ&eacute;e !',
                hd: 'Nous les supporters de football du monde on va cr&eacute;er notre re&acute;seau.',
                hv: 'Visitez',
                he: 'et participez vous aussi.'
            },
            'it': {
                ha: 'IL MONDO DEL CALCIO STA SCEGLIENDO LA',
                hb: 'GIORNATA MONDIALE DEL TIFOSO',
                description: '${desc_it}',
                hc: 'Scegli la tua giornata!',
                hd: 'Noi, i tifosi del mondo, stiamo creando la nostra rete.',
                hv: 'Visita',
                he: 'e uniti anche tu.'
            },
            'pt': {
                ha: 'O MUNDO DO FUTEBOL EST&Aacute; ESCOLHENDO O ',
                hb: 'DIA INTERNACIONAL DO TORCEDOR',
                description: '${desc_pt}',
                hc: 'Escolha seu dia!',
                hd: 'N&oacute;s, os torcedores do mundo, estamos criando nossa rede.',
                hv: 'Visite',
                he: 'e some-se voc&ecirc;.'
            }
        }

        $(document).ready(function () {

            // Ex: en-US
            // var lang = i18n.detectLanguage() || 'en-US';
            var lang = 'fr';

            // Ex: en
            var shortLang = lang.split('-')[0];

            // Each element with data-i18n
            $('[data-i18n]').each(function (index, el) {
                // Get key
                var key = $(el).data('i18n');
                // Replace with translation
                $(el).html(translations[shortLang][key]);
            });

            $('.lang').on('change', function (ev, d) {

                var lang = $(this).val();

                $('[data-i18n]').each(function (index, el) {
                    // Get key
                    var key = $(el).data('i18n');
                    // Replace with translation
                    $(el).html(translations[lang][key]);
                });

            });

        });
    </script>

</body>

</html>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

gistfile1.html
