<div class="main"> <div><h1>JOHN DIO</h1></div>
  <p> FRONT-END WEB DEVELOPER </p>
  <p>ENTHUSIAST IN DESIGNING WEBSITE AND ANIMATION. </p>
  <div class="bottom-line"></div>
</div>

*{box-sizing:border-box;}
@import url('https://fonts.googleapis.com/css?family=Lobster|Pacifico');
body{background:radial-gradient(circle at top left, #404040 1%, #202020 99%); background-size:100% 100%; background-repeat:no-repeat;display:flex;min-height:310px;height:100vh;}
.main{
  width:500px; height:300px; padding:; text-align:center; border:1px solid tomato;transform-origin:bottom left;background:linear-gradient(to top,silver , white);
  margin: auto;position:relative;border-radius:5px;
}

.main::before{
  content:'';
  position:absolute; top:0;bottom:0;left:0;right:0;margin:0;padding:0;
  background-image:url(https://static.pexels.com/photos/11519/pexels-photo-11519.jpeg);background-size:100% 100%;transform:skew(1deg,-1deg);
  transition-duration:2s; transform-origin:bottom left;
  
}
.main:hover::before{transform:skew(13deg, -13deg) scale( 0.2 , 0.2);}
h1{font-size:3em;color:tomato;text-decoration:underline;text-shadow:0 0  .1em,0 0 .1em;z-index:-22222;}
p{color:tomato; font-family:'Pacifico';padding:5px;}
@media only screen and(max-size:710px){
  p{padding:1px;}
}

.bottom-line{position:absolute; width:80%; height:1px; border:1px solid white; margin-left:10%;bottom:5px;box-shadow:0 0 .4em, 0 0 .4em;}