<style>
@font-face {
		font-family: bad;
		src: url('https://dl.dropboxusercontent.com/s/9jzwa8cc6qnndzn/BADABB__.TTF?dl=0')
	}


	body {
		background-color: #48a4d6;
background-image: url("https://www.transparenttextures.com/patterns/60-lines.png");
	}

	.trick {
		position: absolute;
		bottom: 0%;
		right: 0%;
		height: 30.2vw;
		width: 14.5vw;
		background: url('https://images2.imgbox.com/1d/74/Qe8d4aee_o.png') no-repeat;
		background-size: 100%;
		transition: ease 1s;
		transition-delay: 1s;
		opacity: 1;
	}

	*:hover .trick {
	transition: ease 1s;
	transition-delay: 1s;
	opacity: 0;
	}

	.text1 {
		position: absolute;
		bottom: 0%;
		left: 1%;
		font-family: bad;
		font-size: 100px;
		color: #FFEB00;
		text-align: left;
		letter-spacing: ;
		line-height: 80px;
		text-shadow: -1px 0 #C80000, 0 1px #C80000,1px 0 #C80000, 0 -1px #C80000;

	}


	.mainbox {
		position: absolute;
		bottom: 2%;
	 	right: 30%;
		height: 18vw;
		width: 30vw;
		background: #e6cc19;
		transition: ease 1s;
		transition-delay: 1s;
		opacity: 1;}


	*:hover .mainbox {
		transition: ease 1s;
	transition-delay: 1s;
	opacity: 1;

	}

	.img {
		position: absolute;
		top: 0%;
		right: -60%;
		height: 12vw;
		width: 30vw;
		background: url('https://images2.imgbox.com/cd/ff/KdAwUhGX_o.png') no-repeat;
		background-size: 100%;
		filter: drop-shadow(10px 0px #e6cc19);

	}


.one {
position: absolute;
top: 0%;
left: 0%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('http://i.picpar.com/MVce.png');
background-size: 55px;
background-repeat: no-repeat;
}

.two {
position: absolute;
top: 0%;
left: 10%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('http://i.picpar.com/MVce.png');
background-size: 55px;
background-repeat: no-repeat;
}

.three {
position: absolute;
top: 0%;
left: 20%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('http://i.picpar.com/MVce.png');
background-size: 55px;
background-repeat: no-repeat;
}

.four {
position: absolute;
top: 0%;
left: 30%;
width: 20vw;
height: 3vw;
margin-left: 2vw;
margin-top: 1%;
background-image: url('http://i.picpar.com/MVce.png');
background-size: 55px;
background-repeat: no-repeat;
}


		.info {
			width: 10vw;
			height: 10vw;
			background-color: #fff;
			opacity: 0;
			position: absolute;
			left: 3%;
			top: 30%;
		}

		.info:target {
			opacity: 1;
			transition: 1s ease all;
		}

	 ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background:;
    }

    ::-webkit-scrollbar-thumb {
    background-color:#f7e1ed;
    border:1px solid #c05c79;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }




</style>


<div class="trick"></div>
<div class="mainbox">
<div class="img"></div>


<a class='one' href='#one'></a>
<a class='two' href='#two'></a>
<a class='three' href='#three'></a>
<a class='four' href='#four'></a>

<div class="info" id="one">
test
</div>

<div class="info" id="two">
test2
</div>

<div class="info" id="three">
test3
</div>

<div class="info" id="four">
test4
</div>


</div>