SONICUUUU

<style>
  body {
  padding-top: 80px;
  text-align: center;
  font-family: monaco, monospace;
  background-color:#000;
  background-size: cover;
}

#link{


 width:75px;
 height:150px;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-75px;
 margin-left:-37.5px;
z-index:99;
}

#link a{
width:75px;
height:40px;
background-color:#dadada;
display:block;
margin-bottom:10px;
}

#box1{
width:600px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
opacity:0;
}

#box1:target{
  opacity:1;
  transition:1s;
}
#box2{
width:600px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
opacity:0;
}

#box2:target{
  opacity:1;
  transition:1s;
}

#tab1{
  Width:250px;
  height:400px;
  background-color:#fff;
  position:absolute;
}

#tab2{
    Width:250px;
  height:250px;
  background-color:#fff;
  position:absolute;
  left:60%;
  top:15%;

}

#tab3{
   Width:250px;
  height:400px;
  background-color:#fff;
  position:absolute;
   left:60%;


}

#tab4{
      Width:250px;
  height:250px;
  background-color:#fff;
  position:absolute;
  top:15%;

}





</style>

<div id="link">
  <a href="#box1"></a>
   <a href="#box2"></a>

</div>
<div id="box1">
<div id="tab1"></div>
<div id="tab2"></div>
</div>
<div id="box2">
<div id="tab3"></div>
<div id="tab4"></div>
</div>