Advertisement
ryeou

"eternity" about page

Mar 13th, 2014
2,727
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.26 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!-----------
  6.  
  7. ETERNITY ABOUT THEME BY RYEOU ♡ thank you for using
  8.  
  9. please do not//    
  10. remove the credits
  11. redistribute the theme code
  12. use as a base code
  13. claim as your own
  14.    
  15. ------------>
  16.  
  17. <head>
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
  24.  
  25. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  26. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  27.  
  28. <style type="text/css">
  29.  
  30. @font-face {
  31. font-family: "tinytots";
  32. src: url("http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf");
  33. }
  34.  
  35. /* hover titles */
  36.  
  37. #s-m-t-tooltip{
  38. max-width: 300px;
  39. margin-top: 20px;
  40. margin-left: 20px;
  41. padding: 3px;
  42. z-index: 100%;
  43. background-color: #fff;
  44. color: #aaa;
  45. font-family :inconsolata;
  46. font-size: 8px;
  47. letter-spacing: 1px;
  48. line-height: 10px;
  49. -webkit-transition: all 0.3s ease-in-out;
  50. -moz-transition: all 0.3s ease-in-out;
  51. -o-transition: all 0.3s ease-in-out;
  52. -ms-transition: all 0.3s ease-in-out;
  53. transition: all 0.3s ease-in-out;
  54. border-radius: 3px;
  55. -moz-border-radius: 3px;
  56. box-shadow: 3px 3px 1px #e8e8e8;
  57. }
  58.  
  59. body {
  60. font-family: inconsolata;
  61. font-size: 10px;
  62. color: #aaa;
  63. background: #fafafa;
  64. margin: 0px;
  65. }
  66.  
  67. #main {
  68. margin: 200px 0px 0px 500px;
  69. }
  70.  
  71. /* links */
  72.  
  73. a {
  74. color: #ccc;
  75. text-decoration: none;
  76. -webkit-transition: opacity 0.3s linear;
  77. -webkit-transition: all 0.3s ease-in-out;
  78. -moz-transition: all 0.3s ease-in-out;
  79. -o-transition: all 0.3s ease-in-out;
  80. transition: all 0.3s ease-in-out;
  81. }
  82.  
  83. a:hover {
  84. color: transparent;
  85. text-shadow: 1px 0px .1px #dfeaef, -1px 0px .2px #dfeaef;
  86. -webkit-transition: opacity 0.3s linear;
  87. -webkit-transition: all 0.3s ease-in-out;
  88. -moz-transition: all 0.3s ease-in-out;
  89. -o-transition: all 0.3s ease-in-out;
  90. transition: all 0.3s ease-in-out;
  91. }
  92.  
  93. /* italics, bold, strikethrough */
  94.  
  95. i, em {
  96. color: #dfeaef;
  97. font-style: normal;
  98. }
  99.  
  100. b, strong {
  101. color: #edd9f2;
  102. font-weight: normal;
  103. }
  104.  
  105. s {
  106. color: #fcdbdb;
  107. text-decoration: none;
  108. }
  109.  
  110. /* icon pic */
  111.  
  112. .ico {
  113. width: 100px;
  114. height: 100px;
  115. margin-top: -3px;
  116. margin-left: 25px;
  117. float: right;
  118. padding: 5px;
  119. background-color: #fff;
  120. border-radius: 10px;
  121. -moz-border-radius: 10px;
  122. }
  123.  
  124. /* bubble */
  125.  
  126. #bubu {
  127. margin-left: -10px;
  128. padding: 5px 5px 5px 15px;
  129. background: #fff;
  130. float: left;
  131. text-align: justify;
  132. font-family: tinytots;
  133. font-size: 32px;
  134. color: #dfeaef;
  135. letter-spacing: 3px;
  136. text-transform: uppercase;
  137. border-radius: 10px;
  138. -moz-border-radius: 10px;
  139. box-shadow: 5px 5px 1px #e8e8e8;
  140. text-shadow: -3px 0px .2px transparent, 3px 0px .2px transparent;
  141. -webkit-transition: opacity 0.3s linear;
  142. -webkit-transition: all 0.3s ease-in-out;
  143. -moz-transition: all 0.3s ease-in-out;
  144. -o-transition: all 0.3s ease-in-out;
  145. transition: all 0.3s ease-in-out;
  146. }
  147.  
  148. /* hover effect on bubble text */
  149. #bubu:hover {
  150. text-shadow: 3px 0px .2px #ccdce2, -3px 0px .2px #eff8fc;
  151. -webkit-transition: opacity 0.3s linear;
  152. -webkit-transition: all 0.3s ease-in-out;
  153. -moz-transition: all 0.3s ease-in-out;
  154. -o-transition: all 0.3s ease-in-out;
  155. transition: all 0.3s ease-in-out;
  156. }
  157.  
  158. #sidelink {
  159. width: 150px;
  160. height: 100px;
  161. margin-left :0px;
  162. margin-top: -10px;
  163. float: left;
  164. padding: 5px;
  165. position: relative;
  166. }
  167.  
  168. #side {
  169. position: absolute;
  170. margin-top: 0px;
  171. }
  172.  
  173. /* triangles */
  174.  
  175. #tri {
  176. margin-left: 150px;
  177. margin-top: 70px;
  178. border-right 0px;
  179. border-top: 15px solid transparent;
  180. border-bottom: 10px solid transparent;
  181. border-left: 18px solid #ffffff;
  182. width: 0px;
  183. height: 0px;
  184. position: absolute;
  185. z-index: 99999999;
  186. opacity: 1;
  187. }
  188.  
  189. #trih {
  190. margin-left: 150px;
  191. margin-top: 77px;
  192. border-right: 0px;
  193. border-top: 15px solid transparent;
  194. border-bottom: 10px solid transparent;
  195. border-left: 18px solid #e8e8e8;
  196. width: 0px;
  197. height: 0px;
  198. position: absolute;
  199. z-index: 9999999;
  200. opacity: 1;
  201. }
  202.  
  203. /* navigation */
  204.  
  205. #nav {
  206. margin-left: 70px;
  207. margin-top: 113px;
  208. width: 150px;
  209. height: auto;
  210. background: transparent;
  211. position: absolute;
  212. }
  213.  
  214. .squa {
  215. width: 12px;
  216. height: 12px;
  217. background-color: #dfeaef;
  218. border: 4px solid #fff;
  219. display: inline-block;
  220. margin-left: 20px;
  221. border-radius: 5px;
  222. -moz-border-radius: 5px;
  223. -webkit-transition: opacity 0.3s linear;
  224. -webkit-transition: all 0.3s ease-in-out;
  225. -moz-transition: all 0.3s ease-in-out;
  226. -o-transition: all 0.3s ease-in-out;
  227. transition: all 0.3s ease-in-out;
  228. }
  229.  
  230. .squa:hover {
  231. background-color: #e8e8e8;
  232. -webkit-transition: opacity 0.3s linear;
  233. -webkit-transition: all 0.3s ease-in-out;
  234. -moz-transition: all 0.3s ease-in-out;
  235. -o-transition: all 0.3s ease-in-out;
  236. transition: all 0.3s ease-in-out;
  237. }
  238.  
  239. /* description box */
  240.  
  241. #box {
  242. margin-top: 140px;
  243. margin-left: -5px;
  244. background-color: #fff;
  245. width: 275px;
  246. height: auto;
  247. padding: 10px;
  248. overflow: hidden;
  249. position: absolute;
  250. opacity: 1;
  251. font-family: consolas;
  252. text-align: justify;
  253. border-radius: 10px;
  254. -moz-border-radius: 10px;
  255. box-shadow: 5px 5px 1px #e8e8e8;
  256. }
  257.  
  258. /* do not remove under any circumstance!!! */
  259.  
  260. .ry {
  261. width: 11px;
  262. height: 11px;
  263. left: 5px;
  264. bottom: 5px;
  265. padding: 3px 4px 3px 2px;
  266. background-color: #fff;
  267. border: 2px solid #dfeaef;
  268. border-radius: 5px;
  269. text-align: center;
  270. font-size: 12px;
  271. position: absolute;
  272. -moz-border-radius: 5px;
  273. -webkit-transition: opacity 0.3s linear;
  274. -webkit-transition: all 0.3s ease-in-out;
  275. -moz-transition: all 0.3s ease-in-out;
  276. -o-transition: all 0.3s ease-in-out;
  277. transition: all 0.3s ease-in-out;
  278. }
  279.  
  280. .ry a {
  281. color: #dfeaef;
  282. }
  283.  
  284. .ry:hover a {
  285. color: #fff;
  286. }
  287.  
  288. .ry:hover {
  289. background-color: #dfeaef;
  290. border: 2px solid #fff;
  291. -webkit-transition: opacity 0.3s linear;
  292. -webkit-transition: all 0.3s ease-in-out;
  293. -moz-transition: all 0.3s ease-in-out;
  294. -o-transition: all 0.3s ease-in-out;
  295. transition: all 0.3s ease-in-out;
  296. }
  297.  
  298. </style>
  299.  
  300. <body>
  301.  
  302. <div id="main">
  303.  
  304. <div id="side">
  305. <!--replace this with your desired icon pic!-->
  306. <img src="http://static.tumblr.com/p7wg3p9/IQumncp9n/icon.png" class="ico">
  307. <div id="sidelink">
  308.  
  309. <div id="bubu">
  310. <!--this changes the text in the bubble!-->
  311. hello; this is me.
  312. </div>
  313.  
  314. <div id="tri"></div>
  315. <div id="trih"></div>
  316.  
  317. </div>
  318.  
  319. <div id="nav">
  320. <!--these change the 3 square links.!-->
  321. <a href="/" title="turn back"><div class="squa"></div></a>
  322. <a href="/ask" title="talk"><div class="squa"></div></a>
  323. <a href="/archive" title="remember"><div class="squa"></div></a>
  324. </div>
  325.  
  326. <div id="box">
  327. <!--replace this with your description//things about yourself!-->
  328. あかさたないきしちにうくすつぬえけせてねおこそとのはまやらわひみりゐふむゆるんへめれゑほもよろを。<br>
  329. abcdefghijklmnopqrstuvwxyz. <br>
  330. write anything that you want here.
  331. </div>
  332.  
  333. </div>
  334.  
  335. </div>
  336.  
  337. <div class ="ry"><a href="http://ryeou.tumblr.com" title="theme by ryeou">❀</a></div>
  338.  
  339. </body>
  340. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement