API tools faq
paste
Advertisement
lnterplay

THEME:OC

lnterplay
Jul 23rd, 2014
307
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.14 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.  
  7. original characters (ocs) page theme by nova / novathemes
  8.  
  9. for further customisation:
  10.        if you'd like boxed edges, rather than rounded ones, press CTRL+F and search "border-radius:". erase each border radius and they'll be square.
  11.  
  12. questions?
  13.    twitter: @lnterplay
  14.    tumblr URL: rexesque
  15.  
  16. -->
  17.  
  18.  
  19. <head>
  20.     <title>{title}</title> <!--change your page title here-->
  21.     <link rel="shortcut icon" href="{Favicon}">
  22.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.     <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
  24.     <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  25.     <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  26.     <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
  27.         <style type="text/css">
  28.        
  29.             ::-webkit-scrollbar{
  30.                 height:5px;
  31.                 width:5px;
  32.                 background:#E5E9EC;
  33.                     /*scrollbar background colour*/
  34.             }
  35.            
  36.             ::-webkit-scrollbar-thumb:vertical{
  37.                 background:#A7B8C5;
  38.                     /*scrollbar colour*/
  39.                 border:2px #E5E9EC;
  40.                     /*scroll barbackground colour*/
  41.             }
  42.        
  43.             body{
  44.                 background:#E5E9EC url(http://i.imgur.com/kAXFzCu.jpg?1);
  45.                         /*background image and colour*/
  46.                
  47.                     /*background cover, erase directed lines below*/
  48.                 background-position: center;
  49.                 background-attachment: fixed;
  50.                 -webkit-background-size: cover;
  51.                 -moz-background-size: cover;
  52.                 -o-background-size: cover;
  53.                 background-size: cover;
  54.                     /*background cover, erase directed lines above*/
  55.                
  56.                 font-family:'Lato',sans-serif;
  57.                 font-size:12px;
  58.                     /*font-size for the page*/
  59.             }
  60.            
  61.             a{
  62.                 color:#BBC3C9;
  63.                     /*link colour*/
  64.             }
  65.            
  66.             a:hover{
  67.                 color:#C3CBD2;
  68.                     /*link colour on hover*/
  69.             }
  70.            
  71.             i,em{
  72.                 color:#E1E7EC;
  73.                     /*italics colour*/
  74.                 font-style:italic;
  75.             }
  76.            
  77.             b,strong{
  78.                 color:#E5E9EC;
  79.                     /*bold colour*/
  80.                 font-weight:bold;
  81.             }
  82.            
  83.             hr{
  84.                 display:block;
  85.                 height:1px;
  86.                 border:0;
  87.                 border-top:1px solid #fff;
  88.                     /*line colour*/
  89.             }
  90.            
  91.             #header{
  92.                 font-family:'Dancing Script',cursive;
  93.                 font-size:50px;
  94.                     /*font-size for character name*/
  95.                 text-align:center;
  96.                 color:#fff;
  97.                     /*font-colour for character name*/
  98.                
  99.                 background-color:rgba(255,255,255,0.7);
  100.                     /*background-colour for header*/
  101.                 border:10px;
  102.                 border-radius:10px;
  103.                 padding:10px;
  104.                
  105.                 width:400px;
  106.                 height:50px;
  107.                
  108.                 left:500px;
  109.                 top:25px;
  110.                 position:fixed;
  111.             }
  112.            
  113.             #profile{
  114.                 background-color:rgba(255,255,255,0.7);
  115.                     /*background-colour for character image*/
  116.                
  117.                 width:375px;
  118.                 height:525px;
  119.                
  120.                 text-align:center;
  121.                
  122.                 border-radius:10px;
  123.                
  124.                 left:50px;
  125.                 top:25px;
  126.                 position:fixed;
  127.                 padding:25px;
  128.             }
  129.            
  130.             #profile img{
  131.                 width:375px;
  132.                 height:525px;
  133.             }
  134.            
  135.             #navigation{
  136.                     background:rgba(255,255,255,.7);
  137.                         /*background-colour for navigation*/
  138.                     width:150px;
  139.                     height:100px;
  140.                     border-radius:10px;
  141.                     padding:25px;
  142.                    
  143.                     left:950px;
  144.                     top:450px;
  145.                
  146.                     color:#97BBD7;
  147.                         /*font-colour for navigation*/
  148.                
  149.                     position:fixed;
  150.                     font-family:'Droid Sans',sans-serif;
  151.                     font-size:10px;
  152.                         /*font-size for navigation*/
  153.                     text-transform:uppercase;
  154.                     text-align:center;
  155.                     line-height:15px;
  156.                 }
  157.                 .navih{
  158.                         color:#fff;
  159.                             /*font-colour for navigation header*/
  160.                         text-transform:uppercase;
  161.                         font-family:'Ubuntu Condensed',sans-serif;
  162.                         font-size:25px;
  163.                             /*font-size for navigation header*/
  164.                         text-align:center;
  165.                     }
  166.             #extra{
  167.                     background:rgba(255,255,255,.7);
  168.                         /*background-colour for extra column*/
  169.                     width:150px;
  170.                     height:350px;
  171.                     border-radius:10px;
  172.                     padding:25px;
  173.                    
  174.                     left:950px;
  175.                     top:25px;
  176.                
  177.                     color:#97BBD7;
  178.                         /*font-colour for extra column*/
  179.                
  180.                     position:fixed;
  181.                     font-family:'Ubuntu Condensed',sans-serif;
  182.                     font-size:12px;
  183.                         /*font-size for extra column*/
  184.                 }
  185.                
  186.                 .extrah{
  187.                         color:#fff;
  188.                             /*font-colour for extra column header*/
  189.                         text-transform:uppercase;
  190.                         font-family:'Ubuntu Condensed',sans-serif;
  191.                         font-size:25px;
  192.                             /*font-size for extra column header*/
  193.                         text-align:center;
  194.                     }
  195.                
  196.             #container{
  197.                 width:375px;
  198.                 height:450px;
  199.                
  200.                 background:rgba(255,255,255,0.7);
  201.                     /*background-colour for basic and bio container*/
  202.                
  203.                 left:500px;
  204.                 top:100px;
  205.                 position:fixed;
  206.                 padding:25px;
  207.                
  208.                 border-radius:10px;
  209.             }
  210.            
  211.            
  212.                 .basics{
  213.                     width:350px;
  214.                     height:190px;
  215.                    
  216.                     background:rgba(000,000,000,0.5);
  217.                         /*background-colour for basic column*/
  218.                    
  219.                     color:#DAE9F4;
  220.                         /*font-colour for basic text*/
  221.                    
  222.                     position:relative;
  223.                     float:center;
  224.                     padding:10px;
  225.                    
  226.                     overflow-y:scroll;
  227.                 }
  228.                
  229.                     .basics ul,ol{
  230.                         list-style-type:lower-roman;
  231.                             /*list style type for ordered and unordered lists in basic column*/
  232.                     }
  233.                    
  234.                     .basicsh{
  235.                         color:#fff;
  236.                             /*font-colour for basic header*/
  237.                         text-transform:uppercase;
  238.                         font-family:'Ubuntu Condensed',sans-serif;
  239.                         font-size:25px;
  240.                             /*font-size for basic header*/
  241.                         text-align:center;
  242.                     }
  243.                
  244.                 .bio{
  245.                     width:350px;
  246.                     height:190px;
  247.                    
  248.                     background:rgba(000,000,000,0.5);
  249.                         /*background-colour for bio column*/
  250.                    
  251.                     color:#DAE9F4;
  252.                         /*font-colour for bio column*/
  253.                    
  254.                     position:relative;
  255.                     float:center;
  256.                     padding:10px;
  257.                     margin-top:25px;
  258.                    
  259.                     overflow-y:scroll;
  260.                 }
  261.                
  262.                      .bio ul,ol{
  263.                         list-style-type:lower-roman;
  264.                            /*list style type for ordered and unordered lists in bio column*/
  265.                     }
  266.                     .bioh{
  267.                         color:#fff;
  268.                             /*font-colour for bio header*/
  269.                         text-transform:uppercase;
  270.                         font-family:'Ubuntu Condensed',sans-serif;
  271.                         font-size:25px;
  272.                             /*font-size for bio header*/
  273.                         text-align:center;
  274.                     }
  275.            
  276.         </style>
  277. </head>
  278. <body>
  279.     <div id="header">
  280.         Character Name <!--character name goes here-->
  281.     </div>
  282.     <div id="profile">
  283.         <img src="http://i.imgur.com/XElC7dl.png?1?3655" width="375px;" height="525px;" />
  284.             <!--full body image of your OC, 500x700 px for best results-->
  285.     </div>
  286.     <div id="extra">
  287.    
  288.         <div class="extrah">
  289.             Extra <!--title of extra column here-->
  290.         </div>
  291.        
  292.         <hr />
  293.         <!--content of extra column below-->
  294.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  295.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  296.         <!--content of extra column above-->
  297.     </div>
  298.    
  299.     <div id="navigation">
  300.    
  301.         <div class="navih">
  302.             Navigation <!--title of navigation column-->
  303.         </div>
  304.        
  305.         <hr />
  306.         <a href="/">Index</a><br />
  307.         <a href="/ask">Contact</a><br />
  308.         <a href="/archive">Archive</a><br />
  309.         <!--extra links below-->
  310.         <a href="/">Other links</a><br />
  311.         <a href="/">Other links</a>
  312.         <!--extra links above-->
  313.        
  314.     </div>
  315.    
  316.     <div id="container">
  317.    
  318.         <div class="basics">
  319.        
  320.             <div class="basicsh">
  321.                 Basics <!--title of basics column-->
  322.             </div>
  323.            
  324.             <hr />
  325.             <!--content of basics column below-->
  326.             <ol>
  327.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  328.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  329.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  330.             </ol>
  331.             <p><strong>Bold</strong>, <em>italics</em>, <a href="/">link</a>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  332.             <ul>
  333.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  334.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  335.                 <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  336.             </ul>
  337.             <!--content of basics column above-->
  338.         </div>
  339.        
  340.         <div class="bio">
  341.        
  342.             <div class="bioh">
  343.                 Biography <!--title of bio column-->
  344.             </div>
  345.            
  346.             <hr />
  347.             <!--content of bio column below-->
  348.             <p><strong>BEGINNING</strong></p>
  349.             <blockquote>
  350.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  351.             </blockquote>
  352.             <p><strong>MIDDLE</strong></p>
  353.             <blockquote>
  354.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  355.             </blockquote>
  356.             <p><strong>END</strong></p>
  357.             <blockquote>
  358.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  359.             </blockquote>
  360.             <!--content of bio column above-->
  361.         </div>
  362.     </div>
  363.  
  364. </body>
  365. </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!