API tools faq
paste
Advertisement
zetaofrp

Rockstar

zetaofrp
May 27th, 2016
674
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.88 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Title</title>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5.  
  6. <!-- A page theme by Zetaofrp. The header image is 450x160 and all the other images are 270x160. Please don't remove credit or use as a base or do anything else mean. -->
  7.  
  8. <style>
  9.  
  10. ::-webkit-scrollbar {width: 5px; height: 3px; background: #222;}
  11. ::-webkit-scrollbar-thumb {background-color:#111 ;}
  12.  
  13. * {
  14. box-sizing:border-box;
  15. margin:0;
  16. padding:0;
  17. }
  18.  
  19. body {
  20. background:#000;
  21. font-family:"Proxima Nova", "Arial Nova", Arial, Sans-serif;
  22. color:#eee;
  23. font-size:11px;
  24. letter-spacing:0.5px;
  25. line-height:1.4em;
  26. }
  27.  
  28. .container {
  29. position:relative;
  30. top:50%;
  31. transform:translateY(-50%);
  32. height:640px;
  33. width:990px;
  34. margin: 0 auto;
  35. background-color:#222;
  36. }
  37.  
  38. .header {
  39. width:450px;
  40. height:160px;
  41. position:absolute;
  42. left:270px;
  43. overflow:Hidden;
  44. }
  45.  
  46. .body {
  47. width:450px;
  48. height:480px;
  49. position:absolute;
  50. top:160px;
  51. left:270px;
  52. padding:15px;
  53. overflow-x:hidden;
  54. overflow-y:scroll;
  55. }
  56.  
  57. h1, h2, h3 {
  58. text-align:center;
  59. text-transform:uppercase;
  60. font-family:"Proxima Nova", "Arial Nova", Arial, Sans-serif;
  61. padding:10px;
  62. color:#eee;
  63. letter-spacing:2px;
  64. background:#111;
  65. text-shadow:1.5px 1.5px #555;
  66. box-shadow:2px 2px #333;
  67. margin:20px 0;
  68. line-height:1.2em;
  69. }
  70.  
  71. h1 {
  72. font-size:30px;
  73. margin-top:0;
  74. line-height:1.2em;
  75. }
  76.  
  77.  
  78. h3 {
  79. background:none;
  80. box-shadow:None;
  81. text-shadow:1px 1px #555;
  82. margin-bottom:10px;
  83. }
  84.  
  85. p {
  86. margin:10px;
  87. }
  88.  
  89. ol, ul {
  90. margin-left:25px;
  91. }
  92.  
  93. a {
  94. color:#aaa;
  95. text-decoration:none;
  96. text-transform:uppercase;
  97. transition:color 0.5s;
  98. }
  99.  
  100. a:hover {
  101. color:#fff;
  102. }
  103.  
  104. blockquote {
  105. border-left:1px solid #111;
  106. margin-left:10px;
  107. }
  108.  
  109.  
  110. .leftside, .rightside {
  111. position:absolute;
  112. top:0;
  113. }
  114.  
  115. .leftside {
  116. left:0;
  117. }
  118.  
  119. .rightside {
  120. right:0;
  121. }
  122.  
  123. .leftside img, .rightside img {
  124. display:block;
  125. }
  126.  
  127. .statgroup {
  128. margin:15px 0;
  129. }
  130.  
  131. .stat {
  132. position:relative;
  133. clear:both;
  134. margin:5px 0;
  135. }
  136.  
  137. .stat:after {
  138. visibility: hidden;
  139. display: block;
  140. font-size: 0;
  141. content: " ";
  142. clear: both;
  143. height: 0;
  144. }
  145.  
  146. .l {
  147. float:left;
  148. width:100px;
  149. text-align:right;
  150. font-weight:bold;
  151. text-transform:uppercase;
  152. }
  153.  
  154. .r {
  155. float:right;
  156. width:308px;
  157. }
  158.  
  159. .links {
  160. font-family:arial;
  161. text-align:center;
  162. background:#1a1a1a;
  163. padding:8px;
  164. }
  165.  
  166. .links a {
  167. display:inline-block;
  168. padding:0 5px;
  169. }
  170.  
  171. .navigation {
  172. position:absolute;
  173. width:100px;
  174. right:-110px;
  175. bottom:-4px;
  176. }
  177.  
  178. .navigation a {
  179. text-transform:lowercase;
  180. font-size:10px;
  181. color:#666;
  182. }
  183. </style>
  184. </head>
  185.  
  186. <body>
  187.  
  188. <div class="container">
  189. <div class="header">
  190. <img src="http://placehold.it/450x160">
  191. </div>
  192. <div class="body">
  193. <h1>Name</h1>
  194.  
  195. <div class="statgroup">
  196. <div class="stat"><span class="l">Name:</span><span class="r">Character Name Here</span></div>
  197. <div class="stat"><span class="l">Age:</span><span class="r">Age Here</span></span></div>
  198. <div class="stat"><span class="l">Gender:</span><span class="r">Gender Here</span></span></div>
  199. <div class="stat"><span class="l">Occupation:</span><span class="r">Occupation Here</span></div>
  200. <div class="stat"><span class="l">Faceclaim:</span><span class="r">Faceclaim Here</span></div>
  201.  
  202. </div>
  203.  
  204.  
  205. <div class="links"><a href="/">LINK 1</a> &#9671; <a href="/">LINK 2</a> &#9671; <a href="/">LINK 3</a> &#9671; <a href="/">LINK 4</a> </div>
  206.  
  207.  
  208. <p>This is a character page theme inspired by character aesthetic posts! The top bar image is 450x160px, and the eight side images are 270x160px. </p>
  209.  
  210. <h2>Header Level 2</h2>
  211.  
  212. <ol>
  213. <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  214. <li>Aliquam tincidunt mauris eu risus.</li>
  215. </ol>
  216.  
  217. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
  218.  
  219. <h3>Header Level 3</h3>
  220.  
  221. <ul>
  222. <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  223. <li>Aliquam tincidunt mauris eu risus.</li>
  224. </ul>
  225.  
  226. </div>
  227. <div class="leftside">
  228. <img src="http://placehold.it/270x160">
  229. <img src="http://placehold.it/270x160">
  230. <img src="http://placehold.it/270x160">
  231. <img src="http://placehold.it/270x160">
  232. </div>
  233. <div class="rightside">
  234. <img src="http://placehold.it/270x160">
  235. <img src="http://placehold.it/270x160">
  236. <img src="http://placehold.it/270x160">
  237. <img src="http://placehold.it/270x160">
  238. </div>
  239. <div class='navigation'>
  240. <a href="/">home</a><br>
  241. <a href="/ask">ask</a><br>
  242. <a href="http://zetaofrp.tumblr.com">credit</a><br>
  243. </div>
  244. </div>
  245.  
  246. </body>
  247. </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!