API tools faq
paste
Advertisement
Guest User

SHIPPERR

a guest
Aug 22nd, 2014
721
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.08 KB | None | 0 0
raw download clone embed print report
  1. [dohtml]<style>
  2.  
  3.  
  4.  
  5. .tabss {
  6. position: relative;
  7. width: 450px;
  8. height: 500px;
  9. border: 0px solid #ffccdd;
  10. padding: 0px;
  11. background-color: #D88A8A;
  12. }
  13.  
  14. .tabb {float: left;}
  15.  
  16. .tabb label {display: block;
  17. width: 10px;
  18. height: 10px;
  19. background: #C5CFC6;
  20. -moz-border-radius: 5px;
  21. -webkit-border-radius: 5px;
  22. margin-left: 4px;
  23. position: relative;
  24. top: 50px;
  25. left: 45px;}
  26.  
  27. .tabb [type=radio] {
  28. display: none;
  29. }
  30.  
  31. .contentt {
  32. position: absolute;
  33. top: 100px;
  34. left: 0px;
  35. width: 450px;
  36. height: 400px;
  37. background: #D88A8A;
  38. padding: 0px;
  39. border: 0px solid #000;}
  40.  
  41. [type=radio]:checked ~ label {color: #ffccdd; background-color: eeeeee; border-bottom: 0px solid white; z-index: 2;}
  42.  
  43. [type=radio]:checked ~ label ~ .contentt {z-index: 1;}
  44.  
  45. ::-webkit-scrollbar { background: #f7f7f7; width: 2px; }
  46. ::-webkit-scrollbar-thumb { background: #C5CFC6; width: 2x }
  47. ::-webkit-scrollbar-corner { background: #fff; }
  48.  
  49. .name { border-bottom: 1px solid #000; padding-bottom: 5px; opacity: .9; font-size: 8px; font-family: calibri; letter-spacing: 1px; }
  50. .info { font-size: 8px; letter-spacing: 1px; padding-top: 5px; opacity: .9 }
  51.  
  52. </style>
  53.  
  54.  
  55. <center>
  56. <div class="tabss">
  57. <div class="tabb">
  58. <input type="radio" id="tabb-1" name="tabb-group-1" checked>
  59. <label for="tabb-1"> </label><div style="width: 3px; height: 3px;"></div>
  60. <div class="contentt">
  61.  
  62. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  63.  
  64. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum ligula, luctus in magna eu, iaculis porttitor dolor. Curabitur tincidunt, libero a sodales dictum, eros purus suscipit ante, pharetra hendrerit felis orci a dui. Integer varius ultrices porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae enim feugiat turpis accumsan gravida at nec diam. Proin viverra placerat posuere. Phasellus id nulla arcu. Vivamus nisi ipsum, ultrices ut ligula a, vestibulum dapibus tortor. In semper vestibulum nunc, eu sollicitudin nibh vulputate et. Curabitur congue lectus eu varius porttitor. Cras pharetra et urna nec aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent a adipiscing augue, in egestas quam.<p>
  65.  
  66. Suspendisse potenti. Donec turpis nunc, auctor ut pretium eget, fermentum nec felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras laoreet rutrum mollis. Aenean pellentesque id dui sit amet luctus. Praesent sit amet pretium lectus. Maecenas ultricies sit amet elit nec faucibus. Duis aliquet nisi justo, in consectetur felis gravida id.<p>
  67.  
  68. Sed tempus velit tortor, ut dictum turpis mollis egestas. Sed hendrerit lorem vitae sem laoreet vulputate. Integer bibendum iaculis nulla at congue. Sed et cursus arcu, non faucibus est. Nam pretium libero eu eros porta mattis. Nullam pharetra nulla at elit vestibulum, sed rutrum diam gravida. Cras sit amet augue porttitor, consectetur nunc vel, condimentum est. Mauris nec orci a nulla aliquet mattis. Donec ut metus nulla. Morbi lacus orci, posuere eu nisi in, condimentum malesuada dolor. Proin non congue felis, ut consequat arcu. Vestibulum scelerisque, metus vel viverra varius, orci diam tincidunt felis, ut ultrices mi mi a ante.
  69.  
  70. </div></div></div></td>
  71. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/quat.png);">
  72.  
  73. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>eloise t. choi</i></div><div class="info">group . age</center></div></div></center>
  74.  
  75. </div></td></table>
  76.  
  77. </div>
  78. </div>
  79.  
  80. <div class="tabb">
  81. <input type="radio" id="tabb-2" name="tabb-group-1">
  82. <label for="tabb-2"> </label>
  83. <div class="contentt">
  84.  
  85. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  86.  
  87. words
  88.  
  89. </div></div></div></td>
  90. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/dos.png);">
  91.  
  92. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  93.  
  94. </div></td></table>
  95.  
  96. </div>
  97. </div>
  98.  
  99. <div class="tabb">
  100. <input type="radio" id="tabb-3" name="tabb-group-1">
  101. <label for="tabb-3"> </label>
  102. <div class="contentt">
  103.  
  104. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  105.  
  106. words
  107.  
  108. </div></div></div></td>
  109. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(https://dl.dropboxusercontent.com/u/88431993/tres.png);">
  110.  
  111. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  112.  
  113. </div></td></table>
  114.  
  115. </div>
  116. </div>
  117.  
  118. <div class="tabb">
  119. <input type="radio" id="tabb-4" name="tabb-group-1">
  120. <label for="tabb-4"> </label>
  121. <div class="contentt">
  122.  
  123. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  124.  
  125. words
  126.  
  127. </div></div></div></td>
  128. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/fe29f4109e16defdfe3422dfbbda0aef/tumblr_inline_namqfmmXkn1r1ha8o.png);">
  129.  
  130. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  131.  
  132. </div></td></table>
  133.  
  134. </div>
  135. </div>
  136.  
  137. <div class="tabb">
  138. <input type="radio" id="tabb-5" name="tabb-group-1">
  139. <label for="tabb-5"> </label>
  140. <div class="contentt">
  141.  
  142. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  143.  
  144. words
  145.  
  146. </div></div></div></td>
  147. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/a1bdd1225d3e88d5ae01aef9e9364860/tumblr_inline_namqfo8YG71r1ha8o.png);">
  148.  
  149. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  150.  
  151. </div></td></table>
  152.  
  153. </div>
  154. </div>
  155.  
  156. <div class="tabb">
  157. <input type="radio" id="tabb-6" name="tabb-group-1">
  158. <label for="tabb-6"> </label>
  159. <div class="contentt">
  160.  
  161. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  162.  
  163. words
  164.  
  165. </div></div></div></td>
  166. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/75586537dd0a788d2de3545d9ec50bfe/tumblr_inline_namqfrldnC1r1ha8o.png);">
  167.  
  168. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  169.  
  170. </div></td></table>
  171.  
  172. </div>
  173. </div>
  174.  
  175. <div class="tabb">
  176. <input type="radio" id="tabb-7" name="tabb-group-1">
  177. <label for="tabb-7"> </label>
  178. <div class="contentt">
  179.  
  180. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  181.  
  182. words
  183.  
  184. </div></div></div></td>
  185. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/9115edfabf217d2c194e13f6fffac8c2/tumblr_inline_namqfujQcf1r1ha8o.png);">
  186.  
  187. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  188.  
  189. </div></td></table>
  190.  
  191. </div>
  192. </div>
  193.  
  194. <div class="tabb">
  195. <input type="radio" id="tabb-8" name="tabb-group-1">
  196. <label for="tabb-8"> </label>
  197. <div class="contentt">
  198.  
  199. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  200.  
  201. words
  202.  
  203. </div></div></div></td>
  204. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/5e8bdcaa011a1d2897c9d77a2be20cd4/tumblr_inline_namqfx9uHa1r1ha8o.png);">
  205.  
  206. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  207.  
  208. </div></td></table>
  209.  
  210. </div>
  211. </div>
  212.  
  213. <div class="tabb">
  214. <input type="radio" id="tabb-9" name="tabb-group-1">
  215. <label for="tabb-9"> </label>
  216. <div class="contentt">
  217.  
  218. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  219.  
  220. words
  221.  
  222. </div></div></div></td>
  223. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/8da2e531c11fa95c8ce6dcc6124c0901/tumblr_inline_namqfzE2OH1r1ha8o.png);">
  224.  
  225. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  226.  
  227. </div></td></table>
  228.  
  229. </div>
  230. </div>
  231.  
  232. <div class="tabb">
  233. <input type="radio" id="tabb-10" name="tabb-group-1">
  234. <label for="tabb-10"> </label>
  235. <div class="contentt">
  236.  
  237. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  238.  
  239. words
  240.  
  241. </div></div></div></td>
  242. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/3dee4997cf438ff6856b0a3685c32155/tumblr_inline_namqg2umS41r1ha8o.png);">
  243.  
  244. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  245.  
  246. </div></td></table>
  247.  
  248. </div>
  249. </div>
  250.  
  251. <div class="tabb">
  252. <input type="radio" id="tabb-11" name="tabb-group-1">
  253. <label for="tabb-11"> </label>
  254. <div class="contentt">
  255.  
  256. <table cellspacing="0" cellpadding="0"><td><div style="width: 250px; height: 400px; background-color: #fff;"><div style="width: 150px; height: 300px; padding: 50px; text-transform: lowercase;"><div style="height: 300px; width: 147px; overflow: auto; text-transform: lowercase; text-align: justify; padding-right: 3px;">
  257.  
  258. words
  259.  
  260. </div></div></div></td>
  261. <td><div style="margin-top: -100px; height: 500px; width: 200px; background-image: url(http://media.tumblr.com/3dee4997cf438ff6856b0a3685c32155/tumblr_inline_namqg2umS41r1ha8o.png);">
  262.  
  263. <center><div style="padding-top: 290px;"><div style="width: 100px; padding: 15px; background-color: #fff;"><center><div class="name"><i>first m. last</i></div><div class="info">group . age</center></div></div></center>
  264.  
  265. </div></td></table>
  266.  
  267. </div>
  268. </div>
  269.  
  270.  
  271. </div><div style="margin-left: 440px;"><a href="">©</a></div>
  272.  
  273. </center>
  274.  
  275. </center>[/dohtml]
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!