API tools faq
paste
astraeacodes

piece of mind about only

astraeacodes
Nov 10th, 2017
661
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  
  3.  
  4. <!----------------✧ ☾ ☆ ☄ ⁛ THEMES BY ASTRAEAWRITES ⁛ ☄ ☾ ✧
  5. DO NOT STEAL OR CLAIM AS YOURS!
  6. report problems or questions @ astraeawrites.tumblr.com----------->
  7.  
  8. <!----------------------✧ ☾ ☆ ☄ ⁛ CREDITS !! ⁛ ☄ ☾ ✧
  9. THE TABS SCRIPT IS FROM @nbthm.tk & I CALIM NO CREDIT FOR IT---------->
  10.  
  11. <html>
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15.  
  16. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  17.  
  18. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  19.  
  20. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23.  
  24. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:90,tip_fade_speed:600,attribute:"title"});});})(jQuery);</script>
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Inconsolata|Lato|Montserrat|Muli|Open+Sans|Quicksand|Raleway|Roboto|Source+Sans+Pro" rel="stylesheet">
  27.  
  28. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  29.  
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34.  
  35.  
  36.  
  37. /*---------------BODY & BASICS---------------*/
  38.  
  39. #s-m-t-tooltip {
  40. max-width:400px;
  41. background-color:#ececec;
  42. font-family:"Roboto", sans-serif;
  43. font-size:8.5px;
  44. color:#000;
  45. letter-spacing:2px;
  46. text-transform:lowercase;
  47. padding:6.5px;
  48. line-height:100%;
  49. margin:20px 0px 0px 20px;
  50. z-index:99999999999999999999999999999999;
  51. border-radius:1px;
  52. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb:vertical {
  56. display:none;
  57. }
  58.  
  59. ::-webkit-scrollbar-thumb:horizontal {
  60. display:none;
  61. }
  62.  
  63. ::-webkit-scrollbar {
  64. display:none;
  65. }
  66.  
  67. ::selection {
  68. background-color:#bbb;
  69. color: #fff;
  70. }
  71.  
  72.  
  73. body{
  74. background-color:#f6f6f6;
  75. font-size:10px;
  76. font-family:"calibri";
  77. color:#333;
  78. }
  79.  
  80. a{
  81. text-decoration:none;
  82. color:#333;
  83. -webkit-transition: all 0.4s ease-in-out;
  84. -moz-transition: all 0.4s ease-in-out;
  85. -o-transition: all 0.4s ease-in-out;
  86. -ms-transition: all 0.4s ease-in-out;
  87. transition: all 0.4s ease-in-out;
  88. }
  89.  
  90. a:hover{
  91. -webkit-transition: all 0.4s ease-in-out;
  92. -moz-transition: all 0.4s ease-in-out;
  93. -o-transition: all 0.4s ease-in-out;
  94. -ms-transition: all 0.4s ease-in-out;
  95. transition: all 0.4s ease-in-out;
  96. text-shadow:0px 0px 0.5px #000;
  97. color:#464646;
  98. }
  99.  
  100.  
  101.  
  102.  
  103.  
  104. /*---------------BOX & STRUCTURE---------------*/
  105.  
  106. #box{
  107. width:620px;
  108. height:450px;
  109. background-color:#fff;
  110. left:50%;
  111. margin-left:-325px;
  112. top:50%;
  113. margin-top:-225px;
  114. position:fixed;
  115. border-radius:2.5px;
  116. border:1px solid #eee;
  117. overflow:auto;
  118. }
  119.  
  120. #box2{
  121. width:459px!important;
  122. height:450px;
  123. left:50%;
  124. margin-left:-163.5px;
  125. top:50%;
  126. margin-top:-224.5px;
  127. position:fixed;
  128. z-index:999999999;
  129. overflow:auto;
  130. }
  131.  
  132.  
  133.  
  134.  
  135. /*---------------SIDEBAR---------------*/
  136.  
  137. .sidebar{
  138. margin-top:-1px;
  139. margin-left:-1px;
  140. width:160px;
  141. height:450px;
  142. border-top-left-radius:2.5px;
  143. border-bottom-left-radius:2.5px;
  144. background-color:#fff;
  145. border:1px solid #eee;
  146. overflow-y:hidden;
  147. position:fixed;
  148. }
  149.  
  150. .sidebar img{
  151. width:110px;
  152. height:110px;
  153. max-width:110px;
  154. border-radius:3px;
  155. padding:10px;
  156. background-color:#eee;
  157. margin:20px 10px 0px 15px;
  158. overflow:hidden;
  159. }
  160.  
  161.  
  162.  
  163.  
  164.  
  165. /*---------------LINKS---------------*/
  166.  
  167. .sb-links{
  168. max-width:130px;
  169. margin-top:10px;
  170. margin-left:-25px;
  171. }
  172.  
  173. .sb-links i{
  174. margin-right:3px;
  175. }
  176.  
  177. .sb-links ul{
  178. list-style:none;
  179. margin-left:0px;
  180. padding-left:0px;
  181. }
  182.  
  183. .sb-links li{
  184. list-style:none;
  185. line-height:40px;
  186. margin-left:0px;
  187. padding-left:0px;
  188. border-bottom:1px solid #ddd;
  189. }
  190.  
  191. .sb-links a{
  192. font-size:9px;
  193. text-decoration:none;
  194. text-transform:uppercase;
  195. margin-left:5px;
  196. font-family:"roboto";
  197. color:#808080;
  198. letter-spacing:1px;
  199. -webkit-transition: all 0.4s ease-in-out;
  200. -moz-transition: all 0.4s ease-in-out;
  201. -o-transition: all 0.4s ease-in-out;
  202. -ms-transition: all 0.4s ease-in-out;
  203. transition: all 0.4s ease-in-out;
  204. }
  205.  
  206. .sb-links a:hover{
  207. padding-left:20px;
  208. -webkit-transition: all 0.4s ease-in-out;
  209. -moz-transition: all 0.4s ease-in-out;
  210. -o-transition: all 0.4s ease-in-out;
  211. -ms-transition: all 0.4s ease-in-out;
  212. transition: all 0.4s ease-in-out;
  213. color:#464646;
  214. }
  215.  
  216. .tab {
  217. display:none;
  218. }
  219.  
  220. .tab.active {
  221. display:block;
  222. }
  223.  
  224.  
  225.  
  226.  
  227. /*---------------TABS---------------*/
  228.  
  229. .tabcontent{
  230. max-width:460px!important;
  231. max-height:450px;
  232. }
  233.  
  234. .tabs {
  235. width:460px;
  236. margin-left:10px;
  237. display:inline-block;
  238. }
  239.  
  240.  
  241.  
  242.  
  243. /*---------------TAB 2 // ABOUT ME // CLICK---------------*/
  244.  
  245. .aboutmetab{
  246. margin:0px;
  247. padding:20px;
  248. font-size:10.5px;
  249. }
  250.  
  251. .aboutmetabtitle{
  252. margin:0px;
  253. font-size:15px;
  254. font-family:"open sans";
  255. text-transform:uppercase;
  256. letter-spacing:1px;
  257. border-bottom:2px solid #eee;
  258. margin-bottom:3px;
  259. padding:0px;
  260. font-weight:700;
  261. }
  262.  
  263. .aboutmetabstats{
  264. margin:10px;
  265. font-family:"roboto";
  266. text-align:center;
  267. width:25%;
  268. line-height:25px!important;
  269. font-size:9.5px;
  270. position:absolute;
  271. border-right:1px solid #eee;
  272. padding-right:5px;
  273. height:130px;
  274. }
  275.  
  276. .aboutmetabstats ul{
  277. list-style:none;
  278. margin:0px;
  279. padding:0px;
  280. }
  281.  
  282. .aboutmetabstats b{
  283. text-transform:uppercase;
  284. margin-right:5px;
  285. }
  286.  
  287. .aboutmetabheader{
  288. width:100%;
  289. height:145px;
  290. max-height:145px !important;
  291. overflow:hidden;
  292. padding-bottom:10px;
  293. border-bottom:1px solid #eee;
  294. }
  295.  
  296. .aboutmetabheader img{
  297. height:100%;
  298. width:100%;
  299. max-height:120px;
  300. max-width:120px;
  301. border-radius:50%;
  302. overflow:hidden;
  303. position:absolute;
  304. margin:9px;
  305. left:50%;
  306. margin-left:-55px;
  307. border:5px solid #ececec;
  308. }
  309.  
  310. .aboutmetabquote{
  311. width:25%;
  312. left:67%;
  313. position:absolute;
  314. margin:10px;
  315. border-left:1px solid #eee;
  316. padding-left:5px;
  317. text-align:center;
  318. line-height:25px!important;
  319. height:130px;
  320. font-size:9.5px;
  321. font-family:"roboto";
  322. }
  323.  
  324. .aboutmetabbody{
  325. margin:10px;
  326. padding-top:5px;
  327. line-height:16px;
  328. }
  329.  
  330. .aboutmetabbody p{
  331. text-indent:2em;
  332. padding-bottom:5px;
  333. }
  334.  
  335. .aboutmetabbody h1{
  336. margin:0px;
  337. font-size:13px;
  338. font-family:"open sans";
  339. text-transform:uppercase;
  340. letter-spacing:1px;
  341. padding:0px;
  342. text-align:center;
  343. font-weight:100;
  344. }
  345.  
  346. .aboutmetabbody pre{
  347. white-space: pre-wrap;
  348. white-space: -moz-pre-wrap;
  349. white-space: -pre-wrap;
  350. white-space: -o-pre-wrap;
  351. word-wrap: break-word;
  352. font-family:"inconsolata";
  353. }
  354.  
  355.  
  356.  
  357.  
  358. /*---------------CREDIT, DO NOT MOVE OR MAKE LESS VISIBLE!!---------------*/
  359. .credit a{
  360. font-size:11px;
  361. position:fixed;
  362. font-family:"lato";
  363. font-weight:900;
  364. color:black;
  365. text-align:right;
  366. right:25px;
  367. bottom:25px;
  368. }
  369.  
  370. .credit a:hover{
  371. color:white;
  372. }
  373.  
  374.  
  375. {CustomCSS}
  376. </style>
  377. </head>
  378. <body>
  379.  
  380.  
  381.  
  382. <!---------------STRUCTURE--------------->
  383.  
  384. <div id="box">
  385.  
  386. <div class="sidebar">
  387.  
  388. <img src="http://68.media.tumblr.com/b22674e7c522aaffcc4cd0eca2f16768/tumblr_inline_otoq9yBj4D1slfjc1_250.png">
  389.  
  390. <ul class="sb-links">
  391. <li><a href="url here"><i class="fa fa-home"></i> return</a></li>
  392. <li><a href="url here"><i class="fa fa-envelope"></i> message</a></li>
  393. <li><a href="url here"><i class="fa fa-user"></i> link</a></li>
  394. <li><a href="url here"><i class="fa fa-briefcase"></i> link</a></li>
  395. </ul>
  396. </div>
  397. </div>
  398.  
  399. </div>
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406. <!---------------TABS--------------->
  407.  
  408. <div id="box2">
  409. <div class="tabcontent">
  410.  
  411. <div class="aboutmetab">
  412. <div class="aboutmetabtitle">meet the blogger.</div>
  413. <div class="aboutmetabheader">
  414. <img src="http://68.media.tumblr.com/da929318d4d301084fdd2ba213684404/tumblr_inline_otoqaeI4QM1slfjc1_250.png">
  415. <div class="aboutmetabquote">
  416. <big>❝</big> I'm <b>sorry</b> you forgot the way I <i>arose</i> like the moon, night after night with the <u>burden</u> to forgive, eager to feed you <b><i>everything</b></i> . . . <big>❞</big>
  417. </div>
  418. <div class="aboutmetabstats">
  419. <ul>
  420. <li><b>alias:</b> astra</li>
  421. <li><b>age:</b> seventeen</li>
  422. <li><b>pronouns:</b> she/her</li>
  423. <li><b>location:</b> los angeles</li>
  424. <li><b>personality:</b> istp</li>
  425. </ul>
  426. </div>
  427. </div>
  428. <div class="aboutmetabbody">
  429.  
  430. <p>There's an automatic text-indent and paragraph spacing because i'm really into that, okay. But look, check it:</p>
  431.  
  432. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus purus risus, a feugiat justo iaculis eget. Cras lobortis feugiat cursus. Mauris laoreet, neque vitae venenatis efficitur, leo augue gravida risus, ut mollis risus tellus quis dui. Morbi pharetra fringilla placerat. Cras luctus dolor ac massa tincidunt, eu ullamcorper augue feugiat. In at dui aliquam, finibus tortor sed, accumsan mauris. Nullam interdum scelerisque risus. Nunc vehicula justo nec orci mattis faucibus. Quisque laoreet nulla magna, eu ullamcorper eros ultrices non. Sed eget purus dolor. Vivamus ut ullamcorper lectus, eu posuere ante.</p>
  433.  
  434. <h1>& here's a title</h1>
  435.  
  436. <pre>PRE TEXT YA BOI !! Donec bibendum euismod purus sit amet semper. Proin malesuada arcu tincidunt venenatis pulvinar. Morbi justo nulla, molestie molestie commodo sit amet, mollis sed nibh. Nam nisl nibh, condimentum in arcu sed, posuere elementum leo. Cras nec eros commodo, egestas lectus ac, dictum libero. </pre>
  437.  
  438. </div>
  439. </div>
  440.  
  441. </div>
  442. </div>
  443.  
  444.  
  445.  
  446.  
  447.  
  448.  
  449. <!---------------CREDIT // DO NOT REMOVE OR ALTER PLS !! --------------- -->
  450.  
  451. <div class="credit"><a href="http://astraeawrites.tumblr.com/">AW</a></div>
  452.  
  453.  
  454.  
  455.  
  456.  
  457. </body>
  458. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!