<body>
    <div id="wrapper">
      <div class="catridge">
      <div>
      <section class="front">

      <img src="http://www.mobygames.com/images/covers/l/43085-mega-man-2-nes-front-cover.jpg" alt="nes cover"
      id="cover-pic" >


      <span class="triangle-down"></span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li id="lastLine"></li>
      </ul>
  </section>
</div>
  <!-- front side of the catridge-->
    <div class=leftSide>

    </div>

    <div class="rightSide">

    <!-- sides-->
</div>
<div class="top"></div>
<div class="bottom"></div>
  <!--Top and bottom-->

  <div class="catridgeHoleLeft"></div>
    <div class="catridgeHoleRight"></div>
    <div class="catridgeHoleBackSide"></div>

    </div>
</div>
</div>
  </div>
  </body>
body{
background:url(https://image.ibb.co/nh48Uy/V9NUcBh.png) 50% 50% no-repeat;
background-size: 100%;
  background-attachement:fixed;
}



#wrapper{
  background:rgb(156, 156, 156);
  width: 30.95em;
  height: 35.7em;
  margin:8% auto 10%auto;
  border-bottom-right-radius:6px;
  border-bottom-left-radius: 6px;
  transform-style:preserve-3d;
  border: solid 1px black;
  }

 .catridge .leftSide{
  position:absolute;
  height: 35.7em;
  width:3em;
  background-color: rgb(156,156,156);
  margin: -40.05em  -10em;
 border:1px solid;
 transform: rotateY(100deg) translateZ(132px);
}

.catridge .rightSide{
  position:fixed;
  height: 35.6em;
  width:3em;
  background-color: rgb(156,156,156);
  margin: -40.05em  34em;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.44);
  border:1px solid;
transform: rotateY(255deg) translateZ(70px);
  box-shadow: 0px 1px 5px 0px  rgba(0, 0, 0, 0.6);
}

.catridge .top{
  width: 30.96em;
  height: 1.2em;
  border-top: 200px ;
  border-bottom: 40px solid rgb(156,156,156);
  border-left: 9px solid transparent;
  border-right: 14px solid transparent;
  margin: -40.25em -0.55em;
  position: fixed;
  transform: rotatex(270deg) translateZ(-25px) translateY(12px);
  }

.catridge .bottom{
  width: 31em;
  height: 1em;
  border-top: 200px ;
  border-bottom: 40px solid rgb(156,156,156);
  border-left: 9px solid transparent;
  border-right: 13px solid transparent;
  transform: rotatex(270deg) translateZ(-100px) translateY(20px);
  margin:0 -0.6em;
}

.catridgeHoleRight{
  transform: rotateY(265deg) translateZ(100px) translateY(-5px) translateX(-10px);
  height: 4.2em;
  width: 3em;
  background:rgb(156,156,156);
  margin:3.9em 33.2em;
  border:1px solid;
  box-shadow: 0px 2px 9px 0px  rgba(0, 0, 0, 0.6);
}

.catridgeHoleLeft{
  transform: rotateY(95deg) translateZ(150px);
  height: 4.2em;
  width: 3em;
  background:rgb(156,156,156);
  border:1px solid;
  margin:-7.9em -8.9em;
}

.catridgeHoleBackSide{
  height: 1.1em;
  width:26.58em;
  background-color: rgb(156,156,156);
  transform: translateZ(-40px) rotateY(180deg) translateX(0px);
  margin:-5.5em 2em;
  border:1px solid;
  box-shadow: 0px 2px 8px 2px  rgba(0, 0, 0, 0.6);
}

.front{
  background: rgb(156, 156, 156);
  height: 40em;
  width:26.3em;
  margin:0px 2.15em auto;
  box-shadow: 0px 4px 0px 0px  rgba(0, 0, 0, 0.6);
}




ul{
  width:14%;
  margin:-415px 15px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-align: center;
   box-shadow:inset 0 0 3px rgba(0, 0, 0, 0.66);
}

li{
    background:rgb(180, 176, 176);
    height: 1em;
    list-style: none;
    margin:10px 0px 10px -31px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.76);
    width:5em;
    border-radius: 1.5px;
  }

#lastLine{
  height: 4.2em;
  box-shadow: 0px -1px 1px 0px rgba(0, 0, 0, 0.76);
}

#cover-pic{
margin: 0em 7.7em auto;
height: 400px;
width:280px;
border-style: 0.5px solid rgba(0, 0, 0, 0.57) ;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
filter: drop-shadow(1.5px 1.5px 1px rgba(44, 44, 46, 0.72));
}



.triangle-down {
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 33px solid rgb(121, 117, 117);
  float: right;
  margin: 4.3em 14.5em;
  }

@media screen and (max-width: 640px){
  body{
    background: url(https://i.imgur.com/ljvAzhg.png);
    background-size:100%;
    background-position:50% 10%;
  }
  
}
const followCursor = (element, options = {}) => {
options = Object.assign({}, {
  maxAngleX: 20,
  maxAngleY: 15,
}, options)
const elementRect = element.getBoundingClientRect()
const originX = elementRect.left + elementRect.width / 2
const originY = elementRect.top + elementRect.height / 2
const map = (value, low1, high1, low2, high2) => low2 + (high2 - low2) * (value - low1) / (high1 - low1)
const handle = e => {
  try {
    const width = document.body.clientWidth
    const height = document.body.clientHeight
    const clientX = e.clientX || e.touches[0].clientX
    const clientY = e.clientY || e.touches[0].clientY
    const decY = map(clientY - originY, -height / 2, height / 2 , -options.maxAngleY, options.maxAngleY)
    const decX = map(clientX - originX, -width / 2, width / 2 , -options.maxAngleX, options.maxAngleX)
    element.style.transform = `rotateX(${-decY}deg) rotateY(${decX}deg)`
  } catch(e) {}
}
document.body.addEventListener('mousemove', handle)
document.body.addEventListener("touchmove", handle, false)
}


document.addEventListener('DOMContentLoaded', _ => {
followCursor(document.querySelector('#wrapper'))

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.