testcode

<style>
@import url('https://fonts.googleapis.com/css2?family=Mr+Bedfort&family=Rock+Salt&display=swap');
body {
background-color: ;
background-image: url("https://www.transparenttextures.com/patterns/handmade-paper.png");
background-position: fixed;
background-size: 35%;
background-repeat:repeat;
}

.sukititle1{
 position: fixed;
 bottom: 27vh;
 left: 27vw;
padding: 1px;
font-family: 'Mr Bedfort', cursive;
text-decoration: none;
font-size: 9vh;
color: #000;
display: inline-block;
opacity: 0;
height: 6vh;
width: 50vh;
z-index:4;
text-align: center;
text-shadow:1px 1px #eee;animation: paint 1s forwards;
animation-timing-function:linear;
 animation-delay: 3s;
}

.sukititle2{
 position: fixed;
 bottom: 20vh;
 left: 37vw;
padding: 1px;
font-family: 'Rock Salt', cursive;
text-decoration: none;
font-size: 7vh;
color: #000;
display: inline-block;
opacity: 0;
height: 6vh;
width: 95vh;
z-index:4;
text-align: center;
text-shadow:1px 1px #eee;
animation: paint 1s forwards;
animation-timing-function:linear;
 animation-delay: 3s;
}

.flower1{
 position: fixed;
 bottom: 0vh;
 left: 0vw;
 z-index: 1;
height: 50vh;
width: 30vw;
background-image: url("https://i.ibb.co/vVBYgnK/ezgif-com-gif-maker-6.gif");
background-position: fixed;
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(0deg);
 transform: rotate(-45deg);
}

.flower2{
 position: fixed;
 bottom: 0vh;
 left: 13vw;
 z-index: 2;
height: 50vh;
width: 30vw;
background-image: url("https://i.ibb.co/2jxCVF3/ezgif-com-gif-maker-8.gif");
background-position: fixed;
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(50deg);
 transform: rotate(-15deg);
}

.flower3{
 position: fixed;
 bottom: 0vh;
 right: 13vw;
 z-index: 2;
height: 50vh;
width: 30vw;
background-image: url("https://i.ibb.co/2jxCVF3/ezgif-com-gif-maker-8.gif");
background-position: fixed;
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(290deg);
 transform: rotate(15deg) scaleX(-1);
}

.flower4{
 position: fixed;
 bottom: 0vh;
 right: 0vw;
 z-index: 1;
height: 50vh;
width: 30vw;
background-image: url("https://i.ibb.co/vVBYgnK/ezgif-com-gif-maker-6.gif");
background-position: fixed;
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(100deg);
 transform: rotate(45deg) scaleX(-1);
}

.banner{
 position: fixed;
 bottom: -15vh;
 left: 25vw;
 z-index: 3;
height: 50vh;
width: 50vw;
background-image: url("https://www.pngkit.com/png/full/31-316474_transparent-title-blue-brush-stroke-brush-stroke-black.png");
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(70deg);
opacity: 0;
animation: paint 1s forwards;
animation-timing-function:linear;
 animation-delay: 3s;
}

.suki1{
 position: fixed;
 bottom: -2vh;
 left: 25vw;
 z-index: 0;
height: 105vh;
width: 50vw;
background-image: url("https://i.ibb.co/2cFWN5f/sukipic1.png");
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(0deg);
opacity: 1;
animation: sukiout .5s forwards;
animation-timing-function:linear;
 animation-delay: 3s;
}

.suki2{
 position: fixed;
 bottom: -2vh;
 left: 25vw;
 z-index: 0;
height: 105vh;
width: 50vw;
background-image: url("https://i.ibb.co/r34hnkB/sukipic2.png");
background-size: 100%;
background-repeat: no-repeat;
filter: hue-rotate(0deg);
opacity: 0;
animation: sukiin .5s forwards;
animation-timing-function:linear;
 animation-delay: 3s;
}

#navi1 {
position: fixed;
 left: -30.5vw;
 bottom: 70vh;
 z-index: 2;
opacity: 0;
animation: brushmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi1 a {
display: inline-block;
background-image: url("https://i.ibb.co/qkGw1v3/sukibrushstat.png");
background-size: 100%;
background-repeat: no-repeat;
height: 15vh;
width: 40vw;
 transform: rotate(-15deg);

}


#navi1:hover {
 left: -23vw;
 bottom: 70vh;
display: inline-block;
transition: .8s;
}

#navi2 {
position: fixed;
 left: -30.5vw;
 bottom: 57vh;
 z-index: 2;
opacity: 0;
animation: brushmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi2 a {
display: inline-block;
background-image: url("https://i.ibb.co/nc9dnqp/sukibrushhc-1.png");
background-size: 100%;
background-repeat: no-repeat;
height: 15vh;
width: 40vw;
 transform: rotate(-15deg);

}


#navi2:hover {
 left: -23vw;
 bottom: 57vh;
