API tools faq
paste
aeternaphantasia

about page #01: lonely day

aeternaphantasia
Mar 14th, 2014
3,429
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  
  5. <title>I wipe your tears away with my fingers.</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7.  
  8. <html>
  9. <head>
  10.  
  11. <!--
  12. About Page #01 REVAMP: Lonely Day
  13. coded by kuzuriha
  14.  
  15. As this is a revamp theme, the earlier version of the theme (both the preview and the code) will be removed, and the code won't be updated unless there's a major bug/glitch. The previous version of this page was titled "Say Hello".
  16.  
  17. 1. Don't remove the credit.
  18. 2. Don't move the credit. Just leave it there.
  19. 3. Don't use as a base code.
  20. 4. Please enjoy! If you find any bugs, please contact me! c:
  21. -->
  22.  
  23. <!--Heads up!-->
  24.  
  25. <!--Please read the code carefully! I've tried my best to make that all I'm talking about here makes sense and to group the codes based on their usage but if you are still having trouble, please drop me an ask! c: -->
  26.  
  27. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  28.  
  29. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30.  
  31. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  32.  
  33. <script>
  34.  
  35. (function($){
  36.  
  37. $(document).ready(function(){
  38.  
  39. $("a[title]").style_my_tooltips({
  40.  
  41. tip_follows_cursor:true,
  42.  
  43. tip_delay_time:0,
  44.  
  45. tip_fade_speed:0,
  46.  
  47. attribute:"title"
  48.  
  49. });
  50.  
  51. });
  52.  
  53. })(jQuery);
  54.  
  55. </script>
  56. <style type="text/css">
  57. /**Webkit scrollbar**/
  58.  
  59. ::-webkit-scrollbar{
  60. width:2px;
  61. height:1px;
  62. }
  63.  
  64. ::-webkit-scrollbar-thumb:vertical{
  65. background-color:#FFF0B6;
  66. }
  67.  
  68. /**Tooltips. This styles that fancy title box that appears when you hover over a link.**/
  69.  
  70. #s-m-t-tooltip {
  71. max-width:150px;
  72. padding:5px 10px 5px 10px;
  73. margin:20px 14px 7px 10px;
  74. background-color:#FFDCA9; /* change the background color */
  75. font-family:consolas; /* change the font */
  76. font-style:italic;
  77. font-size:10px; /* change the font size */
  78. line-height:11px;
  79. letter-spacing:1px; /* change the letter spacing */
  80. text-transform:lowercase; /* can be uppercase, lowercase, none*/
  81. color:#fff; /* change the text color */
  82. z-index:999;
  83. }
  84. /**body stuffs**/
  85. body{
  86. margin:0;
  87. padding:0;
  88. background:#fff url('http://static.tumblr.com/wdp3vza/ueWnj3any/tumblr_static_tumblr_static_bg-wood_vertical_light.png') fixed; /**put the background image for your page inside the brackets**/
  89. font:10px consolas;
  90. color:#DEDEDE;
  91. }
  92.  
  93. a{
  94. text-decoration:none;
  95. color:#E8D09A;
  96. }
  97.  
  98. a:hover{
  99. color:#FFF0B6;
  100. }
  101.  
  102. #bar1{
  103. width:100%;
  104. height:222px;
  105. background:url('http://static.tumblr.com/wdp3vza/dK6nj39mo/tumblr_mt67noibpl1ru3nbdo2_100.png') fixed; /**put the background image for your page inside the brackets**/
  106. top:0;
  107. left:0;
  108. border-bottom:10px solid #EDEDED;
  109. position:fixed;
  110. }
  111.  
  112. #container{
  113. width:690px;
  114. height:490px;
  115. position:fixed;
  116. background:rgba(255,255,255,.6);
  117. padding:35px;
  118. margin-left:200px;
  119. margin-top:60px;
  120. }
  121.  
  122. #inside{
  123. width:655px;
  124. height:465px;
  125. background:rgba(255,255,255,1);
  126. position:absolute;
  127. padding:10px;
  128. max-height:465px;
  129. overflow:scroll;
  130. margin-left:8px;
  131. }
  132.  
  133. #sidebar{
  134. position:absolute;
  135. width:222px;
  136. height:262px;
  137. margin:10px;
  138. }
  139.  
  140. #sidebar img{
  141. width:222px;
  142. height:262px;
  143. }
  144.  
  145. #linkcont{
  146. position:fixed;
  147. width:100px;
  148. margin-top:220px;
  149. height:400px;
  150. padding:20px;
  151. margin-left:65px;
  152. }
  153.  
  154. .navlink a{
  155. display:block;
  156. width:80px;
  157. text-transform:uppercase;
  158. background-color:#FFDCA9; /**change this part to change the background color**/
  159. color:#fff; /**change this part to change the text color**/
  160. text-align:center;
  161. margin:8px;
  162. padding:5px;
  163. font:10px;
  164. transition:.5s ease;
  165. }
  166.  
  167. .navlink a:hover{
  168. background-color:#E8D09A;
  169. }
  170.  
  171. #desc{
  172. position:absolute;
  173. padding:10px;
  174. width:202px;
  175. height:120px;
  176. border-radius:12px;
  177. border:1px dashed #FFFFA9;
  178. color:#000;
  179. margin-top:10px;
  180. background-color:#fff;
  181. font-size:10px;
  182. }
  183.  
  184. #desc b, strong{
  185. color:#FFDCA9;
  186. font-weight:400; /**delete this part to make it the usual bold**/
  187. }
  188.  
  189. #desc i, em{
  190. color:#FFDCA9;
  191. }
  192.  
  193. /**Main text part**/
  194.  
  195. #text{
  196. width:375px;
  197. height:425px;
  198. padding:10px;
  199. position:absolute;
  200. float:left;
  201. margin-top:10px;
  202. margin-left:250px;
  203. margin-right:10px;
  204. }
  205.  
  206. #abouttext{
  207. width:365px;
  208. float:left;
  209. padding:10px;
  210. position:absolute;
  211. height:280px;
  212. max-height:280px;
  213. overflow:scroll;
  214. margin-top:0;
  215. }
  216.  
  217. #abouttext:first-letter{
  218. background-color:#FFF0B6;
  219. color:#fff;
  220. float:left;
  221. width:10px;
  222. height:20px;
  223. line-height:100%;
  224. font-family:verdana;
  225. font-size:30px;
  226. padding:8px;
  227. margin-right:8px;
  228. }
  229.  
  230. #abouttext b, strong{
  231. color:#E8E09A;
  232. font-weight:400; /**delete this part to make it the usual bold**/
  233. }
  234.  
  235. #abouttext i, em{
  236. color:#E8D09A;
  237. }
  238.  
  239. #infobox{
  240. display:block;
  241. padding:8px;
  242. margin:10px;
  243. }
  244.  
  245. #icon{
  246. width:100px;
  247. height:100px;
  248. border:4px solid #FFDCA9;
  249. float:left;
  250. position:absolute;
  251. }
  252.  
  253. #icon img{
  254. max-width:100px;
  255. max-height:100px;
  256. }
  257.  
  258. .infolabel{
  259. display:block;
  260. background-color:#FFDCA9;
  261. min-width:150px;
  262. padding:3px;
  263. letter-spacing:1px;
  264. color:#fff;
  265. text-align:center;
  266. font-style:italic;
  267. margin-left:100px;
  268. border-radius:25px;
  269. margin-top:6px;
  270. font-size:11px;
  271. }
  272.  
  273. /**Credit. Please do not alter this part in any way!!**/
  274.  
  275. #credit{
  276. right:20px;
  277. bottom:10px;
  278. position:fixed;
  279. }
  280. </style>
  281. </head>
  282.  
  283. <body>
  284. <div id="bar1"></div>
  285. <div id="linkcont">
  286. <div class="navlink">
  287. <a href="/">home</a>
  288. <a href="/ask">message</a>
  289. <a href="/archive">archive</a>
  290. <a href="/">link 1</a>
  291. <a href="/">link 2</a>
  292. <a href="/">link 3 <!--change the title of your link here!--></a><!--put your links inside the a href="" part!-->
  293.  
  294. </div>
  295. </div>
  296. <div id="container">
  297. <div id="inside">
  298. <div id="sidebar">
  299. <img src="http://static.tumblr.com/wdp3vza/im7nj6akw/tumblr_nh1uyg9on01qhttpto1_12803.jpg"/>
  300. <div id="desc">
  301. <i>From the memories of two of us, what was left behind from it?</i>
  302. <br>
  303. <br>
  304. You are currently viewing the live preview of <a href="http://kuzuriha.tumblr.com">kuzuriha's</a> revamp on <b>Say Hello</b>, now titled <b>Lonely Day.</b> <!--Put your description here!-->
  305.  
  306. </div><!--end desc-->
  307. </div><!--end sidebar-->
  308.  
  309. <div id="text">
  310. <div id="infobox">
  311. <div id="icon"><img src="http://static.tumblr.com/wdp3vza/GnUnjvbyc/tumblr_nh8fgqqioz1sg7sw3o4_128012.jpg"/> <!--put your image source inside the quotation marks!--></div>
  312. <div class="infolabel">Rizu <!--you can write whatever on this, but remember that it will stretch if you write too much. Recommended amount of label is 4.--> </div>
  313. <div class="infolabel">Seventeen</div>
  314. <div class="infolabel">March 26</div>
  315. <div class="infolabel">INTJ</div>
  316. </div><!--end infobox-->
  317.  
  318. <div id="abouttext">
  319. This is where you will write your about section. Write anything that you like!
  320.  
  321. </div><!--end about text-->
  322.  
  323. </div><!--end text-->
  324. </div>
  325. </div>
  326. </div>
  327.  
  328. <!--Please don't delete this part! You may change the image if you think it looks bad though c:-->
  329.  
  330. <div id="credit">
  331. <a href="http://kuzuriha.tumblr.com"><img src="http://static.tumblr.com/i00o5ri/8Hin3wwhl/tumblr_inline_mueomfwkvr1qdlkyg.gif" title="theme by kuzuriha"></a>
  332. </div>
  333.  
  334. </body>
  335. </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!