API tools faq
paste
Advertisement
joss1226

Muses

joss1226
Mar 29th, 2016
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.42 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.  
  6. ▪ ▪ ▪ ▪ ▪ ▪ { Pʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛs!
  7.  
  8. ___ ___ ___ ___ ___ ___ __ __
  9. / __|/ _ \ | \ | __|/ __| | _ )\ \ / /
  10. | (__| (_) || |) || _| \__ \ | _ \ \ V /
  11. \___|\___/ |___/ |___||___/ |___/ |_|
  12. ___ ___ _ _ ___ ___ ___ ___
  13. | _ \ / _ \ | || || _ \ / _ \ | _ \ / _ \
  14. | _/| (_) || __ || /| (_) || /| (_) |
  15. |_| \___/ |_||_||_|_\ \___/ |_|_\ \___/
  16.  
  17.  
  18. ★ http://pohroro.tumblr.com } ▪ ▪ ▪ ▪ ▪ ▪
  19.  
  20.  
  21. -->
  22.  
  23. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  24.  
  25. <head>
  26.  
  27. <title>{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. <script type="text/javascript" src="http://static.tumblr.com/heqtwlw/BNkmuyeb8/modernizr.custom.js"></script>
  31.  
  32. <style type="text/css">
  33.  
  34. body
  35. {
  36. margin: 0;
  37. padding: 0;
  38. height: 100%;
  39. font-family: Libre Baskerville; /*body font*/
  40. color: #202020; /*body font color*/
  41. background: url();
  42. }
  43.  
  44. a
  45. {
  46. color: #606060; /*body link color*/
  47. text-decoration: none;
  48. -webkit-transition: all 0.5s ease;
  49. -moz-transition: all 0.5s ease;
  50. transition: all 0.5s ease;
  51. }
  52.  
  53. a:hover
  54. {
  55. -webkit-transition: all 0.3s ease;
  56. -moz-transition: all 0.3s ease;
  57. transition: all 0.3s ease;
  58. }
  59.  
  60. #sideBackground
  61. {
  62. background: url() #202020; /*sidebar background image*/
  63. width: 250px;
  64. height: 100%;
  65. position: fixed;
  66. margin: 0 auto;
  67. z-index: -1;
  68. box-shadow: 1px 1px 1px #e1e1e1;
  69. }
  70.  
  71. #title
  72. {
  73. color: #ffffff; /*title color*/
  74. font-size: 40px; /*title size*/
  75. width: 370px;
  76. margin-top: 290px;
  77. position: fixed;
  78. text-transform: uppercase;
  79. font-style: italic;
  80. margin-left: 10px;
  81. padding-left: 10px;
  82. letter-spacing: 10px;
  83. border-bottom: 1px solid #ffffff; /*border color*/
  84. }
  85.  
  86. #navigation
  87. {
  88. position: fixed;
  89. width: 225px;
  90. text-align: right;
  91. margin-top: 355px;
  92. text-transform: lowercase;
  93. font-style: italic;
  94. letter-spacing: 1px;
  95. font-size: 10px;
  96. }
  97.  
  98. #navigation a
  99. {
  100. color: #ffffff; /*navigation link color*/
  101. padding-top: 5px;
  102. border-top: 1px solid #ffffff;
  103. }
  104.  
  105. #navigation a:hover
  106. {
  107. color: #606060; /*navigation hover link color*/
  108. border-top: 1px solid #606060; /*navigation border hover link color*/
  109. }
  110.  
  111. .grid
  112. {
  113. max-width: 900px;
  114. margin: 40px 0px 40px 420px;
  115. list-style: none;
  116. position: absolute;
  117. }
  118.  
  119. .name
  120. {
  121. border-bottom: 1px solid #202020; /*name border color*/
  122. border-right: 7px solid #202020; /*name border color*/
  123. color: #202020; /*name color*/
  124. padding-right: 5px;
  125. margin-bottom: 3px;
  126. text-align: right;
  127. font-size: 20px;
  128. text-transform: uppercase;
  129. font-style: italic;
  130. line-height: 19px;
  131. letter-spacing: -1px;
  132. -webkit-transition: all 0.5s ease;
  133. -moz-transition: all 0.5s ease;
  134. transition: all 0.5s ease;
  135. }
  136.  
  137.  
  138. .grid li
  139. {
  140. display: inline-block;
  141. margin: 0;
  142. padding: 10px;
  143. text-align: left;
  144. position: relative;
  145. margin-bottom: 20px;
  146. margin-right: 20px;
  147.  
  148. }
  149.  
  150. .grid figure
  151. {
  152. margin: 0;
  153. position: relative;
  154. }
  155.  
  156. .grid figure img
  157. {
  158. max-width: 100%;
  159. width: 230px;
  160. height: 230px;
  161. display: block;
  162. position: relative;
  163. }
  164.  
  165. .grid figcaption
  166. {
  167. position: absolute;
  168. top: 0;
  169. left: 0;
  170. background: #202020; /*description background*/
  171. color: #ffffff; /*description color*/
  172. padding: 10px;
  173. text-align: left;
  174. letter-spacing: 1px;
  175. line-height: 10px;
  176. font-size: 9px;
  177. overflow: auto;
  178. }
  179.  
  180. .grid figcaption span:before
  181. {
  182. content: 'by ';
  183. }
  184.  
  185. .cs-style-3 figure
  186. {
  187. overflow: hidden;
  188. }
  189.  
  190. .cs-style-3 figure img
  191. {
  192. -webkit-transition: -webkit-transform 0.4s;
  193. -moz-transition: -moz-transform 0.4s;
  194. transition: transform 0.4s;
  195. }
  196.  
  197. .touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img
  198. {
  199. -webkit-transform: translateY(-50px);
  200. -moz-transform: translateY(-50px);
  201. -ms-transform: translateY(-50px);
  202. transform: translateY(-50px);
  203. }
  204.  
  205. .no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img
  206. {
  207. -webkit-transform: translateY(-50px);
  208. -moz-transform: translateY(-50px);
  209. -ms-transform: translateY(-50px);
  210. transform: translateY(-50px);
  211. }
  212.  
  213. .cs-style-3 figcaption
  214. {
  215. height: 90px;
  216. width: 210px;
  217. top: auto;
  218. bottom: 0;
  219. opacity: 0;
  220. -webkit-transform: translateY(100%);
  221. -moz-transform: translateY(100%);
  222. -ms-transform: translateY(100%);
  223. transform: translateY(100%);
  224. -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
  225. -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
  226. transition: transform 0.4s, opacity 0.1s 0.3s;
  227. }
  228.  
  229. .touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption
  230. {
  231. opacity: 1;
  232. -webkit-transform: translateY(0px);
  233. -moz-transform: translateY(0px);
  234. -ms-transform: translateY(0px);
  235. transform: translateY(0px);
  236. -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
  237. -moz-transition: -moz-transform 0.4s, opacity 0.1s;
  238. transition: transform 0.4s, opacity 0.1s;
  239. }
  240.  
  241. .no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption
  242. {
  243. opacity: 1;
  244. -webkit-transform: translateY(0px);
  245. -moz-transform: translateY(0px);
  246. -ms-transform: translateY(0px);
  247. transform: translateY(0px);
  248. -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
  249. -moz-transition: -moz-transform 0.4s, opacity 0.1s;
  250. transition: transform 0.4s, opacity 0.1s;
  251. }
  252.  
  253. .url
  254. {
  255. border-top: 1px solid #202020; /*url border color*/
  256. border-left: 7px solid #202020; /*url border color*/
  257. padding-left: 5px;
  258. margin-top: 3px;
  259. font-size: 10px;
  260. text-transform: lowercase;
  261. font-style: italic;
  262. letter-spacing: 1px;
  263. line-height: 18px;
  264. }
  265.  
  266. .url:hover
  267. {
  268. letter-spacing: 2px;
  269. }
  270.  
  271. .url a
  272. {
  273. color: #202020; /*url color*/
  274. }
  275.  
  276. ::-webkit-scrollbar
  277. {
  278. height: 10px;
  279. width: 2px;
  280. background: #ffffff;
  281. }
  282.  
  283. ::-webkit-scrollbar-thumb:vertical
  284. {
  285. background: #000000; /*scrollbar color*/
  286. }
  287.  
  288. ::selection
  289. {
  290. background: #ffffff; /*selection color*/
  291. color: #ffffff;
  292. }
  293.  
  294. ::-moz-selection
  295. {
  296. background: #ffffff; /*selection color*/
  297. color: #ffffff;
  298. }
  299.  
  300. p::selection
  301. {
  302. background: #ffffff; /*selection color*/
  303. color: #ffffff;
  304. }
  305.  
  306. p::-moz-selection
  307. {
  308. background: #ffffff; /*selection color*/
  309. color: #ffffff;
  310. }
  311.  
  312. /* Credits to http://pohroro.tumblr.com */
  313.  
  314. #c
  315. {
  316. width: 55px;
  317. height: 18px;
  318. font-family: Arial;
  319. font-size: 7px;
  320. text-transform: uppercase;
  321. text-align: center;
  322. bottom: 10px;
  323. right: 10px;
  324. letter-spacing: 1px;
  325. line-height: 4px;
  326. padding: 10px 3px;
  327. display: block;
  328. color: #ffffff;
  329. background: #000000;
  330. position: fixed;
  331. }
  332.  
  333. #c a
  334. {
  335. font-weight: bold;
  336. line-height: 17px;
  337. font-size: 15px;
  338. font-family: Libre Baskerville;
  339. text-transform: lowercase;
  340. font-style: italic;
  341. color: #909090;
  342. letter-spacing: -1px;
  343. }
  344.  
  345. #c a:hover
  346. {
  347. color: #606060;
  348. }
  349.  
  350. </style>
  351. </head>
  352. <body>
  353.  
  354. <div id="sideBackground">
  355. <div id="title">muses</div>
  356. <div id="navigation">
  357. <a href="/">index</a>
  358. <a href="/ask">message</a>
  359. <a href="/dashboard">dashboard</a>
  360. </div>
  361. </div>
  362.  
  363. <ul class="grid cs-style-3">
  364.  
  365. <!--start of member 1-->
  366. <li>
  367. <div class="name">Oliver Young</div>
  368. <figure>
  369. <!--member image--><img src="http://static.tumblr.com/qxjwntd/IoKo4b38j/oliver_young.png">
  370. <figcaption>
  371. <!--edit your member description from here-->Currently, Oliver resides in Santa Monica living with his roommate, Kara Cavanaugh, in Ocean Avenue. He is a freelance photographer hoping to open his own gallery and studio soon.
  372. </figcaption>
  373. </figure>
  374. <div class="url"><a href="/oliveryoung">About</a></div>
  375. </li>
  376. <!--end of member 1-->
  377.  
  378. <!--start of member 2-->
  379. <li>
  380. <div class="name">Matthew Lance</div>
  381. <figure>
  382. <!--member image--><img src="http://static.tumblr.com/qxjwntd/v3Wo4b38e/matthew_lance.png">
  383. <figcaption>
  384. <!--edit your member description from here-->Matthew resides in the Santa Monica neighborhood Pico Boulevard where he's lived there for a couple years. He works as a personal trainer in Wilshire Boulevard, being the self proclaimed best personal trainer around.
  385. </figcaption>
  386. </figure>
  387. <div class="url"><a href="/matthewlance">About</a></div>
  388. </li>
  389. <!--end of member 2-->
  390.  
  391. <!--start of member 3-->
  392. <li>
  393. <div class="name">Spencer Parker</div>
  394. <figure>
  395. <!--member image--><img src="http://static.tumblr.com/qxjwntd/vqso4b39g/spencer_parker.png">
  396. <figcaption>
  397. <!--edit your member description from here-->Spencer grew up in the world of assassins, but when he ended up falling for a fellow assassin, Natalie Blake, he decided to throw away the life he knew for her. Only problem was, she didn't feel the same way. After moving on and falling in love with someone else, Spencer eventually wed and retired as an assassin for good. A few years of bliss later and a former enemy of Spencer seeked revenge, ending in the murder of his wife. Now it was his turn to seek vengence, but things get complicated when Natalie is hired to kill Spencer.
  398. </figcaption>
  399. </figure>
  400. <div class="url"><a href="/spencerparker">About</a></div>
  401. </li>
  402. <!--end of member 3-->
  403.  
  404. <!--start of member 4-->
  405. <li>
  406. <div class="name">Chaz Hoo <br>[Spider-Man]</div>
  407. <figure>
  408. <!--member image--><img src="http://static.tumblr.com/qxjwntd/Pbao4b39j/spiderman.png">
  409. <figcaption>
  410. <!--edit your member description from here-->Inspired by The Amazing Spider-Man 1 and 2, Chaz deals with being Spider-Man and being reunited with his childhood best friend, Harry Osborn, and Harry's sister, Avery. Things go awry when Harry seeks Spider-Man's help with his disease and Chaz knowing he can't help, resulting in both Osborn siblings to turn against Chaz and his alter-ego.
  411. </figcaption>
  412. </figure>
  413. <div class="url"><a href="/spidermanau">About</a></div>
  414. </li>
  415. <!--end of member 4-->
  416.  
  417. <!--start of member 5-->
  418. <li>
  419. <div class="name">Victor Reyes</div>
  420. <figure>
  421. <!--member image--><img src="http://static.tumblr.com/qxjwntd/rAWo4b39k/victor_reyes.png">
  422. <figcaption>
  423. <!--edit your member description from here-->Victor works at Happy Burger, sharing most shifts with Brooke Queen, who he happens to absolutely hate. The feeling is mutual on her end as well, Brooke having a hard time working with Victor. One night, however, that passionate hate they felt for each other is released in another form other than snarky remarks. After sleeping in the back room of work, it soons becomes a thing.
  424. </figcaption>
  425. </figure>
  426. <div class="url"><a href="/victorreyes">About</a></div>
  427. </li>
  428. <!--end of member 5-->
  429.  
  430. <!--start of member 6-->
  431. <li>
  432. <div class="name">Jessica Morales</div>
  433. <figure>
  434. <!--member image--><img src="http://static.tumblr.com/qxjwntd/PtAo4b389/jessica_morales.png">
  435. <figcaption>
  436. <!--edit your member description from here-->Jessica and Cassandra used to date back in high school, only it was kept from everyone else. When Jess wanted more out of their relationship and Cassie couldn't do it, things were called off by Cassie leaving Jess after graduation. The two of them haven't spoken or seen each other in years before being reunited for a wedding in their hometow. Things have changed with Jess now engaged, but her feelings for Cassie are hard to push away.
  437. </figcaption>
  438. </figure>
  439. <div class="url"><a href="/jessicamorales">About</a></div>
  440. </li>
  441. <!--end of member 6-->
  442.  
  443. <!--start of member 7-->
  444. <li>
  445. <div class="name">Ryan Park</div>
  446. <figure>
  447. <!--member image--><img src="http://static.tumblr.com/qxjwntd/W1po4b38r/ryan_park.png">
  448. <figcaption>
  449. <!--edit your member description from here-->It's been one year since the world had been overrun by zombies. Ryan Park once belonged to a group until he left it after his son died. Half a year later, he finally takes a chance to trust someone when he meets Alice Danvers and she helps save his life from a zombie. The two team up and help one another further survive the apocalypse.
  450. </figcaption>
  451. </figure>
  452. <div class="url"><a href="/ryanpark">About</a></div>
  453. </li>
  454. <!--end of member 7-->
  455.  
  456. <!--start of member 8-->
  457. <li>
  458. <div class="name">Chaz Hoo <br>[Single Parent]</div>
  459. <figure>
  460. <!--member image--><img src="http://static.tumblr.com/qxjwntd/zCVo4b38x/single_parent.png">
  461. <figcaption>
  462. <!--edit your member description from here-->Chaz and Avery became parents at a young age during high school. Things got tough for the teen parents as Chaz had to drop out of school to get two jobs while Avery had a shopping problem, rolling the two of them into a massive amount of debt. Due to the amount of money problems they had, Avery made a deal with her parents, which led to her leaving Chaz and Bridget behind. Six years later, they reunite, only Chaz isn't too happy to see his former girlfriend.
  463. </figcaption>
  464. </figure>
  465. <div class="url"><a href="/">About</a></div>
  466. </li>
  467. <!--end of member 8-->
  468.  
  469. </ul>
  470.  
  471. <div id="c">codes by<br /><a href="http://pohroro.tumblr.com">pohroro</a></div>
  472.  
  473. </body>
  474. </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!