htmlcard

<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <head>
 <title> Card </title>
  <style>
  body{margin:0vw;}
  .center
  {
   position:absolute;
   top:15%;
   left:20%;
   height:70%;
   width:60%;
   background:;
   border-radius:3vw 3vw 3vw 3vw;
   font-size:2vw;
  }
  .left
  {
   position:absolute;
   top:0%;
   left:0%;
   height:100%;
   width:60%;
   background:blue;
   border-radius:3vw 0vw 0vw 3vw;
  }
  .imgcover
  {
   position:absolute;
   width:100%;
   height:50%;
   border-radius:3vw 0vw 0vw 0vw;
  }
  .imgcircle
  {
   position:absolute;
   top:40%;
   left:40%;
   height:8vw;
   width:7vw;
   border-radius:50%;
  }
  .imgcircl
  {
   position:absolute;
   height:100%;
   width:100%;
   border-radius:50%;
  }
  .developer_card
  {
  position:absolute;
  top:55%;
  left:22%;
  color:191970;
  font-style:bold;
  color:white;

  }
  .right
  {
  position:absolute;
  left:60%;
  top:0%;
  height:100%;
  width:40%;
  background:gray;
  border-radius:0vw 3vw  3vw 0vw;

  }
  .plusbtn,.hidebtn
  {
   position:absolute;
   left:56%;
   top:42%;
   height:5vw;
   width:5vw;
   color:blue;
   z-index:2;
   font-size:2vw;
   cursor:pointer;
  }
  .fa
  {
  margin:9px;
  }
  .sub{
  margin:4vw;
  }
  </style>
  <script>
  function show(){
  document.getElementById("right").style.visibility="hidden";
  document.getElementById("hide").style.display="block";
  document.getElementById("show").style.display="none";
  document.getElementById("left").style.left="20%";
  document.getElementById("left").style.borderRadius="3vw 3vw 3vw 3vw";
  document.getElementById("imgcover").style.borderRadius="3vw 3vw 0vw 0vw";


  }
  function hide(){
  document.getElementById("right").style.visibility="visible";
  document.getElementById("show").style.display="block";
  document.getElementById("hide").style.display="none";
  document.getElementById("left").style.left="0%";
  document.getElementById("left").style.borderRadius="3vw 0vw 0vw 3vw";
    document.getElementById("imgcover").style.borderRadius="3vw 0vw 0vw 0vw";
  }


  </script>
 </head>
 <body>
 <div class="center">
   <div class="left" id="left">
   <img class="imgcover" id="imgcover" src="imgcover.jpg">
       <div class="imgcircle">
       <img class="imgcircl" src="comp.png">
       </div>
       <span class="developer_card" ><h3> DEVELOPER CARD </h3>
       <i class="fa fa-twitter">44K</i>
       <i class="fa fa-facebook">44M</i>
       <i class="fa fa-heart">44B</i>
             <h3 class="sub">SUBSCRIBE</h3>
       </span>

   </div>
   <span class="hidebtn" id="hide" style='font-size:5vw;color:white;display:none;' onclick="hide();">&#8594;</span>
      <span class="plusbtn" id="show" style='font-size:5vw;color:white;' onclick="show();">&#8678;</span>
   <div class="right" id="right">
   </div>
 </div>

 </body>
</html>