API tools faq
paste
Advertisement
ninpen

about me

ninpen
Feb 3rd, 2013
28,566
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.43 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.  
  3.  
  4. <html lang="en">
  5.  
  6. <title>{Title}</title>
  7.  
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}" />
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  14. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/G7Omn9may/scripted.js"></script>
  15. <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,900,700italic,900italic' rel='stylesheet' type='text/css'>
  18.  
  19.  
  20.  
  21. <style type="text/css">
  22. body{
  23. font-family:Arial, Helvetica, sans-serif;
  24. font-size: 10px;
  25. background:#fafafa url('') repeat right top;
  26. }
  27.  
  28. a:link, a:active, a:visited{
  29. color: #a0a0a0;
  30. font-style:italic;
  31. letter-spacing:1px;
  32. text-decoration: none;
  33. }
  34.  
  35. h2{
  36. font-size:10px;
  37. font-weight:bold;
  38. font-style:italic;
  39. text-transform:uppercase;
  40. text-align:center;
  41. margin-bottom:5px;
  42. padding-bottom:3px;
  43. border-bottom:1px dotted #ccc;
  44. color:#CBCBCB;
  45. width:80%;
  46. margin-left:10%;
  47. }
  48.  
  49. img{
  50. max-width:100%;
  51. }
  52.  
  53. #center{
  54. left:50%;
  55. top:50%;
  56. margin:-300px 0 0 -400px;
  57. position:fixed;
  58. width:800px;
  59. height:600px;
  60. background:#fafafa url('') repeat right top;
  61. overflow:hidden;
  62. }
  63.  
  64. #nav{
  65. width:124px;
  66. position:fixed;
  67. left:50%;
  68. margin-left:-62px;
  69. top:10px;
  70. }
  71.  
  72. #nav a{
  73. background:#fff;
  74. font:7px trebuchet ms;
  75. letter-spacing:1px;
  76. text-transform:uppercase;
  77. padding:5px 7px;
  78. }
  79.  
  80. #boxone{
  81. margin:490px 0 0 0;
  82. width:260px;
  83. height:110px;
  84. position:absolute;
  85. }
  86.  
  87. #boxtwo{
  88. margin:490px 0 0 270px;
  89. width:260px;
  90. height:110px;
  91. position:absolute;
  92. }
  93.  
  94. #boxthree{
  95. margin:490px 0 0 540px;
  96. width:260px;
  97. height:110px;
  98. position:absolute;
  99. }
  100.  
  101. #boxed{
  102. width:250px;
  103. height:90px;
  104. padding:5px 5px 10px 5px;
  105. bottom:-3px;
  106. left:0;
  107. position:absolute;
  108. background:#fff;
  109. z-index: 123456!important;
  110. display:block;
  111. }
  112.  
  113. #boxone:hover,#boxtwo:hover,#boxthree:hover{
  114. margin-top: 0;
  115. padding-top:490px;
  116. }
  117.  
  118. #boxone:hover #aboutone,#boxtwo:hover #abouttwo,#boxthree:hover #aboutthree{
  119. top:0px;
  120. }
  121.  
  122. #boxed h1{
  123. font:35px "motor oil";
  124. color:#ccc;
  125. text-transform:uppercase;
  126. letter-spacing:0px;
  127. text-align:center;
  128. }
  129.  
  130. #boxed p{
  131. font:7px trebuchet ms;
  132. letter-spacing:2px;
  133. color:#ccc;
  134. text-transform:uppercase;
  135. text-align:center;
  136. margin-top:20px;
  137. margin-bottom:-20px;
  138. line-height:7px;
  139. }
  140.  
  141. .lineone{
  142. width:260px;
  143. height:4px;
  144. background:#A8E6CE;
  145. display:inline-block;
  146. margin-top:13px;
  147. margin-left:-5px;
  148. position:absolute;
  149. }
  150.  
  151. .linetwo{
  152. width:260px;
  153. height:4px;
  154. background:#DCEDC2;
  155. display:inline-block;
  156. margin-left:-5px;
  157. margin-top:13px;
  158. position:absolute;
  159. }
  160.  
  161. .linethree{
  162. width:260px;
  163. height:4px;
  164. background:#FFAAA6;
  165. display:inline-block;
  166. margin-top:13px;
  167. margin-left:-5px;
  168. position:absolute;
  169. }
  170.  
  171. @font-face {
  172. font-family: "motor oil";
  173. src: url('http://static.tumblr.com/1f1tzta/9Rcmhm0yl/motor_oil_1937_m54.ttf');
  174. }
  175.  
  176. #letter{
  177. font:25px "motor oil";
  178. position:absolute;
  179. text-transform:uppercase;
  180. z-index:1;
  181. top:0;
  182. margin-left:16px;
  183. margin-top:5px;
  184. }
  185.  
  186. .initialsone {
  187. width: 50px;
  188. height: 0px;
  189. padding:15px 0;
  190. position: relative;
  191. color:#fff;
  192. background: #A8E6CE;
  193. margin:0 auto;
  194. }
  195.  
  196. .initialsone:before {
  197. content: "";
  198. position: absolute;
  199. top: -10px;
  200. left: 0;
  201. width: 0;
  202. height: 0;
  203. border-left: 25px solid transparent;
  204. border-right: 25px solid transparent;
  205. border-bottom: 10px solid #A8E6CE;
  206. }
  207.  
  208. .initialsone:after {
  209. content: "";
  210. position: absolute;
  211. bottom: -10px;
  212. left: 0;
  213. width: 0;
  214. height: 0;
  215. border-left: 25px solid transparent;
  216. border-right: 25px solid transparent;
  217. border-top: 10px solid #A8E6CE;
  218. }
  219.  
  220. .initialstwo {
  221. width: 50px;
  222. height: 0px;
  223. padding:15px 0;
  224. position: relative;
  225. color:#fff;
  226. background: #DCEDC2;
  227. margin:0 auto;
  228. }
  229.  
  230. .initialstwo:before {
  231. content: "";
  232. position: absolute;
  233. top: -10px;
  234. left: 0;
  235. width: 0;
  236. height: 0;
  237. border-left: 25px solid transparent;
  238. border-right: 25px solid transparent;
  239. border-bottom: 10px solid #DCEDC2;
  240. }
  241.  
  242. .initialstwo:after {
  243. content: "";
  244. position: absolute;
  245. bottom: -10px;
  246. left: 0;
  247. width: 0;
  248. height: 0;
  249. border-left: 25px solid transparent;
  250. border-right: 25px solid transparent;
  251. border-top: 10px solid #DCEDC2;
  252. }
  253.  
  254. .initialsthree {
  255. width: 50px;
  256. height: 0px;
  257. padding:15px 0;
  258. position: relative;
  259. color:#fff;
  260. background: #FFAAA6;
  261. margin:0 auto;
  262. }
  263.  
  264. .initialsthree:before {
  265. content: "";
  266. position: absolute;
  267. top: -10px;
  268. left: 0;
  269. width: 0;
  270. height: 0;
  271. border-left: 25px solid transparent;
  272. border-right: 25px solid transparent;
  273. border-bottom: 10px solid #FFAAA6;
  274. }
  275.  
  276. .initialsthree:after {
  277. content: "";
  278. position: absolute;
  279. bottom: -10px;
  280. left: 0;
  281. width: 0;
  282. height: 0;
  283. border-left: 25px solid transparent;
  284. border-right: 25px solid transparent;
  285. border-top: 10px solid #FFAAA6;
  286. }
  287.  
  288. #aboutone{
  289. width:240px;
  290. height:465px;
  291. background:#fff url('') repeat right top;
  292. padding:10px;
  293. position:absolute;
  294. top:500px;
  295. color:#CBCBCB;
  296. line-height:17px !important;
  297. font:11px calibri;
  298. overflow:hidden;
  299. }
  300.  
  301. #abouttwo{
  302. width:240px;
  303. height:465px;
  304. background:#fff url('') repeat right top;
  305. color:#fff;
  306. padding:10px;
  307. position:absolute;
  308. top:500px;
  309. overflow:hidden;
  310. }
  311.  
  312. #aboutthree{
  313. width:240px;
  314. height:465px;
  315. background:#fff url('') repeat right top;
  316. color:#CBCBCB;
  317. padding:10px;
  318. position:absolute;
  319. top:500px;
  320. overflow:hidden;
  321. }
  322.  
  323. .clear img{
  324. width:80px;
  325. max-width:80px;
  326. padding:10px;
  327. background:#fff;
  328. border:1px solid #eee;
  329. margin:0 3px 0 0;
  330. float:left;
  331. }
  332.  
  333. .transition{
  334. -webkit-transition: all 0.7s ease-in-out;
  335. -moz-transition: all 0.7s ease-in-out;
  336. -o-transition: all 0.7s ease-in-out;
  337. -ms-transition: all 0.7s ease-in-out;
  338. transition: all 0.7s ease-in-out;
  339. }
  340.  
  341. ul{
  342. line-height:8px;
  343. }
  344.  
  345. .text{
  346. color:#CBCBCB;
  347. font:7px trebuchet ms;
  348. letter-spacing:2px;
  349. text-transform:uppercase;
  350. }
  351.  
  352. li.list1{font-size:10px;list-style: square outside; color:#A8E6CE;}
  353. li.list2{font-size:10px;list-style: square outside; color:#DCEDC2;}
  354. li.list3{font-size:10px;list-style: square outside; color:#FFD3B5;}
  355. li.list4{font-size:10px;list-style: square outside; color:#FF8C94;}
  356. </style>
  357. </head>
  358. <body>
  359.  
  360.  
  361.  
  362. <div id="center">
  363. <div id="nav">
  364. <a href="/">Home</a>
  365. <a href="/ask">Inbox</a>
  366. <a href="http://ninpen.tumblr.com/">Credit</a>
  367. </div>
  368.  
  369.  
  370.  
  371. <div id="boxone" class="transition">
  372. <div id="boxed">
  373. <span class="lineone"></span>
  374. <div class="initialsone"><div id="letter" style="left:0px;">M</div></div>
  375. <p>Get to know</p>
  376. <h1>Me</h1>
  377. </div>
  378.  
  379. <div id="aboutone" class="transition">
  380. <div class="clear"><img src="IMAGE URL GOES HERE"></div>
  381.  
  382. YOUR ABOUT ME WILL GO HERE
  383.  
  384.  
  385. </div>
  386. </div>
  387.  
  388.  
  389.  
  390.  
  391.  
  392. <div id="boxtwo" class="transition">
  393. <div id="boxed" class="two">
  394. <span class="linetwo"></span>
  395. <div class="initialstwo"><div id="letter" style="left:5px;">l</div></div>
  396. <p>Things I</p>
  397. <h1>Like</h1>
  398. </div>
  399.  
  400. <div id="abouttwo" class="transition">
  401. <h2>TITLE</h2>
  402. <ul>
  403. <li class="list1"><span class="text">ITEM ONE</span>
  404. <li class="list1"><span class="text">ITEM TWO</span>
  405. <li class="list1"><span class="text">ITEM THREE</span>
  406. <li class="list1"><span class="text">ITEM FOUR</span>
  407. </ul>
  408.  
  409. <h2>LINKS</h2>
  410. <ul>
  411. <li class="list2"><span class="text"><a href="LINK ONE URL">LINK ONE</A></span>
  412. <li class="list2"><span class="text"><a href="LINK TWO URL">LINK TWO</A></span>
  413. <li class="list2"><span class="text"><a href="LINK THREE URL">LINK THREE</A></span>
  414. <li class="list2"><span class="text"><a href="LINK FOUR URL">LINK FOUR</A></span>
  415. <li class="list2"><span class="text"><a href="LINK FIVE URL">LINK FIVE</A></span>
  416. <li class="list2"><span class="text"><a href="LINK SIX URL">LINK SIX</A></span>
  417. <li class="list2"><span class="text"><a href="LINK SEVEN URL">LINK SEVEN</A></span>
  418. <li class="list2"><span class="text"><a href="LINK EIGHT URL">LINK EIGHT</A></span>
  419. <li class="list2"><span class="text"><a href="LINK NINE URL">LINK NINE</A></span>
  420. </ul>
  421.  
  422. </div>
  423. </div>
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430. <div id="boxthree" class="transition">
  431. <div id="boxed">
  432. <span class="linethree"></span>
  433. <div class="initialsthree"><div id="letter" style="left:2px;">s</div></div>
  434. <p>Other</p>
  435. <h1>Stuff</h1>
  436. </div>
  437.  
  438. <div id="aboutthree" class="transition">
  439.  
  440. THIS IS A SPACE TO PUT WHATEVER YOU WANT. ANY EXTRA THINGS SUCH AS FANDOMS, BIAS, CELEBRETIES WHATEVER YOU WANT GOES HERE
  441.  
  442. </div>
  443. </div>
  444.  
  445.  
  446. </div>
  447. </body>
  448. </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!