Membuat Widget About Me (Tentang Saya) Responsive

Ok guys kembali bersama saya di tutorial keren, na pada kesempatan ini saya akan sahare bagaimana cara membuat Widget About Me (Tentang Saya) Responsive ang keren abis dan super kece. nah untuk itu silahkan langsung ya bro.
Demo
Silakan masuk ke menu Layout dan Tambahkan widget HTML/JavaScript dan masukan kode di bawah :
<div class="widget-content">
<style>
#main1{
    height: 400px;
    width:100%;
    background-color:transparent;
    border-radius: 5px;
    box-shadow: 0 0 7px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}
#image1{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
}
#image1 img{
    height: 80%;
    width: 100%;
}
#wave,#wave2{
    height: 50px;
    width: 50px;
    background-color: silver;
    position: absolute;
    top:30%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    z-index: 1;
}
@-webkit-keyframes pulseEffect{
    from{
        transform: translate(-50%,-50%) scale(0.5);
        opacity: 0.4;
    }
    to{
        transform: translate(-50%,-50%) scale(5.5);
        opacity: 0;
    }
}
@-webkit-keyframes pulseEffect2{
    from{
        transform: translate(-50%,-50%) scale(0);
        opacity: 0.6;
    }
    to{
        transform: translate(-50%,-50%) scale(4);
        opacity: 0;
    }
}
#main1 #wave{
    -webkit-animation:pulseEffect 2s infinite linear;
}
#main1 #wave2{
    -webkit-animation:pulseEffect2 2s infinite linear;
}
#info{
    height: 120px;
    width: 100%;
    background-color: #81B0F8;
    position: absolute;
    top:280px;
    z-index: 1;
}
#info:before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:-50px;
    border-bottom: 50px solid #81B0F8;
    border-left: 265px solid transparent;
}
#info:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:-60px;
    border-bottom: 60px solid #81CFFF;
    border-left: 250px solid transparent;
    z-index: -1;
}
#viewMore,#close{
    height: 30px;
    width: 30px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    position: absolute;
    top:-25px;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    cursor: pointer;
}
#close{
    top:125px;
}
#viewMore img,#close img{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#name{
   font-weight: bold;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
}
#status{
    font-size: 13px;
    color:#ddd;
    text-align: center;
}
#social{
     display: block;
    position: relative;
    margin-top: 15px;
    text-align: center;
}
#aboutMe{
    height: 100px;
    width: 100%;
    background-color: #81B0F8;
    position: absolute;
    top:-160px;
}
#aboutMe:before{
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    top:100px;
    border-top: 50px solid #81B0F8;
    border-right: 250px solid transparent;
}
#aboutMe:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:100px;
    border-top:60px solid #81CFFF;
    border-right: 250px solid transparent;
    z-index: -1;
}
#aboutMe h2{
    font-size: 15px;
    color: white;
    margin: 10px;
}
#aboutMe p{
    font-size: 13px;
    color:white;
    margin: 10px;
}
#project{
    width: 100%;
    height: 400px;
    position: absolute;
    top:0;
    left: -250px;
}
#project h2{
    font-size: 14px;
    color:#222;
    position: absolute;
    right: 0;
    top:115px;
    margin-right: 10px;
}
.icon-social {
        padding: 5px;
    background: #f2f2f2;
    border-radius: 100%;
    height: 25px;
    width: 25px;
    position: relative;
    display: inline-block;
    line-height: 25px;
}
#panel1,#panel2,#panel3{
    height: 70px;
    width: 100%;
    position: absolute;
    top:170px;
    left: 50%;
    transform: translateX(-50%);
}
#panel2{
    top:250px;
}
#panel3{
    top:330px;
}
.projectImg{
    height: 45px;
    width: 45px;
    position: absolute;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 0 1px 2px rgba(0,0,0,.1);
}
.projectImg img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.projectTitle{
       width: 180px;
    font-size: 12px;
    color: #676767;
    font-weight: bold;
    margin-left: 80px;
}
hr{
    margin-top: 13px;
}
</style>
 <div id="main1">
            <div id="image1" style="left: 0px;">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTFPbH_yKppHeDIhoJNEZYnJmqxyC5Fu9n3QoJpPsK0jEzzRrIuZU7tfTNDvZCNKTTVPVAaam-JFby5xNndbfkg-_qWcza8jJ0KPmBD0LF_Iu576S0RCKVzyxPIL5ZnzCEzqhFc1Lp5dM/s1600/nyunda.png" />
                <div id="wave"></div>
                <div id="wave2"></div>
            </div>
          
            <div id="info" style="top: 280px;">
                <div id="viewMore"><svg style="position: relative;line-height: 30px;width: 29px;text-align: center;" viewbox="0 0 24 24">
    <path fill="#000000" d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
