API tools faq
paste
HendrixRPH

Stacked Tabs Page Theme

HendrixRPH
Jul 17th, 2015
786
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- Stacked Tabs theme by hendrixrph. Feel free to edit colors and fonts and everything, but don't redistribute or remove credit. Thank you! -->
  6.  
  7. <title>Title</title>
  8.  
  9. <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700,600' rel='stylesheet' type='text/css'>
  10. <link rel="shortcut icon" href="{Favicon}">
  11.  
  12. <style>
  13. * {
  14. margin:0;
  15. padding:0;
  16. box-sizing:border-box;
  17. }
  18.  
  19. ::-webkit-scrollbar {
  20. width: 3px;
  21. }
  22. ::-webkit-scrollbar-track {
  23. background-color: #fff;
  24. }
  25. ::-webkit-scrollbar-thumb {
  26. background-color: #aaa;
  27. }
  28.  
  29. html, body {
  30. height:100%;
  31. }
  32.  
  33. body {
  34. background-color: #ffffff;
  35. background-image: url(http://www.transparenttextures.com/patterns/axiom-pattern.png);
  36. /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  37. }
  38.  
  39. .header {
  40. margin-top:10px;
  41. }
  42.  
  43. h1 {
  44. text-align:center;
  45. font-size:60px;
  46. font-family:"raleway",arial,helvetica,sans-serif;
  47. padding:10px;
  48. color:#666;
  49. font-weight:normal;
  50. }
  51.  
  52. .header ul {
  53. width:300px;
  54. margin:0 auto;
  55. list-style-type:none;
  56. height:35px;
  57. text-align:center;
  58. margin-top:-5px;
  59. }
  60.  
  61. .header ul li {
  62. display:inline-block;
  63. width:90px;
  64. text-align:center;
  65. }
  66.  
  67. .header ul li a {
  68. font-family:"Raleway",Arial,Helvetica,sans-serif;
  69. text-decoration:none;
  70. color:#333;
  71. transition:0.5s all;
  72. }
  73.  
  74. .header ul li a:hover {
  75. color:#aaa;
  76. letter-spacing:2px;
  77. }
  78.  
  79. .header ul::after {
  80. content:'';
  81. display:none;
  82. clear:both;
  83. }
  84.  
  85. .tabs {
  86. max-width:900px;
  87. margin:0 auto;
  88. }
  89.  
  90. .tab [type=radio] {
  91. display: none;
  92. }
  93.  
  94. .tab {
  95. transition:0.5s all;
  96. }
  97.  
  98. .tab:nth-child(odd) {
  99. background-color:#999;
  100. }
  101.  
  102. .tab:nth-child(even) {
  103. background-color:#aaa;
  104. }
  105.  
  106. .tab label {
  107. text-align:center;
  108. height:50px;
  109. display:block;
  110. font-size:40px;
  111. font-family:"Raleway",Arial,Helvetica,sans-serif;
  112. padding-top:7px;
  113. color:#fff;
  114. text-shadow:0 0 7px rgba(0,0,0,0.3);
  115. border-bottom:1px solid rgba(255,255,255,0.3);
  116. }
  117.  
  118. .content {
  119. height:0;
  120. overflow:hidden;
  121. transition: height 1s;
  122. background-color:#fff;
  123. color:#555;
  124. font-family:helvetica,arial,sans-serif;
  125. font-weight:100;
  126. padding:0px 10px;
  127. box-sizing:border-box;
  128. font-size:12px;
  129. line-height:1.35em;
  130. }
  131.  
  132. .picwrapper {
  133. margin:15px auto;
  134. text-align:center;
  135. }
  136.  
  137. .pics {
  138. display:inline-block;
  139. padding:15px;
  140. border:1px solid #ccc;
  141. height:125px;
  142. box-sizing:content-box;
  143. }
  144.  
  145. .pics img {
  146. display:inline-block;
  147. height:125px;
  148. opacity:0.7;
  149. transition:0.5s all;
  150. }
  151.  
  152. .pics img:hover {
  153. opacity:1;
  154. }
  155.  
  156. .content p {
  157. margin-top:10px;
  158. }
  159.  
  160. .content p:last-child {
  161. margin-bottom:10px;
  162. }
  163.  
  164. .content ul, .content ol {
  165. margin-left:20px;
  166. margin-top:10px;
  167. }
  168.  
  169. .content a {
  170. text-decoration:none;
  171. color:#999;
  172. transition:0.5s all;
  173. }
  174.  
  175. .content a:hover {
  176. color:#666;
  177. }
  178.  
  179. [type=radio]:checked ~ label ~ .content {
  180. height:300px;
  181. transition:height 1s;
  182. overflow-y:scroll;
  183. }
  184.  
  185. .credit {
  186. display:block;
  187. position:fixed;
  188. bottom:10px;
  189. right:10px;
  190. background-color:#eee;
  191. font-family:"Raleway",Arial,Helvetica,sans-serif;
  192. font-size:11px;
  193. text-decoration:none;
  194. color:#555;
  195. padding:5px;
  196. transition:0.5s all;
  197. }
  198.  
  199. .credit:hover {
  200. letter-spacing:2px;
  201. }
  202.  
  203. </style>
  204.  
  205. </head>
  206. <body>
  207.  
  208. <div class="header">
  209. <h1>Stacked Tabs</h1>
  210. <ul>
  211. <li><a href="#">Link 1</a></li>
  212. <li><a href="#">Link 2</a></li>
  213. <li><a href="#">Link 3</a></li>
  214. </ul>
  215. </div>
  216.  
  217. <div class="tabs">
  218.  
  219. <!-- BEGIN COPY/PASTE -->
  220. <div class="tab">
  221. <input type="radio" id="tab-1" name="tab-group-1" checked> <!-- Change the id to the number tab it is, such as tab-3 or tab-4. Make sure no two tabs have the same id. -->
  222. <label for="tab-1">Tab 1</label> <!-- Change the "for" attribute to the id you put in the input tag above. -->
  223.  
  224. <div class="content">
  225. <!-- If you want to put pictures in this tab, paste the code for it here. You can find the code in tab 2. -->
  226. <p>I'm the Stacked Tabs theme. I'm not very complicated, but I have a lot of uses! If you use me, you're free to change the colors, images, fonts, whatever you want, as long as the credit remains in place and you don't redistribute me as your own. </p>
  227. <p>Want to see how formatting looks here? I'll give some examples. <b>Bolded,</b> <i>italicized,</i> <del>strikethrough</del>, <big>big,</big> <small>small</small>, <a href="#">a link,</a> <sup>superscript</sup> and <sub>subscript.</sub></p>
  228. <ul>
  229. <li>This is</li>
  230. <li>An unordered</li>
  231. <li>List!</li>
  232. </ul>
  233. <ol>
  234. <li>This is</li>
  235. <li>An ordered</li>
  236. <li>List!</li>
  237. </ol>
  238. <p>Make sure to keep all your paragraph text in p tags. In the next couple of tags I'm going to give some examples of how this theme can be used.</p>
  239. <p>You'll see images used in the other tabs. Images are automatically resized to be 125px tall, so make sure the images you use are that size or bigger. Also, if you're curious, the fonts used are Raleway and Arial/Helvetica (depending on the fonts on your computer).</p>
  240. </div>
  241. </div>
  242. <!-- END COPY/PASTE -->
  243.  
  244. <!-- BEGIN COPY/PASTE -->
  245. <div class="tab">
  246. <input type="radio" id="tab-2" name="tab-group-1"> <!-- Change the id to the number tab it is, such as tab-3 or tab-4. Make sure no two tabs have the same id. -->
  247. <label for="tab-2">Tab 2</label> <!-- Change the "for" attribute to the id you put in the input tag above. -->
  248.  
  249. <div class="content">
  250. <!-- Begin pictures. If you don't want a picture box, delete this. -->
  251. <div class="picwrapper"><div class="pics">
  252. <img src=""> <!-- The images inside your picture box. I recommend anywhere from 1 to 3 images. -->
  253. </div></div>
  254. <!-- End pictures -->
  255.  
  256. <p>Copy and paste as many of these tabs as you need. I recommend copying/pasting this one instead of tab 1.</p>
  257. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget urna tincidunt, egestas turpis sit amet, aliquam est. Vivamus pellentesque, nibh vitae congue commodo, odio elit pharetra leo, ut vehicula sem tortor id felis. Quisque dolor urna, gravida a ante quis, suscipit ultrices purus. Vivamus ultricies, tellus vel tristique facilisis, risus urna ultricies lorem, vitae pulvinar augue lacus quis dui. Praesent vitae elementum ipsum, tristique lobortis lorem. Vivamus aliquet congue nunc at aliquam. Duis rutrum, velit a aliquam varius, tortor arcu euismod elit, at imperdiet ex dui ac est. Proin sed purus et mi venenatis viverra quis non nunc. Quisque id odio ultrices, faucibus eros ut, bibendum ipsum. Fusce molestie accumsan odio id suscipit. Aenean risus neque, vulputate sit amet consectetur non, ultrices in massa. Nunc ultricies gravida tincidunt. Sed ipsum tortor, vestibulum quis lacinia eget, vehicula vitae erat. In a sollicitudin lorem.</p>
  258.  
  259. </div>
  260. </div>
  261. <!-- END COPY/PASTE -->
  262.  
  263.  
  264. <!-- DO NOT PASTE TABS BEYOND THIS POINT -->
  265. </div>
  266.  
  267. <a href="http://hendrixrph.tumblr.com" class="credit">hendrixrph</a>
  268.  
  269. </body>
  270. </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!