API tools faq
paste
Advertisement
evansy

page 001 v. 2

evansy
Nov 18th, 2014
568
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!--
  5.  
  6. PAGE 001 (v. 2): ALL ABOUT YOU, BY EVANSYHELP
  7.  
  8. RULES
  9. 1. Edit as much as you like, but...
  10. 2. Do not remove the credit.
  11. 3. Do not redistribute.
  12. 4. Do not use as a base.
  13. 5. Do not claim as your own.
  14.  
  15. DIMENSIONS
  16. Side Image: 150px by 435px
  17. Icon: 150px by 150px
  18.  
  19. -->
  20.  
  21. <head>
  22.  
  23. <script src="http://static.tumblr.com/mxlhytv/66snf98p9/tabcontent.js" type="text/javascript"></script>
  24.  
  25. <title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}" />
  27.  
  28. <style type="text/css">
  29.  
  30. /* SCROLLBAR */
  31.  
  32. ::-webkit-scrollbar {
  33. height:5px;
  34. width:3px;
  35. }
  36.  
  37. ::-webkit-scrollbar-thumb {
  38. background:#944848; /* CHANGE SCROLLBAR COLOUR */
  39. }
  40.  
  41. /* BASICS */
  42.  
  43. #body {
  44. background-color:#fff; /* CHANGE BACKGROUND COLOUR */
  45. color:#2b302e; /* CHANGE FONT COLOUR */
  46. font-family:arial;
  47. font-size:12px;
  48. line-height:120%;
  49. padding:0px;
  50. width:99%;
  51. height:98%;
  52. position:absolute;
  53. overflow:auto;
  54. }
  55.  
  56. a {
  57. text-decoration:none;
  58. }
  59.  
  60. b {
  61. font-weight:bold;
  62. letter-spacing:-1px;
  63. }
  64.  
  65. small {
  66. font-size:10px;
  67. }
  68.  
  69. big {
  70. font-size:14px;
  71. }
  72.  
  73. .title {
  74. width:690px;
  75. margin:50px auto;
  76. color:#845757; /* CHANGE TITLE COLOUR */
  77. font-size:28px;
  78. font-family:arial;
  79. font-weight:bold;
  80. letter-spacing:-2px;
  81. position:relative;
  82. text-align:center;
  83. }
  84.  
  85. .head {
  86. background-color:#944848; /* CHANGE HEADER BACKGROUND COLOUR */
  87. color:#fff; /* CHANGE HEADER COLOUR */
  88. font-size:14px;
  89. font-weight:bold;
  90. letter-spacing:-1px;
  91. text-align:center;
  92. padding:3px;
  93. margin-top:5px;
  94. margin-bottom:5px;
  95. }
  96.  
  97. .container {
  98. width:690px;
  99. margin:-40px auto;
  100. height:450px;
  101. padding:10px;
  102. position:relative;
  103. background-color:#fff; /* CHANGE CONTAINER COLOUR */
  104. border:1px solid #d8d8d8; /* CHANGE BORDER COLOUR */
  105. }
  106.  
  107. /* IMAGES */
  108.  
  109. .pic {
  110. width:150px;
  111. height:435px;
  112. padding:5px;
  113. float:left;
  114. border:1px solid #d8d8d8; /* CHANGE IMAGE BORDER COLOUR */
  115. background-color:#fff;
  116. }
  117.  
  118. .icon {
  119. width:150px;
  120. height:150px;
  121. padding:5px;
  122. float:right;
  123. border:1px solid #d8d8d8; /* CHANGE ICON BORDER COLOUR */
  124. background-color:#fff;
  125. }
  126.  
  127. /* STATISTICS */
  128.  
  129. .stats {
  130. width:340px;
  131. height:161px;
  132. margin-left:175px;
  133. position:absolute;
  134. border:1px solid #d8d8d8; /* CHANGE STATS BORDER COLOUR */
  135. }
  136.  
  137. .stats1 {
  138. background-color:#fff; /* CHANGE STATS BACKGROUND 1 COLOUR */
  139. color:#944848; /*CHANGE STATS 1 TEXT COLOUR */
  140. font-family:arial;
  141. height:9px;
  142. padding:7px;
  143. line-height:100%;
  144. text-align:left;
  145. }
  146.  
  147. .stats2 {
  148. background-color:#6d5e5e; /* CHANGE STATS BACKGROUND 2 COLOUR */
  149. color:#fff; /*CHANGE STATS 1 TEXT COLOUR */
  150. font-family:arial;
  151. height:9px;
  152. padding:7px;
  153. line-height:100%;
  154. text-align:left;
  155. }
  156.  
  157. .stats b {
  158. font-weight:bold;
  159. text-transform:lowercase;
  160. letter-spacing:-1px;
  161. }
  162.  
  163. /* TABS */
  164.  
  165. .tabcontain {
  166. width:99%;
  167. position:absolute;
  168. }
  169.  
  170. ul.tabs {
  171. margin: 50px auto;
  172. margin-left:-5px;
  173. font-size:18px;
  174. font-family:arial;
  175. font-weight:bold;
  176. letter-spacing:-1px;
  177. position:relative;
  178. text-align:center;
  179. }
  180.  
  181. ul.tabs li {
  182. background:none;
  183. color:#944848; /* CHANGE TABS COLOUR */
  184. display:inline-block;
  185. margin-top:5px;
  186. padding:10px;
  187. cursor:pointer;
  188. }
  189.  
  190. ul.tabs li a {
  191. text-align:center;
  192. text-decoration:none;
  193. color:#944848; /* CHANGE TABS COLOUR */
  194. }
  195.  
  196. ul.tabs li a:hover {
  197. text-decoration:none;
  198. color:#6d5e5e; /* CHANGE TABS HOVER COLOUR */
  199. }
  200.  
  201. ul.tabs li.selected a, ul.tabs li.selected a:hover {
  202. position:relative;
  203. top:0px;
  204. font-weight:bold;
  205. background:#6d5e5e; /* CHANGE SELECTED TAB BACKGROUND COLOUR */
  206. color:#fff; /* CHANGE SELECTED TAB COLOUR */
  207. padding:5px;
  208. }
  209.  
  210.  
  211. ul.tabs li.selected a:hover {
  212. text-decoration:none;
  213. }
  214.  
  215. div.tabcontents {
  216. width:493px;
  217. height:250px;
  218. padding:10px;
  219. margin-left:175px;
  220. margin-top:175px;
  221. border:1px solid #d8d8d8; /* CHANGE CONTENT BORDER COLOUR */
  222. background-color:#fff; /* CHANGE CONTENT BACKGROUND COLOUR */
  223. overflow:auto;
  224. }
  225.  
  226. /* NAVIGATION */
  227.  
  228. .navi {
  229. margin-top:13px;
  230. }
  231.  
  232. .navi a {
  233. width:132px;
  234. padding:12px;
  235. margin:3px;
  236. display:inline-block;
  237. text-decoration:none;
  238. text-align:center;
  239. font-weight:bold;
  240. text-transform:lowercase;
  241. color:#fff; /* CHANGE NAVIGATION COLOUR */
  242. background-color:#944848; /* CHANGE NAVIGATION BACKGROUND COLOUR */
  243. border-bottom:1px solid #fff; /* CHANGE NAVIGATION BORDER COLOUR */
  244. }
  245.  
  246. .navi a:hover {
  247. color:#fff; /*CHANGE NAVIGATION HOVER COLOUR */
  248. background-color:#6d5e5e; /* CHANGE NAVIGATION BG HOVER COLOUR */
  249. transition:0.8s ease;
  250. -o-transition:0.8s ease;
  251. -moz-transition:0.8s ease;
  252. -webkit-transition:0.8 ease;
  253. }
  254.  
  255. /* CREDIT - DO NOT TOUCH */
  256.  
  257. .credit {
  258. font-size:10px;
  259. font-family:arial;
  260. float:right;
  261. font-weight:bold;
  262. right:5px;
  263. bottom:5px;
  264. position:fixed;
  265. letter-spacing:-1px;
  266. }
  267.  
  268. .credit a {
  269. text-decoration:none;
  270. color:#6d5e5e;
  271. opacity:0.9;
  272. padding:5px;
  273. }
  274.  
  275. </style>
  276. </head>
  277. <body>
  278. <div id="body">
  279.  
  280. <div class="title">it's all about you</div> <!--EDIT TITLE-->
  281.  
  282. <div class="container">
  283.  
  284. <!--SIDE PIC STARTS HERE, DO NOT CHANGE WIDTH OR HEIGHT-->
  285. <div class="pic">
  286. <img src="https://31.media.tumblr.com/5e8501651762a77753cbe53e97022b50/tumblr_inline_nf93htm6S61t1tt9t.png" width="150px" height="435px">
  287. </div>
  288. <!--SIDE PIC ENDS HERE-->
  289.  
  290.  
  291. <!--STATS START HERE, KEEP AT 7 LINES-->
  292. <div class="stats">
  293. <div class="stats1"><b>NAME:</b> allison</div>
  294. <div class="stats2"><b>AGE:</b> twenty-four</div>
  295. <div class="stats1"><b>PRONOUNS:</b> she/her/hers</div>
  296. <div class="stats2"><b>ORIENTATION:</b> biromantic bisexual</div>
  297. <div class="stats1"><b>LOCATION:</b> california, usa (pst)</div>
  298. <div class="stats2"><b>OCCUPATION:</b> actress</div>
  299. <div class="stats1"><b>CURRENTLY:</b> watching warehouse 13</div>
  300. </div>
  301. <!--STATS END HERE-->
  302.  
  303.  
  304. <!--ICON IMG STARTS HERE, DO NOT CHANGE WIDTH OR HEIGHT-->
  305. <div class="icon">
  306. <img src="https://31.media.tumblr.com/d04955c87dd8df48eac996afcc612b4d/tumblr_inline_nf9mz90PUh1t1tt9t.png" width="150px" height="150px">
  307. </div>
  308. <!--ICON IMG ENDS HERE-->
  309.  
  310.  
  311. <!--TAB CONTENT STARTS HERE-->
  312. <div class="tabcontents">
  313.  
  314.  
  315. <!-- TAB ONE STARTS HERE, IF YOU DON'T WANT HEADERS IN YOUR TAB DELETE THE <div class="head">title</div> LINES-->
  316. <div id="view1">
  317.  
  318. <div class="head" style="margin-top:0px">basics</div>
  319. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
  320.  
  321. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Aenean. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
  322.  
  323. <div class="head">important</div>
  324. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.
  325.  
  326. </div>
  327. <!--TAB ONE ENDS HERE-->
  328.  
  329.  
  330.  
  331.  
  332. <!-- TAB TWO STARTS HERE, IF YOU DON'T WANT HEADERS IN YOUR TAB DELETE THE <div class="head">title</div> LINES-->
  333. <div id="view2">
  334.  
  335. <div class="head" style="margin-top:0px">fandoms</div>
  336. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
  337.  
  338. <div class="head">celebs</div>
  339. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
  340.  
  341. <div class="head">other interests</div>
  342. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.
  343. </div>
  344. <!--TAB TWO ENDS HERE-->
  345.  
  346.  
  347.  
  348.  
  349. <!--TAB THREE STARTS HERE-->
  350. <div id="view3">
  351. <div class="navi">
  352.  
  353. <a href="/">about me tag</a>
  354. <a href="/">love tag</a>
  355. <a href="/">my edits</a>
  356.  
  357. <a href="/">my posts</a>
  358. <a href="/">messages</a>
  359. <a href="/">replies</a>
  360.  
  361. <a href="/">tv schedule</a>
  362. <a href="/">ships</a>
  363. <a href="/">babies</a>
  364.  
  365. <a href="/">link</a>
  366. <a href="/">link</a>
  367. <a href="/">link</a>
  368.  
  369. <a href="/">link</a>
  370. <a href="/">link</a>
  371. <a href="/">full navigation</a>
  372.  
  373.  
  374. </div>
  375. </div>
  376. <!--TAB THREE ENDS HERE-->
  377. </div>
  378. </div>
  379. <!--TAB CONTENT ENDS HERE-->
  380.  
  381.  
  382.  
  383.  
  384.  
  385. <!--TAB TITLES START HERE-->
  386. <div class="tabcontain">
  387. <ul class="tabs">
  388. <li><a href="#view1">about me</a></li>
  389. <li><a href="#view2">interests</a></li>
  390. <li><a href="#view3">navigation</a></li>
  391. </ul>
  392. </div>
  393. <!-- TAB TITLES END HERE-->
  394.  
  395.  
  396.  
  397. <!--CREDIT, DO NOT TOUCH-->
  398. <div class="credit">
  399. <a href="http://evansyhelp.tumblr.com/tagged/eh: theme">eh</a>
  400. </div>
  401.  
  402. </div>
  403. </body>
  404. </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!