API tools faq
paste
Advertisement
sunkei

Ryoma

sunkei
Dec 16th, 2012
13,948
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.56 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Ryoma
  3. page made by gyapo.tumblr.com
  4. don't remove this comment
  5. -->
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8.  
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10.  
  11.  
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19.  
  20.  
  21.  
  22. <style type="text/css">
  23.  
  24. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  25.  
  26. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  27.  
  28.  
  29.  
  30. body
  31. {font-family:calibri;
  32. font-size:10px;
  33. background-color:#fff;
  34. background-image:url('http://25.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo4_250.png');
  35. background-position: fixed;
  36. background-attachment:fixed;
  37. background-repeat:repeat;}
  38.  
  39. a
  40. {text-decoration:none;}
  41.  
  42.  
  43. #all
  44. {margin:0 auto;margin-top:100px;}
  45.  
  46. #avatar
  47. {border:5px solid #fff;
  48. width:100px;height:100px;
  49. box-shadow:0px 0px 5px #ddd;overflow:hidden;}
  50. #avatar img
  51. {width:100px;}
  52. .member
  53. {width:100px;height:100px;margin:10px;}
  54. .slide
  55. {padding:5px;position:absolute;width:90px;margin:5px;height:90px;opacity:0;}
  56.  
  57. #white
  58. {background-color:#fff;-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
  59. #about
  60. {-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;text-align:justify;overflow:auto;}
  61. #name
  62. {-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;text-align:center;}
  63.  
  64. #position
  65. {margin-top:25px;text-transform:uppercase;letter-spacing:2px;}
  66. #blog
  67. {font-style:italic;}
  68. .member:hover #white
  69. {opacity:0.4;}
  70.  
  71.  
  72. #right:hover #name
  73. {margin-left:245px;opacity:1;z-index:999;}
  74. #right:hover #about
  75. {margin-left:125px;opacity:1;z-index:999;}
  76. #center:hover #name
  77. {margin-left:-115px;opacity:1;z-index:999;}
  78. #center:hover #about
  79. {margin-left:125px;opacity:1;z-index:999;}
  80. #left:hover #name
  81. {margin-left:-235px;opacity:1;z-index:999;}
  82. #left:hover #about
  83. {margin-left:-115px;opacity:1;z-index:999;}
  84.  
  85.  
  86.  
  87.  
  88. #right #about
  89. {background-color:#dde3f0;color:#969eb1;}
  90. #right #name
  91. {background-color:#cdd3e0;}
  92. #right #position
  93. {color:#969eb1;border-bottom:1px solid #dde3f0;}
  94. #right #blog
  95. {color:#fff;opacity:0.8;}
  96.  
  97. #center #about
  98. {background-color:#f5e9c1;color:#c5ba99;}
  99. #center #name
  100. {background-color:#e2dbc4;}
  101. #center #position
  102. {color:#c5ba99;border-bottom:1px solid #f5e9c1;}
  103. #center #blog
  104. {color:#fff;opacity:0.8;}
  105.  
  106. #left #about
  107. {background-color:#f8f2fa;color:#b2adb4;}
  108. #left #name
  109. {background-color:#d9d3db;}
  110. #left #position
  111. {color:#b2adb4;border-bottom:1px solid #efdcf7;}
  112. #left #blog
  113. {color:#fff;opacity:0.8;}
  114.  
  115. #linetwo #right #about
  116. {background-color:#ddd;color:#888;}
  117. #linetwo #right #name
  118. {background-color:#bbb;}
  119. #linetwo #right #position
  120. {color:#888;border-bottom:1px solid #ddd;}
  121. #linetwo #right #blog
  122. {color:#fff;opacity:0.8;}
  123.  
  124. .other
  125. {margin:5px 0px 5px 10px;padding:10px 5px 10px 15px ;color:#aaa;text-transform:uppercase;font-family:courier;text-align:center;letter-spacing:5px;}
  126. #upper
  127. {width:330px;background-color:#000;color:#fff;}
  128. #back
  129. {width:210px;}
  130. #gyapo
  131. {width:90px;}
  132.  
  133. </style>
  134. </head>
  135. <body>
  136. <table id="all" border="0" cellpadding="0" cellspacing="0">
  137.  
  138. <tr><td colspan="3">
  139. <div class="other" id="upper">Mada mada dane</div>
  140. </td></tr>
  141. <tr><!--line 1-->
  142.  
  143. <td><div class="member" id="right">
  144. <div class="slide" id="name">
  145. <div class="title" id="position">Golden Pair</div>
  146. <div class="title" id="blog">Lavestale</div>
  147. </div><!--rightname-->
  148. <div class="slide" id="about">
  149. Excepteur esse single-origin coffee, blog Austin eiusmod helvetica craft beer chambray.
  150. </div><!--about right-->
  151. <a href="/"><!--blog URL-->
  152. <div class="slide" id="white"></div><!--white-->
  153. <div id="avatar">
  154. <img src="http://media.tumblr.com/tumblr_m9fosbfOKf1r5r7s9.png"/>
  155. </div><!--avatar-->
  156. </a>
  157. </div><!--member--></td>
  158.  
  159. <td><div class="member" id="center">
  160. <div class="slide" id="name">
  161. <div class="title" id="position">Captain</div>
  162. <div class="title" id="blog">Gyapo</div>
  163. </div><!--rightname-->
  164. <div class="slide" id="about">
  165. Commodo veniam excepteur, before they sold out blue bottle exercitation fixie cray organic ethical irony consectetur etsy odio.
  166.  
  167. Odio esse pitchfork retro laborum. PBR truffaut pariatur cardigan. Forage banksy high life +1 mollit flexitarian.
  168. </div><!--about right-->
  169. <a href="/"><!--blog URL-->
  170. <div class="slide" id="white"></div><!--white-->
  171. <div id="avatar">
  172. <img src="http://media.tumblr.com/tumblr_m9fougJmW21r5r7s9.png"/></a>
  173. </div><!--avatar-->
  174. </a>
  175. </div><!--member--></td>
  176.  
  177. <td><div class="member" id="left">
  178. <div class="slide" id="name">
  179. <div class="title" id="position">Uke</div>
  180. <div class="title" id="blog">Sunkei</div>
  181. </div><!--rightname-->
  182. <div class="slide" id="about">
  183. Ethnic irure letterpress salvia pinterest. American apparel pour-over aute ut high life, scenester.
  184. </div><!--about right-->
  185. <a href="/"><!--blog URL-->
  186. <div class="slide" id="white"></div><!--white-->
  187. <div id="avatar">
  188. <img src="http://media.tumblr.com/tumblr_m9fottAEkX1r5r7s9.png"/>
  189. </div><!--avatar-->
  190. </a>
  191. </div><!--member--></td>
  192. </tr><!--line 1 end-->
  193.  
  194.  
  195.  
  196. <tr id="linetwo"><!--line 2-->
  197. <td><div class="member" id="right">
  198. <div class="slide" id="name">
  199. <div class="title" id="position">Coach</div>
  200. <div class="title" id="blog">Blog</div>
  201. </div><!--rightname-->
  202. <div class="slide" id="about">
  203. Optimized for Chrome
  204. </div><!--about right-->
  205. <a href="/"><!--blog URL-->
  206. <div class="slide" id="white"></div><!--white-->
  207. <div id="avatar">
  208. <img src="http://media.tumblr.com/tumblr_m9fou235h21r5r7s9.png"/>
  209. </div><!--avatar-->
  210. </a>
  211. </div><!--member--></td>
  212.  
  213. <td><div class="member" id="center">
  214. <div class="slide" id="name">
  215. <div class="title" id="position">Manager</div>
  216. <div class="title" id="blog">Blog</div>
  217. </div><!--rightname-->
  218. <div class="slide" id="about">
  219. Twee accusamus cupidatat nesciunt, exercitation seitan skateboard. Forage kale chips brooklyn fugiat sint brunch.
  220. </div><!--about right-->
  221. <a href="/"><!--blog URL-->
  222. <div class="slide" id="white"></div><!--white-->
  223. <div id="avatar">
  224. <img src="http://media.tumblr.com/tumblr_m9vyrsDkNG1r5r7s9.gif"/></a>
  225. </div><!--avatar-->
  226. </a>
  227. </div><!--member--></td>
  228.  
  229. <td><div class="member" id="left">
  230. <div class="slide" id="name">
  231. <div class="title" id="position">position</div>
  232. <div class="title" id="blog">blog</div>
  233. </div><!--rightname-->
  234. <div class="slide" id="about">
  235. text text text
  236. </div><!--about right-->
  237. <a href="/"><!--blog URL-->
  238. <div class="slide" id="white"></div><!--white-->
  239. <div id="avatar">
  240. <img src="http://media.tumblr.com/tumblr_m9fou8L3dR1r5r7s9.png"/>
  241. </div><!--avatar-->
  242. </a>
  243. </div><!--member--></td>
  244. </tr><!--end line 2-->
  245.  
  246.  
  247. <tr><td colspan="2">
  248. <a href="/"><div class="other "id="back">back to blog</div></a>
  249. </td>
  250. <td>
  251. <a title="ryoma by gyapo" href="http://gyapo.tumblr.com/"><div class="other" id="gyapo">©</div><a>
  252. </td>
  253. </tr>
  254. </table>
  255.  
  256. </body>
  257. </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!