API tools faq
paste
ninpen

moi

ninpen
Dec 22nd, 2014
832
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en"><head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5. <title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}" />
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <!-------------------------------
  14.  
  15. MOI BY NINPEN.TUMBLR.COM
  16. DO NOT REMOVE THE CREDIT.
  17.  
  18. --------------------------------->
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27. <style type="text/css">
  28. ::-webkit-scrollbar{
  29. height: 4px;
  30. width: 4px;
  31. background-color:;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb{
  35. background-color:#99f4ff;
  36. border:1px solid #fafafa;}
  37.  
  38. ::-webkit-scrollbar-track{
  39. background-color:#fafafa;
  40. }
  41.  
  42. html{
  43. padding:0;
  44. margin:0;
  45. height:100%;
  46. width:100%;
  47. overflow:hidden;
  48. }
  49.  
  50. html,body{
  51. padding:0;
  52. margin:0;
  53. height:100%;
  54. width:100%;
  55. position:relative;
  56. font:11px/13px courier;
  57. word-wrap:break-word;
  58. overflow:hidden;
  59. -webkit-backface-visibility:hidden;
  60. box-shadow:inset 30px 30px PAGE BORDER WILL GO HERE,inset -30px -30pxPAGE BORDER WILL GO HERE;
  61. }
  62.  
  63. html:before{
  64. content:"";
  65. width:100%;
  66. height:100%;
  67. top:0;
  68. left:0;
  69. box-shadow:inset 40px 40px SECOND PAGE BORDER WILL GO HERE,inset -40px -40px SECOND PAGE BORDER WILL GO HERE;
  70. position:absolute;
  71. background:#fff url('BACKGROUND IMAGE GOES HERE') repeat center center;
  72. }
  73.  
  74. a{
  75. color:LINK COLOR GOES HERE;
  76. text-decoration:none;
  77. }
  78.  
  79.  
  80.  
  81. #content{
  82. width:504px;
  83. left:50%;
  84. top:50%;
  85. margin:-241px 0 0 -241px;
  86. height:488px;
  87. position:fixed;
  88. }
  89.  
  90. #box{
  91. float:left;
  92. padding:10px;
  93. width:140px;
  94. height:100px;
  95. font:9px/9px courier;
  96. letter-spacing:1px;
  97. overflow:hidden;
  98. position:relative;
  99. text-transform:uppercase;
  100. -webkit-transition: opacity 0.4s linear;
  101. -webkit-transition: all 0.4s ease-in-out;
  102. -moz-transition: all 0.4s ease-in-out;
  103. -o-transition: all 0.4s ease-in-out;
  104. }
  105.  
  106. #box img{
  107. position:Absolute;
  108. top:0px;
  109. left:0;
  110. }
  111.  
  112. #box:nth-of-type(odd):hover{
  113. width:160px;
  114. -webkit-transition: opacity 0.4s linear;
  115. -webkit-transition: all 0.4s ease-in-out;
  116. -moz-transition: all 0.4s ease-in-out;
  117. -o-transition: all 0.4s ease-in-out;
  118. }
  119.  
  120. #box:nth-of-type(odd):hover #nav,#box:nth-of-type(odd):hover #nav2{
  121. width:160px;
  122. -webkit-transition: opacity 0.4s linear;
  123. -webkit-transition: all 0.4s ease-in-out;
  124. -moz-transition: all 0.4s ease-in-out;
  125. -o-transition: all 0.4s ease-in-out;
  126. }
  127.  
  128. #box:nth-of-type(even):hover{
  129. border-radius:4px 4px 0 0 ;
  130. margin-top:-30px;
  131. height:130px;
  132. -webkit-transition: opacity 0.4s linear;
  133. -webkit-transition: all 0.4s ease-in-out;
  134. -moz-transition: all 0.4s ease-in-out;
  135. -o-transition: all 0.4s ease-in-out;
  136. }
  137.  
  138. .b1{
  139. border-radius:5px 0 0 0;
  140. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  141. border-left:1px solid BORDER COLOR GOES HERE;
  142. border-top:1px solid BORDER COLOR GOES HERE;
  143. }
  144.  
  145. .b2{
  146. background:BOX TWO BACKGROUND COLOR GOES HERE;
  147. border-top:1px solid BORDER COLOR GOES HERE;
  148. border-right:1px solid BORDER COLOR GOES HERE;
  149. border-left:1px solid BORDER COLOR GOES HERE;
  150. }
  151.  
  152. .b3{
  153. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  154. border-right:1px solid BORDER COLOR GOES HERE;
  155. border-top:1px solid BORDER COLOR GOES HERE;
  156. border-radius:0 5px 0 0;
  157. }
  158.  
  159. .b4{
  160. border-top:1px solid BORDER COLOR GOES HERE;
  161. border-right:1px solid BORDER COLOR GOES HERE;
  162. border-left:1px solid BORDER COLOR GOES HERE;
  163. }
  164.  
  165. .b5{
  166. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  167. border-top:1px solid BORDER COLOR GOES HERE;
  168. border-right:1px solid BORDER COLOR GOES HERE;
  169. }
  170.  
  171. .b6{
  172. background:BOX SIX BACKGROUND COLOR GOES HERE;
  173. border-top:1px solid BORDER COLOR GOES HERE;
  174. border-right:1px solid BORDER COLOR GOES HERE;
  175. }
  176.  
  177. .b7{
  178. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  179. border-right:1px solid BORDER COLOR GOES HERE;
  180. border-top:1px solid BORDER COLOR GOES HERE;
  181. border-left:1px solid BORDER COLOR GOES HERE;
  182. }
  183.  
  184. .b8{
  185. border-right:1px solid BORDER COLOR GOES HERE;
  186. border-top:1px solid BORDER COLOR GOES HERE;
  187. }
  188.  
  189. .b9{
  190. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  191. border-top:1px solid BORDER COLOR GOES HERE;
  192. border-right:1px solid BORDER COLOR GOES HERE;
  193. }
  194.  
  195. .b10{
  196. background:BOX TEN BACKGROUND COLOR GOES HERE;
  197. border-radius:0 0 0 5px;
  198. border-top:1px solid BORDER COLOR GOES HERE;
  199. border-right:1px solid BORDER COLOR GOES HERE;
  200. border-left:1px solid BORDER COLOR GOES HERE;
  201. border-bottom:1px solid BORDER COLOR GOES HERE;
  202. }
  203.  
  204. .b11{
  205. background:TEXT BOX BACKGROUND COLOR GOES HERE;
  206. border-top:1px solid BORDER COLOR GOES HERE;
  207. border-bottom:1px solid BORDER COLOR GOES HERE;
  208. border-right:1px solid BORDER COLOR GOES HERE;
  209. }
  210.  
  211. .b12{
  212. border-top:1px solid BORDER COLOR GOES HERE;
  213. border-bottom:1px solid BORDER COLOR GOES HERE;
  214. border-radius:0 0 5px 0;
  215. border-right:1px solid BORDER COLOR GOES HERE;
  216. }
  217.  
  218. #info{
  219. width:140px;
  220. height:100px;
  221. margin:0 auto;
  222. line-height:12px;
  223. overflow:auto;
  224. color:TEXT COLOR GOES HERE;
  225. text-align:justify;
  226. }
  227.  
  228. #info a{
  229. color:TEXT BOX LINK COLOR GOES HERE;
  230. background:TEXT BOX LINK BACKGROUND COLOR GOES HERE;
  231. }
  232.  
  233. #info a:hover{
  234. color:TEXT BOX LINK HOVER COLOR GOES HERE;
  235. background:TEXT BOX LINK HOVER BACKGROUND COLOR GOES HERE;
  236. }
  237.  
  238. #nav{
  239. width:140px;
  240. height:100px;
  241. position:absolute;
  242. -webkit-transition: opacity 0.4s linear;
  243. -webkit-transition: all 0.4s ease-in-out;
  244. -moz-transition: all 0.4s ease-in-out;
  245. -o-transition: all 0.4s ease-in-out;
  246. }
  247.  
  248. #nav a,#nav2 a{
  249. font:8px/8px courier;
  250. letter-spacing:2px;
  251. margin-right:5px;
  252. text-transform:uppercase;
  253. display:block;
  254. padding:4px 0;
  255. text-align:right;
  256. position:relative;
  257. color:LINK COLOR GOES HERE;
  258. -webkit-transition: opacity 0.4s linear;
  259. -webkit-transition: all 0.4s ease-in-out;
  260. -moz-transition: all 0.4s ease-in-out;
  261. -o-transition: all 0.4s ease-in-out;
  262. }
  263.  
  264. #nav a:hover{
  265. background:LINK HOVER BACKGROUND GOES HERE;
  266. color:LINK COLOR HOVER GOES HERE;
  267. margin-right:10px;
  268. -webkit-transition: opacity 0.4s linear;
  269. -webkit-transition: all 0.4s ease-in-out;
  270. -moz-transition: all 0.4s ease-in-out;
  271. -o-transition: all 0.4s ease-in-out;
  272. }
  273.  
  274. #nav a:after{
  275. opacity:.12;
  276. content:"";
  277. top:5px;
  278. margin-left:5px;
  279. position:Absolute;
  280. width:100%;
  281. height:14px;
  282. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkQID/QCYjiAsmgAAmAKZBgnAVMAU4VcJMhesAAJlsCAUBngp6AAAAAElFTkSuQmCC) no-repeat top left;
  283. }
  284.  
  285. #nav2{
  286. width:140px;
  287. height:100px;
  288. position:absolute;
  289. -webkit-transition: opacity 0.4s linear;
  290. -webkit-transition: all 0.4s ease-in-out;
  291. -moz-transition: all 0.4s ease-in-out;
  292. -o-transition: all 0.4s ease-in-out;
  293. }
  294.  
  295. #nav2 a{
  296. margin-left:10px;
  297. text-align:left;
  298. -webkit-transition: opacity 0.4s linear;
  299. -webkit-transition: all 0.4s ease-in-out;
  300. -moz-transition: all 0.4s ease-in-out;
  301. -o-transition: all 0.4s ease-in-out;
  302. }
  303.  
  304. #nav2 a:after{
  305. opacity:.12;
  306. content:"";
  307. top:5px;
  308. left:-10px;
  309. position:Absolute;
  310. width:100%;
  311. height:14px;
  312. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkQID/QCYjiAsmgAAmAKZBgnAVMAU4VcJMhesAAJlsCAUBngp6AAAAAElFTkSuQmCC) no-repeat top left;
  313. }
  314.  
  315. #nav2 a:hover{
  316. background:LINK HOVER BACKGROUND GOES HERE;
  317. color:LINK COLOR HOVER GOES HERE;
  318. padding:5px 0;
  319. margin-left:20px;
  320. -webkit-transition: opacity 0.4s linear;
  321. -webkit-transition: all 0.4s ease-in-out;
  322. -moz-transition: all 0.4s ease-in-out;
  323. -o-transition: all 0.4s ease-in-out;
  324. }
  325. </style>
  326. </head>
  327. <body>
  328.  
  329.  
  330.  
  331.  
  332. <div id="content">
  333.  
  334. <div id="box" class="b1">
  335. <div id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dictum efficitur. Nam eget risus euismod, blandit lacus nec, ornare dui.</div>
  336. </div>
  337.  
  338. <div id="box" class="b2"></div>
  339.  
  340. <div id="box" class="b3">
  341. <div id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dictum efficitur. Nam eget risus euismod, blandit lacus nec, ornare dui. Etiam consequat ex blandit sapien laoreet, iaculis porttitor lacus cursus.</div>
  342. </div>
  343.  
  344. <div id="box" class="b4"><img src="IMAGE URL GOES HERE (160PX BY 160PX)"></div>
  345.  
  346. <div id="box" class="b5">
  347. <div id="nav">
  348. <a href="/">Go back</a>
  349. <a href="http://ninpen.tumblr.com/">Credit</a>
  350. <a href="/">link goes here</a>
  351. <a href="/">link goes here</a>
  352. <a href="/">link goes here</a>
  353. <a href="/">link goes here</a>
  354. </div>
  355. </div>
  356.  
  357. <div id="box" class="b6"></div>
  358.  
  359. <div id="box" class="b7">
  360. <div id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dictum efficitur. Nam eget risus euismod, blandit lacus nec, ornare dui. Etiam consequat ex blandit sapien laoreet, iaculis porttitor lacus cursus.</div>
  361. </div>
  362.  
  363. <div id="box" class="b8"><img src="IMAGE URL GOES HERE (160PX BY 160PX)"></div>
  364.  
  365. <div id="box" class="b9">
  366. <div id="nav2">
  367. <a href="/">link goes here</a>
  368. <a href="/">link goes here</a>
  369. <a href="/">link goes here</a>
  370. <a href="/">link goes here</a>
  371. <a href="/">link goes here</a>
  372. <a href="/">link goes here</a>
  373. </div>
  374. </div>
  375.  
  376. <div id="box" class="b10"></div>
  377.  
  378. <div id="box" class="b11">
  379. <div id="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo dictum efficitur. Nam eget risus euismod, blandit lacus nec, ornare dui. Etiam consequat ex blandit sapien laoreet, iaculis porttitor lacus cursus.</div>
  380. </div>
  381.  
  382. <div id="box" class="b12"><img src="IMAGE URL GOES HERE (160PX BY 160PX)"></div>
  383.  
  384. </div>
  385.  
  386.  
  387.  
  388.  
  389.  
  390. </body>
  391. </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!