Untitled

<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
<style type="text/css">
.kontener{
width: 978px;
margin: auto;
}

.kol{
width: 30%;
margin-left: 2%;
float: left;
height: 300px;
color: #fff;
text-align: center;
line-height: 300px;
}

.srodek {
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
}

html .kol:hover{
opacity: 0.8;

}

html .srodek:hover{
font-size: 150%;
}

.naglowek{
font-size: 40px;
color: #fff;
}

.tresc{
font-size: 20px;
color: #fff;
}
</style>
</head>
<body bgcolor="#000" background="tlo3.jpg">

<div align="middle" style="margin-bottom: 100px;">
    <span style="text-align: center; font-size: 50px; font-family: AR ESSENCE; color: #fff;">Jakub Hutyra</span>
    <a href="https://www.facebook.com/kuba.hutyra">
        <img src="fb.png" style="float: right; margin-right: 50px;">
        </a>
    <a href="http://www.agh.edu.pl/"><img src="logo_agh.jpg" style="float: left; margin-left: 50px;">
    </a>
</div>

<div align="left" style="font-size: 20px; color: #fff; font-family: AHARONI; margin-bottom: 50px;">
    <p style="margin-left: 200px;">Czesć jestem studentem pierwszego roku AGH a dokładniej</p>
        <p style="margin-left:250px;">
        <span style="color: blue;"><strong>mechaniki i budowy maszyn</strong></span> na <strong>wydziale inżynierii mechanicznej i robotyki</strong></span>
        </p>
</div>

<div class="kontener" id="Page1">
    <a href="#" onclick="return show('Page2','Page1');"><div class="kol" style="background-color: rgba(255, 255, 255, 0.3); border: 1px dotted #fff;">
    <span class="srodek">chuj</span>
    </div></a>
    <a href="#" onclick="return show('Page3','Page1');"><div class="kol" style="background-color: rgba(62, 99, 174, 0.3); border: 1px dotted #3e63ae;">
    <span class="srodek">ci</span>
    </div></a>
    <a href="#" onclick="return show('Page4','Page1');"><div class="kol" style="background-color: rgba(241, 243, 61, 0.3); border: 1px dotted #f1f33d;">
    <span class="srodek">w dupe</span>
    </div></a>
</div>

    <div id="Page2" align="middle" style="display:none;">
        <p class="naglowek">Naglowek 1</p>
        <p class="tresc">Huti lubi czarne chuje</p>
        <a href="#" onclick="return show('Page1','Page2');">Powrot</a>
    </div>

    <div id="Page3" align="middle" style="display:none;">
        <p class="naglowek">Naglowek 2</p>
        <p class="tresc">Huti lubi biale chuje i renifery</p>
        <a href="#" onclick="return show('Page1','Page3');">Powrot</a>
    </div>

    <div id="Page4" align="middle" style="display:none;">
        <p class="naglowek">Naglowek 3</p>
        <p class="tresc">Huti lubi zolte chuje</p>
        <a href="#" onclick="return show('Page1','Page4');">Powrot</a>
    </div>

</body>
</html>