API tools faq
paste
HendrixRPH

Sky Page Theme

HendrixRPH
Jul 18th, 2015
1,697
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7.  
  8. <!--
  9.  
  10. Sky theme made by hendrixrph. Do not redistribute or remove credit, but you are free to play with colors and fonts and whatever you want.
  11.  
  12. QUICK TIPS:
  13.  
  14. 1. If you want to make the font size for the character name smaller on one character but not the others, add the following code inside the <div class="name"> tag on that tab:
  15.  
  16. style="font-size:SIZEYOUWANTpx"
  17.  
  18. For example: <div class="name" style="font-size:30px">Name McVeryLongName</div>
  19.  
  20.  
  21. 2, Theoretically you can have any number of tabs, but 24 or less is ideal. 25+ will look okay in chrome, but bad in firefox and ie.
  22.  
  23. -->
  24.  
  25. <title>Your Title Here</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28.  
  29. <style>
  30.  
  31. ::-webkit-scrollbar {
  32. width:3px;
  33. height:5px;
  34. }
  35. ::-webkit-scrollbar-track {
  36. background-color: #f6f9fb;
  37. }
  38. ::-webkit-scrollbar-thumb {
  39. background-color: #BCC5CC;
  40. }
  41.  
  42. * {
  43. padding:0;
  44. margin:0;
  45. box-sizing:border-box;
  46. }
  47.  
  48. body {
  49. background-image: url(http://www.transparenttextures.com/patterns/fabric-of-squares.png);
  50. }
  51.  
  52. .header {
  53. width:600px;
  54. clear:both;
  55. text-align:center;
  56. height:9px;
  57. margin:10px auto;
  58. color:#333;
  59. font-size:12px;
  60. font-family:Helvetica,Arial,sans-serif;
  61. font-weight:100;
  62. }
  63.  
  64. .header div {
  65. border-right:1px solid #ccc;
  66. }
  67.  
  68. .header div:last-of-type {
  69. border-right:none;
  70. }
  71.  
  72. .link {
  73. width:17.5%;
  74. float:left;
  75. }
  76.  
  77. .link a {
  78. color:#999;
  79. text-decoration:none;
  80. transition:all 0.5s;
  81. }
  82.  
  83. .link a:hover {
  84. color:#79A3BD;
  85. letter-spacing:1px;
  86. }
  87.  
  88. .title {
  89. width:30%;
  90. float:left;
  91. color:#5299cc;
  92. }
  93.  
  94. .wrapper {
  95. min-width:700px;
  96. max-width:1000px;
  97. height:600px;
  98. margin:0 auto;
  99. margin-top:20px;
  100. position:relative;
  101. font-family:helvetica,arial,sans-serif;
  102. font-weight:100;
  103. }
  104.  
  105. .tabs {
  106. height:600px;
  107. width:20%;
  108. clear:both;
  109. overflow:auto;
  110. }
  111.  
  112. .tab {
  113. width:100%;
  114. }
  115.  
  116. .tab label {
  117. display:block;
  118. width:100%;
  119. background:#f6f9fb;
  120. border-bottom:#BCC5CC 1px solid;
  121. border-left:#BCC5CC 1px solid;
  122. text-align:center;
  123. font-size:12px;
  124. padding:5px;
  125. color:#79A3BD;
  126. }
  127.  
  128. .tabs .tab:first-of-type label {
  129. border-top-left-radius:10px;
  130. border-top:#BCC5CC 1px solid;
  131. }
  132.  
  133. .tabs .tab:last-of-type label {
  134. border-bottom-left-radius:10px;
  135. }
  136.  
  137. .tab [type=radio] {
  138. display: none;
  139. }
  140.  
  141. .content {
  142. position:absolute;
  143. top: 0px;
  144. left: 20%;
  145. right: 0;
  146. bottom: 0;
  147. padding: 20px;
  148. width:80%;
  149. background:white;
  150. opacity:0;
  151. clear:both;
  152. transition:opacity 1.5s ease;
  153. }
  154. [type=radio]:checked ~ label {
  155. background: #fff;
  156. color:#52ADCC;
  157. }
  158. [type=radio]:checked ~ label ~ .content {
  159. z-index: 1;
  160. opacity:1;
  161. transition:opacity 1s ease;
  162. }
  163.  
  164. .portrait {
  165. width:40%;
  166. background-size:cover;
  167. background-position:center;
  168. height:600px;
  169. position:absolute;
  170. top:0;
  171. left:0;
  172. border:1px solid #BCC5CC;
  173. border-right:none;
  174. }
  175.  
  176. .name {
  177. position:absolute;
  178. bottom:0;
  179. left:0;
  180. width:40%;
  181. padding:10px;
  182. font-size:40px; /* If your names are too long for the portrait box, you can lower the font size here. */
  183. font-weight:bold;
  184. font-style:italic;
  185. text-transform:uppercase;
  186. text-shadow:0 0 15px #79A3BD, 0 0 5px #406982;
  187. color:white;
  188.  
  189. }
  190.  
  191. .bio {
  192. width:60%;
  193. background:#fff;
  194. height:600px;
  195. position:absolute;
  196. top:0;
  197. left:40%;
  198. padding:10px;
  199. border:1px solid #BCC5CC;
  200. border-left:none;
  201. font-size:12px;
  202. overflow:auto;
  203. color:#555;
  204. }
  205.  
  206. .bio h2 {
  207. text-align:right;
  208. font-weight:100;
  209. border-bottom:1px solid #BCC5CC;
  210. margin-bottom:10px;
  211. padding-bottom:2px;
  212. color:#5299cc;
  213. text-shadow:0 0 5px #a8d6e5;
  214. font-size:20px;
  215. letter-spacing:1px;
  216. text-transform:lowercase;
  217. }
  218.  
  219. .bio p {
  220. text-indent:15px;
  221. margin-bottom:5px;
  222. line-height:1.35em;
  223. }
  224.  
  225. .bio blockquote {
  226. width:80%;
  227. margin:10px auto;
  228. text-align:center;
  229. padding:20px;
  230. border:1px solid #BCC5CC;
  231. text-transform:lowercase;
  232. font-style:italic;
  233. background:#f6f9fb;
  234. color:#79A3BD;
  235. line-height:1.35em;
  236. text-shadow:0 0 5px #bdefff;
  237. }
  238.  
  239. .bio b, .bio strong {
  240. color:#52ADCC;
  241. }
  242.  
  243. .bio a {
  244. color:#5299cc;
  245. text-decoration:none;
  246. transition:0.5s all;
  247. }
  248.  
  249. .bio a:hover {
  250. color:#BCC5CC;
  251. }
  252.  
  253. .bio ul, .bio ol {
  254. padding-left:30px;
  255. margin-bottom:5px;
  256. line-height:1.35em;
  257. }
  258.  
  259. .bio img {
  260. padding:20px;
  261. border:1px solid #BCC5CC;
  262. background:#f6f9fb;
  263. display:block;
  264. margin:10px auto;
  265. max-width:80%;
  266. }
  267.  
  268. </style>
  269.  
  270. </head>
  271.  
  272. <body>
  273.  
  274. <div class="header">
  275. <!-- Sadly, there must be 4 links plus a title to look right, unless you know code enough to play with the percentage widths. If you want to remove some of them without throwing off the layout, just have no text within the <a> tag.-->
  276. <div class="link"><a href="#">link 1</a></div>
  277. <div class="link"><a href="#">link 2</a></div>
  278. <div class="title">sky page theme</div>
  279. <div class="link"><a href="#">link 3</a></div>
  280. <div class="link"><a href="http://hendrixrph.tumblr.com">theme</a></div>
  281. </div>
  282.  
  283. <div class="wrapper">
  284. <div class="tabs">
  285.  
  286. <!-- BEGIN COPY/PASTE -->
  287. <div class="tab">
  288. <input type="radio" id="tab-1" name="tab-group-1" checked> <!-- Make sure to change the id of this to something unique, or else the tabs won't work! I recommend the tab number, such as tab-3 or tab-4. NOTE: THE FIRST TAB IS THE ONLY ONE THAT SHOULD HAVE "checked" IN IT! -->
  289. <label for="tab-1">Tab One</label> <!-- Tab name. Change the for attribute to the id of the input above. -->
  290.  
  291. <div class="content">
  292. <div class="portrait" style="background-image:url('https://pbs.twimg.com/media/BxuRdHlIIAAPcCX.jpg')"> <!-- Put the URL of your image between the first and last single quote in the "style" attribute. Should look like this: style="background-image:url('YOURIMAGEURLHERE');" -->
  293. </div> <!-- End portrait image -->
  294. <div class="name">Name</div> <!-- Character name (or whatever text you want to go over the picture) goes here. -->
  295. <div class="bio">
  296. <h2>Heading</h2>
  297. <p>Theoretically you can have any number of tabs, but 24 or less is ideal. 25+ will look okay in chrome, but bad in firefox and ie.</p>
  298. <p><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>
  299. <blockquote>Blockquote</blockquote>
  300. </div><!-- end bio -->
  301. </div> <!-- end content -->
  302. </div> <!-- end tab -->
  303. <!-- END COPY/PASTE -->
  304.  
  305.  
  306.  
  307. <!-- BEGIN COPY/PASTE -->
  308. <div class="tab">
  309. <input type="radio" id="tab-2" name="tab-group-1"> <!-- Make sure to change the id of this to something unique, or else the tabs won't work! I recommend the tab number, such as tab-3 or tab-4. -->
  310. <label for="tab-2">Tab Two</label> <!-- Tab name. Change the for attribute to the id of the input above. -->
  311.  
  312. <div class="content">
  313. <div class="portrait" style="background-image:url('http://resources0.news.com.au/images/2014/11/04/1227112/444260-335fa27a-63de-11e4-8f83-4f43733686cd.jpg')"> <!-- Put the URL of your image between the first and last single quote in the "style" attribute. Should look like this: style="background-image:url('YOURIMAGEURLHERE');" -->
  314. </div>
  315. <div class="name">Name</div> <!-- Character name (or whatever text you want to go over the picture) goes here -->
  316. <div class="bio">
  317. Bio info goes here
  318. </div> <!-- end bio -->
  319. </div> <!-- end content -->
  320. </div> <!-- end tab -->
  321. <!-- END COPY/PASTE -->
  322.  
  323.  
  324.  
  325.  
  326. </div>
  327. </div>
  328.  
  329. </body>
  330.  
  331. </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!