Yoarashi Code

@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');
@import url('https://fonts.googleapis.com/css?family=Raleway:400,900');
@font-face {
 font-family: 'Russian';
 src: url('https://dl.dropboxusercontent.com/s/rq3lpasz1xn5b9k/Russian.ttf');
}

body{
background-color:#8d140b;
overflow:hidden;
}

#image{
width:32vw;
height:32vw;
background-color:#fff;
border-radius:50%;
position:absolute;
top:15vh;
left:2vw;
background-image:url(https://i.pinimg.com/564x/cd/e3/ce/cde3ce0c34df583404559a863d1f7899.jpg);
background-size:110%;
border:1vh solid #fff;
filter:contrast(200%) saturate(100%);
z-index:10;
}

#blob{
background-image:url(https://i.imgur.com/H7NLGbw.png);
background-size:100%;
width:48vw;
height:65vh;
background-repeat:no-repeat;
z-index:11;
position:absolute;
top:2vh;
left:4vw;
}

#shout{
clip-path: polygon(0 65%, 0 35%, 100% 0, 100% 100%);
z-index:1;
width:55vw;
height:70vh;
background-color:white;
position:absolute;
left:30vw;
top:15vh;
opacity:1;

}

#shouting{
clip-path: polygon(0 65%, 0 35%, 100% 0, 100% 100%);
z-index:1;
width:53vw;
height:66vh;
background-color:#8d140b;
position:absolute;
top:2vh;
left:1vw;
}

#topbar{
width:100vw;
height:15vh;
background-color:black;
position:absolute;
top:0vh;
left:18vw;
border-left:#fff solid 1vw;
border-bottom:#fff solid 2vh;

}

#botbar{
width:100vw;
height:15vh;
background-color:black;
position:absolute;
bottom:0vh;
left:18vw;
border-left:#fff solid 1vw;
border-top:#fff solid 2vh;

}

.text1{
font-family: 'Rubik Mono One', sans-serif;
font-size:15vh;
color:#fff;
position:absolute;
z-index:20;
top:0%;

}
.text2{
font-family: 'Rubik Mono One', sans-serif;
font-size:15vh;
color:#fff;
position:absolute;
z-index:20;
top:0%;
left:19%;
}

.text3{
font-family: 'Rubik Mono One', sans-serif;
font-size:15vh;
color:#fff;
position:absolute;
z-index:20;
bottom:-2%;
}

.text4{
font-family: 'Rubik Mono One', sans-serif;
font-size:15vh;
color:#fff;
position:absolute;
z-index:20;
bottom:-2%;
left:19%;
}

#navi{
background-color:transparent;
width:15vw;
height:66vh;
position:absolute;
right:0%;
top:17%;
z-index:10;
border-left:2vh solid #fff;

}

#navi .a1{
display:block;
width:16wh;
height:15vh;
background-color:#000;
border-bottom:2vh solid #fff;
transition:1s;
right:1vw;
}

#navi .a1:hover{
background-color:#fff;
}

#navi .a2{
display:block;
width:15wh;
height:15vh;
background-color:#8d140b;
transition:1s;
border-bottom:2vh solid #fff;

}

#navi .a2:hover{
background-color:#fff;
}

#navi .a3{
display:block;
width:15wh;
height:15vh;
background-color:#000;
transition:1s;
border-bottom:2vh solid #fff;

}

#navi .a3:hover{
background-color:#fff;
}

#navi .a4{
display:block;
width:15wh;
height:15vh;
background-color:#8d140b;
transition:1s;

}

#navi .a4:hover{
background-color:#fff;
}

