Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>A weblap címe</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
       @import url('https://fonts.googleapis.com/css?family=Work+Sans:300&subset=latin-ext');
       html, body {
         height: 100%;
         margin: 0;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         color: white;
         font-family: arial;
       }
       .pirosvonal {
         border: 1px solid red;
       }
       .kozepso {
         flex-grow: 1;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
       }
       .fejlec {
         display: flex;
         justify-content: center;
       }
       .lablec {
         display: flex;
         justify-content: center;
       }
       .hatterkep {
         background-image: url("hatter.jpg");
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
       }
       .hattervideo {
         position: absolute;
         z-index: -100;
         min-width: 100%;
         min-height: 100%;
         width: auto;
         height: auto;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
       }
       a {
         color: white;
         text-decoration: none;
       }
       .fejleclink {
         margin: 0 10px;
       }
       .oriasbetu {
         font-family: 'Work sans';
         font-size: 40px;
         text-align: center;
       }
       .gombocska {
         background-color: rgba(0, 0, 0, .7);
         padding: 10px;
         margin: 10px;
         width: 100px;
         display: inline-block;
         text-align: center;
       }
       .gombdoboz {
         text-align: center;
       }
    </style>
  </head>

  <body class="hatterkep">
<!--    <video class="hattervideo" autoplay loop muted poster="hatter.jpg" src="hatter.mp4"></video>
-->
    <div class="fejlec">
      <a class="fejleclink" href="http://index.hu">Magunkról</a>
      <a class="fejleclink" href="http://origo.hu">Karrier</a>
      <a class="fejleclink" href="masikfajl.htm">Naptár</a>
    </div>
    <div class="kozepso">
	<div class="oriasbetu">Árvíztűrő tükörfúrógép</div>
	<div class="gombdoboz">
         <a class="gombocska" href="http://index.hu">Magunkról</a>
         <a class="gombocska" href="http://origo.hu">Karrier</a>
         <a class="gombocska" href="masikfajl.htm">Naptár</a>
        </div>
    </div>
    <div class="lablec">&copy;NetAcademia 1998-<span id="year">blabla</span></div>
<script>
        var d = new Date();
        var n = d.getFullYear();
        document.getElementById("year").innerHTML = n;
    </script>
  </body>
</html>