API tools faq
paste
Advertisement
acatalepsy

[000] DRIFTER

acatalepsy
Jan 18th, 2014
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.83 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>and i’ll keep drifting until you grab me.</title>
  4. <link type="image/png" rel="icon" href="http://i.imgur.com/E3ow1zs.png">
  5. <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald">
  6.  
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://sumeoseo.webs.com/scripts/tooltips.js"></script>
  9. <script type="text/javascript">
  10. (function($){
  11. $(document).ready(function(){
  12. $("[title],a[title],img[title]").style_my_tooltips({
  13.     tip_follows_cursor:true,
  14.     tip_delay_time:100,
  15.     tip_fade_speed:280,
  16.     attribute:"title"
  17. });
  18. });
  19. })(jQuery);
  20. </script>
  21.  
  22. <style>
  23. *{cursor: url(http://media.tumblr.com/649c000edb2f0b30a6b3f462d580ffbc/tumblr_inline_mmsrqqFXgB1qz4rgp.png), progress;}
  24.  
  25. #s-m-t-tooltip {
  26. position: absolute;
  27. max-width: 250px;
  28. color: #7C7C7C;
  29. font: 11px 'Arial', sans-serif;
  30. font-size: 11px;
  31. font-family: 'Arial', sans-serif;
  32. line-height: 10px;
  33. letter-spacing: 0px;
  34. margin-top: 10px;
  35. margin-bottom: 15px;
  36. padding: 3px;
  37. padding-right: 3px;
  38. padding-left: 3px;
  39. background-color: #FFFFFF;
  40. z-index: 999;}
  41.  
  42. #bottom{
  43. position: fixed;
  44. bottom: 0px;
  45. right: 0px;
  46. display: none;
  47. transition: all 0.5s ease-in-out;
  48. -webkit-transition: all 0.5s ease-in-out;
  49. -moz-transition: all 0.5s ease-in-out;
  50. -o-transition: all 0.5s ease-in-out;}
  51.  
  52. body{
  53. background-color: #FFFFFF;
  54. background-position: center;
  55. background-repeat: repeat;
  56. scrollbar-face-color: #FFFFFF;
  57. scrollbar-arrow-color: #FFFFFF;
  58. scrollbar-track-color: #FFFFFF;
  59. scrollbar-shadow-color: #FFFFFF;
  60. scrollbar-3dlight-color: #FFFFFF;
  61. scrollbar-highlight-color: #FFFFFF;
  62. scrollbar-darkshadow-color: #FFFFFF;}
  63.  
  64. ::-webkit-scrollbar-thumb:vertical {
  65. height: 7px;
  66. background-color: #FFFFFF;}
  67.  
  68. ::-webkit-scrollbar-thumb:horizontal {
  69. height: 7px!important;
  70. background-color: #FFFFFF;
  71. border-right: 2px solid #F0F0F0;
  72. border-left: 2px solid #F0F0F0;}
  73.  
  74. ::-webkit-scrollbar {
  75. width: 8px;
  76. height: 7px;
  77. background-color: #FFFFFF;}
  78.  
  79. b{color: #3E3D4A;}
  80. strong{color: #191923;}
  81. i{color: #595D61;}
  82. em{color: #4F5156;}
  83.  
  84. u{
  85. color: #7C7C7C;
  86. text-decoration: none;
  87. padding-bottom: 0px;
  88. border-bottom: 0px solid #242930;}
  89.  
  90. br{line-height: 5px;}
  91.  
  92. a, a:active, a:link, a:visited{
  93. color: #969692;
  94. font-weight: bold;
  95. text-decoration: none;}
  96.  
  97. a:hover{
  98. color: #ADB2AB;
  99. text-decoration: none;}
  100.  
  101. #navbar-iframe {display:none!important;}
  102.  
  103. #container{
  104. position: relative;
  105. width: 500px;
  106. margin-right: auto;
  107. margin-left: auto;
  108. padding-top: 15px;
  109. padding-bottom: 15px;}
  110.  
  111. #image{
  112. position: relative;
  113. width: 500px;
  114. height: 150px;
  115. margin-right: auto;
  116. margin-left: auto;
  117. background-color: #0000000;
  118. background-image: url('http://i.imgur.com/qph3Bul.png');
  119. background-position: center;
  120. background-repeat: no-repeat;}
  121.  
  122. #holder{
  123. padding: 5px;
  124. padding-top: 9px;
  125. opacity: 0;
  126. transition: all 1s ease-in-out;
  127. -webkit-transition: all 1s ease-in-out;
  128. -moz-transition: all 1s ease-in-out;}
  129.  
  130. #holder:hover{
  131. opacity: 1;
  132. transition: all 1s ease-in-out;
  133. -webkit-transition: all 1s ease-in-out;
  134. -moz-transition: all 1s ease-in-out;}
  135.  
  136. .box-holder{
  137. float: left;
  138. margin-left: 5px;
  139. display: inline-block;}
  140.  
  141. .boxed{
  142. width: 137px;
  143. height: 110px;
  144. padding: 10px;
  145. background-color: #FAFAFA;}
  146.  
  147. .title-one{
  148. color: #AAAAAA;
  149. font: 10px 'Calibri', sans-serif;
  150. font-size: 10px;
  151. font-family: 'Calibri', sans-serif;
  152. font-weight: bold;
  153. text-align: center;
  154. letter-spacing : 5px;
  155. text-transform: uppercase;
  156. margin-bottom: 3px;
  157. padding: 5px;
  158. display: block;
  159. border-bottom: 1px solid #F5F5F5;}
  160.  
  161. .title-one:first-letter{
  162. color: #7C7C7C;
  163. font-style: italic;}
  164.  
  165. .title-two{
  166. color: #7C7C7C;
  167. font: 10px 'Calibri', sans-serif;
  168. font-size: 10px;
  169. font-family: 'Calibri', sans-serif;
  170. font-weight: bold;
  171. text-align: center;
  172. letter-spacing : 5px;
  173. text-transform: uppercase;
  174. margin-bottom: 3px;
  175. padding: 5px;
  176. display: block;
  177. border-bottom: 1px solid #F5F5F5;}
  178.  
  179. .title-two:first-letter{
  180. color: #CFCFCF;
  181. font-style: italic;}
  182.  
  183. .info{
  184. overflow: auto;
  185. max-height: 86px;
  186. color: #464646;
  187. font: 11px 'Arial', sans-serif;
  188. font-size: 11px;
  189. font-family: 'Arial', sans-serif;
  190. line-height: 12px;}
  191.  
  192. a.friends, a.friends:active, a.friends:link, a.friends:visited{
  193. color: #464646;
  194. font: 8px 'Calibri', sans-serif;
  195. font-size: 8px;
  196. font-family: 'Calibri', sans-serif;
  197. line-height: 10px;
  198. text-align: center;
  199. font-weight: bold;
  200. letter-spacing: 1px;
  201. text-transform: uppercase;
  202. padding: 3px;
  203. display: block;
  204. transition: all 0.5ss ease-in-out;
  205. -webkit-transition: all 0.5ss ease-in-out;
  206. -moz-transition: all 0.5ss ease-in-out;}
  207.  
  208. a.friends:hover{
  209. color: #AAAAAA;
  210. transition: all 0.5s ease-in-out;
  211. -webkit-transition: all 0.5ss ease-in-out;
  212. -moz-transition: all 0.5ss ease-in-out;}
  213.  
  214. #navigate{
  215. position: relative;
  216. width: 497px;
  217. height: 20px;
  218. margin-top: 5px;
  219. margin-bottom: 5px;
  220. padding: 8px;
  221. padding-top: 2px;
  222. padding-right: 0px;
  223. padding-left: 3px;
  224. background-color: #F5F5F5;
  225. clear: both;}
  226.  
  227. #navigate a, #navigate a:active, #navigate a:link, #navigate a:visited{
  228. width: 46px;
  229. color: #ADB2AB;
  230. font: 8px 'Consolas', monospace;
  231. font-size: 8px;
  232. font-family: 'Consolas', monospace;
  233. line-height: 8px;
  234. text-align: center;
  235. font-weight: bold;
  236. letter-spacing: 1px;
  237. text-transform: uppercase;
  238. margin-left: 5px;
  239. padding: 5px;
  240. padding-top: 6px;
  241. display: inline-block;
  242. transition: all 0.7s ease-in-out;
  243. -webkit-transition: all 0.7s ease-in-out;
  244. -moz-transition: all 0.7s ease-in-out;}
  245.  
  246. #navigate a:hover{
  247. color: #3E3D4A;
  248. transition: all 0.7s ease-in-out;
  249. -webkit-transition: all 0.7s ease-in-out;
  250. -moz-transition: all 0.7s ease-in-out;}
  251.  
  252. #content{
  253. position: relative;
  254. width: 500px;
  255. margin-top: 20px;
  256. margin-right: auto;
  257. margin-left: auto;}
  258.  
  259. .post-holder{margin-bottom: 10px;}
  260.  
  261. .title{
  262. color: #747573;
  263. font: 24px 'Georgia', sans-serif;
  264. font-size: 24px;
  265. font-family: 'Georgia', sans-serif;
  266. line-height: 20px;
  267. text-align: center;
  268. letter-spacing: -3px;
  269. text-transform: uppercase;
  270. margin-bottom: 3px;}
  271.  
  272. .title:first-letter{
  273. color: #000000;
  274. font-style: italic;}
  275.  
  276. .post-info{
  277. height: 10px;
  278. color: #464646;
  279. font: 8px 'Consolas', monospace;
  280. font-size: 8px;
  281. font-family: 'Consolas', monospace;
  282. line-height: 10px;
  283. text-align: right;
  284. font-weight: bold;
  285. letter-spacing: 1px;
  286. text-transform: uppercase;
  287. margin-bottom: 5px;
  288. padding: 5px;
  289. padding-top: 3px;
  290. padding-bottom: 3px;
  291. background-color: #F5F5F5}
  292.  
  293. .post-info b{color: #848E84;}
  294. .post-info strong{color: #736D6D;}
  295.  
  296. .post-info a, .post-info a:active, .post-info a:link, .post-info a:visited{
  297. color: #464646;
  298. transition: all 0.5s ease-in-out;
  299. -webkit-transition: all 0.5s ease-in-out;
  300. -moz-transition: all 0.5s ease-in-out;}
  301.  
  302. .post-info a:hover{
  303. color: #CB0303;
  304. transition: all 0.5s ease-in-out;
  305. -webkit-transition: all 0.5s ease-in-out;
  306. -moz-transition: all 0.5s ease-in-out;}
  307.  
  308. .text{
  309. color: #464646;
  310. font: 11px 'Arial', sans-serif;
  311. font-size: 11px;
  312. font-family: 'Arial', sans-serif;
  313. line-height: 18px;}
  314.  
  315. blockquote, blockquote.tr_bq{
  316. position: relative;
  317. width: 70%;
  318. color: #000000;
  319. font: 10px 'Georgia', serif;
  320. font-size: 10px;
  321. font-family: 'Georgia', serif;
  322. line-height: 12px;
  323. font-weight: bold;
  324. font-style: italic;
  325. margin-top: 0px;
  326. margin-right: auto;
  327. margin-bottom: 0px;
  328. margin-left: auto;
  329. padding: 10px;
  330. background-color: rgba(231, 231, 231, .5);}
  331.  
  332. p.blogger-labels{
  333. text-align: right;
  334. margin-top: 3px;}
  335.  
  336. p.blogger-labels a, p.blogger-labels a:active, p.blogger-labels a:link, p.blogger-labels a:visited{
  337. color: #191923;
  338. transition: all 0.3s ease-in-out;
  339. -webkit-transition: all 0.3s ease-in-out;
  340. -moz-transition: all 0.3s ease-in-out;}
  341.  
  342. p.blogger-labels a:hover{
  343. color: #7C7C7C;
  344. transition: all 0.3s ease-in-out;
  345. -webkit-transition: all 0.3s ease-in-out;
  346. -moz-transition: all 0.3s ease-in-out;}
  347.  
  348. #footer{
  349. position: relative;
  350. width: 500px;
  351. margin-right: auto;
  352. margin-left: auto;
  353. padding: 5px;
  354. background-color: #F5F5F5;}
  355.  
  356. .foot-text{
  357. position: relative;
  358. width: 350px;
  359. color: #AAAAAA;
  360. font: 11px 'Arial', sans-serif;
  361. font-size: 11px;
  362. font-family: 'Arial', sans-serif;
  363. line-height: 14px;
  364. text-align: center;
  365. margin-right: auto;
  366. margin-left: auto;}
  367.  
  368. /* Do not edit this snippet of code */
  369. a.acatalepsy, a.acatalepsy:active, a.acatalepsy:link, a.acatalepsy:visited{
  370. color: #000000;
  371. font-weight: bold;
  372. transition: all 0.3s ease-in-out;
  373. -webkit-transition: all 0.3s ease-in-out;
  374. -moz-transition: all 0.3s ease-in-out;}
  375.  
  376. a.acatalepsy:hover{
  377. color: #CB0303;
  378. transition: all 0.3s ease-in-out;
  379. -webkit-transition: all 0.3s ease-in-out;
  380. -moz-transition: all 0.3s ease-in-out;}
  381. </style>
  382. </head>
  383.  
  384.  
  385. <body>
  386. <div id="container">
  387. <div id="image">
  388. <div id="holder">
  389.  
  390. <div class="box-holder">
  391. <div class="boxed">
  392. <div class="title-one">welcome</div>
  393.  
  394. <div class="info">
  395. You can go ahead fill in this section with a welcome text or maybe a small profile. Maybe you can turn this into a headline section. Whatever you want to do with it you can. I would just like to remind you that this section does start to scroll after 86px has been filled with text or whatever you put in here. So go wild!
  396. </div>
  397. </div>
  398. </div>
  399.  
  400.  
  401. <div class="box-holder">
  402. <div class="boxed">
  403. <div class="title-two">chatbox</div>
  404.  
  405. <div class="info">
  406. You can put a chatboard here or something similar. If you do put a chatboard here, I would recommend greatly that the size is exactly 134 x 85px. That prevents the stretching and makes things remain even.
  407. </div>
  408. </div>
  409. </div>
  410.  
  411.  
  412. <div class="box-holder">
  413. <div class="boxed">
  414. <div class="title-one">friends</div>
  415.  
  416. <div class="info">
  417. <table width="130" border="0" cellpadding="0" cellspacing="0">
  418. <tr><td align="center" cellpadding="0" cellspacing="0" valign="top" width="65">
  419. <a class="friends" href="putalinkhere">friend</a>
  420. <a class="friends" href="putalinkhere">friend</a>
  421. <a class="friends" href="putalinkhere">friend</a>
  422. <a class="friends" href="putalinkhere">friend</a>
  423. <a class="friends" href="putalinkhere">friend</a>
  424. </td>
  425.  
  426. <td align="center" cellpadding="0" cellspacing="0" valign="top" width="65">
  427. <a class="friends" href="putalinkhere">friend</a>
  428. <a class="friends" href="putalinkhere">friend</a>
  429. <a class="friends" href="putalinkhere">friend</a>
  430. <a class="friends" href="putalinkhere">friend</a>
  431. <a class="friends" href="putalinkhere">friend</a>
  432. </td></tr>
  433. </table>
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. </div>
  439.  
  440.  
  441.  
  442.  
  443. <div id="navigate">
  444. <a href="/" title="refresh the page.">refresh</a><a href="" title="follow me!">+ follow</a><a href="PUTALINK" title="givethislinkatitle">link i</a><a href="PUTALINK" title="givethislinkatitle">link ii</a><a href="PUTALINK" title="givethislinkatitle">link iii</a><a href="http://blogskins.com/me/acatalepsy" title="layout credit.">credits</a>
  445. <OlderPosts><a href="<$OlderPosts$>" title="previous.">older</a></OlderPosts><NewerPosts><a href="<$NewerPosts$>" title="next.">newer</a></NewerPosts>
  446. </div>
  447.  
  448.  
  449.  
  450. <div id="content">
  451.  
  452. <Blogger>
  453. <div class="post-holder">
  454. <BlogItemTitle><div class="title"><$BlogItemTitle$></div></BlogItemTitle>
  455. <div class="post-info">this was posted on <b><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></b> by <strong><$BlogItemAuthor$></strong>. | <BlogItemCommentsEnabled><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>" title="<$BlogItemCommentCount$> comments">&diam;&#x2764;</a></div>
  456.  
  457.  
  458. <BlogItemBody>
  459. <div class="text">
  460. <$BlogItemBody$>
  461. </div>
  462. </BlogItemBody>
  463. </div>
  464.  
  465. </Blogger>
  466. </div>
  467.  
  468.  
  469.  
  470. <div id="footer">
  471. <div class="foot-text">
  472. &copy; [years of activity], [blogname]. All rights reserved.
  473. <!-- Do not edit nor remove this section. -->
  474. <fisheye style="height: 1px; display: block;"></fisheye>
  475. This layout was designed and coded by 『 &diams; &mdash; <a href="http://blogskins.com/me/acatalepsy" title="blogskins.">acatalep</a>.<a href="http://untraversable.tk" title="blogspot.">sy</a>.
  476. </div>
  477. </div>
  478.  
  479. </div>
  480. </body>
  481. </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!