API tools faq
paste
Advertisement
imgirlrauhl

All-in-one Page #3 - Life

imgirlrauhl
Sep 30th, 2014
1,391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5.  
  6. <!--
  7.  
  8. All-in-one Page #3 "Life" by Vanne at vitanica.tumblr.com
  9.  
  10. Please do NOT:
  11. ...use as base code.
  12. ...repost.
  13. ...claim as your own.
  14. ...remove the credit.
  15.  
  16. If you have any question, please visit my F.A.Q.
  17.  
  18. Thank you for using my page! <3
  19.  
  20. -->
  21.  
  22. <head>
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
  25.  
  26. <!-- replace "all in one!" and put a title to your page -->
  27. <title>all in one!</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30.  
  31. <style type="text/css">
  32.  
  33. @import url(http://weloveiconfonts.com/api/?family=entypo);
  34.  
  35. /* entypo */
  36. [class*="entypo-"]:before {
  37. font-family: 'entypo', sans-serif;
  38. }
  39.  
  40. html, body {
  41. margin: 0px;
  42. padding: 0px;
  43. background-attachment: fixed;
  44. word-wrap: break-word;
  45. }
  46.  
  47. /* style my tooltip */
  48. #s-m-t-tooltip {
  49. max-width: 300px;
  50. margin: 15px;
  51. padding: 6px 10px 6px 10px;
  52. z-index: 9999999;
  53. text-align: center;
  54. text-transform: uppercase;
  55. font-family: courier new;
  56. font-size: 13px;
  57. font-weight: bold;
  58. background: #fff;
  59. color: #444;
  60. letter-spacing: 1px;
  61. -webkit-transition: all .3s ease;
  62. -moz-transition: all .3s ease;
  63. -o-transition: all .3s ease;
  64. transition: all .3s ease;
  65. }
  66.  
  67. a { color: #fff; text-decoration: none; }
  68. a:hover { color: #fff; text-decoration: none; }
  69. b, strong { color: #fff; font-weight: bold; }
  70. i, em { color: #fff; font-weight: 400italic; }
  71.  
  72. .all {
  73. position: fixed;
  74. top: 0px;
  75. left: 0px;
  76. width: 100%;
  77. height: 100%;
  78. background: #e3e3e3;
  79. }
  80.  
  81. .about, .links, .ask, .blogroll {
  82. width: 100%;
  83. height: 25%;
  84. line-height: 200px;
  85. font-size: 50px;
  86. font-family: courier new;
  87. text-align: center;
  88. text-transform: uppercase;
  89. font-weight: bold;
  90. letter-spacing: 2px;
  91. }
  92.  
  93. .about { top: 0px; background: #FE686C; }
  94. .links { top: 25%; background: #FF7F7F; }
  95. .ask { top: 50%; background: #FF987F; }
  96. .blogroll { top: 75%; background: #FFAC7F; }
  97.  
  98. .about a { cursor: pointer; color: #fff; text-shadow: 6px 6px #FE5054; color: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
  99. .links a { cursor: pointer; color: #fff; text-shadow: 6px 6px #F05F5F; color: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
  100. .ask a { cursor: pointer; color: #fff; text-shadow: 6px 6px #F07B5F; color: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
  101. .blogroll a { cursor: pointer; color: #fff; text-shadow: 6px 6px #F0925F; color: #fff; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
  102.  
  103. .aboutt, .linkss, .askk, .blogrolll {
  104. position: absolute;
  105. top: 0px;
  106. left: 0px;
  107. z-index: 999;
  108. width: 100%;
  109. height: 100%;
  110. padding: 0px;
  111. display: none;
  112. }
  113.  
  114. .aboutt { background: #FE686C; }
  115. .linkss { background: #FF7F7F; }
  116. .askk { background: #FF987F; }
  117. .blogrolll { background: #FFAC7F; }
  118.  
  119. #closea, #closel, #closeaa, #closeb {
  120. margin: 0 auto;
  121. font-size: 30px;
  122. text-align: center;
  123. width: 30px;
  124. height: 30px;
  125. padding-top: 30px;
  126. line-height: 30px;
  127. cursor: pointer;
  128. color: #fff;
  129. }
  130.  
  131. #title {
  132. margin: 0 auto;
  133. text-align: center;
  134. width: 700px;
  135. height: 50px;
  136. padding-top: 30px;
  137. color: #fff;
  138. font-family: courier new;
  139. font-size: 35px;
  140. text-transform: uppercase;
  141. font-weight: bold;
  142. letter-spacing: 2px;
  143. }
  144.  
  145. .holder {
  146. margin: 0 auto;
  147. top: 120px;
  148. width: 680px;
  149. padding: 10px;
  150. height: 480px;
  151. overflow: auto;
  152. color: #fff;
  153. font-family: Noto Sans;
  154. font-size: 12px;
  155. }
  156.  
  157. #about .holder a:hover, #links .holder a:hover, #ask .holder a:hover, #blogroll .holder a:hover { text-decoration: line-through; }
  158.  
  159. #about .holder a { background: #FE5054; padding: 1px 3px 1px 3px; }
  160. #links .holder a { display: inline-block; background: #F05F5F; width: 200px; height: 50px; line-height: 50px; margin: 0px 2px 6px 2px; font-size: 20px; font-family: courier new; font-weight: bold; text-transform: uppercase; }
  161. #ask .holder a { background: #F07B5F; padding: 1px 3px 1px 3px; }
  162.  
  163. #about .holder img {
  164. width: 110px;
  165. height: 110px;
  166. border: 10px solid #FE5054;
  167. float: left;
  168. margin-right: 10px;
  169. }
  170.  
  171. #followed {
  172. width: 184px;
  173. border: 10px solid #F0925F;
  174. background: #F0925F;
  175. float: left;
  176. margin: 7px;
  177. }
  178.  
  179. #followed img { width: 64px; height: 64px; float: left; }
  180. .followedurl { margin-left: 10px; width: 100px; float: left; height: 64px; text-align: center; font-family: noto sans; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }
  181. .followedurl a { display: block; text-align: center; text-align: center; width: 100px; height: 65px; line-height: 65px; overflow: hidden; }
  182.  
  183. .holder::-webkit-scrollbar { width:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  184. .holder::-webkit-scrollbar-track { background: #fff; border: 2px solid rgba(0, 0, 0, 0.0); -moz-background-clip: border; -webkit-background-clip: border; background-clip: border-box; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -moz-background-clip: content; -webkit-background-clip: content; background-clip: content-box; }
  185.  
  186. #about .holder::-webkit-scrollbar-thumb { background: #FE5054; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  187.  
  188. #links .holder::-webkit-scrollbar-thumb { background: #F05F5F; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  189.  
  190. #ask .holder::-webkit-scrollbar-thumb { background: #F07B5F; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  191.  
  192. #blogroll .holder::-webkit-scrollbar-thumb { background: #F0925F; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  193.  
  194. /* credits // please do not remove them, unless you want your account to be deleted */
  195. #vt {
  196. position: fixed;
  197. bottom: 10px;
  198. left: 10px;
  199. text-align: center;
  200. z-index: 9999;
  201. }
  202.  
  203. #vt a {
  204. display: block;
  205. width: 30px;
  206. height: 30px;
  207. margin-top: 10px;
  208. overflow: hidden;
  209. font-family: courier new;
  210. font-size: 13px;
  211. line-height: 30px;
  212. font-weight: bold;
  213. letter-spacing: 1px;
  214. text-transform: uppercase;
  215. background: #F05F5F;
  216. }
  217.  
  218. </style>
  219. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  220.  
  221. <link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
  222. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  223. <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>
  224.  
  225. </head>
  226.  
  227. <body>
  228.  
  229. <div class="all">
  230. <div class="about">
  231. <a class="about">about me <span class="entypo-user"></span></a>
  232. </div>
  233. <div class="links">
  234. <a class="links">links <span class="entypo-shuffle"></span></a>
  235. </div>
  236. <div class="ask">
  237. <a class="ask">message <span class="entypo-chat"></span></a>
  238. </div>
  239. <div class="blogroll">
  240. <a class="blogroll">blogroll <span class="entypo-book-open"></span></a>
  241. </div>
  242. </div> <!--- /all --->
  243.  
  244.  
  245. <!-- STARTS ABOUT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  246. <div id="about" class="aboutt">
  247. <div id="closea" title="close"><span class="entypo-cancel-circled"></span></div>
  248. <div id="title">about me</div>
  249. <div class="holder" style="text-align: justify;">
  250. <img src="http://static.tumblr.com/n9vj50j/Ak8ncilyi/captura_de_pantalla_2014-09-26_a_las_10.33.12.png"><!-- Replace the previous link with the link of the icon that you want to show. -->
  251. Delete this line and write anything you want!
  252. </div>
  253. </div>
  254.  
  255.  
  256. <!-- STARTS LINKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  257. <div id="links" class="linkss">
  258. <div id="closel" title="close"><span class="entypo-cancel-circled"></span></div>
  259. <div id="title">my links</div>
  260. <div class="holder" style="text-align: center;">
  261. <a href="URL">link 1</a>
  262. <a href="URL">link 2</a>
  263. <a href="URL">link 3</a>
  264. <a href="URL">link 4</a>
  265. <a href="URL">link 5</a>
  266. <a href="URL">link 6</a>
  267. <a href="URL">link 7</a>
  268. <a href="URL">link 8</a>
  269. <a href="URL">link 9</a>
  270. <a href="URL">link 10</a>
  271. <a href="URL">link 11</a>
  272. <a href="URL">link 12</a>
  273.  
  274. <div id="title" style="width: 300px;">tags</div>
  275. <a href="/tagged/TAG NAME HERE">tag 1</a>
  276. <a href="/tagged/TAG NAME HERE">tag 2</a>
  277. <a href="/tagged/TAG NAME HERE">tag 3</a>
  278. <a href="/tagged/TAG NAME HERE">tag 4</a>
  279. <a href="/tagged/TAG NAME HERE">tag 5</a>
  280. <a href="/tagged/TAG NAME HERE">tag 6</a>
  281. </div>
  282. </div>
  283.  
  284.  
  285. <!-- STARTS ASK!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  286. <div id="ask" class="askk">
  287. <div id="closeaa" title="close"><span class="entypo-cancel-circled"></span></div>
  288. <div id="title">message me</div>
  289. <div class="holder" style="text-align: justify;">
  290. Delete this line and write anything you want!
  291. <p><iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe></p>
  292. </div>
  293. </div>
  294.  
  295.  
  296. <!-- STARTS BLOGROLL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
  297. <div id="blogroll" class="blogrolll">
  298. <div id="closeb" title="close"><span class="entypo-cancel-circled"></span></div>
  299. <div id="title">blogroll</div>
  300. <div class="holder">
  301. {block:Following}{block:Followed}
  302. <div id="followed">
  303. <img src='{FollowedPortraitURL-64}'>
  304. <div class="followedurl">
  305. <a target='_blank' href='{FollowedURL}'>{FollowedName}</a>
  306. </div>
  307. </div>
  308. {/block:Followed}{/block:Following}
  309. </div>
  310. </div>
  311.  
  312.  
  313. <!-- scripts // please do not edit, things may not work if you do so -->
  314. <script>
  315. $(document).ready(function(){
  316. $(".about").click(function(){
  317. $("#about").slideDown(500);
  318. });
  319. });
  320. </script>
  321.  
  322. <script>
  323. $(document).ready(function(){
  324. $("#closea").click(function(){
  325. $("#about").slideUp(500);
  326. });
  327. });
  328. </script>
  329.  
  330. <script>
  331. $(document).ready(function(){
  332. $(".links").click(function(){
  333. $("#links").slideDown(500);
  334. });
  335. });
  336. </script>
  337.  
  338. <script>
  339. $(document).ready(function(){
  340. $("#closel").click(function(){
  341. $("#links").slideUp(500);
  342. });
  343. });
  344. </script>
  345.  
  346. <script>
  347. $(document).ready(function(){
  348. $(".ask").click(function(){
  349. $("#ask").slideDown(500);
  350. });
  351. });
  352. </script>
  353.  
  354. <script>
  355. $(document).ready(function(){
  356. $("#closeaa").click(function(){
  357. $("#ask").slideUp(500);
  358. });
  359. });
  360. </script>
  361.  
  362. <script>
  363. $(document).ready(function(){
  364. $(".blogroll").click(function(){
  365. $("#blogroll").slideDown(500);
  366. });
  367. });
  368. </script>
  369.  
  370. <script>
  371. $(document).ready(function(){
  372. $("#closeb").click(function(){
  373. $("#blogroll").slideUp(500);
  374. });
  375. });
  376. </script>
  377.  
  378. <div id="vt">
  379. <a href="/" title="index"><span class="entypo-left"></span></a>
  380. <a href="http://tumblr.com/dashboard" title="dashboard"><span class="entypo-home"></span></a>
  381. <a href="http://vitanica.tumblr.com" title="vitanica themes">vt</a>
  382. </div>
  383.  
  384. </body>
  385.  
  386. </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!