#boxbackground{
background-image:url(https://i.imgur.com/QKcdZge.png);
background-size:100%;
background-repeat:no-repeat;
width:50vw;
height:85vh;
position:absolute;
z-index:50;
top:5%;
left:35%;
filter:drop-shadow(0px 0px 1px #fff);
opacity:0;
}

.whirlwind{
font-family:'Russian';
font-size:10.3vh;
color:#fff;
position:absolute;
top:86%;
left:22.5%;
width:10vw;
height:10vh;
}

.passion{
font-family:'Russian';
font-size:5vh;
color:#fff;
position:absolute;
left:16vw;
top:2vh;
}

.quirk{
font-family:'Russian';
font-size:3vh;
color:#fff;
position:absolute;
top:89%;
left:65%;
}

#quote1, #quote2, #quote3, #quote4{
width:13vw;
height:45vh;
position:absolute;
top:11vh;
right:6vw;
z-index:1;
font-family: 'Raleway', sans-serif;
color:#fff;
font-weight:900;
font-size:25pt;
opacity:0;
}

.quotation{
color:#dadada;
font-size:30pt;
position:absolute;
left:-2.5vw;
top:-2vh;
font-family: 'Rubik Mono One', sans-serif;

}

#one, #two, #three, #four{
width:20vw;
height:58vh;
position:absolute;
left:8vw;
top:11vh;
z-index:0;
font-family: 'Raleway', sans-serif;
color:#fff;
font-size:11pt;
opacity:0;
}

#img1, #img2, #img3, #img4{
clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 80%);
position:absolute;
bottom:11vh;
right:6vw;
width:13vw;
height:14vh;
z-index:0;
opacity:0;
}


#blanket1:target #shout {
opacity:0;
transition:1s;
}

#blanket1:target #boxbackground {
opacity:1;
transition:1s;
}

#blanket1:target #one{
opacity:1;
z-index:99;

}

#blanket1:target #quote1{
opacity:1;
z-index:99;
}

#blanket1:target #img1{
opacity:1;
z-index:99;
}
#blanket1:target #two{
opacity:0;
z-index:0;

}

#blanket1:target #quote2{
opacity:0;
z-index:0;
}

#blanket1:target #img2{
opacity:0;
z-index:0;
}
#blanket1:target #three{
opacity:0;
z-index:0;

}

#blanket1:target #quote3{
opacity:0;
z-index:0;
}

#blanket1:target #img3{
opacity:0;
z-index:0;
}

#blanket1:target #four{
opacity:0;
z-index:0;

}

#blanket1:target #quote4{
opacity:0;
z-index:0;
}

#blanket1:target #img4{
opacity:0;
z-index:0;
}

#blanket2:target #shout {
opacity:0;
transition:1s;
}

#blanket2:target #boxbackground {
opacity:1;
transition:1s;
}

#blanket2:target #one{
opacity:0;
z-index:0;

}

#blanket2:target #quote1{
opacity:0;
z-index:0;
}

#blanket2:target #img1{
opacity:0;
z-index:0;
}

#blanket2:target #two{
opacity:1;
z-index:99;

}

#blanket2:target #quote2{
opacity:1;
z-index:99;
}

#blanket2:target #img2{
opacity:1;
z-index:99;
}

#blanket2:target #three{
opacity:0;
z-index:0;

}

#blanket2:target #quote3{
opacity:0;
z-index:0;
}

#blanket2:target #img3{
opacity:0;
z-index:0;
}

#blanket2:target #four{
opacity:0;
z-index:0;

}

#blanket2:target #quote4{
opacity:0;
z-index:0;
}

#blanket2:target #img4{
opacity:0;
z-index:0;
}

#blanket3:target #shout {
opacity:0;
transition:1s;
}

#blanket3:target #boxbackground {
opacity:1;
transition:1s;
}

#blanket3:target #one{
opacity:0;
z-index:0;

}

#blanket3:target #quote1{
opacity:0;
z-index:0;
}

#blanket3:target #img1{
opacity:0;
z-index:0;
}

#blanket3:target #two{
opacity:0;
z-index:0;

}

#blanket3:target #quote2{
opacity:0;
z-index:0;
}

#blanket3:target #img2{
opacity:0;
z-index:0;
}

#blanket3:target #three{
opacity:1;
z-index:99;

}

#blanket3:target #quote3{
opacity:1;
z-index:99;
}

#blanket3:target #img3{
opacity:1;
z-index:99;
}

#blanket3:target #four{
opacity:0;
z-index:0;

}

#blanket3:target #quote4{
opacity:0;
z-index:0;
}

#blanket3:target #img4{
opacity:0;
z-index:0;
}

#blanket4:target #shout {
opacity:0;
transition:1s;
}

#blanket4:target #boxbackground {
opacity:1;
transition:1s;
}

#blanket3:target #one{
opacity:0;
z-index:0;

}

#blanket3:target #quote1{
opacity:0;
z-index:0;
}

#blanket4:target #img1{
opacity:0;
z-index:0;
}

#blanket4:target #two{
opacity:0;
z-index:0;

}

#blanket4:target #quote2{
opacity:0;
z-index:0;
}

#blanket4:target #img2{
opacity:0;
z-index:0;
}

#blanket4:target #three{
opacity:0;
z-index:0;

}

#blanket4:target #quote3{
opacity:0;
z-index:0;
}

#blanket4:target #img3{
opacity:0;
z-index:0;
}

#blanket4:target #four{
opacity:1;
z-index:99;

}

#blanket4:target #quote4{
opacity:1;
z-index:99;
}

#blanket4:target #img4{
opacity:1;
z-index:99;
}

<div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
<div class="text1">INA</div><div class="text2">SA</div>
<div class="text3">YOA</div><div class="text4">RASHI</div>
<div id="image"></div>
<div id="topbar"></div>
<div id="botbar"></div>

<div id="navi">
<a class="a1" href="#blanket1"></a>
<a class="a2" href="#blanket2"></a>
<a class="a3" href="#blanket3"></a>
<a class="a4" href="#blanket4"></a>
</div>
<div id="shout">
<div id="shouting">
<div id="blob"></div>

</div>
</div>

<div id="boxbackground">
<div class="whirlwind">WHIRLWIND</div>
<div class="passion">Passion...Passion...Passion...</div>
<div class="quirk">Complete control of the <br>air/wind around him .
</div>
<div id="one">Meme1</div>
<div id="quote1"><div class="quotation">"</div> I believe heroes should be hot-blooded! <br> I freakin' love it!</div>
<div id="img1"><img src="https://66.media.tumblr.com/cde52620e79cea64ec4de049dc7cc276/tumblr_pee7dxAGtH1ws4tyeo2_540.gif" alt="Smiley face" style="background-size:100%; width:13vw;" >
</div>
<div id="two">Meme2</div>
<div id="quote2"><div class="quotation">"</div> If it's not too much trouble, I'd like to join this white-hot battle!!</div>
<div id="img2"><img src="https://66.media.tumblr.com/6f64bb11c130bcee04fff3f629f56e69/tumblr_pee7dxAGtH1ws4tyeo1_540.gif" alt="Smiley face" style="background-size:100%; width:13vw;" >
</div>
<div id="three">Meme3</div>
<div id="quote3"><div class="quotation">"</div>And that day all I saw in those eyes was cold anger!!</div>
<div id="img3"><img src="https://66.media.tumblr.com/bcad54c9d05f57dc8a99b032db32fdc5/tumblr_pedxomuA7h1ru8plxo1_540.gif" alt="Smiley face" style="background-size:100%; width:13vw;" >
</div>
<div id="four">Meme4</div>
<div id="quote4"><div class="quotation">"</div>Being a hero is all about passion and hot-blood, y'know!!</div>
<div id="img4"><img src="https://66.media.tumblr.com/8916d719a6b09904ba26ad8df4b46a24/tumblr_pc2rs3LW2Z1txtrrmo1_500.gif" alt="Smiley face" style="background-size:100%; width:13vw;" >
</div>
</div>