API tools faq
paste
Advertisement
shixun

Paramour II

shixun
Jul 12th, 2013
5,921
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.72 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.  
  3. <!--Please do not remove credits. Page by Pohroro-->
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.     <title>{Title}</title>
  8.     <link rel="shortcut icon" href="{Favicon}">
  9.     <link href='http://fonts.googleapis.com/css?family=Chivo:400,900' rel='stylesheet' type='text/css'>
  10.     <style type="text/css">
  11.         html, body, ul, li
  12.         {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.        
  17.         body
  18.         {
  19.             font-family: Libre Baskerville; /*change the body font here*/
  20.             font-size: 10px; /*change the body font size here*/
  21.             color: #353a3d; /*change the body font color here; this includes the title as well*/
  22.             background: url() white; /*change your body background image or color here*/
  23.                         margin: 0 auto;
  24.         }
  25.                
  26.                 a
  27.                 {
  28.                         text-decoration: none;
  29.                         color: black; /*change your general link color here*/
  30.                 }
  31.            
  32.                 a:hover
  33.                 {
  34.                         background: yellow; /*change your hover link background color here*/
  35.             color: #353a3d; /*change your hover link color here*/
  36.                 }
  37.        
  38.                 #mainContainer
  39.                 {
  40.             margin: 0 auto;
  41.             margin-top: 70px;
  42.             width: 660px;
  43.                 }
  44.                
  45.                 #leftBar
  46.                 {
  47.             width: 40px;
  48.             height: 490px;
  49.             background: #2a2a2a; /*change the color of the left bar*/
  50.             margin: 0 auto;
  51.             margin-right: 10px;
  52.                         float: left;
  53.                 }
  54.        
  55.                 #navigation
  56.         {
  57.             float: left;
  58.             margin-left: 10px;
  59.                         margin-top: -3px;
  60.         }
  61.        
  62.         #navigation a
  63.         {
  64.             width: 150px;
  65.             height: 22.4px;
  66.             line-height: 22.4px;
  67.             background: #2a2a2a; /*change the background color of the navigation link*/
  68.             color: white; /*change the font color of the navigation link*/
  69.             font-size: 8px;
  70.             display: block;
  71.             margin-top: 3px;
  72.             text-align: center;
  73.             text-transform: uppercase;
  74.             letter-spacing: 2px;
  75.         }
  76.        
  77.         #navigation a:hover
  78.         {
  79.             background: #b1b1b1; /*change the background color of the hovered navigation link*/
  80.             color: #2a2a2a; /*change the font color of the hovered navigation link*/
  81.             font-style: italic;
  82.         }
  83.                
  84.         #content
  85.         {
  86.             width: 560px;
  87.             height: 280px;
  88.                         margin-top: 10px;
  89.             margin-right: 10px;
  90.             padding-top: -10px;
  91.             float: left;
  92.             overflow: auto;
  93.             text-align: justify;
  94.             line-height: 14px;
  95.         }
  96.        
  97.         #content:first-letter
  98.                 {
  99.                         width: 37px;
  100.                         height: 37px;
  101.                         padding: 5px;
  102.                         margin-bottom: 0px;
  103.                         margin-right: 4px;
  104.                         float: left;
  105.                         background-color: #353a3d; /*change the background color of the first letter of your content here*/
  106.                         border: 3px double white;
  107.                         color: white;
  108.                         font-size: 30px;
  109.                         font-style: italic;
  110.                         line-height: 37px;
  111.                         text-transform: uppercase;
  112.                         text-align: center;
  113.                 }
  114.        
  115.         #rightBar
  116.         {
  117.             width: 40px;
  118.             height: 490px;
  119.             background: #2a2a2a; /*change the color of the right bar*/
  120.             float: left;
  121.                         margin-top: -200px;
  122.         }
  123.        
  124.         ::-webkit-scrollbar
  125.         {
  126.             height: 10px;
  127.             width: 0px;
  128.             background: white;
  129.         }
  130.        
  131.         ::-webkit-scrollbar-thumb:vertical
  132.         {
  133.             background: #353a3d; /*change the color of the scrollbar face here*/
  134.         }
  135.     </style>
  136. </head>
  137. <body>
  138.     <div id="mainContainer">
  139.             <div id="leftBar"></div>
  140.         <!--change your image here--><img src="http://i.imgur.com/YzvCktw.png?1" style="float: left; width: 400px; height: 200px;">
  141.            
  142.              <div id="navigation">
  143.         <a href="/">Index</a>
  144.         <a href="/ask">Message</a>
  145.         <a href="http://tumblr.com">Link One</a>
  146.         <a href="http://tumblr.com">Link Two</a>
  147.                 <a href="http://tumblr.com">Link Three</a>
  148.         <a href="http://tumblr.com">Link Four</a>
  149.                 <a href="http://tumblr.com">Link Five</a>
  150.         <a href="http://pohroro.tumblr.com" title="Page by Pohroro">Credit</a>
  151.         </div>
  152.              
  153.         <div id="content">
  154.         <p style="margin-top: 0px;"><!--simply insert your on biography from here onwards-->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed volutpat tellus. Nunc elementum eros et lectus rhoncus, quis mollis lacus fermentum. Suspendisse sit amet luctus sapien. In facilisis eros ullamcorper velit commodo luctus. Pellentesque bibendum rhoncus elit, quis eleifend dolor euismod ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Nulla a congue libero. Etiam consequat quis sem sit amet mollis. Donec id molestie ligula. Morbi vel erat in elit porttitor auctor sed eget arcu. Nulla at consectetur orci. Nulla mi arcu, scelerisque at dolor bibendum, dapibus cursus augue. Sed blandit nulla eget tristique dictum. Ut feugiat dui eget fringilla bibendum.</p>
  155.  
  156. <p><b>Bold</b>. <i>Italic.</i> <u>Underline.</u> <a href="/">Link.</a> Cras eu eros nec mi ultrices molestie ultricies in lorem. Nullam tempor vel felis at tristique. Integer tempor nec urna ut rhoncus. Morbi a libero vel felis pellentesque venenatis. Curabitur tristique tellus porta magna fringilla, at vulputate massa tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque convallis urna eu leo sollicitudin egestas. Mauris eu tristique ante.</p>
  157.  
  158. <p>Donec in pulvinar dolor, nec imperdiet neque. Sed dignissim cursus mi vitae aliquam. Donec sollicitudin sed sapien sed imperdiet. Sed cursus diam sit amet erat consequat aliquam. Duis sed diam sed mi sollicitudin hendrerit vel ac mauris. Fusce euismod hendrerit varius. Nunc eget orci eu tellus auctor vulputate. Fusce mattis mattis turpis id placerat. In vel diam porttitor sem porta pellentesque sodales id dui. Nam viverra semper sollicitudin. Nam nisl augue, ullamcorper sed volutpat sit amet, venenatis et ipsum. Aliquam tempus nunc quis ligula accumsan, quis tristique libero vestibulum. Cras turpis est, porttitor tempor euismod sit amet, interdum et mauris. Vestibulum laoreet velit vulputate blandit ullamcorper. Curabitur ut libero vehicula, iaculis magna eget, tempus ante.</p>
  159.  
  160. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in sem ut mi porttitor vestibulum ut non turpis. Pellentesque consequat interdum porttitor. Praesent dapibus quam et pharetra pharetra. Pellentesque lacinia congue ullamcorper. Fusce eu cursus dui, ut sollicitudin orci. Fusce eget feugiat nisi. Integer et volutpat lectus. Phasellus hendrerit dui sit amet velit scelerisque ultricies.</p>
  161.  
  162. <p>Sed tempus iaculis fringilla. Donec aliquet velit quis ante aliquam, vel congue purus ornare. Mauris suscipit fermentum lectus vel elementum. Nam ipsum ligula, sagittis dapibus felis sit amet, interdum viverra elit. Proin tempus sem magna, ac sagittis libero interdum sit amet. Donec luctus sem lectus, a laoreet augue venenatis ut. In leo nibh, elementum vel gravida vel, pellentesque ut sem. Phasellus risus risus, tempus vel odio gravida, eleifend eleifend purus. Nam in velit lobortis, vestibulum nisl eu, pellentesque enim. Nam metus tellus, ultricies nec dolor in, sodales tempor lorem. Quisque posuere cursus luctus. Sed iaculis nisi at urna pharetra, rutrum tempus sem tincidunt.</p>
  163.         </div>
  164.    
  165.         <div id="rightBar"></div>
  166.         </div>
  167. </body>
  168. </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!