API tools faq
paste
dylanohelps

2.1 MUSES

dylanohelps
Jan 24th, 2015
5,849
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!---------------
  4.  
  5.  
  6.  
  7.  
  8. 2.1 "MUSES" 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: 0px;
  52. padding: 0px;
  53. width: 100%;
  54. height: 100%;
  55. list-style: none;
  56. background-color: #eeeeee;
  57. font-family: 'Roboto', sans-serif;
  58. font-weight: 300;
  59. font-size: 10px;
  60. color: #877b76;
  61. background-image:url('http://static.tumblr.com/kamm2qy/bnFnidu1r/tiny_grid.png');
  62. background-attachment: fixed;
  63.  
  64.  
  65. }
  66.  
  67. a {
  68. text-decoration: none;
  69. color: #0195ab;
  70. }
  71.  
  72. b,i,strong,em {
  73. color: #cbd165;
  74. }
  75.  
  76. ::-webkit-scrollbar-thumb:vertical {
  77. background-color: #e1a5a3;
  78. height: 10px;
  79. border: 2px solid #FFFFFF;
  80.  
  81. }
  82. ::-webkit-scrollbar-thumb:horizontal {
  83. background-color: #e1a5a3;
  84. height: 7px!important;
  85. border: 2px solid #FFFFFF;
  86. }
  87. ::-webkit-scrollbar {
  88. background-color: transparent;
  89. height: 2px;
  90. width: 8px;
  91. }
  92.  
  93.  
  94.  
  95. /* MIDDLE PAGE CODES */
  96.  
  97. content {
  98. margin: auto;
  99. width: 1105px;
  100. height: 100%;
  101. padding: 20px;
  102. display: block;
  103. margin-bottom: 200px;
  104. margin-top: 50px;
  105. }
  106.  
  107. #left {
  108. padding: 40px;
  109. height: auto;
  110. width: 200px;
  111. display: inline-block;
  112. font-family: 'Lato';
  113. float: left;
  114. font-size: 10px;
  115. color: #202020;
  116. }
  117.  
  118. #sideimg {
  119. width: 200px;
  120. height: 200px;
  121. background-color: #aaaaaa;
  122. margin-bottom: 10px;
  123. float: left;
  124. }
  125.  
  126. #sideimg img {
  127. width: 200px;
  128. height: 200px;
  129. }
  130.  
  131. .bio {
  132. margin-bottom: 10px;
  133. }
  134.  
  135. .sidelinks {
  136. display: block;
  137. width: 100%;
  138. height: auto;
  139. margin-bottom: 10px;
  140. }
  141.  
  142. .sidelinks a {
  143. text-align: left;
  144. font-family: 'Lato';
  145. font-size: 12px;
  146. color: #808080;
  147. margin: 4px 0px;
  148. display: block;
  149. padding-left: 12px;
  150. -webkit-transition: all 0.2s ease-in-out;
  151. -moz-transition: all 0.2s ease-in-out;
  152. -o-transition: all 0.2s ease-in-out;
  153. -ms-transition: all 0.2s ease-in-out;
  154. transition: all 0.2s ease-in-out;
  155. }
  156.  
  157. .sidelinks a:hover {
  158. color: #6f0d09;
  159. }
  160.  
  161. #right {
  162. width: 743px;
  163. height: auto;
  164. padding: 40px;
  165. display: inline-block;
  166. }
  167.  
  168. #charbox {
  169. display: inline-block;
  170. width: 270px;
  171. height: 270px;
  172. padding: 40px;
  173. background-color: #ffffff;
  174. /* background-image:url('http://static.tumblr.com/kamm2qy/RMEnien7r/photography.png'); */
  175. margin: 12px 10px;
  176. vertical-align: middle;
  177. }
  178.  
  179. .img {
  180. display: table;
  181. vertical-align: middle;
  182. text-align: center;
  183. width: 270px;
  184. height: 270px;
  185. z-index: 5;
  186. -webkit-transition: all 0.2s ease-in-out;
  187. -moz-transition: all 0.2s ease-in-out;
  188. -o-transition: all 0.2s ease-in-out;
  189. -ms-transition: all 0.2s ease-in-out;
  190. transition: all 0.2s ease-in-out;
  191. }
  192.  
  193.  
  194.  
  195. /* MIDDLE --- ABOUT CODES */
  196.  
  197. .about {
  198. display: block;
  199. position: absolute;
  200. width: 270px;
  201. height: 270px;
  202. padding: 40px;
  203. background-color:rgba(255,255,255, 0.9);
  204. margin-top: -40px;
  205. margin-left: -40px;
  206. opacity: 0;
  207. overflow: auto;
  208. font-family: 'Lato';
  209. -webkit-transition: all 0.2s ease-in-out;
  210. -moz-transition: all 0.2s ease-in-out;
  211. -o-transition: all 0.2s ease-in-out;
  212. -ms-transition: all 0.2s ease-in-out;
  213. transition: all 0.2s ease-in-out;
  214. }
  215.  
  216. .name {
  217. text-transform: uppercase;
  218. font-family: 'Oranienbaum', sans-serif;
  219. font-size: 20px;
  220. color: #6f0d09;
  221. text-align: center;
  222. margin-bottom: 7px;
  223. border-top: 1px solid #909090;
  224. border-bottom: 1px solid #909090;
  225. padding: 10px 0px;
  226. }
  227.  
  228. #charbox:hover .about {
  229. opacity: 1;
  230. }
  231.  
  232. .headimg {
  233. width: 270px;
  234. height: 120px;
  235. background-color: #202020;
  236. margin-bottom: 10px;
  237. }
  238.  
  239. .biography {
  240. width: 100%;
  241. height: auto;
  242. margin-bottom: 10px;
  243. font-family: 'Lato', 'Libre Baskerville';
  244. font-size: 10px;
  245. color: #202020;
  246. text-align: justify;
  247. }
  248.  
  249. .smallpic {
  250. display: block;
  251. margin-bottom: 10px;
  252. width: 100%;
  253. text-align: center;
  254. }
  255.  
  256. .smallpic img {
  257. width: 120px;
  258. height: 120px;
  259. padding: 3px;
  260. border: 1px solid #DDDDDD;
  261. margin: 1px;
  262. display: inline-block;
  263. background-color: #FFFFFF;
  264. }
  265.  
  266. .info {
  267. -webkit-column-count: 2;
  268. -moz-column-count: 2;
  269. column-count: 2;
  270. display: block;
  271. width: 100%;
  272. height: 65px;
  273. margin-bottom: 7px;
  274. }
  275.  
  276. .info section {
  277. border-left: 11px solid #dddddd;
  278. font-family: 'Oranienbaum';
  279. font-size: 10px;
  280. text-transform: uppercase;
  281. text-align: left;
  282. color: #202020;
  283. padding-left: 7px;
  284. margin-bottom: 4px;
  285. }
  286.  
  287. .links {
  288. display: block;
  289. width: 100%;
  290. height: auto;
  291. margin-bottom: 7px;
  292. }
  293.  
  294. .links a {
  295. padding: 3px 7px;
  296. background-color: #FFFFFF;
  297. font-family: 'Oranienbaum';
  298. font-size: 10px;
  299. text-transform: uppercase;
  300. color: #6f0d09;
  301. text-align: center;
  302. display: inline-block;
  303. margin: 2px 0px;
  304. width: 116px;
  305. -webkit-transition: all 0.2s ease-in-out;
  306. -moz-transition: all 0.2s ease-in-out;
  307. -o-transition: all 0.2s ease-in-out;
  308. -ms-transition: all 0.2s ease-in-out;
  309. transition: all 0.2s ease-in-out;
  310. }
  311.  
  312. .links a:hover {
  313. color: #CCCCCC;
  314. }
  315.  
  316. .section {
  317. border-bottom: 1px solid #909090;
  318. padding: 7px 0px;
  319. text-align: left;
  320. font-family: 'Oranienbaum';
  321. font-size: 14px;
  322. color: #6f0d09;
  323. text-transform: uppercase;
  324. margin-bottom: 7px;
  325. }
  326.  
  327. .connect {
  328. font-family: 'Oranienbaum';
  329. font-size: 10px;
  330. color: #6f0d09;
  331. display: inline-block;
  332. text-transform: uppercase;
  333. }
  334.  
  335. </style>
  336. <body>
  337. <middle>
  338. <content>
  339. <div id="left">
  340.  
  341. <div id="sideimg"><img src="http://static.tumblr.com/kamm2qy/iVqnieprc/realartistsship2560x1440.jpg" /></div>
  342. <div class="section">Creations</div>
  343. <div class="bio">
  344. Cupcake ipsum dolor sit amet candy bonbon brownie unerdwear.com. Powder toffee icing donut jelly beans. Sweet cupcake carrot cake. Caramels cotton candy toffee powder gummi bears lemon drops unerdwear.com. Cheesecake lemon drops pudding apple pie cake macaroon brownie wafer applicake. Pastry cookie cheesecake jelly bonbon chocolate bar toffee gummies. Unerdwear.com pudding chocolate cake. Candy canes topping sweet roll apple pie cake gummi bears sweet muffin. Bear claw topping donut brownie gummies. Marshmallow muffin chocolate bar. Apple pie pie chocolate cake candy. Jelly-o cotton candy applicake dessert unerdwear.com. Halvah topping gummies oat cake icing applicake applicake tootsie roll sugar plum. Caramels lollipop fruitcake.
  345. </div>
  346.  
  347. <div class="section">Navigation</div>
  348. <div class="sidelinks">
  349. <a href="#">Navigation 1</a>
  350. <a href="#">Navigation 2</a>
  351. <a href="#">Navigation 3</a>
  352. <a href="#">Navigation 4</a>
  353. <a href="http://dominicwrites.tumblr.com">Theme</a>
  354. </div>
  355. </div>
  356.  
  357.  
  358. <div id="right">
  359.  
  360.  
  361.  
  362. <!-- CHARACTER BOX BEGINS -->
  363. <div id="charbox">
  364. <div class="about">
  365.  
  366. <!-- BIOGRAPHY -->
  367.  
  368. <div class="headimg"><img src="HEADERIMGURL" /></div>
  369. <div class="name">CHARACTER NAME</div>
  370. <div class="biography">
  371.  
  372. INSERT BIOGRAPHY HERE
  373.  
  374. </div>
  375.  
  376. <!-- GENERAL INFORMATION -->
  377.  
  378. <div class="smallpic"><img src="SMALLPORTRAITURL" /><img src="SMALLPORTRAITURL" /></div>
  379. <div class="section">General Information</div>
  380. <div class="info">
  381. <section>SECTION 1</section>
  382. <section>SECTION 2</section>
  383. <section>SECTION 3</section>
  384. <section>SECTION 4</section>
  385. <section>SECTION 5</section>
  386. <section>SECTION 6</section>
  387. <section>Only eight sections</section>
  388. <section>Will fit here.</section>
  389. </div>
  390.  
  391. <!-- LINKS -->
  392.  
  393. <div class="links">
  394. <a href="#">Face Tag</a>
  395. <a href="#">OTP Tag</a>
  396. <a href="#">Character Tag</a>
  397. <a href="#">Biography Link</a>
  398. </div>
  399.  
  400. <!-- CONNECTIONS -->
  401.  
  402. <div class="section">Connections</div>
  403. <div class="connect">CONNECTION NAME</div>: WRITE ABOUT CONNECTION.<br /><br />
  404. <div class="connect">CONNECTION NAME</div>: WRITE ABOUT CONNECTION
  405.  
  406. </div>
  407.  
  408. <!-- CHARACTER PORTRAIT - 270X270 -->
  409.  
  410. <div class="img" style="background-image:url('MAINCHARACTERPORTRAITURL');"></div>
  411.  
  412. </div>
  413.  
  414. <!-- CHARACTER BOX ENDS -->
  415.  
  416. <!--
  417. PASTE ALL CODES
  418. ABOVE THE </DIV>
  419. -->
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430. </div>
  431. </content>
  432. </middle>
  433. </body>
  434. </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!