API tools faq
paste
Advertisement
acatalepsy

[000] THE CITY

acatalepsy
Mar 11th, 2014
142
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.48 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>iv; the city.</title>
  4. <link type="image/png" rel="icon" href="http://i.imgur.com/a6qNfP4.png">
  5. <link type="text/css" rel="stylesheet" href="debris.css" />
  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.  
  23. <style type="text/css">
  24. *{cursor: url(http://media.tumblr.com/649c000edb2f0b30a6b3f462d580ffbc/tumblr_inline_mmsrqqFXgB1qz4rgp.png), progress;}
  25.  
  26. #s-m-t-tooltip {
  27. position: absolute;
  28. max-width: 190px;
  29. color: #141414;
  30. font: 10px 'Calibri', sans-serif;
  31. font-size: 10px;
  32. font-family: 'Calibri', sans-serif;
  33. line-height: 10px;
  34. font-style: italic;
  35. font-weight: bold;
  36. text-transform: lowercase;
  37. margin-top: 10px;
  38. margin-bottom: 15px;
  39. padding: 3px;
  40. padding-right: 3px;
  41. padding-left: 3px;
  42. background-color: #EEEEDD;
  43. z-index: 999;}
  44.  
  45. body{
  46. background-color: #EEEEDD;
  47. background-position: center;
  48. background-repeat: repeat;
  49. scrollbar-face-color: #EEEEDD;
  50. scrollbar-arrow-color: #BBBBAA;
  51. scrollbar-track-color: #EEEEDD;
  52. scrollbar-shadow-color: #EEEEDD;
  53. scrollbar-3dlight-color: #EEEEDD;
  54. scrollbar-highlight-color: #EEEEDD;
  55. scrollbar-darkshadow-color: #EEEEDD;}
  56.  
  57. ::-webkit-scrollbar-thumb:vertical {
  58. height: 7px;
  59. background-color: #EEEEDD;}
  60.  
  61. ::-webkit-scrollbar-thumb:horizontal {
  62. height: 7px!important;
  63. background-color: #EEEEDD;
  64. border-right: 2px solid #BBBBAA;
  65. border-left: 2px solid #BBBBAA;}
  66.  
  67. ::-webkit-scrollbar {
  68. width: 10px;
  69. height: 15px;
  70. background-color: #EEEEDD;}
  71.  
  72. br{line-height: 3px;}
  73. b{color: #9B949F;}
  74. strong{color: #AAAA77;}
  75. i{color: #CCC7CF;}
  76. em{color: #444433;}
  77.  
  78. u{
  79. color: #464646;
  80. text-decoration: none;
  81. border-bottom: 1px dashed #413939;}
  82.  
  83. a, a:active, a:link, a:visited{
  84. color: #000000;
  85. text-decoration: none;
  86. transition: all 0.5s ease-in-out;
  87. -webkit-transition: all 0.5s ease-in-out;
  88. -moz-transition: all 0.5s ease-in-out;}
  89.  
  90. a:hover{
  91. color: #014F4F;
  92. transition: all 0.5s ease-in-out;
  93. -webkit-transition: all 0.5s ease-in-out;
  94. -moz-transition: all 0.5s ease-in-out;}
  95.  
  96. #navbar-iframe{display: none;}
  97.  
  98. #wrap{
  99. position: absolute;
  100. top: 0px;
  101. left: 0px;
  102. width: 100%;
  103. height: 100%;}
  104.  
  105. #container{
  106. position: relative;
  107. top: 50px;
  108. width: 680px;
  109. margin-right: auto;
  110. margin-bottom: 30px;
  111. margin-left: auto;}
  112.  
  113. #navigation{
  114. position: relative;
  115. width: 660px;
  116. height: 25px;
  117. margin-right: auto;
  118. margin-bottom: 15px;
  119. margin-left: auto;
  120. padding: 10px;
  121. background-color: #FAFAFA;
  122. z-index: 1;}
  123.  
  124. #navbar{
  125. position: relative;
  126. width: 650px;
  127. height: 15px;
  128. margin-right: auto;
  129. margin-left: auto;
  130. padding: 5px;
  131. background-color: #EEEEDD;}
  132.  
  133. #navbar a, #navbar a:active, #navbar a:link, #navbar a:visited{
  134. overflow: hidden;
  135. width: 58px;
  136. max-width: 58px;
  137. color: #464646;
  138. font: 8px 'Consolas', monospace;
  139. font-size: 8px;
  140. font-family: 'Consolas', monospace;
  141. line-height: 10px;
  142. text-align: center;
  143. font-weight: bold;
  144. letter-spacing: 2px;
  145. text-transform: uppercase;
  146. margin-right: 3px;
  147. padding: 5px;
  148. padding-top: 2px;
  149. display: inline-block;
  150. transition: all 0.7s ease-in-out;
  151. -webkit-transition: all 0.7s ease-in-out;
  152. -moz-transition: all 0.7s ease-in-out;
  153. -o-transition: all 0.7s ease-in-out;}
  154.  
  155. #navbar a:hover{
  156. color: #AAAA77;
  157. transition: all 0.7s ease-in-out;
  158. -webkit-transition: all 0.7s ease-in-out;
  159. -moz-transition: all 0.7s ease-in-out;
  160. -o-transition: all 0.7s ease-in-out;}
  161.  
  162. #content{
  163. position: relative;
  164. width: 420px;
  165. margin-right: auto;
  166. margin-left: auto;}
  167.  
  168. .entry{
  169. width: 420px;
  170. margin-bottom: 5px;}
  171.  
  172. .info{
  173. padding: 10px;
  174. padding-right: 0px;
  175. padding-left: 0px;}
  176.  
  177. header{
  178. color: #464646;
  179. font: 9px 'Calibri', sans-serif;
  180. font-size: 10px;
  181. font-family: 'Calibri', sans-serif;
  182. line-height: 13px;
  183. font-weight: bold;
  184. letter-spacing: 5px;
  185. text-transform: uppercase;
  186. margin-bottom: 5px;
  187. padding-left: 20px;
  188. padding-bottom: 5px;
  189. display: block;
  190. border-bottom: 1px solid #CFCFCF;}
  191.  
  192. header:first-letter{
  193. color: #CCBB99;
  194. font-style: italic;}
  195.  
  196. subtitle{
  197. color: #7C7C7C;
  198. font: 8px 'Arial', sans-serif;
  199. font-size: 8px;
  200. font-family: 'Arial', sans-serif;
  201. line-height: 10px;
  202. text-align: right;
  203. font-style: italic;
  204. font-weight: bold;
  205. letter-spacing: 1px;
  206. text-transform: lowercase;
  207. padding-right: 15px;
  208. display: block;}
  209.  
  210. .text{
  211. color: #000000;
  212. font: 11px 'Arial', sans-serif;
  213. font-size: 11px;
  214. font-family: 'Arial', sans-serif;
  215. line-height: 17px;
  216. padding: 10px;
  217. background-color: #FAFAFA;}
  218.  
  219. .text img{
  220. max-width: 400px;
  221. border: none;
  222. opacity: 1;
  223. transition: all 0.7s ease-in-out;
  224. -webkit-transition: all 0.7s ease-in-out;
  225. -moz-transition: all 0.7s ease-in-out;
  226. -o-transition: all 0.7s ease-in-out;}
  227.  
  228. .text img:hover{
  229. opacity: .8;
  230. transition: all 0.7s ease-in-out;
  231. -webkit-transition: all 0.7s ease-in-out;
  232. -moz-transition: all 0.7s ease-in-out;
  233. -o-transition: all 0.7s ease-in-out;}
  234.  
  235. td.tr-caption{
  236. color: #CCBB99;
  237. font: 10px 'Calibri', sans-serif;
  238. font-size: 10px;
  239. font-family: 'Calibri', sans-serif;
  240. line-height: 12px;
  241. font-weight: bold;
  242. padding: 5px;
  243. display: block;}
  244.  
  245. .text blockquote{
  246. width: 90%;
  247. color: #7C7C7C;
  248. font: 11px 'Arial', sans-serif;
  249. font-size: 11px;
  250. line-height: 14px;
  251. margin-top: 5px;
  252. margin-right: auto;
  253. margin-bottom: 5px;
  254. margin-left: auto;
  255. padding: 10px;
  256. background-color: #EEEEDD;}
  257.  
  258. .text textarea{
  259. width: 100%;
  260. max-height: 80px;
  261. color: #7C7C7C;
  262. font: 8px 'Arial', sans-serif;
  263. font-size: 8px;
  264. font-family: 'Arial', sans-serif;
  265. line-height: 10px;
  266. padding: 5px;
  267. padding-bottom: 5px;
  268. background-color: #EEEEDD;
  269. border: 1px solid #DDCCAA;}
  270.  
  271. textarea ::-webkit-scrollbar-thumb:vertical {
  272. height: 7px;
  273. background-color: #EEEEDD;}
  274.  
  275. textarea ::-webkit-scrollbar-thumb:horizontal {
  276. height: 7px!important;
  277. background-color: #EEEEDD;
  278. border-right: 2px solid #BBBBAA;
  279. border-left: 2px solid #BBBBAA;}
  280.  
  281. textarea ::-webkit-scrollbar {
  282. width: 10px;
  283. height: 15px;
  284. background-color: #EEEEDD;}
  285.  
  286. .text ul{
  287. margin: 5px;
  288. padding: 5px;
  289. padding-bottom: 5px;}
  290.  
  291. .text li{
  292. color: #555555;
  293. font: 8px 'Arial', sans-serif;
  294. font-size: 8px;
  295. font-family: 'Arial', sans-serif;
  296. line-height: 10px;
  297. letter-spacing: 1px;
  298. text-transform: uppercase;
  299. margin-bottom: 3px;
  300. padding-left: 15px;
  301. list-style-type: none;}
  302.  
  303. .text li:nth-child(even){
  304. padding: 5px;
  305. background-color: #FAFAFA;}
  306.  
  307. .text li:nth-child(odd){
  308. padding: 5px;
  309. background-color: #EEEEDD;}
  310.  
  311. .text li:before{
  312. color: #9B949F;
  313. padding-right: 10px;
  314. content: "♕"}
  315.  
  316. p.blogger-labels{display: none;}
  317.  
  318. #sidebar{
  319. float: right;
  320. top: 60px;
  321. width: 240px;}
  322.  
  323. .side-title{
  324. color: #AA9988;
  325. font: 16px 'Calibri', sans-serif;
  326. font-size: 16px;
  327. font-family: 'Calibri', sans-serif;
  328. line-height: 18px;
  329. text-align: right;
  330. text-transform: uppercase;
  331. margin-bottom: 5px;
  332. border-bottom: 2px solid #DDCCAA;}
  333.  
  334. .side-title:first-letter{
  335. color: #DDCCAA;
  336. font-style: italic;}
  337.  
  338. .box{
  339. color: #464646;
  340. font: 11px 'Arial', sans-serif;
  341. font-size: 11px;
  342. font-family: 'Arial', sans-serif;
  343. line-height: 14px;
  344. text-transform: lowercase;
  345. margin-bottom: 5px;}
  346.  
  347. .box .icon{
  348. width: 100px;
  349. height: 100px;
  350. padding-right: 5px;
  351. padding-bottom: 5px;
  352. opacity: 1;
  353. transition: all 0.7s ease-in-out;
  354. -webkit-transition: all 0.7s ease-in-out;
  355. -moz-transition: all 0.7s ease-in-out;
  356. -o-transition: all 0.7s ease-in-out;}
  357.  
  358. .box .icon:hover{
  359. opacity: .5;
  360. transition: all 0.7s ease-in-out;
  361. -webkit-transition: all 0.7s ease-in-out;
  362. -moz-transition: all 0.7s ease-in-out;
  363. -o-transition: all 0.7s ease-in-out;}
  364.  
  365. a.credits, a.credits:active, a.credits:link, a.credits:visited{
  366. color: #7C7C7C;
  367. font-weight: bold;
  368. transition: all 0.7s ease-in-out;
  369. -webkit-transition: all 0.7s ease-in-out;
  370. -moz-transition: all 0.7s ease-in-out;
  371. -o-transition: all 0.7s ease-in-out;}
  372.  
  373. a.credits:hover{
  374. color: #CCBB99;
  375. transition: all 0.7s ease-in-out;
  376. -webkit-transition: all 0.7s ease-in-out;
  377. -moz-transition: all 0.7s ease-in-out;
  378. -o-transition: all 0.7s ease-in-out;}
  379.  
  380. a.affiliates, a.affiliates:active, a.affiliates:link, a.affiliates:visited{
  381. overflow: hidden;
  382. width: 82px;
  383. max-width: 82px;
  384. color: #9B949F;
  385. font: 11px 'Arial', sans-serif;
  386. font-size: 11px;
  387. font-family: 'Arial', sans-serif;
  388. line-height: 14px;
  389. text-align: center;
  390. text-transform: lowercase;
  391. margin-right: 10px;
  392. margin-bottom: 5px;
  393. padding: 5px;
  394. background-color: #EEEEDD;
  395. display: inline-block;
  396. transition: all 0.7s ease-in-out;
  397. -webkit-transition: all 0.7s ease-in-out;
  398. -moz-transition: all 0.7s ease-in-out;
  399. -o-transition: all 0.7s ease-in-out;}
  400.  
  401. a.affiliates:hover{
  402. color: #464646;
  403. transition: all 0.7s ease-in-out;
  404. -webkit-transition: all 0.7s ease-in-out;
  405. -moz-transition: all 0.7s ease-in-out;
  406. -o-transition: all 0.7s ease-in-out;}
  407.  
  408. #footer{
  409. position: relative;
  410. width: 450px;
  411. color: #464646;
  412. font: 11px 'Arial', sans-serif;
  413. font-size: 11px;
  414. font-family: 'Arial', sans-serif;
  415. line-height: 14px;
  416. text-align: center;
  417. text-transform: lowercase;
  418. margin-top: 20px;
  419. margin-right: auto;
  420. margin-left: auto;
  421. padding: 10px;}
  422. </style>
  423. </head>
  424.  
  425. <body>
  426. <div id="wrap">
  427. <div id="container">
  428. <div id="navigation">
  429. <div id="navbar">
  430. <a href="/" title="refresh the page.">refresh</a><a onclick="document.getElementById('main').innerHTML=document.getElementById('profile').innerHTML" title="about the blogger.">blogger</a><a href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>" title="follow the blog.">+follow</a><a onclick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" title="view the links out.">linkage</a><a onclick="document.getElementById('main').innerHTML=document.getElementById('entries').innerHTML" style="title="back to the entries.">entries</a><a href="http://URLHERE" title="link title here">link 1</a><a href="http://URLHERE" title="link title here">link 2</a><OlderPosts><a href="<$OlderPosts$>" title="into the past we go."><font face="'Calibri', sans-serif">◄</font>older</a></OlderPosts><NewerPosts><a href="<$NewerPosts$>" title="and to the future.">newer<font face="'Calibri, sans-serif">►</font></a></NewerPosts>
  431. </div>
  432. </div>
  433.  
  434. <table align="center" cellpadding="0" cellspacing="0" style="width: 680px;" width="680">
  435. <tr>
  436. <td align="left" cellpadding="0" cellspacing="0" style="width: 420px;" valign="top" width="420">
  437. <div id="content">
  438. <div id="main">
  439. <Blogger>
  440. <div class="entry">
  441. <div class="info">
  442. <BlogItemTitle><header><$BlogItemTitle$></header></BlogItemTitle>
  443. <subtitle><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> at <$BlogItemDateTime$> &nbsp;&nbsp;&nbsp;&mdash;&nbsp;&nbsp;&nbsp; <a class="commentaries" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$> title="view/leave comments."><$BlogItemCommentCount$> strangers</a></BlogItemCommentsEnabled></subtitle>
  444. </div>
  445.  
  446.  
  447. <BlogItemBody>
  448. <div class="text">
  449. <$BlogItemBody$>
  450. </div>
  451. </BlogItemBody>
  452. </div>
  453. </Blogger>
  454. </div>
  455.  
  456. <div id="entries" style="display: none;">
  457. <Blogger>
  458. <div class="entry">
  459. <div class="info">
  460. <BlogItemTitle><header><$BlogItemTitle$></header></BlogItemTitle>
  461. <subtitle><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> at <$BlogItemDateTime$> &nbsp;&nbsp;&nbsp;&mdash;&nbsp;&nbsp;&nbsp; <a class="commentaries" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$> title="view/leave comments."><$BlogItemCommentCount$> strangers</a></BlogItemCommentsEnabled></subtitle>
  462. </div>
  463.  
  464.  
  465. <BlogItemBody>
  466. <div class="text">
  467. <$BlogItemBody$>
  468. </div>
  469. </BlogItemBody>
  470. </div>
  471. </Blogger>
  472. </div>
  473.  
  474. <div id="profile" style="display: none;">
  475. <div class="entry">
  476. <div class="info">
  477. <header>give your profile a fancy title.</header>
  478. <subtitle>and a fancy subtitle too.</subtitle>
  479. </div>
  480.  
  481. <div class="text">
  482. Here is where you can put your profile. Feel free to go wild. Tell people about yourself and your blog.
  483. Share as much or as little as you want. Let the people in or keep them at a distance. Whatever you so wish to put
  484. here as a profile can be put here.
  485. </div>
  486. </div>
  487.  
  488. </div>
  489.  
  490. <div id="links" style="display: none;">
  491. <div class="entry">
  492. <div class="info">
  493. <header>the precious ones.</header>
  494. <subtitle>a blogroll and affiliates section.</subtitle>
  495. </div>
  496.  
  497. <div class="text" style="margin-bottom: 5px; padding-right: 0px; padding-bottom: 5px;">
  498. <a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a>
  499. <a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a>
  500. <a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a>
  501. <a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a>
  502. <a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a><a class="affiliates" href="">affiliate</a>
  503. </div>
  504.  
  505.  
  506. <div class="text">
  507. You can put image banners here. Keep the links and the banners separated for organizational and aesthetic purposes.
  508. </div>
  509. </div>
  510.  
  511. </div>
  512.  
  513. </div>
  514. </td>
  515.  
  516. <td align="left" cellpadding="0" cellspacing="0" style="width: 240pxs;" valign="top" width="240">
  517. <div id="sidebar">
  518. <div class="side-title">profile</div>
  519. <div class="box">
  520. <img class="icon" src="http://i.imgur.com/Sgj5imL.png" align="left" /><b>acata</b><strong>lepsy</strong> 「20.」 — an afro-caribbean american who speaks the queen’s english, misses the city life, and
  521. is a blogger, web designer, and artist by trade and hobby. also going to school for several things, but
  522. primarily web design and development, computer science, information technology, and english language
  523. and literature. <em>acatalepsy is simply a <i>nom de plume</i>. try not to get too excited</em>
  524. <br><br>
  525.  
  526. you can put a bio or some rules here. have fun. go wild. party.
  527. </div>
  528.  
  529.  
  530. <div class="side-title">chatter</div>
  531. <div class="box">
  532. <center><img border="0" src="http://puu.sh/7qYWy.png" /></center>
  533.  <div style="overflow: auto; font-size: 8px; line-height: 10px; font-weight: bold; text-align: center; letter-spacing: 1px; margin-top: 5px;">
  534.  + this is only an image preview. erase this and add your own <strong>cbox</strong> code. no more than 240px in width.
  535.  </div>
  536. </div>
  537.  
  538.  
  539. <div class="side-title">credits</div>
  540. <div class="box">
  541. <!--please do not edit past this line unless given the proper permission to do so. thank you kindly.-->
  542.  <div style="overflow: auto; color: #000000; font-size: 8px; font-family: 'Calibri', sans-serif; line-height: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;">「<strong>the city</strong>」 is a skin created by <a class="credits" href="http://untraversable.tk" title="blog.">acata</a><a class="credits" href="http://blogskins.com/me/acatalepsy" title="blogskins.">lepsy</a>. the icon used for the profile section is can be found on <a class="credits" href="http://weheartit.com/entry/105411785" title="view the image on weheartit.">we❤it</a>. colour palette was achieved by using <a class="credits" href="http://www.degraeve.com/color-palette/index.php" title="visit degrave’s colour palette generator.">degrave’s colour palette generator</a>, <a class="credits" href="http://www.colorhunter.com/" title="visit colour hunter.">colour hunter</a>, and <a class="credits " href="http://colorschemedesigner.com/#1T61T2itSw0w0" title="visit colour scheme designer.">colour scheme designer</a> (<a class="credits" href="http://puu.sh/7p72z.jpg" title="degrave’s colour palette.">۵۵</a>, <a class="credits" href="http://puu.sh/7qWSC.png" title="colour hunter palette.">۵۵</a>, <a class="credits" href="http://puu.sh/7qWYH.jpg" title="colour scheme designer palette.">۵۵</a>). this layout is not to be used as a basecode, but can be customised to user’s likings.</div>
  543. </div>
  544.  
  545. </div>
  546. </td></tr>
  547. </table>
  548.  
  549. <div id="footer">
  550. <em>&copy; ~2014. all rights reserved.</em> | <BlogTitle><strong><$BlogTitle$></strong></BlogTitle> is powered by <a href="http://blogger.com">blogger</a> and all content found here whether it be in written or picture form is credited to this blog and its owner unless stated or presented otherwise.
  551. </div>
  552. </div>
  553. </div>
  554. </body>
  555. </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!