API tools faq
paste
Emmes

MM077.- Clippo 2.0 (inventario)

Emmes
Jun 14th, 2022
1,214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.74 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM077" style="color: #ba124f;"><div><div class="MM076-tt">Inventario de Clippo</div>
  2.  
  3. <input type="radio" name="MM077" id="MM077-01" checked />
  4. <input type="radio" name="MM077" id="MM077-02" />
  5. <input type="radio" name="MM077" id="MM077-03" />
  6. <input type="radio" name="MM077" id="MM077-04" />
  7.  
  8. <div class="MM077-fx">
  9. <b><i class="cp cp-box"></i></b>
  10. <label for="MM077-01"><i class="cp cp-milk"></i><b>Pociones</b></label>
  11. <label for="MM077-02"><i class="cp cp-book"></i><b>Hechizos</b></label>
  12. <label for="MM077-03"><i class="cp cp-diamond"></i><b>Talismanes</b></label>
  13. <label for="MM077-04"><i class="cp cp-star"></i><b>Mejoras</b></label>
  14. </div>
  15.  
  16. <div class="MM077-txt"><div><div>
  17.  
  18. </****Primer pestaña****/>
  19.  
  20. <div class="MM077-box">
  21.  
  22. <div><i class="cp cp-milk"></i>
  23. <span><b>Bebestible<hr>$5</b>
  24. <div>Una botella de delicioso bebestible, dulce y cremoso. Entre sus efectos, se cuentan saciedad, mejoras en el estado anímico y muchas sonrisas.
  25.  
  26. Este ítem es de solo uso.</div></span></div>
  27.  
  28. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  29.  
  30. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  31.  
  32. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  33.  
  34. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  35.  
  36. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  37.  
  38. </div>
  39.  
  40. </****Segunda pestaña****/>
  41.  
  42. <div class="MM077-box">
  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><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</div></span></div>
  51.  
  52. </div>
  53.  
  54. </****Tercer pestaña****/>
  55.  
  56. <div class="MM077-box">
  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. </****Cuarta pestaña****/>
  69.  
  70. <div class="MM077-box">
  71.  
  72. <div><i class="cp cp-box"></i><span><b>Ítem<hr />$XX</b><div>Descipción guapetona justo aquí.</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>
  81.  
  82. </div></div></div>
  83.  
  84. <a href="https://emmescodes.tumblr.com/">emme</a>
  85.  
  86. </div></div>
  87.  
  88.  
  89. <link href="https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM077, .MM077 * { box-sizing: border-box; scrollbar-color: #FFF6 #FFF2 !important; scrollbar-width: thin; transition: .5s; } .MM077 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #FFF2 !important; } .MM077 div::-webkit-scrollbar-thumb { background: #FFF6 !important; } .MM077 br { display: none; } .MM077 { border: 1px solid; width: 450px; margin: 20px auto; padding: 0 10px; font: 12px Calibri; } .MM077 > div { background: #111E; margin: -11px 0; min-height: 200px; padding: 20px; } .MM076-tt { font: 30px/17px Odibee Sans; letter-spacing: 2px; border-bottom: 1px solid; margin: 0 -30px 20px; text-align: right; } .MM077 input { display: none; } .MM077-fx { display: flex; } .MM077-fx > b { padding: 13px 10px; box-shadow: inset 0 0 0 50px; margin: -30px 10px -5px 0; border-radius: 10px 10px 50px 50px; display: flex; align-items: flex-end; } .MM077-fx > b > i { color: #FFF; font-size: 14px; } .MM077-fx > label { border: 1px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 10px 7px; margin-left: 10px; flex: 1; filter: saturate(0); font-size: 16px; cursor: pointer; position: relative; } .MM077-fx > label > b { font: bold 10px calibri; text-transform: uppercase; letter-spacing: 1px; color: #999; margin-top: 5px; } .MM077-txt { margin: 40px 0 20px 20px; position: relative; } .MM077-txt::before { content: ""; position: absolute; border: 1px solid; top: -20px; bottom: -20px; right: -31px; left: -20px; } .MM077-fx > label::before { content: ""; position: absolute; border-left: 1px solid; height: 0px; top: 100%; } #MM077-01:checked ~ div label[for*="01"], #MM077-02:checked ~ div label[for*="02"], #MM077-03:checked ~ div label[for*="03"], #MM077-04:checked ~ div label[for*="04"] { filter: saturate(1); } #MM077-01:checked ~ div label[for*="01"]::before, #MM077-02:checked ~ div label[for*="02"]::before, #MM077-03:checked ~ div label[for*="03"]::before, #MM077-04:checked ~ div label[for*="04"]::before { height: 20px; } .MM077-txt > div { overflow: hidden; } .MM077-txt > div > div { display: flex; width: 400%; } .MM077-box { width: 25%; height: 200px; overflow: auto; } .MM077-box > div { display: flex; border: 1px solid; transition: .3s; filter: saturate(0); position: relative; } .MM077-box > div ~ div { margin-top: -1px; } .MM077-box > div:hover { filter: saturate(1); z-index: 100; } .MM077-box > div > span { border-left: 1px solid; flex: 1; } .MM077-box > div > span > b { display: flex; border-bottom: 1px solid; padding: 5px; -webkit-text-fill-color: #999; text-transform: uppercase; letter-spacing: 1px; } .MM077-box > div > i { font-size: 16px; padding: 15px; } .MM077-box hr { flex: 1; opacity: 0; } .MM077-box > div > span > div { color: #999; padding: 5px; hyphens: auto; } .MM077-box > div > span > div br { display: block; } #MM077-02:checked ~ .MM077-txt > div > div { margin-left: -100%; } #MM077-03:checked ~ .MM077-txt > div > div { margin-left: -200%; } #MM077-04:checked ~ .MM077-txt > div > div { margin-left: -300%; } .MM077 > div > a { color: inherit !important; border-top: 1px solid; display: block; margin: 40px -30px -20px; text-align: center; padding: 10px 0 10px 5px; letter-spacing: 5px; -webkit-text-fill-color: #999; transition: .3s; font-size: 10px; } .MM077 > 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!