API tools faq
paste
Advertisement
ndfjay

Diov_Layout

ndfjay
Oct 16th, 2016
148
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.44 KB | None | 0 0
raw download clone embed print report
  1. <body>
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  3. <script>
  4. var friends = ["Tails", "Riinoa", "Rieno"];
  5. function genFriends(){
  6.   document.getElementById("mainContent").innerHTML = "";
  7.  for(i = 0; i < friends.length; i++) {
  8. document.getElementById("mainContent").innerHTML = document.getElementById("mainContent").innerHTML + '<a href="http://avatars.imvu.com/'+friends[i]+'"><div id="fPic" target="_new" title="Visit the homepage of: '+friends[i]+'" href="'+friends[i]+'" style="background: url(http://www.imvu.com/catalog/web_av_pic.php?av='+friends[i]+') no-repeat top left; background-size: 100px 138px;" ><div id="fOver"><div style="margin-top: 50px; position: absolute; width:100px;"><center>'+friends[i]+'</center></div></div></div></a>';
  9.  }
  10. }
  11.  
  12. function switchTab(tab){
  13.       switch(tab){
  14.         case 'home':
  15.           document.getElementById('mainContent').innerHTML = ('Welcome to the homepage of Diov ♥');
  16.           break;
  17.         case 'about':
  18.           document.getElementById('mainContent').innerHTML = ('My name is Diov, <br />Im a furry creator so check out my shop! <br />(Im constantly afk due to creating) <br />Taken by Tails (14/04/2015) I love you <br />Im not nice when strangers touch me, <br />so dont even try to "cuddle" or "pulls closer" <br />Currently looking for a pet~ <br />Message me if you are looking to order custom items, furs or art.');
  19.           break;
  20.         case 'faq':
  21.           document.getElementById('mainContent').innerHTML = ('Are you Diov? Yes I am.');
  22.           break;
  23.         case 'support':
  24.           document.getElementById('mainContent').innerHTML = ("I guess I can support you c;");
  25.           break;
  26.         case 'banner':
  27.           document.getElementById('mainContent').innerHTML = ("<a href='http://www.imvu.com/shop/web_search.php?keywords=&within=creator&page=1&cat=&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=&narrow=&manufacturers_id=110043699&derived_from=0&derivable=0&sort=id'><img src='http://userimages-akm.imvu.com/userdata/10/04/36/99/userpics/Snap_LVrITODose470657715.png' /></a>");
  28.           break;
  29.         case 'badges':
  30.           document.getElementById('mainContent').innerHTML = ('Well... This is awkward <br />  ');
  31.           break;
  32.       }
  33. }
  34.  
  35. function openInNewTab(url) {
  36.   var win = window.open(url, '_blank');
  37.   win.focus();
  38. }
  39. </script>
  40.  
  41. <link href="//db.onlinewebfonts.com/c/389c39b6746d4be8ad593f218bb217f3?family=Luna's+Handwriting" rel="stylesheet" type="text/css"/>
  42. <link href="//db.onlinewebfonts.com/c/249a20978c781fa802558722634973ad?family=cuteso" rel="stylesheet" type="text/css"/>
  43. <style type="text/css">
  44. @import url("//db.onlinewebfonts.com/c/389c39b6746d4be8ad593f218bb217f3?family=Luna's+Handwriting");
  45. @font-face {font-family: "Luna's Handwriting";
  46.     src: url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.eot");
  47.     src: url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.eot?#iefix") format("embedded-opentype"),
  48.     url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.woff2") format("woff2"),
  49.     url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.woff") format("woff"),
  50.     url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.ttf") format("truetype"),
  51.     url("//db.onlinewebfonts.com/t/389c39b6746d4be8ad593f218bb217f3.svg#Luna's Handwriting") format("svg");
  52. }
  53.  
  54. @import url(//db.onlinewebfonts.com/c/249a20978c781fa802558722634973ad?family=cuteso);
  55.  
  56. @font-face {font-family: "cuteso";
  57.     src: url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.eot");
  58.     src: url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.eot?#iefix") format("embedded-opentype"),
  59.     url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.woff2") format("woff2"),
  60.     url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.woff") format("woff"),
  61.     url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.ttf") format("truetype"),
  62.     url("//db.onlinewebfonts.com/t/249a20978c781fa802558722634973ad.svg#cuteso") format("svg");
  63. }
  64.  
  65. ::-webkit-scrollbar {
  66.     width: 8px;
  67. }
  68.  
  69. ::-webkit-scrollbar-track {
  70.   background-color: #80eeff;
  71.     border-radius: 10px;
  72. }
  73.  
  74. ::-webkit-scrollbar-thumb {
  75.     border-radius: 10px;
  76.     background-color: #b8abf7;
  77. }
  78. body{
  79.   background: url(http://rienovu.esy.es/img/diov/background_IMG_1080.png) no-repeat fixed;
  80.   background-size: 100vw 100vh;
  81.   background-color: #000;
  82.   padding: 0;
  83.   margin:  0;
  84.   min-width: 913px;
  85.   min-height: 915px;
  86.   overflow-x: visible;
  87. }
  88.  
  89.  .imvustylez_products_marquee{margin:0px auto}
  90.  .imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px}
  91.  .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;} .imvustylez_products_marquee
  92.  .productbox,
  93.  .imvustylez_products_marquee
  94.  .productbox img{width:100px !important;height:80px !important;}
  95.  #headerbox { display: none !important; }
  96.   #footerBanner { display: none !important; }
  97.   #footer_style { display: none !important; }
  98.   #footer_panel { display: none !important; }
  99.   #ad_panel { display: none !important; }
  100.   #dev_panel{display:none !important;}
  101.   #imvuTopNav{display:none !important;}
  102.   #ccpheader_leaderboard{display: none !important;}
  103.  
  104.   .contentMainBG{
  105.     background: url(http://rienovu.esy.es/img/diov/Overlay.png) no-repeat top center;
  106.     max-width:1920px;
  107.     max-height:1080px;
  108.     min-width: 914px;
  109.     min-height: 915px;
  110.   }
  111.   #conContainer{
  112.     width: 914px;
  113.     height: 915px;
  114.     margin-left: calc(50% - 457px);
  115.   }
  116.   #navButton{
  117.      letter-spacing: 1px;
  118.      transition: letter-spacing .4s ease-in;
  119.      -webkit-transition: letter-spacing .4s ease-in;
  120.      -moz-transition: letter-spacing .4s ease-in;
  121.      -ms-transition: letter-spacing .4s ease-in;
  122.      -o-transition: letter-spacing .4s ease-in;
  123.      font-family:"Luna's Handwriting";
  124.      font-size: 36pt;
  125.      position: absolute;
  126.      float:left;
  127.      color: #000;
  128.      cursor: pointer;
  129.   }
  130.   #navButton:hover{
  131.      letter-spacing: 5px;
  132.      transition: letter-spacing .4s ease-in;
  133.      -webkit-transition: letter-spacing .4s ease-in;
  134.      -moz-transition: letter-spacing .4s ease-in;
  135.      -ms-transition: letter-spacing .4s ease-in;
  136.      -o-transition: letter-spacing .4s ease-in;
  137.   }
  138.  
  139.   #mainContent{
  140.     width: 870px;
  141.     height: 445px;
  142.     position: absolute;
  143.     float: left;
  144.     margin-left: 19px;
  145.     margin-top: 392px;
  146.     color: #FFF;
  147.     font-family: "cuteso";
  148.     font-size: 18pt;
  149.   }
  150.  
  151.   #fPic{
  152.     width: 100px;
  153.     height: 138px;
  154.     border: solid 1px pink;
  155.     margin-right: 20px;
  156.     float: left;
  157.   }
  158.   #fOver{
  159.     width: 100px;
  160.     height: 138px;
  161.       opacity: 0;
  162.      transition: opacity .4s ease-in;
  163.      -webkit-transition: opacity .4s ease-in;
  164.      -moz-transition: opacity .4s ease-in;
  165.      -ms-transition: opacity .4s ease-in;
  166.      -o-transition: opacity .4s ease-in;
  167.      background: #b8abf7;
  168.      color: #FFF;
  169.      font-family: "cuteso";
  170.      font-size: 12pt;
  171.   }
  172.   #fOver:hover{
  173.       opacity: .9;
  174.      transition: opacity .4s ease-in;
  175.      -webkit-transition: opacity .4s ease-in;
  176.      -moz-transition: opacity .4s ease-in;
  177.      -ms-transition: opacity .4s ease-in;
  178.      -o-transition: opacity .4s ease-in;
  179.   }
  180.   a{
  181.          letter-spacing: 1px;
  182.      transition: letter-spacing .4s ease-in;
  183.      -webkit-transition: letter-spacing .4s ease-in;
  184.      -moz-transition: letter-spacing .4s ease-in;
  185.      -ms-transition: letter-spacing .4s ease-in;
  186.      -o-transition: letter-spacing .4s ease-in;
  187.   }
  188.   a:hover{
  189.      letter-spacing: 5px;
  190.      transition: letter-spacing .4s ease-in;
  191.      -webkit-transition: letter-spacing .4s ease-in;
  192.      -moz-transition: letter-spacing .4s ease-in;
  193.      -ms-transition: letter-spacing .4s ease-in;
  194.      -o-transition: letter-spacing .4s ease-in;
  195.   }
  196. </style>
  197.  
  198.  
  199.  
  200.  
  201.  
  202. <div class="contentMainBG">
  203.   <div id="conContainer">
  204.    <div style="color: #000; font-size: 40pt; font-family: 'cuteso'; margin-left: 400px; position: absolute; float:left;"> DIOV </div>
  205.     <div style="float: left; position: absolute; margin-left: 377px; margin-top: 70px; z-index: 50; border-radius: 50px;">
  206.       <a href="javascript:void(0)" onclick="IMVU.AvatarCard.showPopup(110043699); return false;"><img style="border-radius: 50px;" src="http://www.imvu.com/catalog/web_av_pic.php?av=Diov" /></a>
  207.     </div>
  208.  
  209.     <div id="navButton" onclick="switchTab('home')" style="margin-left: 275px; margin-top: 68px; -webkit-transform: rotate(25deg);-moz-transform: rotate(25deg);-ms-transform: rotate(25deg);-o-transform: rotate(25deg);">Home</div>
  210.  
  211.     <div id="navButton" onclick="switchTab('about')" style="margin-left: 220px; margin-top: 115px; -webkit-transform: rotate(17deg);-moz-transform: rotate(17deg);-ms-transform: rotate(17deg);-o-transform: rotate(17deg);">About</div>
  212.  
  213.     <div id="navButton" onclick="switchTab('faq')" style="margin-left: 230px; margin-top: 175px; -webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);">FAQ</div>
  214.  
  215.     <div id="navButton" onclick="genFriends()" style="margin-left: 212px; margin-top: 240px; -webkit-transform: rotate(-11deg);-moz-transform: rotate(-11deg);-ms-transform: rotate(-11deg);-o-transform: rotate(-11deg);">Friends</div>
  216.  
  217.  
  218.  
  219.     <div id="navButton" onclick="openInNewTab('http://www.imvu.com/shop/web_search.php?manufacturers_id=110043699');" style="margin-left: 565px; margin-top: 62px; -webkit-transform: rotate(-25deg);-moz-transform: rotate(25deg);-ms-transform: rotate(25deg);-o-transform: rotate(25deg);">Shop</div>
  220.  
  221.     <div id="navButton" onclick="switchTab('support')" style="margin-left: 575px; margin-top: 115px; -webkit-transform: rotate(-17deg);-moz-transform: rotate(17deg);-ms-transform: rotate(17deg);-o-transform: rotate(17deg);">Support</div>
  222.  
  223.     <div id="navButton" onclick="switchTab('banner')" style="margin-left: 590px; margin-top: 175px; -webkit-transform: rotate(2deg);-moz-transform: rotate(-2deg);-ms-transform: rotate(-2deg);-o-transform: rotate(-2deg);">Banner</div>
  224.  
  225.     <div id="navButton" onclick="switchTab('badges')" style="margin-left: 595px; margin-top: 240px; -webkit-transform: rotate(11deg);-moz-transform: rotate(-11deg);-ms-transform: rotate(-11deg);-o-transform: rotate(-11deg);">Badges</div>
  226.  
  227.  
  228.       <div id="mediabtnp" onclick="switchplaystate()" style="cursor: pointer; margin-left: 405px; margin-top: 305px; position: absolute; float:left; max-height:20px; width: 110px; z-index: 11; font-family: 'cuteso'; color: #FFF; font-size: 12px; text-align: center;"> ►
  229.  
  230.       </div>
  231.  
  232.       <div style=" margin-left: 400px; margin-top: 330px; position: absolute; float:left; max-height:20px; width: 110px; z-index: 11; font-family: 'cuteso'; color: #FFF; font-size: 12px; text-align: center; overflow-x: hidden; overflow-y: hidden;">
  233.         <marquee id="songTitle" style="width: 110px" scrollamount='1' direction='left' behavior='scroll'> this is a song title
  234.         </marquee>
  235.       </div>
  236.  
  237.     <div><center id="mainContent">
  238.     </center></div>
  239.  
  240.     <div id="Diovfooter" onclick="openInNewTab('http://avatars.imvu.com/Rieno')" style="cursor: pointer; width: 950px; position: absolute; float:left; margin-top: 860px ; color:FFF; font-family: 'cuteso'; font-size: 18pt"><center style="color:FFF;">Homepage designed and coded by Rieno</center></div>
  241.  
  242.   </div>
  243.  
  244. </div>
  245.  
  246.       <div style="width: 0px; height: 0px; float: left">
  247.           <div style="margin-top: 15px; position: absolute; float:left; width: 0px; height: 0px; background: #111111; opacity: 0; z-index: 10"> </div>
  248.             <div class="playerContainer">
  249.             <iframe id="video" style="margin-top: -60px; filter:blur(2px) saturate(65%); width: 0px; overflow: hidden;" src="//www.youtube.com/embed/videoseries?list=PLjFyNMDkfZFOYhXXGiVHkRC0bsIZkbkX9&enablejsapi=1&html5=1&autoplay=1" frameborder="0" allowfullscreen>
  250.             </iframe></div>
  251.       </div>
  252.  
  253.  
  254. <!-- Youtube Player -->
  255. <script>
  256. var player;
  257. function onYouTubePlayerAPIReady() {
  258.   player = new YT.Player('video', {
  259.     events: {
  260.             'onReady': onPlayerReady,
  261.             'onStateChange': onPlayerStateChange
  262.     }
  263.   });
  264. }
  265. function onPlayerReady(event) {player.playVideo();
  266. }
  267.  
  268. function onPlayerStateChange(event) {
  269. if ( player ) {
  270.  
  271.         if ( player.getPlayerState() != 2 ) {
  272.           document.getElementById( "songTitle" ).innerText = player.getVideoData().title;
  273.           document.getElementById('mediabtnp').innerText = "❚❚";
  274.          
  275.         } else {
  276.           document.getElementById( "songTitle" ).innerText = player.getVideoData().title;
  277.           document.getElementById('mediabtnp').innerText = "►";
  278.         }
  279.     }
  280. }
  281.  
  282. var tag = document.createElement('script');
  283. tag.src = "//www.youtube.com/player_api";
  284. var firstScriptTag = document.getElementsByTagName('script')[0];
  285. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  286.  
  287. function switchplaystate(){
  288.   if( player.getPlayerState() == 1 ) {
  289.     player.pauseVideo();
  290.  
  291.   } else {
  292.     player.playVideo();
  293.   }
  294. }
  295. </script>
  296.  
  297. <!-- Set Up Layout on Load -->
  298. <script>
  299. window.onload = function() {
  300. switchTab('home');
  301.  lAlign();
  302. };
  303. </script>
  304.  
  305. <!-- Left Align Home Page for full page layouts -->
  306. <script>
  307. function lAlign(){
  308.   document.getElementById('url_panel').style = "left: 0px; top: 0px; width: 914px !important;"
  309.   document.getElementById('imvuContent').align = "left";
  310.     var links = document.getElementsByTagName("a");
  311.     for(var i=0;i<links.length;i++)
  312.    {
  313.        if(links[i].href)
  314.        {
  315.            links[i].style.color = '#000';  
  316.            links[i].style.font-family = 'cuteso';
  317.        }
  318.    }
  319. }
  320. </script>
  321. <script>
  322. function changeTitle(divID,divTitle)
  323. {
  324. document.getElementById(divID).innerHTML=divTitle;
  325. }
  326. </script>
  327.  
  328. <!-- Codes to hide all elements -->
  329. <style type="text/css">
  330.    #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel, #visitors_panel,
  331.    #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
  332.    #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
  333.    #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #outfits_panel {
  334.       display: none !important;
  335.    }
  336.    #rightColumn {
  337.       display:none !important;
  338.    }
  339. </style>
  340. <style type="text/css">
  341. #url_panel_colRow, .imvucodes_net { display:none !important; }
  342. </style>
  343. <style type="text/css">
  344. .paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
  345. </style>
  346.  
  347. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!