API tools faq
paste
Advertisement
hellmouths

blog page #3: character

hellmouths
May 31st, 2013
9,648
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.79 KB | None | 0 0
raw download clone embed print report
  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>
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!