API tools faq
paste
Advertisement
b0rn-to-be-wild

Page: THE LETTER (vol.2)

b0rn-to-be-wild
Oct 18th, 2013
1,251
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. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. ©borntobewildcodes.tumblr.com | THE LETTER (vol.2)
  6.  
  7. + Do not redistribute this page or remove the credits.
  8. + Edit as long as you keep the credits intact
  9. + Contact us if you have any questions or concerns.
  10. + If you want a custom theme you can commission us.
  11. + Thanks for using our page, we hope that you enjoy it.
  12.  
  13.  
  14. Other credits:
  15.  
  16. - Background image: unknown
  17. - Container: spidergypsy on Deviantart
  18.  
  19. - Google fonts
  20. - Font Awesome icons
  21. - Jquery
  22. - Style my tooltips by Malihu
  23.  
  24. ---->
  25.  
  26. <html>
  27. <head>
  28.  
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32.  
  33. </style>
  34. <style type="text/css">
  35.  
  36. /* ---------------------------- GENERAL ----------------------------- */
  37.  
  38. /* -------- BASICS ------- */
  39.  
  40.  
  41. body {
  42. margin: 0;
  43. padding: 0;
  44. width: 100%;
  45. height: 100%;
  46. font-family: Helvetica;
  47. font-size: 12px;
  48. line-height: 17px;
  49. color: #222;
  50. background-color: #fff;
  51. background-image: url('https://66.media.tumblr.com/9c0dbeca521aeae969e5f4f91d21e702/tumblr_pshscjyjbZ1w4d880o2_r1_1280.jpg');
  52. background-attachment: fixed;
  53. background-repeat: repeat;
  54. }
  55.  
  56. /* Fix */
  57.  
  58. iframe, img, embed, object, video {
  59. max-width: 100%;
  60. border: none;
  61. }
  62.  
  63. input, textarea, select, a { outline: none; }
  64.  
  65. /* Paragraph */
  66.  
  67. p {margin-top: 5px; margin-bottom: 5px;}
  68.  
  69. <--ses-->
  70. small{font-size: 90%;}
  71.  
  72. big{font-size: 110%;}
  73.  
  74. /* Title */
  75.  
  76. h1{
  77. margin: 0;
  78. margin-top: 10px;
  79. margin-bottom: 10px;
  80. color:#845F4F;
  81. font-family:'Montez';
  82. font-size: 20px;
  83. line-height:25px;
  84. font-weight: normal;
  85. }
  86.  
  87. /* Captions */
  88.  
  89. h2 {
  90. font-family: Helvetica;
  91. font-size: 12px;
  92. line-height: 17px;
  93. color: #222;
  94. background-color: #fff;
  95. font-weight: normal;
  96. }
  97.  
  98. /* Links */
  99.  
  100. a {
  101. color: #A08A61;
  102. text-decoration:none;
  103. }
  104.  
  105. a:hover {
  106. color: #222;
  107. -webkit-transition: all .3s;
  108. -moz-transition: all .3s;
  109. -o-transition: all .3s;
  110. -ms-transition: all .3s;
  111. transition: all .3s;
  112. }
  113.  
  114. ul, ol, li {
  115. margin: 5px 10px;
  116. padding: 0px;
  117. }
  118.  
  119. /* Bold and italic */
  120.  
  121. b, strong {
  122. color: #000;
  123. }
  124.  
  125. i, em {
  126. color: #81765A;
  127. }
  128.  
  129. ul {
  130. margin: 0px;
  131. padding: 0px;
  132. }
  133.  
  134. a img {
  135. border: 0px;
  136. }
  137.  
  138. small {
  139. font-size: 90%;
  140. }
  141.  
  142. big {
  143. font-size: 110%;
  144. }
  145.  
  146. /* Selection */
  147.  
  148. ::-moz-selection {
  149. background: #81765A;
  150. color: #fff;
  151. }
  152.  
  153. ::selection {
  154. background: #81765A;
  155. color: #fff;
  156. }
  157.  
  158. /* Webkit scrollbar */
  159.  
  160. ::-webkit-scrollbar {
  161. width: 9px;
  162. height: 0px;
  163. }
  164.  
  165. ::-webkit-scrollbar-button:start:decrement,
  166. ::-webkit-scrollbar-button:end:increment {
  167. height: 0px;
  168. display: block;
  169. background-color: #E3DDC3;
  170. }
  171.  
  172. ::-webkit-scrollbar-track-piece {
  173. background-color: #E3DDC3;
  174. }
  175.  
  176. ::-webkit-scrollbar-thumb:vertical {
  177. height: 0px;
  178. background-color: #81765A;
  179. border: 4px solid #E3DDC3;
  180. }
  181.  
  182. /* Tumblr controls */
  183.  
  184. .iframe-controls--desktop {
  185. right: 35px!important;
  186. top: 5px!important;
  187. margin-top:auto;
  188. opacity: .9!important;
  189. position:fixed!important;
  190. white-space:nowrap!important;
  191. filter: invert(1);
  192. -webkit-filter: invert(1);
  193. -moz-filter: invert(1);
  194. -o-filter: invert(1);
  195. -ms-filter: invert(1);
  196. z-index: 10000!important;
  197. }
  198.  
  199. /* Tooltips */
  200.  
  201. #s-m-t-tooltip {
  202. max-width: 250px;
  203. margin: 10px;
  204. padding: 5px;
  205. color::#A08A61;
  206. font-size: 12px;
  207. line-height: 15px;
  208. background: #E4DEC8;
  209. -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  210. -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  211. box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  212. z-index: 10000;
  213. }
  214.  
  215. /* -- CONtAINER --*/
  216.  
  217. #container {
  218. position:absolute;
  219. top:50%;
  220. left:50%;
  221. width:500px;
  222. height:550px;
  223. background:url('https://66.media.tumblr.com/4dabf9ef6363a58f0d21912e7b7c53aa/tumblr_pshscjyjbZ1w4d880o1_540.jpg');
  224. -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  225. -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  226. box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  227. -webkit-transform: translateX(-50%) translateY(-50%);
  228. -moz-transform: translateX(-50%) translateY(-50%);
  229. -ms-transform: translateX(-50%) translateY(-50%);
  230. transform: translateX(-50%) translateY(-50%);;
  231. }
  232.  
  233. /* title */
  234.  
  235. #title {
  236. margin-top:50px;
  237. margin-left:0px;
  238. width:490px;
  239. padding:5px;
  240. font-family:'Montez';
  241. font-size:35px;
  242. color:#845F4F;
  243. text-align:center;
  244. }
  245.  
  246. /* Description */
  247.  
  248. #description{
  249. margin-top:45px;
  250. margin-left:auto;
  251. margin-right:auto;
  252. width:450px;
  253. max-height:340px;
  254. padding:10px;
  255. color:#4D302E;
  256. font-family:'Montez';
  257. font-size:22px;
  258. line-height:26px;
  259. text-align:justify;
  260. overflow-y:auto;
  261. }
  262.  
  263. /* Links */
  264.  
  265. #links {
  266. position:absolute;
  267. margin-left:15px;
  268. bottom:10px;
  269. height:40px;
  270. }
  271.  
  272. #links a {
  273. display:inline-block;
  274. padding:4px 8px;
  275. margin:5px;
  276. font-size:20px;
  277. color:#A08A61;
  278. font-family:'Montez';
  279. background:url('https://66.media.tumblr.com/4dabf9ef6363a58f0d21912e7b7c53aa/tumblr_pshscjyjbZ1w4d880o1_540.jpg');
  280. -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  281. -moz-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  282. box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
  283. }
  284.  
  285. #links a:hover {
  286. letter-spacing:2px;
  287. color:#222;
  288. -webkit-transition: all 0.4s ease-in-out;
  289. -moz-transition: all 0.4s ease-in-out;
  290. -o-transition: all 0.4s ease-in-out;
  291. -ms-transition: all 0.4s ease-in-out;
  292. transition: all 0.4s ease-in-out;
  293. }
  294.  
  295. /*-- CREDIT --*/
  296.  
  297. #credit {
  298. position:fixed;
  299. right: 10px;
  300. width:25px;
  301. height:25px;
  302. top: 5px;
  303. z-index: 100000;
  304. }
  305.  
  306. #credit img{
  307. border: 1px solid {color:Borders};
  308. }
  309.  
  310. #credit img:hover{
  311. border: 1px solid {color:Hover};
  312. }
  313.  
  314. /* --------------------------- Custom CSS -------------------------- */
  315.  
  316. {CustomCSS}
  317.  
  318. </style>
  319.  
  320. <!--Google fonts-->
  321.  
  322. <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Meddon|Poiret+One|Montez|Volttaire" rel="stylesheet">
  323.  
  324. <!-- Font awesome -->
  325.  
  326. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  327.  
  328. <!--Jquery-->
  329.  
  330. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  331. <script type="text/javascript" src="https://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  332.  
  333. <!-- Style my tooltips -->
  334.  
  335. <script src="jquery.style-my-tooltips.js"></script>
  336. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  337.  
  338. <script>
  339. (function($){
  340. $(document).ready(function(){
  341. $("a[title]").style_my_tooltips({
  342. tip_follows_cursor:true,
  343. tip_delay_time: 90,
  344. tip_fade_speed: 600,
  345. attribute:"title"
  346. });
  347. });
  348. })(jQuery);
  349. </script>
  350.  
  351. <meta charset="utf-8">
  352. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  353. {block:Description}
  354. <meta name="description" content="{MetaDescription}" />
  355. {/block:Description}
  356.  
  357. </head>
  358.  
  359. <body>
  360.  
  361. <div id="container">
  362.  
  363. <div id="title"> Title </div>
  364.  
  365. <div id="description">
  366.  
  367. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <u>laboris</u> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate <i>velit</i> esse cillum dolore eu fugiat nulla pariatur.<br><br>
  368.  
  369. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem <b>aperiam</b>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi.
  370.  
  371. </div>
  372. <!--End description-->
  373.  
  374. <div id="links">
  375. <a href="/">Back</a>
  376. <a href="/ask">Ask</a>
  377. <a href="https://www.tumblr.com/dashboard/">Dash</a>
  378. </div>
  379. <!--End links-->
  380.  
  381. </div>
  382. <!--End container-->
  383.  
  384. <!-- CREDIT (do not remove) -->
  385.  
  386. <div id="credit"><a href="https://borntobewildcodes.tumblr.com" title="page THE LETTER by @borntobewildcodes"><img src="https://i57.tinypic.com/301g6eg.jpg"></a></div>
  387.  
  388. </body>
  389. </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!