API tools faq
paste
Advertisement
ninpen

ampersand

ninpen
Apr 5th, 2014
1,973
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <title>{Title}</title>
  5.  
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8. <link rel="shortcut icon" href="{Favicon}" />
  9. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/0wvmlf1xq/scripted.js"></script>
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  11. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  12.  
  13. <style type="text/css">
  14. body{
  15. background:BACKGROUND COLOR url(BACKGROUND IMAGE URL) repeat right top;
  16. }
  17.  
  18. a{
  19. text-decoration:none;
  20. color:LINK COLOR;
  21. }
  22.  
  23. .NINCREDIT a{
  24. color:THEME CREDIT COLOR;
  25. }
  26.  
  27. #center{
  28. width:600px;
  29. height:600px;
  30. position:fixed;
  31. top:50%;
  32. left:50%;
  33. margin:-300px 0 0 -300px;
  34. }
  35.  
  36. #ampersand{
  37. top:50%;
  38. width:380px;
  39. height:400px;
  40. position:relative;
  41. margin:-200px auto 0 auto;
  42. }
  43.  
  44. #amp1{
  45. top:5px;
  46. left:5px;
  47. width:300px;
  48. position:absolute;
  49. font:bold italic 500px/400px arial;
  50. color:transparent;
  51. z-index:3;
  52. -webkit-text-stroke-width: 1px;
  53. -webkit-text-stroke-color:STROKE COLOR (THE STROKE COLOR OF THE AMPERSAND);
  54. }
  55.  
  56. #amp1:before{
  57. content:"&";
  58. top:-15px;
  59. left:-25px;
  60. width:300px;
  61. position:absolute;
  62. font:bold italic 500px/400px arial;
  63. color:transparent;
  64. z-index:3;
  65. -webkit-text-stroke-width: 1px;
  66. -webkit-text-stroke-color:STROKE COLOR (THE STROKE COLOR OF THE AMPERSAND);
  67. }
  68.  
  69. #amper{
  70. width:300px;
  71. height:390px;
  72. position:absolute;
  73. font:bold italic 500px/400px arial;
  74. color:BOTTOM COLOR (THIRD COLOR DOWN);
  75. top:5px;
  76. left:5px;
  77. }
  78.  
  79. #amper:after{
  80. width:300px;
  81. content:"&";
  82. position:absolute;
  83. font:bold italic 500px/400px arial;
  84. color:TOP COLOR (FIRST COLOR);
  85. bottom:10px;
  86. right:10px;
  87. }
  88.  
  89. #amper:before{
  90. width:300px;
  91. content:"&";
  92. position:absolute;
  93. font:bold italic 500px/400px arial;
  94. color:SECOND COLOR;
  95. bottom:px;
  96. right:20px;
  97. }
  98.  
  99. #circ{
  100. width:10px;
  101. height:10px;
  102. z-index:3;
  103. position:absolute;
  104. border-radius:100px;
  105. cursor:pointer;
  106. background:COLOR OF THE DOTS;
  107. box-shadow:0 0 5px rgba(0,0,0,.1);
  108. }
  109.  
  110. .d1{
  111. top:26px;
  112. right:100px;
  113. }
  114.  
  115. .d2{
  116. left:192px;
  117. top:127px;
  118. }
  119.  
  120. .d3{
  121. left:133px;
  122. top:155px;
  123. }
  124.  
  125. .d4{
  126. left:42px;
  127. bottom:100px;
  128. }
  129.  
  130. .d5{
  131. left:158px;
  132. top:205px;
  133. }
  134.  
  135. .d6{
  136. right:152px;
  137. top:174px;
  138. z-index: 99999!important;
  139. }
  140.  
  141. .d7{
  142. right:145px;
  143. bottom:87px;
  144. }
  145.  
  146. .d8{
  147. right:107px;
  148. bottom:44px;
  149. }
  150.  
  151. .d9{
  152. right:67px;
  153. bottom:14px;
  154. }
  155.  
  156. .d10{
  157. right:20px;
  158. bottom:55px;
  159. }
  160.  
  161. .d11{
  162. right:55px;
  163. bottom:88px;
  164. }
  165.  
  166. .d12{
  167. right:15px;
  168. bottom:142px;
  169. }
  170.  
  171. .d13{
  172. right:67px;
  173. bottom:173px;
  174. }
  175.  
  176. .d14{
  177. right:96px;
  178. bottom:133px;
  179. }
  180.  
  181. #info1{
  182. width:0px;
  183. height:0px;
  184. position:relative;
  185. left:75px;
  186. bottom:30px;
  187. font:8px/11px courier;
  188. z-index:1;
  189. letter-spacing:2px;
  190. text-transform:uppercase;
  191. }
  192.  
  193. #info2{
  194. width:0px;
  195. height:0px;
  196. position:relative;
  197. left:-214px;
  198. bottom:30px;
  199. font:8px/11px courier;
  200. letter-spacing:2px;
  201. text-transform:uppercase;
  202. }
  203.  
  204. .info{
  205. background:BACKGROUND COLOR OF THE INFO;
  206. color:TEXT OF INFO;
  207. width:140px;
  208. padding:0px;
  209. overflow:hidden;
  210. height:0px;
  211. z-index:9999;
  212. top:0px;
  213. opacity:1;
  214. position:absolute;
  215. -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
  216. transition-delay: .4s;
  217. -webkit-transition-delay: .4s;
  218. }
  219.  
  220. #line{
  221. position:absolute;
  222. background:LINE COLORS;
  223. }
  224.  
  225. .i1{
  226. width:0px;
  227. left:-63px;
  228. height:1px;
  229. top:35px;
  230. -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
  231. transition-delay: 0s;
  232. -webkit-transition-delay: 0s;
  233. }
  234.  
  235. .i2{
  236. left:-5px;
  237. width:1px;
  238. height:0px;
  239. top:0px;
  240. -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
  241. transition-delay: .2s;
  242. -webkit-transition-delay: .2s;
  243. }
  244.  
  245. .i3{
  246. width:0px;
  247. right:-214px;
  248. height:1px;
  249. top:35px;
  250. -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
  251. transition-delay: 0s;
  252. -webkit-transition-delay: 0s;
  253. }
  254.  
  255. .i4{
  256. left:155px;
  257. width:1px;
  258. height:0;
  259. top:0px;
  260. -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;
  261. transition-delay: .2s;
  262. -webkit-transition-delay: .2s;
  263. }
  264.  
  265. .d1:hover .i1,.d2:hover .i1,.d3:hover .i1,.d4:hover .i1,.d5:hover .i1,.d6:hover .i1,.d7:hover .i1,.d8:hover .i1,.d9:hover .i1,.d10:hover .i1,.d11:hover .i1,.d12:hover .i1,.d13:hover .i1,.d14:hover .i1,.d1:hover .i3,.d2:hover .i3,.d3:hover .i3,.d4:hover .i3,.d5:hover .i3,.d6:hover .i3,.d7:hover .i3,.d8:hover .i3,.d9:hover .i3,.d10:hover .i3,.d11:hover .i3,.d12:hover .i3,.d13:hover .i3,.d14:hover .i3{
  266. width:58px;
  267. -webkit-transition-delay: 0s;
  268. }
  269.  
  270. .d1:hover .info,.d2:hover .info,.d3:hover .info,.d4:hover .info,.d5:hover .info,.d6:hover .info,.d7:hover .info,.d8:hover .info,.d9:hover .info,.d10:hover .info,.d11:hover .info,.d12:hover .info,.d13:hover .info,.d14:hover .info{
  271. padding:5px;
  272. height:80px;
  273. opacity:1;
  274. margin-left:0;
  275. transition-delay: .6s;
  276. -webkit-transition-delay: .6s;
  277. }
  278.  
  279. .d1:hover .i2,.d2:hover .i2,.d3:hover .i2,.d4:hover .i2,.d5:hover .i2,.d6:hover .i2,.d7:hover .i2,.d8:hover .i2,.d9:hover .i2,.d10:hover .i2,.d11:hover .i2,.d12:hover .i2,.d13:hover .i2,.d14:hover .i2,.d1:hover .i4,.d2:hover .i4,.d3:hover .i4,.d4:hover .i4,.d5:hover .i4,.d6:hover .i4,.d7:hover .i4,.d8:hover .i4,.d9:hover .i4,.d10:hover .i4,.d11:hover .i4,.d12:hover .i4,.d13:hover .i4,.d14:hover .i4{
  280. height:90px;
  281. transition-delay: .4s;
  282. -webkit-transition-delay: .4s;
  283. }
  284.  
  285. #quote{
  286. margin:-180px 0 0 140px;
  287. width:320px;
  288. height:520px;
  289. letter-spacing:2px;
  290. text-transform:uppercase;
  291. text-align:center;
  292. font:85px 'Fjalla One', sans-serif;
  293. color:COLOR OF QUOTE (LARGE);
  294. }
  295.  
  296. .quo{
  297. padding:2px;
  298. font:bold 8px century gothic;
  299. letter-spacing:2px;
  300. text-transform:uppercase;
  301. margin:0 auto;
  302. width:250px;
  303. color:COLOR OF QUOTE (SMALL);
  304. }
  305. </style>
  306. </head>
  307. <body>
  308.  
  309.  
  310. <div id="center">
  311.  
  312.  
  313. <div id="ampersand">
  314. <div id="amp1">&</div>
  315. <div id="amper">&</div>
  316.  
  317.  
  318. <div id="circ" class="d1">
  319. <div id="info1">
  320. <div id="line" class="i1"></div>
  321. <div id="line" class="i2"></div>
  322. <div class="info">
  323. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  324. </div>
  325. </div>
  326. </div>
  327.  
  328.  
  329. <div id="circ" class="d2">
  330. <div id="info2">
  331. <div id="line" class="i3"></div>
  332. <div id="line" class="i4"></div>
  333. <div class="info">
  334. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  335. </div>
  336. </div>
  337. </div>
  338.  
  339.  
  340. <div id="circ" class="d3">
  341. <div id="info2">
  342. <div id="line" class="i3"></div>
  343. <div id="line" class="i4"></div>
  344. <div class="info">
  345. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  346. </div>
  347. </div>
  348. </div>
  349.  
  350.  
  351. <div id="circ" class="d4">
  352. <div id="info2">
  353. <div id="line" class="i3"></div>
  354. <div id="line" class="i4"></div>
  355. <div class="info">
  356. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  357. </div>
  358. </div>
  359. </div>
  360.  
  361.  
  362. <div id="circ" class="d5">
  363. <div id="info2">
  364. <div id="line" class="i3"></div>
  365. <div id="line" class="i4"></div>
  366. <div class="info">
  367. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  368. </div>
  369. </div>
  370. </div>
  371.  
  372.  
  373. <div id="circ" class="d6">
  374. <div id="info1">
  375. <div id="line" class="i1"></div>
  376. <div id="line" class="i2"></div>
  377. <div class="info">
  378. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  379. </div>
  380. </div>
  381. </div>
  382.  
  383.  
  384. <div id="circ" class="d8">
  385. <div id="info2">
  386. <div id="line" class="i3"></div>
  387. <div id="line" class="i4"></div>
  388. <div class="info">
  389. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  390. </div>
  391. </div>
  392. </div>
  393.  
  394.  
  395. <div id="circ" class="d9">
  396. <div id="info1">
  397. <div id="line" class="i1"></div>
  398. <div id="line" class="i2"></div>
  399. <div class="info">
  400. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  401. </div>
  402. </div>
  403. </div>
  404.  
  405.  
  406. <div id="circ" class="d10">
  407. <div id="info1">
  408. <div id="line" class="i1"></div>
  409. <div id="line" class="i2"></div>
  410. <div class="info">
  411. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  412. </div>
  413. </div>
  414. </div>
  415.  
  416.  
  417. <div id="circ" class="d11">
  418. <div id="info1">
  419. <div id="line" class="i1"></div>
  420. <div id="line" class="i2"></div>
  421. <div class="info">
  422. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  423. </div>
  424. </div>
  425. </div>
  426.  
  427.  
  428. <div id="circ" class="d12"><div id="info1">
  429. <div id="line" class="i1"></div>
  430. <div id="line" class="i2"></div>
  431. <div class="info">
  432. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  433. </div>
  434. </div>
  435. </div>
  436.  
  437.  
  438. <div id="circ" class="d13"><div id="info1">
  439. <div id="line" class="i1"></div>
  440. <div id="line" class="i2"></div>
  441. <div class="info">
  442. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  443. </div>
  444. </div>
  445. </div>
  446.  
  447.  
  448. <div id="circ" class="d14"><div id="info1">
  449. <div id="line" class="i1"></div>
  450. <div id="line" class="i2"></div>
  451. <div class="info">
  452. YOUR INFORMATION GOES HERE. KEEP IT SHORT. 1-2 SENTENCES MAX!!!!
  453. </div>
  454. </div>
  455. </div>
  456.  
  457.  
  458. </div>
  459.  
  460. <div id="quote">
  461. YOU CAN ADD A QUOTE HERE. YOUR QUOTE HAS TO BE VERY VERY VERY SHORT. IF YOU DON'T WANT TO JUST DELETE FROM <DIV ID="QUOTE"> TO THE SEND TO LAST </DIV>
  462. </div>
  463. <div class="quo">QUOTE GOES HERE<br>
  464. <div style="text-align:right;font-style:italic;">- AUTHOR OF QUOTE</div>
  465. </div>
  466. </div>
  467.  
  468. </body>
  469. </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!