API tools faq
paste
Advertisement
luciam

About #1

luciam
Jul 12th, 2014
9,232
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.62 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------------------------
  2. ABOUT + FAQ #1 BY: http://robbarya.tumblr.com (INSTRUCTIONS IN CODE)
  3. ...................................................
  4. ...................................................
  5.  
  6. TERMS OF USE:
  7. - DON'T CLAIM AS YOUR OWN
  8. - DON'T REMOVE OR MOVE THE CREDIT
  9. - DON'T REDISTRIBUTE
  10. - DON'T USE AS A BASE. YOU CAN EDIT IT AS MUCH AS YOU LIKE AS LONG AS THE CREDIT IS STILL IN ITS ORIGINAL PLACE- Thank you
  11. --------------------------------------------->
  12. <html>
  13. <head>
  14. <title>About</title><!---Change the browser title----->
  15. <link rel="shortcut icon" href="{Favicon}" />
  16.  
  17.  
  18. <style type="text/css">
  19.  
  20.  
  21. ::-webkit-scrollbar-thumb:vertical {
  22. background-color: #8fd9d3; /*Change the scrollbar color*/
  23. height:6px;
  24. }
  25. ::-webkit-scrollbar-corner {
  26. background-color: transparent;
  27. }
  28.  
  29. ::-webkit-scrollbar {
  30. margin-left: 5px;
  31. height:5px;
  32. width:5px;
  33. }
  34.  
  35.  
  36. * {
  37. box-sizing: border-box;
  38. -moz-box-sizing: border-box;
  39. -webkit-box-sizing: border-box;
  40. }
  41. body {
  42. background-color: #eee;/*Change the background color*/
  43. color: #ccc; /*Change the text color*/
  44. font-family: Calibri;
  45. font-size: 10px;
  46. letter-spacing: 0.2em;
  47. }
  48.  
  49.  
  50. .titulo {
  51. color: #d1d1d1;/*Change the title color*/
  52. z-index: 2;
  53. margin-top: 0px;
  54. width: 500px;
  55. height: 50px;
  56. line-height: 50px;
  57. font-family: Century Gothic, calibri;
  58. font-size: 13px;
  59. font-weight: bold;
  60. text-transform: uppercase;
  61. text-align:center;
  62. letter-spacing: 0.4em;
  63. }
  64.  
  65.  
  66. .imagen {
  67. height: 100px;
  68. width: 100px;
  69. border:solid 10px #ffffff;/*Change the image border color*/
  70. margin-bottom: 1px;
  71. }
  72.  
  73. .imagen:hover {
  74. border-color: #8fd9d3;/*Change the image border hover color*/
  75. }
  76.  
  77. .all {
  78. margin:130px auto;
  79. width: 500px;
  80. }
  81.  
  82. .tagslinks {
  83. margin-top: 0;
  84. }
  85.  
  86. .tagslinks ul {
  87. padding: 0;
  88. list-style-type: none;
  89. }
  90.  
  91. .tagslinks ul li a {
  92. line-height: 15px;
  93. letter-spacing: 0.2em;
  94. font-size: 8px;
  95. text-decoration:none;
  96. color: #999; /*Change the main links color*/
  97. background-color: #ffffff; /*Change the main links background color*/
  98. width:100px;
  99. padding: 5px;
  100. text-transform: uppercase;
  101. height: 25px;
  102. text-align: center;
  103. display: block;
  104. }
  105.  
  106.  
  107. .tagslinks ul li a:hover {
  108. background-color: #8fd9d3; /*Change the main links background hover color*/
  109. text-align: right;
  110. color: #fff;/*Change the main links hover color*/
  111. }
  112.  
  113.  
  114. .enlaces {
  115. width: 500px;
  116. margin-left: 0px;
  117. margin-top: 10px;
  118. position: absolute;
  119. }
  120.  
  121.  
  122. .link label{
  123. font-size: 8px;
  124. letter-spacing: 2px;
  125. line-height: 15px;
  126. color: #999; /*Change the tabs color*/
  127. background-color: #ffffff; /*Change the tabs background color*/
  128. width:100px;
  129. padding: 5px;
  130. text-transform: uppercase;
  131. height: 25px;
  132. text-align: center;
  133. cursor: pointer;
  134. display: block;
  135. }
  136.  
  137. .link label:hover {
  138. color: #fff; /*Change the tabs hover color*/
  139. background-color: #8fd9d3;/*Change the tabs background hover color*/
  140. text-align: right;
  141. }
  142.  
  143.  
  144. .link a:hover
  145. {text-decoration:underline;}
  146.  
  147. .link [type=radio] {
  148. display: none;
  149. }
  150.  
  151.  
  152.  
  153. [type=radio]:checked ~ label {
  154. z-index: 2;
  155. color: #fff; /*Change the checked tabs background color*/
  156. background-color: #badad7;/*Change the checked tabs color*/
  157. text-align: right;
  158. text-decoration: none!important;
  159. }
  160.  
  161. [type=radio]:checked ~ label ~ .contenido {
  162. z-index: 1;
  163. }
  164.  
  165. .contenido {
  166. background-color: #ffffff; /*Change the content background*/
  167. float:right;
  168. width: 390px;
  169. height: 346px; /*This is the content height*/
  170. padding: 15px;
  171. overflow: auto;
  172. text-align: justify;
  173. position: absolute;
  174. top:-111px;
  175. left:110px;
  176. }
  177.  
  178. .contenido h2 {
  179. color: #d1d1d1; /*Change subtitles color*/
  180. line-height: 13px;
  181. font-family: Century Gothic, calibri;
  182. font-size: 13px;
  183. font-weight: bold;
  184. text-transform: uppercase;
  185. text-align:left;
  186. letter-spacing: 0.2em;
  187. }
  188.  
  189.  
  190. .contenido a {
  191. color: #999; /*Change the links color*/
  192. transition: none;
  193. text-decoration: none;
  194. font-size: 8px;
  195. text-transform: uppercase;
  196. letter-spacing: 0.2em;
  197. }
  198.  
  199. .contenido a:hover {
  200. color: #8fd9d3; /*Change the links hover color*/
  201. }
  202.  
  203. </style>
  204.  
  205. </head>
  206. <body>
  207. <div class="all">
  208.  
  209. <div class="titulo">About</div><!----Change the title---->
  210. <a href="/"><img src= "http://static.tumblr.com/d4tdea8/k9Hn8kl8b/1.jpg" class="imagen"></a><!--------Top image URL here. To get an URL you should previously upload the image on
  211. http://www.tumblr.com/themes/upload_static_file and then copy here the link it gives you, between the "". Make it 80x80px --------->
  212.  
  213. <div class="enlaces">
  214.  
  215.  
  216. <div class="link">
  217. <input type="radio" id="tab-1" name="tab-group-1" checked>
  218. <label for="tab-1">about</label><!----Change the tab title!---->
  219.  
  220. <div class="contenido">
  221.  
  222. <h2>Subtitle 1</h2>
  223. Here write away! You can <a href="/">make a link</a>, a <strong>bolded text</strong>, <em>italic text</em> or a <strike>thing you wanna cross out</strike>.
  224. <br>Make a line jump with <br>
  225. Nunc sed faucibus nulla, sit amet blandit metus. Maecenas id metus nec dui adipiscing egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
  226.  
  227. <h2>Subtitle 2</h2>
  228. Nunc sagittis ipsum tincidunt ipsum sollicitudin, vel mollis purus vulputate. Duis consectetur neque lacinia neque gravida, id semper libero convallis. Suspendisse scelerisque metus ut enim tempus sagittis. Aliquam tincidunt purus sem, in tincidunt tellus imperdiet at. Mauris ut iaculis libero. Etiam et massa dapibus, rutrum dui mattis, laoreet augue. Donec justo quam, congue non scelerisque id, varius vitae urna. Integer ut malesuada est, vitae tempor leo.
  229.  
  230. <h2>Subtitle 3</h2>
  231. Donec lobortis est nec velit fermentum venenatis. Nulla facilisi. Etiam vitae nisl in libero ultrices egestas. Aliquam interdum consequat augue eget fringilla. Nulla lacinia eget lectus quis interdum. Ut est neque, venenatis non sem vitae, ultrices viverra enim. Maecenas tempus non nunc a vulputate. In mattis ipsum ut dignissim adipiscing. In hac habitasse platea dictumst. Vivamus volutpat sem augue, sit amet vestibulum elit pellentesque vel. Mauris sed venenatis odio. Donec varius elit vel velit eleifend, ut molestie arcu mollis. Suspendisse lectus dui, lacinia a risus et, suscipit tincidunt ipsum. Pellentesque ac viverra ante, quis placerat lorem. Fusce tincidunt gravida turpis. Suspendisse vel mi in dui blandit viverra.
  232.  
  233. <h2>Subtitle 4</h2>
  234. Pellentesque porta magna non tincidunt facilisis. Suspendisse a eros in velit tempor venenatis sit amet ut mauris. Pellentesque vitae sapien consequat, vulputate sem egestas, pretium elit. In vitae quam vel ante egestas vehicula a in erat. Sed gravida arcu id pulvinar bibendum. Vestibulum molestie at nisl tristique scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sodales rhoncus adipiscing.
  235.  
  236.  
  237.  
  238. </div>
  239. </div>
  240.  
  241. <div class="link">
  242. <input type="radio" id="tab-2" name="tab-group-1">
  243. <label for="tab-2">message</label><!----Change the tab title!---->
  244.  
  245. <div class="contenido">
  246.  
  247. <h2>Ask me</h2><!----Change the ask title!---->
  248.  
  249. <p><iframe frameborder="0" scrolling="no" width="100%" height="260"
  250.  
  251. src="http://www.tumblr.com/ask_form/URL.tumblr.com"
  252.  
  253. style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  254.  
  255.  
  256.  
  257.  
  258. <!----------THIS IS SUPER IMPORTANT, UP THERE WHERE IT SAYS: URL.TUMBLR.COM WRITE YOUR OWN URL, OTHERWISE THE "THERE'S NOTHING HERE" MESSAGE WILL APPEAR---->
  259.  
  260.  
  261.  
  262.  
  263.  
  264. </div>
  265. </div>
  266.  
  267. <div class="link">
  268. <input type="radio" id="tab-3" name="tab-group-1">
  269. <label for="tab-3">F.A.Q</label><!----Change the tab title!---->
  270.  
  271. <div class="contenido">
  272.  
  273. <h2>question?</h2>
  274. Here goes your answer. Pellentesque porta magna non tincidunt facilisis. Suspendisse a eros in velit tempor venenatis sit amet ut mauris. Pellentesque vitae sapien consequat, vulputate sem egestas, pretium elit. In vitae quam vel ante egestas vehicula a in erat. Sed gravida arcu id pulvinar bibendum. Vestibulum molestie at nisl tristique scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sodales rhoncus adipiscing.
  275. <h2>question?</h2>
  276. Pellentesque porta magna non tincidunt facilisis. Suspendisse a eros in velit tempor venenatis sit amet ut mauris. Pellentesque vitae sapien consequat, vulputate sem egestas, pretium elit. In vitae quam vel ante egestas vehicula a in erat. Sed gravida arcu id pulvinar bibendum. Vestibulum molestie at nisl tristique scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sodales rhoncus adipiscing.
  277. <h2>question?</h2>
  278. Pellentesque porta magna non tincidunt facilisis. Suspendisse a eros in velit tempor venenatis sit amet ut mauris. Pellentesque vitae sapien consequat, vulputate sem egestas, pretium elit. In vitae quam vel ante egestas.
  279.  
  280. </div>
  281. </div>
  282.  
  283. <!----If you want to delete this or add another list delete/copy everything from here----->
  284. <div class="link">
  285. <input type="radio" id="tab-4" name="tab-group-1">
  286. <label for="tab-4">Extra tab</label>
  287.  
  288. <div class="contenido">
  289.  
  290. <h2>Anything else you wanna add?</h2>
  291. If you don't want this tab just delete it!
  292.  
  293.  
  294. </div>
  295. </div>
  296. <!------To here. Make sure you change the tabs numbers from 4 to 5. Keep the tab-group-1 (it's the only one you shouldn't change). Always increase the number if you want to add more tabs-------->
  297.  
  298. <div class="tagslinks">
  299. <ul>
  300. <li><a href="/">home</a></li><!----Change the links here----->
  301. <li><a href="/">link 1</a></li>
  302. <li><a href="/">link 2</a></li>
  303. <li><a href="/">link 3</a></li><!---you don't have to use them all, just delete or add as you want---->
  304.  
  305.  
  306. <li><a href="http://robbarya.tumblr.com">credit</a></li><!----Delete this and you're dead. for real----->
  307.  
  308. </ul>
  309. </div>
  310.  
  311.  
  312.  
  313. </div>
  314. </body>
  315. </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!