API tools faq
paste
Advertisement
dylanohelps

V - Mary's Children

dylanohelps
Apr 5th, 2014
7,094
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. V - MARY'S CHILDREN by DOMINICWRITES
  9. Rules and Regulations:
  10. #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on in so I'd appreciate if you didn't.
  11.  
  12. #2: DO NOT redistribute this theme/page,
  13.  
  14. #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.
  15.  
  16.  
  17.  
  18. ---------------->
  19.  
  20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  21. <head>
  22. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  23.  
  24. <title>{Title}</title>
  25.  
  26. <meta charset="utf-8">
  27.  
  28. <meta name="description" content="{MetaDescription}" />
  29.  
  30. <link rel="shortcut icon" href="{Favicon}" />
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  34.  
  35. <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
  36.  
  37. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>
  38.  
  39. <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  40.  
  41. <script src="http://use.edgefonts.net/londrina-sketch.js"></script>
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  43.  
  44. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  45.  
  46. <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
  47.  
  48.  
  49.  
  50. </head>
  51. <style type="text/css">
  52. body {
  53. margin: 0px;
  54. list-style: none;
  55. background-color: #000000;
  56. font-family: 'Roboto', sans-serif;
  57. font-weight: 300;
  58. font-size: 10px;
  59. color: #877b76;
  60. }
  61.  
  62. a {
  63. text-decoration: none;
  64. color: #0195ab;
  65. }
  66.  
  67. b,i,strong,em {
  68. color: #cbd165;
  69. }
  70.  
  71. ::-webkit-scrollbar-thumb:vertical {
  72. background-color: #877b76;
  73. height: 10px;
  74. }
  75. ::-webkit-scrollbar-thumb:horizontal {
  76. background-color: #877b76;
  77. height: 7px!important;
  78. }
  79. ::-webkit-scrollbar {
  80. background-color: #FFF;
  81. height: 3px;
  82. width: 3px;
  83. }
  84.  
  85. content {
  86. width: 100%;
  87. height: 100%;
  88. overflow: auto;
  89. }
  90.  
  91. #content {
  92. margin: auto;
  93. width: 863px;
  94. height: 100%;
  95. padding: 20px;
  96. background-color: #303030;
  97. margin-bottom: 170px;
  98. }
  99.  
  100. .character {
  101. width: 380px;
  102. height: auto;
  103. background-color: #FFFFFF;
  104. padding: 15px;
  105. margin: 10px;
  106. display: inline-block;
  107. }
  108.  
  109. .character .header {
  110. width: 380px;
  111. height: 120px;
  112. background-color: #202020;
  113. }
  114.  
  115. .column1 {
  116. width: 182px;
  117. height: 240px;
  118. background-color: #202020;
  119. margin-top: 15px;
  120. display: inline-block;
  121. margin-right: 15px;
  122. float: left;
  123. }
  124.  
  125. .column2 {
  126. width: 182px;
  127. height: 240px;
  128. margin-top: 15px;
  129. display: inline-block;
  130. }
  131.  
  132. .name {
  133. display: block;
  134. width: 172px;
  135. height: auto;
  136. padding: 5px;
  137. background-color: #303030;
  138. color: #eee;
  139. font-family: 'cambria';
  140. font-size: 12px;
  141. font-style: italic;
  142. text-align: center;
  143. margin-bottom: 10px;
  144. }
  145.  
  146. .general {
  147. display: block;
  148. height: auto;
  149. }
  150.  
  151. .gen {
  152. border-left: 10px solid #202020;
  153. font-family: 'cambria';
  154. font-size: 8px;
  155. color: #202020;
  156. text-align: left;
  157. text-transform: uppercase;
  158. font-style: italic;
  159. margin-bottom: 3px;
  160. padding-left: 7px;
  161. }
  162.  
  163. .description {
  164. width: 162px;
  165. height: 220px;
  166. padding: 10px;
  167. background-color: #fff;
  168. position: absolute;
  169. overflow: auto;
  170. opacity: 0;
  171. font-family: 'cambria';
  172. font-size: 10px;
  173. font-style: italic;
  174. color: #202020;
  175. -webkit-transition: all 0.2s ease-in;
  176. -moz-transition: all 0.2s ease-in;
  177. -o-transition: all 0.2s ease-in;
  178. -ms-transition: all 0.2s ease-in;
  179. transition: all 0.2s ease-in;
  180. }
  181.  
  182. .description:hover {
  183. opacity: 1;
  184. }
  185.  
  186. .description:first-letter {
  187. float: left;
  188. font-family: 'cambria';
  189. font-size: 24px;
  190. margin-right: 5px;
  191. border: 3px double #eee;
  192. padding: 0px 10px 1px 10px;
  193. font-style: italic;
  194. background-color: #505050;
  195. color: #eee;
  196. }
  197.  
  198. .links {
  199. width: 182px;
  200. height: 110px;
  201. display: block;
  202. margin-top: 10px;
  203. }
  204.  
  205. .links a {
  206. font-family: 'cambria';
  207. font-size: 10px;
  208. color: #eee;
  209. text-align: center;
  210. padding: 2px;
  211. width: 85px;
  212. background-color: #303030;
  213. display: inline-block;
  214. font-style: italic;
  215. margin-top: 3px;
  216. }
  217.  
  218. .hover {
  219. position: absolute;
  220. margin: auto;
  221. display: block;
  222. width: 340px;
  223. padding: 15px;
  224. margin-top: 13px;
  225. padding-left: 25px;
  226. -webkit-transition: all 0.2s ease-in-out;
  227. -moz-transition: all 0.2s ease-in-out;
  228. -o-transition: all 0.2s ease-in-out;
  229. -ms-transition: all 0.2s ease-in-out;
  230. transition: all 0.2s ease-in-out;
  231. }
  232.  
  233. .icon {
  234. display: inline-block;
  235. float: left;
  236. width: 55px;
  237. height: 55px;
  238. border-radius: 35px;
  239. border: 5px solid #FFF;
  240. background-color: #202020;
  241. margin-right: 20px;
  242. }
  243.  
  244. .title {
  245. padding: 10px 15px;
  246. width: 220px;
  247. text-align: center;
  248. display: inline-block;
  249. float: left;
  250. font-family: 'cambria';
  251. font-size: 12px;
  252. font-style: italic;
  253. color: #505050;
  254. color: #FFF;
  255. background-color: #FFF;
  256. margin-top: 15px;
  257. background:rgba(255, 255, 255, 0.3);
  258. }
  259.  
  260. .topbar {
  261. display: block;
  262. padding: 30px 40px;
  263. background-color: #202020;
  264. text-align: center;
  265. width: 823px;
  266. margin-bottom: 30px;
  267. margin-left: -20px;
  268. margin-top: -20px;
  269. margin-bottom: 20px;
  270. }
  271.  
  272. .topt {
  273. text-align: center;
  274. margin: auto;
  275. display: block;
  276. font-family: 'arial';
  277. font-weight: 700;
  278. letter-spacing: -2px;
  279. color: #FFF;
  280. font-size: 36px;
  281. }
  282.  
  283. .rightbar {
  284. position: fixed;
  285. width: 210px;
  286. padding: 5px;
  287. float: right;
  288. height: 100%;
  289. text-align: right;
  290. padding-top: 20px;
  291. }
  292.  
  293. .rightbar a {
  294. border-right: 10px solid #fff;
  295. padding-right: 7px;
  296. font-family: 'cambria';
  297. font-size: 8px;
  298. font-style: italic;
  299. color: #eee;
  300. text-transform: uppercase;
  301. letter-spacing: 1px;
  302. margin-bottom: 5px;
  303. display: block;
  304. -webkit-transition: all 0.2s ease-in-out;
  305. -moz-transition: all 0.2s ease-in-out;
  306. -o-transition: all 0.2s ease-in-out;
  307. -ms-transition: all 0.2s ease-in-out;
  308. transition: all 0.2s ease-in-out;
  309. }
  310.  
  311. .rightbar a:hover {
  312. background-color: #fff;
  313. color: #202020;
  314. }
  315.  
  316. </style>
  317. <body>
  318. <content>
  319. <div class="rightbar">
  320.  
  321. <a href="#">Link 1</a>
  322. <a href="#">Link 2</a>
  323. <a href="#">Link 3</a>
  324. <a href="#">Link 4</a>
  325. <a href="#">Link 5</a>
  326. <a href="#">Link 6</a>
  327. <a href="#">Link 7</a>
  328. <a href="#">Link 8</a>
  329. <a href="#">Link 9</a>
  330. <a href="http://winchesterwrites.tumblr.com">copyright</a>
  331.  
  332. </div>
  333. <div id="content">
  334.  
  335. <div class="topbar">
  336.  
  337. <div class="topt">TOP BAR TITLE</div>
  338.  
  339. </div>
  340.  
  341.  
  342.  
  343.  
  344. <!-- START COPYING BOX CODE HERE -->
  345. <div class="character">
  346. <div class="header" style="background-image:url('HEADER URL HERE');">
  347.  
  348. <div class="hover">
  349. <div class="icon" style="background-image:url('ICON URL HERE');"></div>
  350. <div class="title">dean winchester</div>
  351. </div>
  352.  
  353. </div>
  354. <div class="column1" style="background-image:url('CHARACTER COLUMN PORTRAIT URL HERE');">
  355. <div class="description">
  356. ADD IN CHARACTER BIOGRAPHY HERE
  357. </div>
  358.  
  359.  
  360. </div>
  361.  
  362.  
  363. <div class="column2">
  364. <div class="name">general info.</div>
  365. <div class="general">
  366. <div class="gen" style="border-left: 10px solid #000000;">FIRST TAB</div>
  367. <div class="gen" style="border-left: 10px solid #101010;">SECOND TAG</div>
  368. <div class="gen" style="border-left: 10px solid #202020;">THIRD TAB</div>
  369. <div class="gen" style="border-left: 10px solid #303030;">FOURTH TAB</div>
  370. <div class="gen" style="border-left: 10px solid #404040;">FIFTH TAB</div>
  371. <div class="gen" style="border-left: 10px solid #505050;">SIXTH TAB</div>
  372. <div class="gen" style="border-left: 10px solid #606060;">SEVENTH TAB</div>
  373. <div class="gen" style="border-left: 10px solid #707070;">EIGHT TAB</div>
  374. </div>
  375. <div class="links">
  376.  
  377. <a href="#">bio post</a>
  378. <a href="#">character tag</a>
  379. <a href="#">tumblr link</a>
  380. <a href="#">photos</a>
  381. <a href="#">paragraphs</a>
  382. <a href="#">threads</a>
  383.  
  384. </div>
  385. </div>
  386. </div>
  387. <!----- END COPYING BOX CODE HERE ------>
  388. <!---- Then, paste the code under this line ------>
  389.  
  390.  
  391.  
  392.  
  393.  
  394. <!--- PASTE ALL CODES ABOVE THIS LINE --->
  395. </div>
  396.  
  397.  
  398. </content>
  399. </body>
  400. </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!