Untitled

<!doctype html>

<html>
<head>
  <meta charset="utf-8">

  <title>Maciej Giżyński</title>

  <link rel="stylesheet"
  href="res/styles/main3.css">
  <link rel="stylesheet"
  media="screen and (max-width: 1366px) and (min-width: 1025px)" href="res/styles/laptop.css">
  <link rel="stylesheet"
  media="screen and (max-width: 1024px) and (min-width: 769px)" href="res/styles/tablet.css">
  <link rel="stylesheet"
  media="screen and (max-width: 768px)" href="res/styles/mobile.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    <script>
    var left = 0;
    window.onmousewheel = function(e) {
      console.log(e);
      console.log(e.wheelDelta);
      left+= parseInt(e.wheelDelta / 2);
      document.getElementById('image-row').style.marginLeft = left.toString() + "px";
    }
  </script>

</head>

<body>

  <div id="top-box">

    <div> <img id="main-page-logo" src="res/images/LOGO-BLACK.svg"> </div>

    </div>

    <div id="middle-box">

<div id="image-row">
    <div class="image-column"> <img class="middle-box-images" src="res/images/rakieta.jpg"> </div>
    <div class="image-column"> <img class="middle-box-images" src="res/images/golf.jpg"> </div>
    <div class="image-column"> <img class="middle-box-images" src="res/images/panorama2.jpg"> </div>
    <div class="image-column"> <img class="middle-box-images" src="res/images/supra.jpg"> </div>
    <div class="image-column"> <img class="middle-box-images" src="res/images/skyline.jpg"> </div>
    <div class="image-column"> <img class="middle-box-images" src="res/images/rx7.jpg"> </div>
</div>

    </div>

  <div id="bottom-box">

    <div class="menu-box" id="o-mnie">
      <div class="text-menu-box"> O mnie </div>
    </div>
    <div class="menu-box" id="portfolio">
      <div class="text-menu-box"> Portfolio </div>
    </div>
    <div class="menu-box" id="sklep">
      <div class="text-menu-box"> Sklep </div>
    </div>
    <div class="menu-box" id="kontakt">
      <div class="text-menu-box"> Kontakt </div>
    </div>

    </div>

    <div class="o-mnie" id="o-mnie-box">
        <strong>O mnie</strong>
    </div>

    <div class="portfolio" id="portfolio-box">
        <strong>Portfolio</strong>
    </div>

    <div class="sklep" id="sklep-box">
        <strong>Sklep</strong>
    </div>

    <div class="kontakt" id="kontakt-box">
        <strong>Kontakt</strong>
    </div>

<script>

  document.getElementById('o-mnie').onclick = function() {
    document.getElementById('o-mnie-box').style.transform = "translateY(0)";
    document.getElementById('portfolio-box').style.transform = "translateY(100vh)";
    document.getElementById('sklep-box').style.transform = "translateY(100vh)";
    document.getElementById('kontakt-box').style.transform = "translateY(100vh)";
  }
  document.getElementById('main-page-logo').onclick = function() {
    document.getElementById('o-mnie-box').style.transform = "translateY(100vh)";
  }

   document.getElementById('portfolio').onclick = function() {
    document.getElementById('portfolio-box').style.transform = "translateY(0)";
    document.getElementById('o-mnie-box').style.transform = "translateY(100vh)";
    document.getElementById('sklep-box').style.transform = "translateY(100vh)";
       document.getElementById('kontakt-box').style.transform = "translateY(100vh)";

  }
   document.getElementById('main-page-logo').onclick = function() {
      document.getElementById('portfolio-box').style.transform = "translateY(100vh)";
  }

   document.getElementById('sklep').onclick = function() {
    document.getElementById('sklep-box').style.transform = "translateY(0)";
    document.getElementById('o-mnie-box').style.transform = "translateY(100vh)";
    document.getElementById('portfolio-box').style.transform = "translateY(100vh)";
    document.getElementById('kontakt-box').style.transform = "translateY(100vh)";
  }
   document.getElementById('main-page-logo').onclick = function() {
      document.getElementById('sklep-box').style.transform = "translateY(100vh)";
  }

   document.getElementById('kontakt').onclick = function() {
    document.getElementById('kontakt-box').style.transform = "translateY(0)";
    document.getElementById('o-mnie-box').style.transform = "translateY(100vh)";
    document.getElementById('portfolio-box').style.transform = "translateY(100vh)";
       document.getElementById('sklep-box').style.transform = "translateY(100vh)";
  }
   document.getElementById('main-page-logo').onclick = function() {
      document.getElementById('kontakt-box').style.transform = "translateY(100vh)";
  }

</script>

</body>
</html>