</path></svg></div>
                <div id="name">Nyunda Blog</div>
                <div id="status">Tempat diajar Basa Sunda...</div>
                <div id="social">
<a class="icon-social" href="https://www.facebook.com/wuocdz.info" title="Facebook" target="_blank" rel="nofollow"><svg style="width:24px;height:24px" viewbox="0 0 24 24">
    <path fill="#3b5998" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
</path></svg></a>
<a class="icon-social" href="#" title="Pinterest" target="_blank" rel="nofollow"><svg style="width:24px;height:24px" viewbox="0 0 24 24">
    <path fill="#dd4b39" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" />
</path></svg></a>
<a class="icon-social" href="https://www.blogger.com/blogger.g?blogID=4939554228473062372" title="Nyunda Blog" target="_blank" rel="nofollow" style="margin-right: 0;"><svg style="width:24px;height:24px" viewbox="0 0 24 24">
    <path fill="#f0b70c" d="M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</path></svg></a>    
                </div>
            </div>
          
            <div id="aboutMe" style="top: -160px;">
                <div class="widget-title"><h2>TENTANG KURING</h2></div>
                <p>Pangalaman ti perjalanan terakhir parantos masihan kuring seueur pelajaran anu jero
</p>
                <div id="close"><svg style="width: 29px;line-height: 30px;text-align: center;" viewbox="0 0 24 24">
    <svg style="width:24px;height:24px" viewbox="0 0 24 24">
    <path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</path></svg></svg></div>
            </div>
          
            <div id="project" style="left: -250px;">
               
                <div id="panel1">
                    <div class="projectImg"><img src="//i.imgur.com/0dtFDL9.png" /></div>
                    <div class="projectTitle">#Bagikeun : Tips diajar Basa Sunda di Blogger jeung di Fesbuk,...</div>
                  
                    
                </div>
              
                <div id="panel2">
                    <div class="projectImg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHz8S_ucLSCWcRyViuIdMI0K2oU7p-vcoHEPPCsGWWLWMIwGBmXLASB8DlrM28z0mul7Mn7h5xjeQBuUrifSnTWSy3K1TgIBW1GY3g2Th6wKp7aOm9h-p9or0NPSHVM1-VT_NRxJNb28k/s1600/2.png" /></div>
                    <div class="projectTitle">
#Quots: Kudu silih asih, silih asah jeung silih asuh !</div>
                  
                    
                </div>
              
                <div id="panel3">
                    <div class="projectImg"><img src="//austcare.vn/global/default/images/call.png" /></div>
                    <div class="projectTitle">#aya patarosan mangga kontak we 
Email: arisaziz@live.com</div>                
                </div>
            </div>
        </div>
<script type="text/javascript">
$(document).ready(function(){
    $("#viewMore").click(function(){
        $("#info").animate({top:"460px"}) ;
        $("#aboutMe").animate({top:"0px"});
        $("#image1").animate({left:"265px"});
        $("#project").animate({left:"0px"});
    });
  
    $("#close").click(function(){
        $("#info").animate({top:"280px"}) ;
        $("#aboutMe").animate({top:"-160px"});
        $("#image1").animate({left:"0px"});
        $("#project").animate({left:"-250px"});
    });
});
  </script>
</div>