Gori

<style>
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(https://fonts.googleapis.com/css?family=Raleway);
body{background-color:#b300b3;}
.img{background:url(https://image.prntscr.com/image/V3_ser5dTNOskWjcENdYVA.png) no-repeat top;background-size:100% 100%;position:absolute;top:20px;left:240px;height:150px;width:150px;border:5px double black;border-radius:50%;z-index:2;}
.box{position:absolute;top:105px;left:350px;height:300px;;background:url(https://i.pinimg.com/564x/6e/fb/f6/6efbf656f4e389e9bebb1dceee226e87.jpg) no-repeat right;background-size:100% 100%;width:510px;border:10px double black;text-align:center;}
.menu{position:absolute;top:105px;left:350px;height:200px;background-color:silver;width:510px;border:10px double black;text-align:center;opacity:0;z-index:-1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;overflow:auto;}
.menu:target{z-index:1;opacity:1;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}

.title{position:absolute;top:22px;left:440px;font-size:50px;font-family:Muli;}
body:hover #box1,body:hover #box2{width:0px;transition: all 0.9s ease-in-out;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;}
.menu1{text-decoration:none;position:absolute;top:10%;left:0%;border-radius:50%;height:17%;width:17%;background-color:black;border:1px double white;}
.menu2{text-decoration:none;position:absolute;top:40%;left:-10%;border-radius:50%;height:17%;width:17%;background-color:black;border:1px double white;}
.menu3{text-decoration:none;position:absolute;top:70%;left:0%;border-radius:50%;height:17%;width:17%;background-color:black;border:1px double white;}
.menu4{text-decoration:none;position:absolute;top:90%;left:25%;border-radius:50%;height:17%;width:17%;background-color:white;border:1px double black;}
.menu5{text-decoration:none;position:absolute;top:-10%;left:27%;border-radius:50%;height:17%;width:17%;background-color:white;border:1px double black;}
.menu1:hover,.menu2:hover,.menu3:hover,.menu4:hover,.menu5:hover{background-color:purple;}
#content{padding-top:10px;padding-left:70px;padding-right:70px;text-align:center;font-family:Raleway;}
</style>
<h1 class="title">Asgore "Gori"</h1><div class="img">

<a class="menu1" href="#2"></a>
<a class="menu2" href="#3"></a>
<a class="menu3" href="#4"></a>
<a class="menu4" href="#"></a>
<a class="menu5" href="#1"></a>
</div>
<div class="box"></div>
<div id="1" class="menu"><div id="content">
<div style="float:left;">
Full Name ||<br>
Nickname ||<br>
Age ||<br>
Gender ||<br>
Sexuality ||<br>
Height & Weight ||<br>
Hair Color ||<br>
Eye Color ||<br>
</div>
<div style="float:right;">


</div>
</div>
<div id="3" class="menu">
<div id="content">
put content here

</div>

</div>
<div id="4" class="menu">
<div id="content">

put content here
</div>

</div>