<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
    <title>sp-codes</title>
    <link rel="shortcut icon" href="img/samuel.png">

    <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css" type="text/css"
          media="screen">
    <link rel="stylesheet" href="bower_components/foundation-sites/dist/foundation.min.css" type="text/css"
          media="screen">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.min.js"></script>
    <script src="bower_components/flip/dist/jquery.flip.min.js"></script>
    <script>
        $(document).ready(function () {
            var card = $('#card');
            card.css('cursor', 'pointer');
            card.find('.back').removeClass('hide');
            card.flip({
                trigger: 'click',
                speed: 500,
                reverse: false
            });
        });
    </script>

    <style>
        body {
            background-image: url("img/bg.png");
            padding: 2%;
            color: #fff;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        hr {
            border-bottom: 1px solid #fff;
        }

        .logo {
            max-width: 256px;
            max-height: 256px;
            background-color: #ffffff;
            border-radius: 50%;
            border: 1px solid #222222;
        }

        .logo.small {
            max-width: 128px;
            max-height: 128px;
        }

        .menu a {
            color: #eee;
        }

        .menu a:hover {
            color: #fff;
        }

        #card {
            display: inline-block;
            margin: 1rem;
        }
    </style>
    <!-- Piwik -->
    <script type="text/javascript">
        var _paq = _paq || [];
        _paq.push(["setDomains", ["*.www.sp-codes.de"]]);
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function () {
            var u = "//piwik.sp-codes.de/";
            _paq.push(['setTrackerUrl', u + 'piwik.php']);
            _paq.push(['setSiteId', '3']);
            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
            g.type = 'text/javascript';
            g.async = true;
            g.defer = true;
            g.src = u + 'piwik.js';
            s.parentNode.insertBefore(g, s);
        })();
    </script>
    <noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=3" style="border:0;" alt=""/></p></noscript>
    <!-- End Piwik Code -->
</head>
<body class="text-center">
<div id="card">
    <div class="front">
        <img class="logo hide-for-small-only" src="img/samuel.png">
        <img class="logo small show-for-small-only" src="img/samuel.png">
    </div>
    <div class="back hide">
        <img class="logo hide-for-small-only" src="img/samuel.png">
        <img class="logo small show-for-small-only" src="img/samuel.png">
    </div>
</div>

<hr/>

<div class="row columns">
    <div class="medium-8 medium-centered">
        <h2>Herzlich willkommen bei sp-codes!</h2>
        <p>Mein Name ist Samuel Philipp und ich bin ein Softwareentwickler aus Karlsruhe. Nehmen Sie gerne Kontakt mit
            mir
            auf.</p>
    </div>
</div>

<hr/>

<div class="menu-centered hide-for-small-only">
    <ul class="menu">
        <li><a href="https://github.com/samuel-p"><span class="fa fa-4x fa-github"></span></a></li>
        <li><a href="https://play.google.com/store/apps/dev?id=8296137950626773262"><span
                class="fa fa-4x fa-android"></span></a></li>
        <li><a href="https://plus.google.com/u/0/+SamuelPd"><span
                class="fa fa-4x fa-google-plus-official"></span></a></li>
        <li><a href="mailto:mail@sp-codes.de"><span
                class="fa fa-4x fa-envelope"></span></a></li>
    </ul>
</div>
<div class="menu-centered show-for-small-only">
    <ul class="menu">
        <li><a href="https://github.com/samuel-p"><span class="fa fa-2x fa-github"></span></a></li>
        <li><a href="https://play.google.com/store/apps/dev?id=8296137950626773262"><span
                class="fa fa-2x fa-android"></span></a></li>
        <li><a href="https://plus.google.com/u/0/+SamuelPd"><span
                class="fa fa-2x fa-google-plus-official"></span></a></li>
        <li><a href="mailto:mail@sp-codes.de"><span
                class="fa fa-2x fa-envelope"></span></a></li>
    </ul>
</div>

<div class="menu-centered">
    <ul class="menu">
        <li><a href="https://www.samuel-philipp.de">www.samuel-philipp.de</a></li>
    </ul>
</div>

<script>
    $(document).foundation();
</script>

</body>
</html>