API tools faq
paste
Emmes

MM076.- Clippo 2.0 (tienda)

Emmes
Jun 14th, 2022
1,320
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.01 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM076" style="color: #ba124f;"><div>
  2.  
  3. <div class="MM076-tt">Tienda de Clippo</div>
  4. <div class="MM076-img" style="background: url(https://i.pinimg.com/564x/48/7c/91/487c9124268a9da9d6bc45e3c4a6dc2d.jpg) center;"></div>
  5.  
  6. <b></b>
  7.  
  8. <div class="MM076-txt"><i class="cp cp-megaphone"></i><span>Halvah dragée lollipop pudding donut. Sugar plum chocolate cake caramels dessert biscuit dessert muffin chocolate pie. Halvah cookie donut croissant pastry. Cake oat cake chocolate tart toffee oat cake liquorice brownie gummi bears. Sweet roll danish macaroon caramels dessert chocolate chocolate bar cupcake.
  9.  
  10. Marshmallow halvah biscuit bonbon tart halvah. Carrot cake tootsie roll pastry bonbon chocolate icing.</span></div>
  11.  
  12. <b></b>
  13.  
  14. <input type="radio" name="MM076" id="MM076-i1" checked />
  15. <input type="radio" name="MM076" id="MM076-i2" />
  16. <input type="radio" name="MM076" id="MM076-i3" />
  17. <input type="radio" name="MM076" id="MM076-i4" />
  18.  
  19. <div class="MM076-lab">
  20. <label for="MM076-i1"><i class="cp cp-milk"></i><b>Pociones</b></label>
  21. <label for="MM076-i2"><i class="cp cp-book"></i><b>Hechizos</b></label>
  22. <label for="MM076-i3"><i class="cp cp-diamond"></i><b>Talismanes</b></label>
  23. <label for="MM076-i4"><i class="cp cp-star"></i><b>Mejoras</b></label>
  24. </div>
  25.  
  26. <b></b>
  27.  
  28. <div class="MM076-con"><div>
  29.  
  30. </****Primer pestaña****/>
  31.  
  32. <div class="MM076-in m1">
  33.  
  34. <div><i class="cp cp-milk"></i><span><b>Bebestible<hr />$5</b><div>Una botella de delicioso bebestible, dulce y cremoso. Entre sus efectos, se cuentan saciedad, mejoras en el estado anímico y muchas sonrisas.
  35.  
  36. Este ítem es de solo uso.</div></span></div>
  37.  
  38. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  39.  
  40. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  41.  
  42. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  43.  
  44. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  45.  
  46. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  47.  
  48. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  49.  
  50. </div>
  51.  
  52. </****Segunda pestaña****/>
  53.  
  54. <div class="MM076-in m2">
  55.  
  56. <div><i class="cp cp-newspaper"></i><span><b>Papelito<hr />$1</b><div>Escrito en la antigua lengua, solo un mago experto será capaz de descifrar su contenido.</div></span></div>
  57.  
  58. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  59.  
  60. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  61.  
  62. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  63.  
  64. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  65.  
  66. </div>
  67.  
  68. </****Tercer pestaña****/>
  69.  
  70. <div class="MM076-in m3">
  71.  
  72. <div><i class="cp cp-gemstone"></i><span><b>Colgante<hr />$100</b><div>Un pequeño collar que repele las malas vibras y a los cobradores.</div></span></div>
  73.  
  74. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  75.  
  76. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  77.  
  78. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  79.  
  80. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  81.  
  82. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  83.  
  84. </div>
  85.  
  86. </****Cuarta pestaña****/>
  87.  
  88. <div class="MM076-in m4">
  89.  
  90. <div><i class="cp cp-mustache"></i><span><b>Mostacho<hr />$3</b><div>El último grito de la moda en lo a que vello facial respecta.</div></span></div>
  91.  
  92. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  93.  
  94. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  95.  
  96. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  97.  
  98. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  99.  
  100. </div>
  101.  
  102. </div></div>
  103.  
  104. <a href="https://emmescodes.tumblr.com/">emme</a>
  105.  
  106. </div></div><link href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM076, .MM076 * { box-sizing: border-box; scrollbar-color: #fff6 #FFF2 !important; scrollbar-width: thin; transition: .5s; } .MM076 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #FFF2 !important; } .MM076 div::-webkit-scrollbar-thumb { background: #FFF6 !important; } .MM076 { border: 1px solid; width: 450px; margin: 20px auto; padding: 0 10px; font: 12px Calibri } .MM076 input, .MM076 br { display: none; } .MM076 > div { background: #111E; margin: -11px 0; min-height: 200px; padding: 20px; } .MM076-img { height: 120px; background-color: gray; border: 1px solid; padding: 3px; background-clip: content-box; } .MM076 > div > b { border-top: 1px solid; display: block; margin: 20px -30px; } .MM076-tt { font: 30px/17px Odibee Sans; letter-spacing: 2px; border-bottom: 1px solid; margin: 0 -30px 20px; text-align: right; } .MM076-lab { display: flex; margin: -20px; position: relative; } .MM076-lab > label { padding: 20px; flex: 1; text-align: center; font-size: 16px; cursor: pointer; transition: .5s; filter: saturate(0); } .MM076-lab::before { content: ""; position: absolute; border: 1px solid; top: -1px; bottom: -1px; transition: .5s; left: -11px; pointer-events: none; width: calc((100% + 22px) / 4); } #MM076-i2:checked ~ .MM076-lab::before { left: calc(25% - 5px); } #MM076-i3:checked ~ .MM076-lab::before { left: calc(50% - 4px); } #MM076-i4:checked ~ .MM076-lab::before { left: calc(75% + 5px); } #MM076-i1:checked ~ div label[for*="i1"], #MM076-i2:checked ~ div label[for*="i2"], #MM076-i3:checked ~ div label[for*="i3"], #MM076-i4:checked ~ div label[for*="i4"] { filter: saturate(1); } .MM076-lab b { display: block; font: bold 10px calibri; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-top: 5px; } .MM076-con { border: 1px solid; height: 300px; overflow: hidden; } .MM076-con > div { width: 400%; height: 100%; transition: .5s; display: flex; } #MM076-i2:checked ~ .MM076-con > div { margin-left: -100%; } #MM076-i3:checked ~ .MM076-con > div { margin-left: -200%; } #MM076-i4:checked ~ .MM076-con > div { margin-left: -300%; } .MM076-in { flex: 1; margin: 15px; overflow: auto; } .MM076-in > div { display: flex; border: 1px solid; transition: .3s; filter: saturate(0); position: relative; } .MM076-in > div ~ div { margin-top: -1px; } .MM076-in > div:hover { filter: saturate(1); z-index: 100; } .MM076-in > div > span { border-left: 1px solid; flex: 1; } .MM076-in > div > span > b { display: flex; border-bottom: 1px solid; padding: 5px; -webkit-text-fill-color: #999; text-transform: uppercase; letter-spacing: 1px; } .MM076-in > div > i { font-size: 16px; padding: 15px; } .MM076-in hr { flex: 1; opacity: 0; } .MM076-in > div > span > div { color: #999; padding: 5px; hyphens: auto; } .MM076-txt br, .MM076-in > div > span > div br { display: block; } .MM076-txt { text-align: justify; hyphens: auto; padding: 20px; } .MM076-txt > i { float: left; padding: 12px; font-size: 16px; } .MM076-txt > span { color: #999; } .MM076 > div > a { color: inherit !important; border-top: 1px solid; display: block; margin: 20px -30px -20px; text-align: center; padding: 10px 0 10px 5px; letter-spacing: 5px; -webkit-text-fill-color: #999; transition: .3s; font-size: 10px; } .MM076 > div > a:hover { -webkit-text-fill-color: initial; } </style>
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!