API tools faq
paste
Advertisement
vongolacloud18

Family Page #03

vongolacloud18
Sep 4th, 2014
4,624
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6.     FAMILY PAGE #3 ©BAKAOTHEMES
  7.         DO NOT TOUCH CREDIT
  8.    
  9.     FEEL FREE TO CUSTOMIZE. DO NOT STEAL CODE
  10.    
  11.     HAVE ANY QUESTIONS? ASK THEM HERE -> HTTP://BAKAO.CO.VU/FAQ
  12.  
  13. -->
  14.  
  15. <head>
  16.  
  17.     <title>My Family</title>
  18.     <link rel="shortcut icon" href="http://static.tumblr.com/jyuasny/osonbe4ph/favi.png">
  19.     <link rel="alternate" type="application/rss+xml" href="http://bakao.co.vu/rss">
  20.  
  21. <style type="text/css">
  22.  
  23. ::selection, ::-webkit-selection{ /* FOR DESCRIPTION AND FAMILY MEMBER TEXT ONLY */
  24. background-color: transparent;
  25. /*Selection Color*/
  26. color: #ff87bb; /* SELECTED TEXT COLOR */
  27. }
  28.  
  29. #lulu::selection, #lulu::-webkit-selection{ /* FOR BORDER TRIANGLE IN FAMILY MEMBERS ONLY */
  30. background-color: transparent;
  31. /*Selection Color*/
  32. color: #d9c9ff; /* SELECTED TRIANGLES COLOR*/
  33. }
  34.  
  35. #yui img::selection, #yui img::-webkit-selection{ /* FOR FAMILY MEMBER ICONS ONLY */
  36. background-color: #ff87bb; /* SELECTED ICONS COLOR */
  37. /*Selection Color*/
  38. color: transparent;
  39. }
  40.  
  41. #maki a::selection, #maki a::-webkit-selection{ /* FOR SIDEBAR LINKS */
  42. background-color: transparent;
  43. /*Selection Color*/
  44. color: #111111; /* SELECTED TEXT COLOR */
  45. }
  46.  
  47. body {
  48.     background-image: url('http://static.tumblr.com/jyuasny/Tbanbd7xw/sos.png'); /* BACKGROUND IMAGE */
  49.     background-color:#ffffff; /* BACKGROUND COLOR */
  50.     background-repeat:repeat; /* IF YOU DON'T WANT THE BACKGROUND IMAGE TO TILE, REPLACE "REPEAT" WITH "NO-REPEAT" */
  51.     font-family:calibri; /* TEXT FONT */
  52. }
  53.  
  54. a {
  55.     color:#b15ff4; /* LINKS COLOR */
  56.     text-decoration:none;
  57. }
  58.  
  59. #sidebar { /* FULL SIDEBAR AND DESCRIPTION */
  60.     background-color:#111; /* FULL SIDEBAR BACKGROUND COLOR */
  61.     width:160px;
  62.     height:100%;
  63.     position:fixed;
  64.     top:0px;
  65.     left:0px;
  66.     padding:20px;
  67.     color:#e0b5db; /* DESCRIPTION TEXT COLOR */
  68.     font-size:12px;
  69. }
  70.  
  71. #sidebar img { /* SIDEBAR ICON */
  72.     margin-top:40px;
  73.     width:80px;
  74.     height:80px;
  75.     margin-bottom:10px;
  76.     border:5px solid #BBA2F7; /* SIDEBAR ICON BORDER */
  77. }
  78.  
  79. #maki { /* LINKS CONTAINER */
  80.     margin-top:15px;
  81.     text-align:center;
  82. }
  83.  
  84. #maki a{ /*SIDEBAR LINKS */
  85.     background-color:#BBA2F7; /* LINKS BACKGROUND COLOR */
  86.     color:#6f5d9e; /* LINKS TEXT COLOR */
  87.     font-size:10px;
  88.     width:100px;
  89.     padding:5px 0px;
  90.     display:block;
  91.     margin-bottom:5px;
  92. }
  93.  
  94. #miru { /* FAMILY CONTAINER */
  95.     margin-left:250px;
  96.     width:800px;
  97.     margin-top:100px;
  98. }
  99.  
  100. #yui { /* FAMILY MEMBER CONTAINER */
  101.     background-color:#FFF; /* FAMILY MEMBER BACKGROUND COLOR */
  102.     width:200px;
  103.     padding:10px;
  104.     margin-right:20px;
  105.     margin-bottom:20px;
  106.     float:left;
  107. }
  108.  
  109. #yui img { /* FAMILY MEMBER ICON */
  110.     width:70px;
  111.     height:70px;
  112.     border:5px solid #f4a4e4; /* FAMILY MEMBER ICON BORDER */
  113. }
  114.  
  115. #riku { /* SYMBOL AND NAME CONTAINER */
  116.     display:inline-block;
  117.     text-align:center;
  118.     width:120px;
  119.     height:80px;
  120. }
  121.  
  122. #riku span#sora { /* SYMBOL */
  123.     line-height:60px;
  124.     font-size:20px; /* SYMBOL FONT SIZE */
  125.     color:#F57FE5; /* SYMBOL COLOR */
  126. }
  127.  
  128. #riku span { /* FAMILY MEMBER NAME */
  129.     display:block;
  130.     height:40px;
  131.     font-size:15px; /* NAME FONT SIZE */
  132.     font-family:times; /* NAME FONT */
  133.     line-height:35px;
  134. }
  135.  
  136. #lulu { /* DESCRIPTION TRIANGLE */
  137.     margin-top:-20px;
  138.     height:0px;
  139.     margin-bottom:20px;
  140.     margin-left:20px;
  141.     color:#d9c9ff; /* DESCRIPTION BORDER TRIANGLE COLOR */
  142. }
  143.  
  144. #yachi { /* DESCRIPTION BUBBLE */
  145.     text-align:justify;
  146.     width:190px;
  147.     margin-top:15px;
  148.     border:5px solid #d9c9ff; /* DESCRIPTION BORDER */
  149. }
  150.  
  151. #ginko { /* DESCRIPTION TEXT */
  152.     padding:10px;
  153.     font-size:12px;
  154.     color:#000000;
  155. }
  156.  
  157. </style>
  158.  
  159. <!-- DO NOT TOUCH THIS SCRIPT -->
  160. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  161. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  162. <script>
  163. $(function(){
  164. var $container = $('#miru');
  165. $container.imagesLoaded(function(){
  166. $container.masonry({
  167. itemSelector: '#yui',
  168. });
  169. });
  170. $container.infinitescroll({
  171. itemSelector : "#yui",
  172. navSelector : "div.pagination",
  173. nextSelector : ".pagination a#next",
  174. loadingImg : "",
  175. loadingText : "<em></em>",
  176. bufferPx : 10000,
  177. extraScrollPx: 12000,
  178. },
  179. // trigger Masonry as a callback
  180. function( newElements ) {
  181.   var $newElems = $( newElements ).css({ opacity: 0 });
  182. // ensure that images load before adding to masonry layout
  183. $newElems.imagesLoaded(function(){
  184. $newElems.animate({ opacity: 1 });
  185. $container.masonry( 'appended', $newElems, true );
  186. });
  187. }
  188. );
  189. });
  190. </script>
  191. <!-- SCRIPT END -->
  192.  
  193. </head>
  194. <body>
  195.  
  196.  
  197. <!-- CORNER IMAGE START -->
  198. <img src="IMAGE URL HERE" style="position:fixed; bottom:0px; right:0px; z-index:-99;">
  199. <!-- CORNER IMAGE END -->
  200.  
  201. <!-- SIDEBAR START -->
  202. <div id="sidebar">
  203.     <center>
  204.    
  205. <!-- SIDEBAR ICON START-->
  206.     <img src="IMAGE URL HERE">
  207. <!-- SIDEBAR ICON END -->
  208.    
  209.     </center><center>
  210.    
  211. <!-- DESCRIPTION START -->
  212.     DESCRIPTION HERE
  213. <!-- DESCRIPTION END -->
  214.  
  215.     </center><div id="maki"><center>
  216.  
  217. <!-- SIDEBAR LINKS START -->
  218.         <a href="/">Home</a>
  219.         <a href="/ask">Ask</a>
  220.         <a href="http://tumblr.com/dashboard">Dash</a>
  221.         <a href="http://bakao.co.vu">Credit</a>
  222. <!-- IF YOU WOULD LIKE MORE LINKS, ADD THIS:
  223. <a href="LINK URL">LINK NAME</a>
  224. TO THE NEXT LINE (ADD MORE LINES IF NEEDED)-->    
  225.        
  226. <!-- SIDEBAR LINKS END -->        
  227.         </center></div></div>
  228.  
  229. <!-- SIDEBAR END -->
  230.  
  231.  
  232. <!-- THIS NEXT LINE IS THE CONTAINER. DO NOT DELETE. -->
  233. <div id="miru">
  234.  
  235. <!-- TO ADD MORE FAMILY MEMBERS, COPY AND PASTE FROM 'MEMBER START' TO 'MEMBER END' -->
  236.  
  237. <!-- MEMBER START -->
  238. <div id="yui"><table cellspacing="0" cellpadding="0"><tr><td>
  239.    
  240.     <!-- REPLACE ICON URL WITH YOUR OWN ON NEXT LINE -->
  241.     <img src="IMAGE URL HERE">
  242.  
  243. </td><td><div id="riku"><span id="sora">
  244.    
  245.     <!-- SYMBOL GOES ON NEXT LINE -->
  246.     SYMBOL
  247.  
  248. </span><span>
  249.    
  250.     <!-- NAME AND URL GOES ON NEXT LINE -->          
  251.     <a href="URL HERE">[NAME]</a>
  252.            
  253. </span></div></td></tr></table><div id="yachi"><div id="lulu">▲</div><div id="ginko">
  254.    
  255.     <!-- DESCRIPTION GOES ON NEXT LINE -->
  256.     DESCRIPTION OF PERSON
  257.  
  258. </div></div></div>
  259. <!-- MEMBER END -->
  260.  
  261. <!-- MEMBER START -->
  262. <div id="yui"><table cellspacing="0" cellpadding="0"><tr><td>
  263.    
  264.     <!-- REPLACE ICON URL WITH YOUR OWN ON NEXT LINE -->
  265.     <img src="IMAGE URL HERE">
  266.  
  267. </td><td><div id="riku"><span id="sora">
  268.    
  269.     <!-- SYMBOL GOES ON NEXT LINE -->
  270.     SYMBOL
  271.  
  272. </span><span>
  273.    
  274.     <!-- NAME AND URL GOES ON NEXT LINE -->          
  275.     <a href="URL HERE">[NAME]</a>
  276.            
  277. </span></div></td></tr></table><div id="yachi"><div id="lulu">▲</div><div id="ginko">
  278.    
  279.     <!-- DESCRIPTION GOES ON NEXT LINE -->
  280.     DESCRIPTION OF PERSON
  281.  
  282. </div></div></div>
  283. <!-- MEMBER END -->
  284.  
  285. <!-- MEMBER START -->
  286. <div id="yui"><table cellspacing="0" cellpadding="0"><tr><td>
  287.    
  288.     <!-- REPLACE ICON URL WITH YOUR OWN ON NEXT LINE -->
  289.     <img src="IMAGE URL HERE">
  290.  
  291. </td><td><div id="riku"><span id="sora">
  292.    
  293.     <!-- SYMBOL GOES ON NEXT LINE -->
  294.     SYMBOL
  295.  
  296. </span><span>
  297.    
  298.     <!-- NAME AND URL GOES ON NEXT LINE -->          
  299.     <a href="URL HERE">[NAME]</a>
  300.            
  301. </span></div></td></tr></table><div id="yachi"><div id="lulu">▲</div><div id="ginko">
  302.    
  303.     <!-- DESCRIPTION GOES ON NEXT LINE -->
  304.     DESCRIPTION OF PERSON
  305.  
  306. </div></div></div>
  307. <!-- MEMBER END -->
  308.  
  309. <!-- THIS IS WHERE THE CONTAINER ENDS -->
  310. </div>
  311.  
  312. </body>
  313. </html>
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!