API tools faq
paste
Advertisement
dylanohelps

2.2 HONEY BUNCHES

dylanohelps
Jan 24th, 2015
4,266
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. CODING TEMPLATE 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. <!-- FONT SCRIPT CODES -->
  34.  
  35. <link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
  36. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  37. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800' rel='stylesheet' type='text/css'>
  38. <link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
  39. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  40.  
  41.  
  42. <!-- JAVASCRIPT CODES -->
  43.  
  44.  
  45.  
  46.  
  47.  
  48. </head>
  49. <style type="text/css">
  50. body {
  51. margin: auto;
  52. padding: 0px;
  53. width: 100%;
  54. height: 100%;
  55. list-style: none;
  56. background-color: #FFFFFF;
  57. background-image:url('http://static.tumblr.com/kamm2qy/umTnio4bv/photography.png');
  58. background-attachment: fixed;
  59.  
  60.  
  61. }
  62.  
  63. a {
  64. text-decoration: none;
  65. color: #0195ab;
  66. }
  67.  
  68. b,i,strong,em {
  69. color: #cbd165;
  70. }
  71.  
  72. ::-webkit-scrollbar-thumb:vertical {
  73. background-color: #e1a5a3;
  74. height: 10px;
  75. border: 2px solid #FFFFFF;
  76. }
  77. ::-webkit-scrollbar-thumb:horizontal {
  78. background-color: #e1a5a3;
  79. height: 7px!important;
  80. border: 2px solid #FFFFFF;
  81. }
  82. ::-webkit-scrollbar {
  83. background-color: transparent;
  84. height: 2px;
  85. width: 8px;
  86. }
  87.  
  88. #all {
  89. margin: auto;
  90. width: 800px;
  91. height: auto;
  92. padding: 40px;
  93. background-color: #eeeeee;
  94. margin-bottom: 100px;
  95. }
  96.  
  97. header {
  98. width: 800px;
  99. height: 200px;
  100. background-color: #aaaaaa;
  101. display: table;
  102. background-image:url('http://static.tumblr.com/kamm2qy/WB8nio3xr/hipster-triangle-picture-hd-wallpaper-desktop.png');
  103. }
  104.  
  105. .title {
  106. font-family: 'Oranienbaum';
  107. font-size: 36px;
  108. letter-spacing: 3px;
  109. color: #FFFFFF;
  110. text-align: center;
  111. display: table-cell;
  112. vertical-align: middle;
  113. text-transform: uppercase;
  114. }
  115.  
  116. .toplinks {
  117. margin: 0px 5px;
  118. }
  119.  
  120. .toplinks a {
  121. font-family: 'Lato';
  122. font-size: 12px;
  123. color: #FFFFFF;
  124. padding: 5px 15px;
  125. letter-spacing: 0px;
  126. border: 2px solid #FFFFFF;
  127. -webkit-transition: all 0.2s ease-in-out;
  128. -moz-transition: all 0.2s ease-in-out;
  129. -o-transition: all 0.2s ease-in-out;
  130. -ms-transition: all 0.2s ease-in-out;
  131. transition: all 0.2s ease-in-out;
  132. }
  133.  
  134. .toplinks a:hover {
  135. background-color: #ffffff;
  136. color: #202020;
  137. }
  138.  
  139. #container {
  140. display: block;
  141. width: 800px;
  142. height: 300px;
  143. background-color: #ffffff;
  144. text-align: center;
  145. vertical-align: middle;
  146. display: table;
  147. position: absolute;
  148. opacity: 1;
  149. -webkit-transition: all 0.2s ease-in-out;
  150. -moz-transition: all 0.2s ease-in-out;
  151. -o-transition: all 0.2s ease-in-out;
  152. -ms-transition: all 0.2s ease-in-out;
  153. transition: all 0.2s ease-in-out;
  154. }
  155.  
  156. .hover {
  157. position: absolute;
  158. opacity: 0;
  159. -webkit-transition: all 0.2s ease-in-out;
  160. -moz-transition: all 0.2s ease-in-out;
  161. -o-transition: all 0.2s ease-in-out;
  162. -ms-transition: all 0.2s ease-in-out;
  163. transition: all 0.2s ease-in-out;
  164. }
  165.  
  166. #charbox:hover .hover {
  167. opacity: 1;
  168. }
  169.  
  170. #charbox {
  171. width: 800px;
  172. height: 300px;
  173. background-color: #eeeeee;
  174. display: block;
  175. }
  176.  
  177. .bio1 {
  178. width: 420px;
  179. height: 220px;
  180. padding: 40px;
  181. background-color: #eeeeee;
  182. display: inline-block;
  183. float: left;
  184. }
  185.  
  186. .portrait1 {
  187. display: inline-block;
  188. width: 220px;
  189. height: 220px;
  190. padding: 40px;
  191. background-color: #ffffff;
  192. }
  193.  
  194. .portrait1 img {
  195. width: 220px;
  196. height: 220px;
  197. }
  198.  
  199. .bio2 {
  200. width: 420px;
  201. height: 220px;
  202. padding: 40px;
  203. background-color: #eeeeee;
  204. display: inline-block;
  205. float: right;
  206. }
  207.  
  208. .portrait2 {
  209. display: inline-block;
  210. width: 220px;
  211. height: 220px;
  212. padding: 40px;
  213. background-color: #ffffff;
  214. }
  215.  
  216. .portrait2 img {
  217. width: 220px;
  218. height: 220px;
  219. }
  220.  
  221. .name {
  222. display: block;
  223. font-family: 'Oranienbaum';
  224. font-size: 20px;
  225. color: #808080;
  226. text-transform: uppercase;
  227. text-align: center;
  228. margin-bottom: 10px;
  229. }
  230.  
  231. .links {
  232. display: block;
  233. }
  234.  
  235. .links a {
  236. padding: 3px 7px;
  237. width: 66px;
  238. height: auto;
  239. display: inline-block;
  240. background-color: #FFFFFF;
  241. color: #202020;
  242. font-family: 'Oranienbaum';
  243. font-size: 10px;
  244. text-transform: uppercase;
  245. text-align: center;
  246. -webkit-transition: all 0.2s ease-in-out;
  247. -moz-transition: all 0.2s ease-in-out;
  248. -o-transition: all 0.2s ease-in-out;
  249. -ms-transition: all 0.2s ease-in-out;
  250. transition: all 0.2s ease-in-out;
  251. }
  252.  
  253. .links a:hover {
  254. color: #808080;
  255. }
  256.  
  257. .about {
  258. display: block;
  259. width: 380px;
  260. height: 160px;
  261. overflow: auto;
  262. font-family: 'Lato';
  263. font-size: 10px;
  264. color: #505050;
  265. text-align: justify;
  266. padding: 0px 20px;
  267. margin-bottom: 10px;
  268. }
  269.  
  270. .charname {
  271. text-align: center;
  272. font-family: 'Oranienbaum';
  273. font-size: 30px;
  274. color: #FFFFFF;
  275. text-transform: uppercase;
  276. display: table-cell;
  277. vertical-align: middle;
  278. }
  279.  
  280.  
  281. </style>
  282. <body>
  283. <div id="all">
  284. <header>
  285. <div class="title">
  286. HEADER TITLE
  287. <div class="toplinks">
  288. <a href="#">Link 1</a>
  289. <a href="#">Link 2</a>
  290. <a href="#">Link 3</a>
  291. <a href="#">Link 4</a>
  292. <a href="http://dominicwrites.tumblr.com">Theme</a>
  293. </div>
  294. </div>
  295.  
  296. </header>
  297.  
  298.  
  299. <!-- BOX CODE VERSION 1 BEGINS -->
  300. <div id="charbox">
  301. <div id="container" style="background-image:url('LARGEHEADERURL');">
  302. <div class="charname">CHARACTER NAME</div>
  303. </div>
  304. <div class="hover">
  305. <div class="bio1">
  306. <div class="name">CHARACTER NAME</div>
  307. <div class="about">
  308. Cupcake ipsum dolor sit amet fruitcake sweet caramels. Soufflé cotton candy cookie gingerbread jelly-o gummi bears wafer. Soufflé icing pudding macaroon chocolate cake halvah biscuit sweet roll chocolate cake. Macaroon liquorice ice cream. Fruitcake bonbon sugar plum jelly-o. Gummies bonbon chocolate bar lollipop marzipan liquorice icing cheesecake applicake. Jelly beans topping donut bonbon sweet roll dessert donut muffin sweet. Lemon drops toffee ice cream tiramisu liquorice cookie. Liquorice sesame snaps tootsie roll. Dragée marshmallow candy canes sweet pie. Chupa chups jujubes biscuit caramels cupcake gummi bears danish. Cupcake sugar plum bear claw ice cream jelly brownie. Marshmallow topping gummies chupa chups caramels powder cookie caramels sesame snaps.
  309. <br /><br />
  310. Lollipop biscuit chocolate dragée unerdwear.com gummies. Cookie powder danish danish pie. Ice cream lollipop ice cream candy gummies tiramisu marshmallow dessert cake. Candy canes cupcake soufflé carrot cake gummies dragée cheesecake sesame snaps pie. Muffin icing oat cake donut cupcake liquorice macaroon wafer. Macaroon chocolate bar apple pie. Donut marshmallow cookie jelly beans sugar plum wafer candy caramels sweet. Topping jelly beans jelly beans soufflé danish brownie. Bonbon chupa chups apple pie. Liquorice marzipan icing oat cake sweet roll candy canes pastry biscuit. Marshmallow fruitcake tiramisu bonbon lollipop sweet soufflé oat cake gummi bears. Tootsie roll cake pie. Dragée pudding cheesecake soufflé candy canes jelly beans gummies. Sesame snaps lemon drops pudding powder topping gummies ice cream cookie.
  311. <br /><br />
  312. </div>
  313. <div class="links">
  314. <a href="#">Portraits</a>
  315. <a href="#">Biogrpahy</a>
  316. <a href="#">Relationships</a>
  317. <a href="#">Inspo</a>
  318. <a href="#">Family</a>
  319. </div>
  320. </div>
  321. <div class="portrait1">
  322. <img src="CHARACTERPORTRAITURL" />
  323. </div>
  324. </div>
  325.  
  326.  
  327. </div>
  328. <!-- BOX CODE VERSION 1 ENDS -->
  329.  
  330.  
  331. <!-- BOX CODE VERSION 2 BEGINS -->
  332. <div id="charbox">
  333. <div id="container" style="background-image:url('LARGEHEADERURL');">
  334. <div class="charname">CHARACTER NAME</div>
  335. </div>
  336. <div class="hover">
  337. <div class="bio2">
  338. <div class="name">CHARACTER NAME</div>
  339. <div class="about">
  340. Cupcake ipsum dolor sit amet fruitcake sweet caramels. Soufflé cotton candy cookie gingerbread jelly-o gummi bears wafer. Soufflé icing pudding macaroon chocolate cake halvah biscuit sweet roll chocolate cake. Macaroon liquorice ice cream. Fruitcake bonbon sugar plum jelly-o. Gummies bonbon chocolate bar lollipop marzipan liquorice icing cheesecake applicake. Jelly beans topping donut bonbon sweet roll dessert donut muffin sweet. Lemon drops toffee ice cream tiramisu liquorice cookie. Liquorice sesame snaps tootsie roll. Dragée marshmallow candy canes sweet pie. Chupa chups jujubes biscuit caramels cupcake gummi bears danish. Cupcake sugar plum bear claw ice cream jelly brownie. Marshmallow topping gummies chupa chups caramels powder cookie caramels sesame snaps.
  341. <br /><br />
  342. Lollipop biscuit chocolate dragée unerdwear.com gummies. Cookie powder danish danish pie. Ice cream lollipop ice cream candy gummies tiramisu marshmallow dessert cake. Candy canes cupcake soufflé carrot cake gummies dragée cheesecake sesame snaps pie. Muffin icing oat cake donut cupcake liquorice macaroon wafer. Macaroon chocolate bar apple pie. Donut marshmallow cookie jelly beans sugar plum wafer candy caramels sweet. Topping jelly beans jelly beans soufflé danish brownie. Bonbon chupa chups apple pie. Liquorice marzipan icing oat cake sweet roll candy canes pastry biscuit. Marshmallow fruitcake tiramisu bonbon lollipop sweet soufflé oat cake gummi bears. Tootsie roll cake pie. Dragée pudding cheesecake soufflé candy canes jelly beans gummies. Sesame snaps lemon drops pudding powder topping gummies ice cream cookie.
  343. <br /><br />
  344. </div>
  345. <div class="links">
  346. <a href="#">Portraits</a>
  347. <a href="#">Biogrpahy</a>
  348. <a href="#">Relationships</a>
  349. <a href="#">Inspo</a>
  350. <a href="#">Family</a>
  351. </div>
  352. </div>
  353. <div class="portrait2">
  354. <img src="VERSION2PORTRAITURL" />
  355. </div>
  356. </div>
  357.  
  358. </div>
  359. <!-- BOX CODE VERSION 2ENDS -->
  360.  
  361.  
  362. <!--
  363. PASTE ALL CODES
  364. ABOVE THE </DIV>
  365. -->
  366.  
  367.  
  368.  
  369. </div>
  370. </body>
  371. </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!