Untitled

<html lang="de">

<head>
  <title>CreepGaming</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
  <link rel="stylesheet" href="style.css">


  <!-- Font-Verlinkungen -->

  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900&subset=latin-ext" rel="stylesheet">

  <!-- Ende der Fontverlinkungen -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body class="background-c">


  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>


  <div class="header" ID="wrapper">

    <!-- TEXT EFFEKT------------------------

    <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="150px" viewBox="0 0 700 150">
<style type="text/css">

<![CDATA[

    text {
        filter: url(#filter);
        fill: #ffF;
        font-family: 'Share Tech Mono', sans-serif;
        font-size: 100px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
            }
]]>
</style>
    <defs>

        <filter id="filter">
            <feFlood flood-color="#343434" result="black" />
            <feFlood flood-color="red" result="flood1" />
            <feFlood flood-color="limegreen" result="flood2" />
            <feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
            <feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
            <feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
            <feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
            <feComposite in="flood1" in2="off1a" operator="in"  result="comp1" />
            <feComposite in="flood2" in2="off2a" operator="in" result="comp2" />

            <feMerge x="0" width="100%" result="merge1">
                <feMergeNode in = "black" />
                <feMergeNode in = "comp1" />
                <feMergeNode in = "off1b" />

                <animate
                    attributeName="y"
                    id = "y"
                    dur ="4s"

                    values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'

                    keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

                    repeatCount = "indefinite" />

                <animate attributeName="height"
                    id = "h"
                    dur ="4s"

                    values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'

                    keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'

                    repeatCount = "indefinite" />
            </feMerge>


            <feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
                <feMergeNode in = "black" />
                <feMergeNode in = "comp2" />
                <feMergeNode in = "off2b" />

                <animate attributeName="y"
                    id = "y"
                    dur ="4s"
                    values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'

                    keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'

                    repeatCount = "indefinite" />

                <animate attributeName="height"
                    id = "h"
                    dur = "4s"

                    values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'

                    keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513;  1'

                    repeatCount = "indefinite" />
            </feMerge>

            <feMerge>
                <feMergeNode in="SourceGraphic" />

                <feMergeNode in="merge1" />
            <feMergeNode in="merge2" />

            </feMerge>
        </filter>

    </defs>

<g>
    <text x="0" y="100">CreepGaming</text>
</g>
</svg>
    TEXT EFFEKT------------------------ -->

      <h1 class="headline">
      CreepGaming
    </h1>
    <p class="orangehead">
      We make things, and you dont.
    </p>
    &nbsp;
  </div>


  <!-- Buttons in der Mitte -->

  <div class="box">

    <a href="https://www.google.de/abc">
      <div class="imageJumprange">
        <div class="orangetext">
          Jumprange Calculator
        </div>
      </div>
    </a>

    <div class="boxmid">
      <a href="https://www.google.de/def">
        <div class="imageFrame">
          <div class="orangetext">
            Project Y
          </div>
        </div>
      </a>
    </div>

    <a href="https://www.google.de/ghi">
      <div class="imageEngineer">
        <div class="orangetext">
          Engineering Table
        </div>
      </div>
    </a>


  </div>


  <script>
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
  </script>

</body>
<!-- Ende der Buttons -->

<!-- Footer ab hier -->

<div class="footer">

  <footer class="copyright">
    Design and texts &copy; 2016
    <script>
      newDate().getFullYear()>2016&&document.write("-"+new Date().getFullYear());
    </script>
    // Written and coded by Timo Resch / d4ngrs
  </footer>

</div>

</html>