display: inline-block;
transition: .8s;
}

#navi3 {
position: fixed;
 left: -30.5vw;
 bottom: 44vh;
 z-index: 2;
opacity: 0;
animation: brushmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi3 a {
display: inline-block;
background-image: url("https://i.ibb.co/SxxPQ9t/sukibrushfriends.png");
background-size: 100%;
background-repeat: no-repeat;
height: 15vh;
width: 40vw;
 transform: rotate(-15deg);

}


#navi3:hover {
 left: -23vw;
 bottom: 44vh;
display: inline-block;
transition: .8s;
}

#navi4 {
position: fixed;
 left: -30.5vw;
 bottom: 31vh;
 z-index: 2;
opacity: 0;
animation: brushmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi4 a {
display: inline-block;
background-image: url("https://i.ibb.co/17Ky7K5/sukibrushooc.png");
background-size: 100%;
background-repeat: no-repeat;
height: 15vh;
width: 40vw;
 transform: rotate(-15deg);

}


#navi4:hover {
 left: -23vw;
 bottom: 31vh;
display: inline-block;
transition: .8s;
}

#navi5 {
position: fixed;
 left: 25vw;
 bottom: -45vh;
 z-index: 4;
opacity: 1;
animation: brhmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi5 a {
display: inline-block;
background-image: url("https://i.ibb.co/Z2LrjS4/sukisktechbook.png");
background-size: 100%;
background-repeat: no-repeat;
height: 50vh;
width: 15vw;
 transform: rotate(-5deg);

}


#navi5:hover {
 left: 25vw;
 bottom: -25vh;
display: inline-block;
transition: .8s;
}

#navi6 {
position: fixed;
 left: 55vw;
 bottom: -40vh;
 z-index: 4;
opacity: 1;
animation: brhmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi6 a {
display: inline-block;
background-image: url("https://i.ibb.co/1TwzX90/sukipallet.png");
background-size: 100%;
background-repeat: no-repeat;
height: 50vh;
width: 15vw;
 transform: rotate(50deg);

}


#navi6:hover {
 left: 55vw;
 bottom: -25vh;
display: inline-block;
transition: .8s;
}

#navi7 {
position: fixed;
 left: 42vw;
 bottom: -46vh;
 z-index: 4;
opacity: 1;
animation: brhmove .5s forwards;
animation-timing-function:linear;
 animation-delay: 4.5s;
transition: .8s;
}

#navi7 a {
display: inline-block;
background-image: url("https://i.ibb.co/CbDBfzp/sukiblankcanvas.png");
background-size: 100%;
background-repeat: no-repeat;
height: 50vh;
width: 15vw;
 transform: rotate(0deg);

}


#navi7:hover {
 left: 42vw;
 bottom: -25vh;
display: inline-block;
transition: .8s;
}


.content{
position: fixed;
bottom: 42.8vw;
left: 100vw;
z-index: 1;
opacity: 1;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
bottom: 42.8vw;
left: 33vw;
z-index: 0;
opacity: 1;
}


.contentbox{
background-color: #8b0000;
border-style: ridge;
border-width: 10px;
border-color: #cd7f32;
padding: 5px;
font-family: 'Delius Swash Caps', cursive;
font-size:20px;
color: #4A96BA;
letter-spacing: 0px;
width: 320px;
height: 470px;
text-align: center;
z-index: 0;
overflow-y: scroll;
position: fixed;
opacity: 1;
}


@keyframes paint{
 0% { opacity: 0;  }

 100% { opacity: 1; }

}

@keyframes sukiout{
 0% { opacity: 1;  }

 100% { opacity: 0; }

}

@keyframes sukiin{
 0% { opacity: 0;  }

 100% { opacity: 1; }

}

@keyframes brushmove{
 0% { opacity: 0;  }

 100% { opacity: 1; }

}


</style>
<body>

<div class="sukititle1">
Suki Hamae
</div></div>

<div class="sukititle2">
The art hero; crafty
</div></div>

<div class="flower1">

</div>

<div class="flower2">

</div>

<div class="flower3">

</div>

<div class="flower4">

</div>

<div class="banner">

</div>

<div class="suki1">

</div>

<div class="suki2">

</div>

<div id="navi1"><a href="#one"></a></div></div>
<div id="navi2"><a href="#two"></a></div></div>
<div id="navi3"><a href="#three"></a></div></div>
<div id="navi4"><a href="#four"></a></div></div>
<div id="navi5"><a href="#five"></a></div></div>
<div id="navi6"><a href="#six"></a></div></div>
<div id="navi7"><a href="#"></a></div></div>

 <div id="one" class="content"><div class="contentbox">
box1


</div>
</div>

 <div id="two" class="content"><div class="contentbox">
box2


</div>
</div>

 <div id="three" class="content"><div class="contentbox">
box3


</div>
</div>

</body>
</body>