IMVU Client Replica HomePage

Posted 9 years ago · Author

This is a homepage design that mimics the home tab of the IMVU Client. It's built using JQuery, HTML, Css and a webfont.

You can see a live demo here: https://www.imvumafias.org/staff/datamin ... esign.html

You can put a picture of your own avatar on it. Just modify this part of the code:
[code=css file=Untitled.txt]/* Client Homepage Main Page */
#chp-pg1 {
background-image: url("userm.png");
background-position: 83px 50px;
background-repeat: no-repeat;
left: 0px;
padding: 100px 50px 100px 300px;
position: absolute;
text-align: center;
top: 31px;
}[/code]

Replace "userm.png" with your own picture from IMVU. Make sure the image is no larger than 131x477 pixels.

You can customize it with your own images for the buttons. Here's the template: https://www.imvumafias.org/staff/datamin ... mplate.png

You'll need to uncomment this part of the code to customize the buttons:
[code=css file=Untitled.txt][/code]

You'll have to know a little css to make this homepage design usable if you want to use the tabs. I did not position the container that holds the different tab content so you can put whatever you want in it and style the container to suit your needs.

Full Code:

Code

<html>
   <head>
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $(document).on('click', '.chp-tab', function(event) {
               $('.chp-tab').removeClass('active-tab');
               $(this).addClass('active-tab');
            });

            $(document).on('click', '#chp-bbar > i', function(event) {
               $('#chp-bbar').css('padding','0px').css('height','2px');
            });               

            $(document).on('click', '.chp-tab', function(event) {
               var pageid = '#chp-pg' + $(this).attr('id').substring('7','8');
               $('#chp-pg1').hide();
               $('.chp-pg').hide('fast', function() {                  
                  $(pageid).show();
               });
            });            
         });         
      </script>
      <style type="text/css">
         body,html {
            background-color:rgb(2,2,2);
            font-family: Arial,Verdana,sans-serif;
         }

         <!-- #cBtn1 { background-position: 0px 0px;}
         #cBtn2 { background-position: 144px 0px; }
         #cBtn3 { background-position: 0px -112px; }
         #cBtn4 { background-position: -144px -112px; }
         #cBtn5 { background-position: 0px -224px; }
         #cBtn6{ background-position: -144px -224px; }
         
         #cBtn1:hover { background-position: 0px -336px;}
         #cBtn2:hover { background-position: 144px -336px; }
         #cBtn3:hover { background-position: 0px -448px; }
         #cBtn4:hover { background-position: -144px -448px; }
         #cBtn5:hover { background-position: -0px -560px; }
         #cBtn6:hover { background-position: -144px -560px; } -->


         /* Client Homepage Wrapper */
         #chp-wrap {
            position: relative;
            width: 900px;
         }
         
         
         /* Client Homepage Tabs */
         #chp-tabs {
            color: #FFFFFF;
            display: block;
            left: 50px;
            position: absolute;
            text-shadow: 1px 1px #000000;
            top: 0px;
            width: 100%;
         }
         
         .chp-tab {
            background-color: rgb(99,99,99);
            cursor: pointer;
            display: inline-block;
            font-weight: bold;
            height: 23px;
            margin-left: 5px;
            min-width: 47px;
            position: relative;            
            text-align: center;            
         }
         
            .chp-tab > span:first-child {
               background-color: rgba(180, 180, 180, 0.4);               
               display: block;
               height: 50%;
               top: 0px;
            }
         
            .chp-tab > span:nth-child(2) {
               bottom: 12px;
               display: block;
               padding: 3px 10px 3px 10px;
               position: relative;
            }
            
            .active-tab {
               background-color: rgb(242, 196, 0);
               color: #000000;
               text-shadow: none;
            }
            
               .active-tab > span:first-child {
                  background-color: rgba(251, 237, 128, 0.6);
               }
         
         /* Client Homepage Blue Bar */
         #chp-bbar {
            background-color: rgb(242, 196, 0);
            height: 31px;
            padding: 7px 7px 0px 7px;
            position: absolute;
            top: 23px;
            width: 100%;
         }
         
            #chp-bbar > i {
               cursor: pointer;
               position: absolute;
               right: 5px;
               top: 11px;
            }
                           
         /* Client Homepage Main Page */
         #chp-pg1 {
            background-image: url("userm.png");
            background-position: 83px 50px;
            background-repeat: no-repeat;
            left: 0px;
            padding: 100px 50px 100px 300px;
            position: absolute;
            text-align: center;
            top: 31px;
         }
         
            #chp-pg1 * {
               color: rgb(196, 196, 196);
            }
            
         .chp-mbtn {
            background-color: rgb(60, 60, 60);
            background-image: url("tempBtn.png");
            border-radius: 15px;
            cursor: pointer;
            display: inline-block;
            height: 112px;
            margin: 10px;
            overflow: hidden;
            position: relative;
            text-decoration: none;
            width: 144px;
         }

            .chp-mbtn:hover { background-color: #8E6100; }
            
            .chp-mbtn > span:first-child {
               background-color: rgba(255, 255, 255, 0.1);
               border-radius: 150px;
               display: block;
               height: 300px;
               left: -75px;
               position: relative;
               top: -245px;
               width: 300px;
            }

            .chp-mbtn > span:nth-child(2) {
               bottom: 10px;
               display: block;
               position: absolute;                  
               width: 150px;
            }

         .chp-pg {
            color: #FFFFFF;
            display: none;
            height: 100%;
            left: 0px;
            position: absolute;
            top: 61px;
            width: 100%;
         }
      </style>
   </head>
   <body>
      <div id="chp-wrap">
         <div id="chp-tabs">
            <span id="chp-tab1" class="chp-tab active-tab"><span></span><span>Home</span></span>
            <span id="chp-tab2" class="chp-tab"><span></span><span>Text</span></span>
            <span id="chp-tab3" class="chp-tab"><span></span><span>Long Text</span></span>
            <span id="chp-tab4" class="chp-tab"><span></span><span>Text</span></span>
         </div>      
         <div id="chp-bbar">
            <i class="fa fa-times"></i>
            Text
         </div>
         <div id="chp-pg1">
            <h2>Text</h2>
            <span class="chp-mbtn" id="cBtn1"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn4"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn5"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn6"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn2"><span></span><span>Text</span></span>
            <span class="chp-mbtn" id="cBtn3"><span></span><span>Text</span></span>
         </div>         
         <div class="chp-pg" id="chp-pg2">dffdfsdfs</div>
         <div class="chp-pg" id="chp-pg3">fdsfdsfs</div>
         <div class="chp-pg" id="chp-pg4">dsffsdfsdfsdf</div>         
      </div>
   </body>
</html>