API tools faq
paste
Advertisement
MystiqueAquanian

Characters Page by rpthemehelper

MystiqueAquanian
Dec 24th, 2016
180
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. MADE BY RPTHEME-HELPER
  6. http://rptheme-helper.tumblr.com/
  7. http://nutty-themes.tumblr.com/
  8. CHARACTER MASTERLIST #002
  9. DO NOT REMOVE THE CREDIT OR CLAIM AS YOUR OWN
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <meta name="description" content="" />
  22.  
  23. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  26. <link href='http://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
  27. <link href='http://fonts.googleapis.com/css?family=Exo:300,400,700' rel='stylesheet' type='text/css'>
  28.  
  29. <style type="text/css">
  30.  
  31. /* Reset ----------------------------- */
  32.  
  33. body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
  34.  
  35. /* Scrollbar ----------------------------- */
  36.  
  37. ::-webkit-scrollbar {width: 8px; height: 12px; background: #f3f3f3;}
  38. ::-webkit-scrollbar-thumb:vertical {height: 12px; background: #FAFAFA; border: 1px solid #031634; border-radius: 12px;}
  39.  
  40. /* General ----------------------------- */
  41.  
  42. body {
  43. background: #f3f3f3;
  44. font-family: 'Exo', Arial, sans-serif;
  45. color: #0a0a0a;
  46. }
  47.  
  48. a:link, a:active, a:visited {
  49. color: #75A29D;
  50. text-decoration: none;
  51. }
  52.  
  53. a:hover {
  54. color: #517A76;
  55. text-decoration: none;
  56. }
  57.  
  58. b {
  59. color: #2D231E;
  60. text-decoration: none;
  61. }
  62.  
  63. h1 {
  64. font-size: 30px;
  65. font-weight: 400;
  66. text-transform: uppercase;
  67. margin: 10px;
  68. }
  69.  
  70. #hbar {
  71. width: 100%;
  72. padding: 10px 0px;
  73. position: relative;
  74. margin: 40px auto 40px;
  75. text-align: center;
  76. }
  77.  
  78. .hborder {
  79. margin-left: 50px;
  80. width: 400px;
  81. height: 1px;
  82. background: #ADAAAB;
  83. }
  84.  
  85. nav {
  86. position: absolute;
  87. margin-left: 450px;
  88. margin-top: -25px;
  89. }
  90.  
  91. nav a {
  92. position: relative;
  93. display: inline-block;
  94. margin: 15px 20px;
  95. outline: none;
  96. color: #fff;
  97. text-decoration: none;
  98. text-transform: uppercase;
  99. font-weight: 300;
  100. font-size: 16px;
  101. }
  102.  
  103. nav a:hover,
  104. nav a:focus {
  105. outline: none;
  106. }
  107.  
  108. .effect a {
  109. overflow: hidden;
  110. padding: 0 4px;
  111. height: 16px;
  112. }
  113.  
  114. .effect a span {
  115. position: relative;
  116. display: inline-block;
  117. -webkit-transition: -webkit-transform 0.3s;
  118. -moz-transition: -moz-transform 0.3s;
  119. transition: transform 0.3s;
  120. }
  121.  
  122. .effect a span::before {
  123. position: absolute;
  124. top: 100%;
  125. content: attr(data-hover);
  126. font-weight: 700;
  127. -webkit-transform: translate3d(0,0,0);
  128. -moz-transform: translate3d(0,0,0);
  129. transform: translate3d(0,0,0);
  130. }
  131.  
  132. .effect a:hover span,
  133. .effect a:focus span {
  134. -webkit-transform: translateY(-100%);
  135. -moz-transform: translateY(-100%);
  136. transform: translateY(-100%);
  137. }
  138.  
  139. .arrow_box {
  140. position: relative;
  141. margin-top: 0px;
  142. margin-left: 450px;
  143. }
  144.  
  145. .arrow_box:after, .arrow_box:before {
  146. right: 100%;
  147. border: solid transparent;
  148. content: " ";
  149. height: 0;
  150. width: 0;
  151. position: absolute;
  152. pointer-events: none;
  153. }
  154.  
  155. .arrow_box:after {
  156. border-color: rgba(136, 183, 213, 0);
  157. border-right-color: #f3f3f3;
  158. border-width: 20px;
  159. top: 50%;
  160. margin-top: -20px;
  161. }
  162.  
  163. .arrow_box:before {
  164. border-color: rgba(194, 225, 245, 0);
  165. border-right-color: #ADAAAB;
  166. border-width: 21px;
  167. top: 50%;
  168. margin-top: -21px;
  169. }
  170.  
  171. #container {
  172. position: relative;
  173. width: 1266px;
  174. margin: 10px auto;
  175. padding-bottom: 50px;
  176. text-align: center;
  177. }
  178.  
  179. .special {
  180. float: left;
  181. position: relative;
  182. text-align: justify;
  183. width: 400px;
  184. margin: 10px;
  185. background: #f3f3f3;
  186. background-image: url('http://static.tumblr.com/whx9ghv/wj8mr855d/grid12.png');
  187. background-repeat: repeat;
  188. -webkit-border-radius: 20px;
  189. -moz-border-radius: 20px;
  190. border-radius: 20px;
  191. border: 1px solid #DDD;
  192. }
  193.  
  194. .photo {
  195. width: 160px;
  196. margin: -50px 5px 0px 10px;
  197. }
  198.  
  199. .heading {
  200. background: #A1D0BE;
  201. -webkit-border-top-right-radius: 20px;
  202. -webkit-border-top-left-radius: 20px;
  203. -moz-border-radius-topleft: 20px;
  204. -moz-border-radius-topright: 20px;
  205. border-top-right-radius: 20px;
  206. border-top-left-radius: 20px;
  207. height: 50px;
  208. margin: 0px;
  209. padding: 30px 10px 0px 10px;
  210. text-align: right;
  211. }
  212.  
  213. h3 {
  214. display: inline-block;
  215. width: 180px;
  216. text-transform: uppercase;
  217. margin: 20px;
  218. font-size: 18px;
  219. color: #FAFAFA;
  220. text-shadow: 0 0 25px #fff;
  221. }
  222.  
  223. .profile {
  224. font-size: 9px;
  225. width: 160px;
  226. margin: 10px;
  227. text-transform: uppercase;
  228. text-align: right;
  229. }
  230.  
  231. .profile span {
  232. font-size: 10px;
  233. display: block;
  234. text-align: left;
  235. background: #FAFAFA;
  236. margin: 3px 0px;
  237. }
  238.  
  239. .bio {
  240. width: 205px;
  241. margin: 15px 10px 25px 5px;
  242. height: 280px;
  243. padding-right: 5px;
  244. float: right;
  245. font-family: 'Vollkorn', Arial, sans-serif;
  246. font-size: 11px;
  247. color: #0a0a0a;
  248. text-align: left;
  249. overflow: auto;
  250. }
  251.  
  252. .bio::-webkit-scrollbar {width: 4px; height: 12px; background: #FAFAFA;}
  253. .bio::-webkit-scrollbar-thumb:vertical {height: 12px; background: #FAFAFA; border: 1px solid #031634; border-radius: 12px;}
  254.  
  255. </style>
  256. </head>
  257.  
  258.  
  259. <body>
  260.  
  261. <div id="container">
  262.  
  263. <div id="hbar">
  264. <div class="hborder"></div><div class="arrow_box"></div>
  265. <nav class="effect" id="effect">
  266. <a href="/"><span data-hover="Loading Main Page...">//: Name of Roleplay</span></a>
  267. <a href="http://tumblr.com/dashboard"><span data-hover="// Dashboard">//: Dashboard</span></a>
  268. <a href="/"><span data-hover="// Link 1">//: Link 1</span></a>
  269. <a href="/"><span data-hover="// Link 2">//: Link 2</span></a>
  270. <a href="http://rptheme-helper.tumblr.com/"><span data-hover="// Credit">//: Credit</span></a>
  271. </nav>
  272. </div>
  273.  
  274.  
  275. <div class="special">
  276. <div class="heading"><h3>// Character Name</h3></div>
  277. <div class="bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum. Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <br><br>Vestibulum dui orci, volutpat vitae pharetra id, accumsan non quam. Morbi risus nisl, pellentesque eget posuere eu, elementum vitae orci. In consequat tellus blandit dui elementum lacinia. Curabitur blandit, libero et sollicitudin pharetra, nulla mi pharetra eros, eget iaculis lacus sem in quam. Suspendisse potenti. Curabitur sit amet porttitor elit. Mauris sollicitudin velit non sapien dapibus ut consectetur nulla tincidunt. Etiam nec velit nec nulla condimentum viverra. Donec eu risus ac urna pulvinar faucibus quis sit amet lacus. Sed a commodo justo. Duis bibendum, orci ut vestibulum pellentesque, purus turpis fermentum ipsum, non dignissim sapien sem a velit. Donec vestibulum placerat ornare. Vestibulum odio justo, rutrum vitae ornare in, faucibus eget velit. Pellentesque consequat venenatis quam. Nulla hendrerit eleifend enim, nec bibendum nisi malesuada eu. Curabitur at mi nisi, vel aliquet felis. Sed sit amet tellus at arcu laoreet feugiat. Pellentesque vehicula vestibulum turpis eget mattis. </div>
  278. <img src="http://media.tumblr.com/96ddb43a1b76bf8fec5d08e247c3f138/tumblr_inline_mrabb5oBkW1qz4rgp.png" title="" class="photo"/>
  279. <div class="profile"><span>//: Codename</span> Ruby<span>//: Age</span> Twenty Six<span>//: Face Claim</span> Katie Cassidy<span>//: Member Group</span> Demon</div>
  280. </div>
  281.  
  282.  
  283.  
  284. <!-- Start of Character -->
  285. <div class="special">
  286. <div class="heading"><h3>// Character Name</h3></div>
  287. <div class="bio">Text Here</div>
  288. <img src="Image-URL-Here" title="" class="photo"/>
  289. <div class="profile"><span>//: Codename</span> Name Here<span>//: Age</span> Age Here<span>//: Face Claim</span> Celebrity Here<span>//: Member Group</span> Enter Here</div>
  290. </div>
  291. <!-- End of Character -->
  292.  
  293.  
  294.  
  295. </div>
  296.  
  297. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  298. <script type="text/javascript" src="http://static.tumblr.com/whx9ghv/V0zm0dwxa/jquery.easing.1.3.js"></script>
  299. <script src="http://static.tumblr.com/whx9ghv/6z9mam102/jquery.freetile.js"></script>
  300.  
  301. <script>
  302. $('#container').freetile();
  303. </script>
  304.  
  305.  
  306.  
  307.  
  308. </body>
  309. </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!