Diov New

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
    // YOUR FRIENDS GO HERE TO SET UP THE AVATAR PICTURES
    // NAMES MUST BE IN "" AND SEPERATED BY , COMMAS
    // E.G var Friends = ['Rieno', 'Diov', 'Anry']

var Friends = ['Rieno'];

    // YOUR SUPPORTS GO HERE TO SET UP THE AVATAR PICTURES
    // NAMES MUST BE IN "" AND SEPERATED BY , COMMAS
    // E.G var Supports = ['Rieno', 'Diov', 'Anry']

var Supports = ['Rieno'];
</script>



<!-- THIS IS THE HOME PANEL-->

<div style="display: none" id="home">
<center>
    <h1>This is demo content <br/> for the home page</h1>
</center>
</div>

<!-- THIS IS THE COMISSIONS PANEL-->

<div style="display: none" id="comissions">
    <center>
        <h1>This is demo content <br/> for the comissions page</h1>
    </center>
</div>

<!-- THIS IS THE FRIENDS PANEL-->

<div style="display: none" id="friends">
    <center>
        <h1>This is demo content <br/> for the friends page</h1>
    </center>

    <div style="position: absolute; bottom: 15px; left: 15px">
        <script src="https://pastebin.com/raw/bwYtGRjJ">    </script>
        <script>
            genFriends({
                friends: Friends,
                scale: 0.60,
                radius: "15px",
                opacity: ".7",
                font: "Pacifico"
            });
        </script>
    </div>

</div>

<!-- THIS IS THE SUPPORT PANEL-->

<div style="display: none" id="support">
    <center>
        <h1>This is demo content <br/> for the support page</h1>
    </center>

    <div style="position: absolute; bottom: 15px; left: 15px">
        <script src="https://pastebin.com/raw/AJCvVRTL">    </script>
        <script>
            genSupport({
                supports: Supports,
                scale: 0.60,
                radius: "15px",
                opacity: ".7",
                font: "Pacifico"
            });
        </script>
    </div>
</div>

<!-- THIS IS THE DONATE PANEL-->

<div style="display: none" id="donate">
    <center>
        <h1>This is demo content <br/> for the donate page</h1>
    </center>
</div>


<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->
<!-- IGNORE EVERYTHING UNDER HERE -->

<div id="side_bar">
    <div id="username">Diov</div>
    <div id="userpic"></div>
    <div id="bottom_side"></div>
    <div id="side_bar_trees"></div>
    <div id="links">
        <div class="link" onclick="change_content('home')">Home</div>
        <div class="link" onclick="change_content('comissions')">Comissions</div>
        <div class="link" onclick="change_content('friends')">Friends</div>
        <div class="link" onclick="change_content('support')">Support</div>
        <div class="link" onclick="openInNewTab('https://www.imvu.com/shop/web_search.php?manufacturers_id=110043699&r=acw')">Shop</div>
        <div class="link" onclick="change_content('donate')">Donate</div>
        <div class="link" onclick="openInNewTab('https://www.imvu.com/catalog/web_add_contact.php?contact=Diov')">Add</div>
        <div class="link" onclick="IMVU.messagePopupShow({force_recipient_id:110043699}); return false;">Message</div>
    </div>
</div>
<div id="content_container" style="z-index: -1; width: calc(100vw - 250px); min-width: 600px; min-height: 600px; position: fixed; left: 250px; top: 0px; height: 100vh;">
    <div id="footer_s">Homepage designed and coded by <a style="color: #FFF; text-decoration: none" href="https://avatars.imvu.com/rieno">Rieno</a></div>
    <div id="content">
            <div id="content_area"> </div>
    </div>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Pacifico');
#footer_s{
    position: absolute;
    right: 0px;
    bottom: 20px;
    text-align: center;
    width: calc(100vw - 250px);
    height: 20px;
    color: #363636;
    font-family: Pacifico;
}
#content{
    width: calc(100% - 100px);
    height: calc( 100% - 100px);
    border-radius: 15px;
    background: rgba(255,255,255,.6);
    position: absolute;
    right: 50px;
    bottom: 50px;
    font-family: Pacifico !important;
    color: rgb(37, 37, 37) !important;
}
#content_area{
    width: 100%;
    height: 100% ;
    border-radius: 25px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-family: Pacifico !important;
    color: rgb(37, 37, 37) !important;
}
#content_container{
    background-attachment: fixed;
    background-image: url('https://i.imgur.com/9NrfZsw.jpg');
}
#links{
    width: 150px;
    min-height: 50px;
    position: absolute;
    top: 450px;
    left: calc(50% - 75px)
}
.link{
    width: 150px;
    text-align: center;
    font-family: Pacifico;
    color: #FFF;
    cursor: pointer;
}
.link:hover{
    color:#ffbcfe;
}
#username{
    color: #ffbcfe;
    font-family: Pacifico;
    font-size: 40px;
    width: 250px;
    height: 100px;
    top: 10px;
    left: 0px;
    position: absolute;
    text-align: center;
    z-index: 1
}
#userpic{
    background-image: url('https://www.imvu.com/catalog/web_av_pic.php?av=Diov');
    width: 160px;
    height: 220px;
    top: 70px;
    left: calc(50% - 80px);
    border-radius: 100%;
    position: absolute;
    box-shadow: 0px 0px 5px rgba(0,0,0,1);
}
#side_bar{
    width: 250px;
    height: 100vh;
    position: fixed;
    z-index: 99;
    left: 0px;
    top: 0px;
    background: #FFF;
    border-style: none solid none none;
    border-width: 2px;
    border-color: #000;
}
#side_bar_trees{
    background: url('https://i.imgur.com/u7RZONN.png');
    position: absolute;
    width: 250px;
    height: 400px;
    top: 250px;
    left: 0px;
}
#bottom_side{
    background: #9600ff;
    width: 250px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: calc(100vh - 500px);
}
.hiddenc{
    display: none;
}

  #prods{
    position: absolute;
    bottom: 20px;
    left: 10px;
  }
  #badges_panel{
      width: 250px !important;
      position: absolute;
      top: 30px !important;
      left: 300px !important;
      opacity: .3 !important;
z-index: 999 !important;
  }
  #badges_panel:hover{
      opacity: 1 !important;
  }
</style>

<!-- Codes to hide all elements -->
<style type="text/css">
    #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
    #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
    #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
    #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #outfits_panel {
       display: none !important;
    }
    #rightColumn {
       display:none !important;
    }
 </style>
 <style type="text/css">
 #url_panel_colRow, .imvucodes_net { display:none !important; }
 </style>
 <style type="text/css">
 .paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
 </style>


<script>
document.getElementById("content_area").innerHTML = document.getElementById("home").innerHTML;
function change_content(id){
    let content = document.getElementById('content_area');
    $("#content_area").fadeOut('slow', ()=>{
        try{
            content.innerHTML = document.getElementById(id).innerHTML;
        }
        catch{}
        $('#content_area').fadeIn('slow');


    })

}

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}
</script>