Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!

blog page #3: character

By: hellmouths on May 31st, 2013  |  syntax: None  |  size: 8.79 KB  |  views: 7,294  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!--
  2.  
  3.  codes by hellmouths
  4.  
  5.  don't copy, steal or redistribute
  6.  
  7. -->
  8.  
  9.  
  10. <html>
  11. <head>
  12.  
  13. <title>{Title}</title>
  14.        <link rel="shortcut icon" href="{Favicon}">
  15.        <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  16.  
  17.  
  18. <!--- SCRIPTS - DO NOT REMOVE OR ALTER --->
  19. <script src="http://code.jquery.com/jquery-1.10.0.min.js">
  20. </script>
  21. <script>
  22. $(document).ready(function(){
  23.  
  24.   $(".one").click(function(){
  25.     $(".a").toggle();
  26.     $(".b,.c,.d").hide();
  27.   });
  28.  
  29.   $(".two").click(function(){
  30.     $(".b").toggle();
  31.     $(".a,.c,.d").hide();
  32.   });
  33.   $(".three").click(function(){
  34.     $(".c").toggle();
  35.     $(".b,.a,.d").hide();
  36.   });
  37.   $(".four").click(function(){
  38.     $(".d").toggle();
  39.     $(".b,.c,.a").hide();
  40.   });
  41.  
  42. });
  43. </script>
  44.  
  45. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  46. <script type="text/javascript" src="http://static.tumblr.com/ko1mcho/PMbmlkh9e/jquery.style-my-tooltips.js"></script>
  47.        
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title],a[title],img[title]").style_my_tooltips({
  52. tip_follows_cursor:"true",
  53. tip_delay_time:100,
  54. tip_fade_speed:100,
  55. attribute:"title"
  56. });
  57. });
  58. })(jQuery);
  59. </script>  
  60.  
  61. <!--- END SCRIPTS --->
  62.  
  63.  
  64.  
  65.  
  66. <!--- FONTS --->
  67. <link href='http://fonts.googleapis.com/css?family=VT323|Lekton' rel='stylesheet' type='text/css'>
  68. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,100italic,300italic,700italic,900italic' rel='stylesheet' type='text/css'>
  69. <link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
  70. <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
  71. <!--- END FONTS --->
  72.  
  73. </head>
  74. <style type="text/css">
  75.  
  76. /*---- SCROLLBAR ----*/
  77.  
  78. ::-webkit-scrollbar { width:3px; height:auto; background:#FFFFFF;}
  79. ::-webkit-scrollbar-corner { background:#000000;}
  80. ::-webkit-scrollbar-thumb:vertical { background:#000000;}
  81. ::-webkit-scrollbar-thumb:horizontal { background:#000000;}
  82.  
  83.  
  84.  
  85. /*---- MAIN BODY ----*/
  86.  
  87.  
  88. body {
  89.     background-color: #FFFFFF;
  90.         font-family: lato;
  91.         font-size:11px;
  92.         line-height: 140%;
  93. }
  94.  
  95. a { color:#000000; text-decoration: none; }
  96. a:hover { color:#9d4242; }
  97.  
  98.  
  99. h1 { font-size: 19px; font-style:italic; }
  100.  
  101.  
  102. .wrap {
  103.         width:730px;
  104.         margin:140px auto;
  105.         height:410px;
  106.         overflow: hidden;
  107.         background-color: #000000; }
  108.  
  109.  
  110.  
  111. /*---- SIDE IMAGE ----*/
  112.  
  113. .sideimg {
  114.     width:235px;
  115.     display:inline-block;
  116.     background-color:#FFFFFF;
  117.     height:410px;
  118.     float:left;
  119.     overflow:hidden; }
  120.  
  121. .sideimg img {
  122.         width:235px;
  123.         height:410px; }
  124.  
  125.  
  126.  
  127. /*---- MIDDLE PART ----*/
  128.  
  129.  
  130. .con {
  131.         height:410px;
  132.         padding:0 1px;
  133.         float:left;
  134.         width:420px;
  135.         display: inline-block;
  136.         background-color: #FFFFFF; }
  137.        
  138.  
  139.        
  140. .base {
  141.         text-align: center;
  142.         margin:auto;
  143.         font-family: old standard tt;
  144.         font-size: 19px;
  145.         line-height: 120%;
  146.         width:260px;
  147.         padding:25px 10px;
  148.         margin-top:100px;
  149.         border-top:1px solid #000000;
  150.         border-bottom:1px solid #000000;
  151.         font-style: italic; }
  152.  
  153.  
  154.  
  155. .a, .b, .c, .d {
  156.     display: none;
  157.     width:390px;
  158.     height:390px;
  159.     padding:10px 15px;
  160.     position: absolute;
  161.     overflow: auto;
  162.     text-align: justify;
  163.     background-color: #FFFFFF; }
  164.  
  165.  
  166. .q {
  167.     display:block;
  168.     width:390px;
  169.     height:390px;
  170.     padding:10px 15px;
  171.     text-align: center;
  172.     position: absolute;
  173.     overflow: auto;
  174.     background-color: #FFFFFF; }
  175.  
  176.  
  177. /*---- TAB 1 ----*/
  178.  
  179.  
  180. .log { display:inline-block; margin:-1px; }
  181.  
  182. .me {
  183.     font-family:lato;
  184.     text-transform: uppercase;
  185.     color:#000000;
  186.     display: block;
  187.     text-align: right;
  188.     padding:5px 10px;
  189.     width:80px;
  190.     margin:1px 0px; }
  191.    
  192. .this {
  193.     font-family:lekton;
  194.     display: block;
  195.     text-align: left;
  196.     padding:4px 10px;
  197.     width:265px;
  198.     background-color: #f6f6f6;
  199.     margin:3px 0px; }
  200.  
  201.  
  202. .a p { padding:10px 15px; line-height: 160%;  }
  203.  
  204.  
  205.  
  206. /*---- TAB 2 ----*/
  207.  
  208.  
  209. #links {
  210.         margin:auto;
  211.         width:380px;
  212. }
  213.  
  214.  
  215. #links a {
  216.         display: inline-block;
  217.         background-color: ;
  218.         border: 1px solid #f6f6f6;
  219.         font-family: lato;
  220.         text-transform: uppercase;
  221.         font-size:10px;
  222.         width:185px;
  223.         height:120px;
  224.         text-align: center;
  225.         line-height: 120px;
  226.         margin:2px 1px;
  227.         color:#000000;
  228. }
  229.  
  230.  
  231. #links a:hover {
  232.         background-color: #000000;
  233.         color:#FFFFFF;
  234. }
  235.  
  236.  
  237.  
  238.  
  239. /*---- TAB 3 ----*/
  240.  
  241. .para {
  242.         font-family: lato;
  243.     font-weight:bold;
  244.         font-size: 19px;
  245.         font-style: italic;
  246.         text-transform: lowercase;
  247.         display: block;
  248.         width:250px;
  249.         margin:0 5px;
  250. }
  251.  
  252. .para:first-letter { font-size:25px; }
  253.  
  254.  
  255. .c blockquote {
  256.         margin-left: 15px;
  257.         padding-left:10px;
  258.         border-left: 1px solid #9d4242;
  259.         margin-bottom: 25px;
  260. }
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267.  
  268. /*---- NAVIGATION ----*/
  269.  
  270.  
  271. #nav {
  272.         width:234px;
  273.         position: absolute;
  274.         text-align: center;
  275.         margin-top:10px;
  276.         background-color:transparent; }
  277.  
  278. #nav a {
  279.         background-color: #FFFFFF;
  280.         height:5px;
  281.         width:5px;
  282.         border-radius: 1px;
  283.         margin:1px;
  284.         display:inline-block; }
  285.  
  286. #nav a:hover { background-color:#FF0000; }
  287.  
  288.  
  289.  
  290.  
  291. /*---- CREDIT ----*/
  292.  
  293. .right {
  294.         background-color: transparent;
  295.         width:73px;
  296.         float:right;
  297.         height:100%;
  298.         text-align: center;
  299.         font-family: Signika;
  300.         letter-spacing: 1px;
  301.         font-size: 8px;
  302.         text-transform: uppercase;
  303.         padding-top:384px;
  304.          }
  305.        
  306. .right a { border-radius:1px; color:#FFFFFF; padding:2px; }
  307. .right a:hover {
  308.         background-color: #FFFFFF;
  309.         color:#000000;
  310.         padding:2px;
  311.         border-radius:1px;
  312. }
  313.  
  314.  
  315.  
  316. /*---- HOVER TITLE ----*/
  317.  
  318. #s-m-t-tooltip{
  319. font-size:7px;
  320. text-align:center;
  321. letter-spacing: 1px;
  322. width:auto;
  323. padding:0px 4px;
  324. text-transform: uppercase;
  325. margin-top:10px;
  326. margin-left:10px;
  327. background-color: #000000;
  328. color:#FFFFFF;
  329. position:absolute;
  330. z-index:1000;
  331. display:none;
  332. }
  333.  
  334. </style>
  335. <body>
  336.  
  337.    
  338.  
  339. <div class="wrap">
  340.  
  341. <div class="sideimg">
  342.  
  343.  
  344. <!--- NAVIGATION (SELECTS WHICH TAB TO DISPLAY) --->
  345. <!--- Replace "title here" with a word describing your tab/section (for example, "bio") --->
  346. <!--- Do not replace # with anything --->
  347.  
  348. <div id="nav">
  349. <a class="one" href="#" title="title here"></a>
  350. <a class="two" href="#" title="title here"></a>
  351. <a class="three" href="#" title="title here"></a>
  352. <a class="four" href="#" title="title here"></a>
  353. </div>
  354.  
  355.  
  356. <!--- THE IMAGE --->
  357. <!--- Replace "URL HERE" with the URL to your image --->
  358. <!--- Size must be 235x410px  --->
  359.  
  360. <img width="235" src="URL HERE"></div>
  361.  
  362.  
  363.  
  364.  
  365.  
  366.  
  367. <div class="con">
  368.  
  369.  
  370.  
  371.  
  372.  
  373. <!--- QUOTE --->
  374. <!--- Replace "Quote" with your text/quote --->
  375. <div class="q">
  376. <div class="base">"Quote"</div>
  377. </div>
  378. <!--- END QUOTE --->
  379.  
  380.  
  381.  
  382.  
  383.  
  384. <!--- TAB 1 --->
  385. <div class="a">
  386.  
  387.  
  388. <!--- THE SURVEY / INFO --->
  389.  
  390. <div class="log">
  391. <!--- LEFT COLUMN --->
  392. <div class="me">Name</div> <div class="me">Occupation</div>
  393. <div class="me">Age</div> <div class="me">Face Claim</div>
  394. <!--- LEFT COLUMN ENDS --->
  395. </div>
  396.  
  397. <div class="log">
  398. <!--- RIGHT COLUMN --->
  399. <div class="this">Your name</div> <div class="this">Your occupation</div>
  400. <div class="this">Your age</div> <div class="this">Your face claim</div>
  401. <!--- RIGHT COLUMN --->
  402. </div>
  403.  
  404. <!--- THE SURVEY / INFO ENDS --->
  405.  
  406.  
  407.  
  408. <p> YOUR BIOGRAPHY / PARAGRAPH GOES HERE </p>
  409.  
  410. </div>
  411. <!--- TAB 1 ENDS --->
  412.  
  413.  
  414.  
  415.  
  416.  
  417. <!--- TAB 2 --->
  418. <div class="b">
  419.        
  420.         <div id="links">
  421.        
  422.         <!--- Each row of links should end with a <br> --->
  423.        
  424.         <!--- Replace "URL HERE" with your URL (for example, "http://blog.tumblr.com") --->
  425.        
  426.         <!--- Replace "Link" with the name of your link (for example, "Tags") --->
  427.        
  428.          <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
  429.          <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
  430.          <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
  431.          
  432.         </div>
  433.        
  434. </div>
  435. <!--- TAB 2 ENDS --->
  436.  
  437.  
  438.  
  439.  
  440. <!--- TAB 3 --->
  441. <div class="c">
  442.        
  443.         <div class="para"><a href="URL HERE">Para Title</a></div>
  444.         <blockquote>SUMMARY OF PARA/INFO</blockquote>
  445.        
  446.         <div class="para"><a href="URL HERE">Para Title</a></div>
  447.         <blockquote>SUMMARY OF PARA/INFO</blockquote>
  448.        
  449.         <div class="para"><a href="URL HERE">Para Title</a></div>
  450.         <blockquote>SUMMARY OF PARA/INFO</blockquote>
  451.        
  452. </div>
  453. <!--- TAB 3 ENDS --->
  454.  
  455.  
  456.  
  457.  
  458. <!--- TAB 4 --->
  459. <div class="d">
  460.        
  461.        
  462.         <!--- <h1>TEXT</h1> gives you a heading (example below) --->
  463.         <h1>Heading</h1>
  464.        
  465.        
  466.         <!--- <p>TEXT</p> can be added around your text or not! --->
  467.        
  468.         <p>Text goes here</p>
  469.    
  470.     <!--- Below is how you add a link --->
  471.     <a href="URL HERE">Link</a>
  472.        
  473. </div>
  474. <!--- TAB 4 ENDS--->
  475.  
  476.  
  477.  
  478.  
  479. </div>
  480.  
  481.  
  482.  
  483.  
  484. <!--- CREDIT - DON'T REMOVE --->
  485. <div class="right">
  486. <a href="http://hmthemes.tumblr.com/">hmthemes</a>
  487. </div>
  488. <!--- CREDIT ENDS --->
  489.  
  490.  
  491. </div>
  492.  
  493.  
  494.  
  495. <!--- Link back to your blog/other --->
  496. <div style="text-align:center;"><a href="URL HERE">back to blog</a></div>
  497.  
  498.  
  499. </body>
  500. </html>