API tools faq
paste
knights

[01] BUBB page v.1

knights
Jul 25th, 2017
162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.89 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.   <head>
  3.  
  4. <!--
  5.  
  6.  page theme BUBB v.1 by tux @cuckclan (sona.god.jp)
  7.  
  8.    + feel free to edit as much as you like!
  9.    + dont remove the credit
  10.    + feel free to use this on other sites (like neocities)
  11.    + have fun!
  12.    
  13. -->
  14.  
  15.   <!-- the favicon! if you want it to be default, replace the imgur link with {Favicon}, or if you want a different one, get another image link! -->
  16.   <link rel="shortcut icon" href="http://i.imgur.com/3wTYLB5.png">
  17.     <meta charset="UTF-8">
  18.     <title>{Title}</title>
  19.    <style>
  20.    
  21.       /* background */
  22.       body {
  23.     background:url('http://i.imgur.com/TNjyUWr.png') repeat fixed; /* background image! add background-size:cover; and replace repeat with no-repeat if you want it to be fullsize */
  24.     height:100%;
  25.     color:#000;
  26.     font-family:MS PGothic;
  27.     font-size:16px;
  28.     }
  29.  
  30.       /* the grey boxes */
  31.       #box {
  32.     color:#000;
  33.     background-color: #b4b4b4;
  34.     font-family:MS PGothic;
  35.     font-size:16px;
  36.     border: 3px ridge #b4b4b4;
  37.     width: 320px;
  38.     padding: 20px;
  39.     margin:60px;
  40.     }
  41.    
  42.       /* the sidebar */
  43.       #sb {
  44.     color:#000;
  45.     background-color: #b4b4b4;
  46.     font-family:MS PGothic;
  47.     font-size:16px;
  48.     border: 3px ridge #b4b4b4;
  49.     text-align:center;
  50.     float:left;
  51.     height:280px;
  52.     z-index: 1;
  53.     top: 100px;
  54.     bottom: 100px;
  55.     left: 40px;
  56.     overflow-x: hidden;
  57.     position:fixed;
  58.     width: 130px;
  59.     padding:20px;
  60.     }
  61.    
  62.       /* first box header image */
  63.       #pic {
  64.     background:url('http://i.imgur.com/RDuRZnv.png') center no-repeat;
  65.     background-size:cover;
  66.     background-color:#e2e2e2;
  67.     width:120px;
  68.     height:120px;
  69.     border: 3px ridge #b4b4b4;
  70.     border-radius:100px;
  71.     }
  72.    
  73.       /* corner image */
  74.       #corner {
  75.     position: fixed;
  76.     bottom: -5px;
  77.     right: 20px;
  78.     }
  79.  
  80.     /* kin + friends box circle image containers */
  81.     #buddy {
  82.     display:inline-block;
  83.     background-color:#e2e2e2;
  84.     width:80px;
  85.     height:80px;
  86.     border: 3px ridge #b4b4b4;
  87.     border-radius:100px;
  88.     margin:3px;
  89.     }
  90.    
  91.     /* images of the kin + friends box circle containers */
  92.     #buddy img {
  93.     border-radius:100px;
  94.     width:80px;
  95.     height:80px;
  96.     }
  97.    
  98.     /* titles! */
  99.       h1 {
  100.     color:#000;
  101.     font-size:20px;
  102.     font-family:MS PGothic;
  103.     }
  104.    
  105.     /* links! */
  106.       a {
  107.     color: #0000ff;
  108.     text-decoration:underline;
  109.     -o-transition:.5s ease-in-out;
  110.     -ms-transition:.5s ease-in-out;
  111.     -moz-transition:.5s ease-in-out;
  112.     -webkit-transition:.5s ease-in-out;
  113.     transition:.5s ease-in-out;
  114.     }
  115.    
  116.     /* link hover! feel free to add cool effects*/
  117.       a:hover {
  118.     color: #000;
  119.     }
  120.    
  121.    </style>
  122.   </head>
  123.   <body>
  124.  
  125.   <div id="sb">
  126.  
  127.         <!-- this is the sidebar image! it resizes to 120px -->
  128.       <img src="http://i.imgur.com/tBrqar5.png" width="120px"/>
  129.      
  130.       <!-- these are the links! you can also replace this with a description -->
  131.       <h1><a href="URL">link</a></h1>
  132.       <h1><a href="URL">link</a></h1>
  133.       <h1><a href="URL">link</a></h1>
  134.       <h1><a href="URL">link</a></h1>
  135.       <h1><a href="URL">link</a></h1>
  136.   </div>
  137.  
  138.   <center>
  139.  
  140.      <!-- BOX START -->
  141.      
  142.       <div id="box">
  143.       <div align="center"><div id="pic"></div></div><br>
  144.      
  145.       <h1>profile</h1>
  146.      
  147.       <br>
  148.      
  149.     <!-- description start -->
  150.  
  151.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat justo dolor, sed varius orci maximus pretium. Nunc sapien est, accumsan et dignissim ut, sagittis nec est. Sed sed sagittis urna. Sed nec laoreet est. Donec vestibulum ipsum quis risus iaculis sagittis. Phasellus aliquam diam gravida tortor molestie, quis accumsan mauris tincidunt. Donec et elit sed lorem aliquam elementum. Quisque blandit diam at eros elementum, ac porttitor quam laoreet. Donec sit amet turpis in sapien molestie posuere id vel elit. Aenean consequat suscipit lectus at gravida.
  152.  
  153.     <!-- description end -->
  154.  
  155.      </div>
  156.      
  157.     <!-- BOX END -->
  158.      
  159.     <!-- BOX START -->
  160.    
  161.     <div id="box">
  162.    
  163.     <h1>do not follow if</h1>
  164.      
  165.       <br>
  166.  
  167.     <!-- description start -->
  168.  
  169.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat justo dolor, sed varius orci maximus pretium. Nunc sapien est, accumsan et dignissim ut, sagittis nec est. Sed sed sagittis urna. Sed nec laoreet est. Donec vestibulum ipsum quis risus iaculis sagittis. Phasellus aliquam diam gravida tortor molestie, quis accumsan mauris tincidunt. Donec et elit sed lorem aliquam elementum. Quisque blandit diam at eros elementum, ac porttitor quam laoreet. Donec sit amet turpis in sapien molestie posuere id vel elit. Aenean consequat suscipit lectus at gravida.
  170.  
  171.     <!-- description end -->
  172.  
  173.     </div>
  174.    
  175.     <!-- BOX END -->
  176.    
  177.     <!-- BOX START -->
  178.    
  179.     <div id="box">
  180.    
  181.     <h1>kin</h1>
  182.      
  183.       <br>
  184.      
  185.       <!-- the buddy divs are optional! feel free to delete them, theyre there in case you want pictures. they use the same div as the friends box buddy divs! -->
  186.      
  187.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  188.      
  189.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  190.      
  191.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  192.      
  193.       <br>
  194.      
  195.     <!-- description start -->
  196.  
  197.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis volutpat justo dolor, sed varius orci maximus pretium. Nunc sapien est, accumsan et dignissim ut, sagittis nec est. Sed sed sagittis urna. Sed nec laoreet est. Donec vestibulum ipsum quis risus iaculis sagittis. Phasellus aliquam diam gravida tortor molestie, quis accumsan mauris tincidunt. Donec et elit sed lorem aliquam elementum. Quisque blandit diam at eros elementum, ac porttitor quam laoreet. Donec sit amet turpis in sapien molestie posuere id vel elit. Aenean consequat suscipit lectus at gravida.
  198.  
  199.     <!-- description end -->
  200.  
  201.     </div>
  202.    
  203.     <!-- BOX END -->
  204.    
  205.     <!-- BOX START -->
  206.    
  207.     <div id="box">
  208.    
  209.     <h1>friends</h1>
  210.      
  211.       <br>
  212.      
  213.       <!-- copy + paste to get more! you can also use this as a kin box -->
  214.  
  215.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  216.      
  217.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  218.      
  219.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  220.      
  221.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  222.      
  223.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  224.      
  225.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  226.      
  227.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  228.      
  229.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  230.      
  231.       <div id="buddy"><a href="URL" title="TITLE"><img src="http://via.placeholder.com/80x80"></a></div>
  232.  
  233.     </div>
  234.    
  235.     <!-- BOX END -->
  236.    
  237.   </center>
  238.  
  239.   <!-- this is the corner image! feel free to remove it as well if you like -->
  240.   <div id="corner"><img src="http://i.imgur.com/mUIuicc.png"/></div>
  241.  
  242.  
  243.   <!-- this is the credit, dont remove it! -->
  244.   <div style="background-color:#e2e2e2; border: 3px ridge #b4b4b4; position:fixed; bottom:3px; left:3px; padding-left:3px; font-size:15px; letter-spacing:1px; font-family:font-family:MS PGothic; color:#000000;"><a href="http://p9.god.jp/" title="THEME BY TUX">&hearts;</a>
  245. </div>
  246.  
  247.  </body>
  248. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!