Emmes

What's your color? (multi)

Feb 14th, 2021
991
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.13 KB | None | 0 0
  1. <div class="MM040"><input type="radio" name="MM040" id="MM040-0" checked><input type="radio" name="MM040" id="MM040-1"><input type="radio" name="MM040" id="MM040-2"><input type="radio" name="MM040" id="MM040-3"><input type="radio" name="MM040" id="MM040-4"><input type="radio" name="MM040" id="MM040-5"><input type="radio" name="MM040" id="MM040-6"><input type="radio" name="MM040" id="MM040-7"><input type="radio" name="MM040" id="MM040-8">
  2.  
  3. <div class="MM040-i"><div class="MM040-tt"><b>What's your color?</b><i></i></div><div class="MM040-p">
  4.  
  5. </***pag 01***/>
  6. <label for="MM040-0"><b><span class="th th-broom"></span>Escoge con Sabiduría</b></label><div class="MM040-0">
  7. <div><span>Gummi bears gummi bears toffee.
  8.  
  9. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  10.  
  11. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  12. </div>
  13.  
  14. </***pag 02***/>
  15. <label for="MM040-1"><b><span class="th th-broom"></span>Rosa</b></label><div class="MM040-1">
  16. <div><div style="background-image: url(https://i.postimg.cc/g0kWNYsk/02.jpg);"></div><span>Gummi bears gummi bears toffee. Cake marshmallow muffin lemon drops muffin cupcake. Topping jelly candy gingerbread. Brownie cheesecake candy tart candy canes.
  17.  
  18. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  19.  
  20. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  21. </div>
  22.  
  23. </***pag 03***/>
  24. <label for="MM040-2"><b><span class="th th-broom"></span>Violeta</b></label><div class="MM040-2">
  25. <div><div style="background-image: url(https://i.postimg.cc/3RkHQnzs/03.jpg);"></div><span>Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  26.  
  27. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  28. </div>
  29.  
  30. </***pag 04***/>
  31. <label for="MM040-3"><b><span class="th th-broom"></span>Azul</b></label><div class="MM040-3">
  32. <div><div style="background-image: url(https://i.postimg.cc/66GNHbrR/04.jpg);"></div><span>Topping jelly candy gingerbread. Brownie cheesecake candy tart candy canes.
  33.  
  34. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  35.  
  36. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  37. </div>
  38.  
  39. </***pag 05***/>
  40. <label for="MM040-4"><b><span class="th th-broom"></span>Celeste</b></label><div class="MM040-4">
  41. <div><div style="background-image: url(https://i.postimg.cc/Fzc571rG/05.jpg);"></div><span>Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  42.  
  43. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  44. </div>
  45.  
  46. </***pag 06***/>
  47. <label for="MM040-5"><b><span class="th th-broom"></span>Verde</b></label><div class="MM040-5">
  48. <div><div style="background-image: url(https://i.postimg.cc/nLRtW6SK/06.jpg);"></div><span>Gummi bears gummi bears toffee. Cake marshmallow muffin lemon drops muffin cupcake. Topping jelly candy gingerbread. Brownie cheesecake candy tart candy canes.
  49.  
  50. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  51.  
  52. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  53. </div>
  54.  
  55. </***pag 07***/>
  56. <label for="MM040-6"><b><span class="th th-broom"></span>Lima</b></label><div class="MM040-6">
  57. <div><div style="background-image: url(https://i.postimg.cc/yd2C10Hk/07.jpg);"></div><span>Gummi bears gummi bears toffee. Cake marshmallow muffin lemon drops muffin cupcake. Topping jelly candy gingerbread. Brownie cheesecake candy tart candy canes.
  58.  
  59. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  60.  
  61. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  62. </div>
  63.  
  64. </***pag 08***/>
  65. <label for="MM040-7"><b><span class="th th-broom"></span>Amarillo</b></label><div class="MM040-7">
  66. <div><div style="background-image: url(https://i.postimg.cc/zXZY4w7Q/08.jpg);"></div><span>Topping jelly candy gingerbread. Brownie cheesecake candy tart candy canes.
  67.  
  68. Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  69.  
  70. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  71. </div>
  72.  
  73. </***pag 09***/>
  74. <label for="MM040-8"><b><span class="th th-broom"></span>Naranja</b></label><div class="MM040-8">
  75. <div><div style="background-image: url(https://i.postimg.cc/KvPhbKs8/09.jpg);"></div><span>Tart chocolate bar chupa chups gummi bears halvah jelly-o pudding sugar plum lemon drops. Jelly toffee macaroon tiramisu caramels danish sugar plum gummies. Apple pie pastry tart tiramisu jujubes powder wafer.
  76.  
  77. Jelly beans ice cream soufflé tiramisu macaroon gummi bears gummies. Chocolate cotton candy muffin pudding caramels macaroon jelly-o. Chupa chups brownie sweet roll jelly beans powder tootsie roll muffin gingerbread.</span></div>
  78. </div>
  79.  
  80. </div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM040, .MM040 * { box-sizing: border-box; scrollbar-color: var(--mm-01) #0002 !important; scrollbar-width: thin; transition: .5s; } .MM040 input, .MM040 br { display: none; } #MM040-0:checked ~ div { --mm-01: #d08591; } #MM040-1:checked ~ div { --mm-01: #d085c1; } #MM040-2:checked ~ div { --mm-01: #ae85d0; } #MM040-3:checked ~ div { --mm-01: #8586d0; } #MM040-4:checked ~ div { --mm-01: #85c9d0; } #MM040-5:checked ~ div { --mm-01: #85d09f; } #MM040-6:checked ~ div { --mm-01: #9cd085; } #MM040-7:checked ~ div { --mm-01: #d0c885; } #MM040-8:checked ~ div { --mm-01: #d0a185; } .MM040-p label[for*="-0"]{ background: #d08591; } .MM040-p label[for*="-1"]{ background: #d085c1; } .MM040-p label[for*="-2"]{ background: #ae85d0; } .MM040-p label[for*="-3"]{ background: #8586d0; } .MM040-p label[for*="-4"]{ background: #85c9d0; } .MM040-p label[for*="-5"]{ background: #85d09f; } .MM040-p label[for*="-6"]{ background: #9cd085; } .MM040-p label[for*="-7"]{ background: #d0c885; } .MM040-p label[for*="-8"]{ background: #d0a185; } .MM040-i { --mm-03: #eae6e0; width: 350px; margin: auto; background: var(--mm-03); border: 2px solid var(--mm-01); border-radius: 5px; overflow: hidden; font: 12px Calibri; color: var(--mm-01); } .MM040-tt { border-bottom: 2px solid var(--mm-01); display: flex; align-items: center; padding: 5px 5px 5px 10px; background: linear-gradient(to top, var(--mm-01) , var(--mm-03)); text-shadow: 1px 1px var(--mm-01), -1px 1px var(--mm-01), 1px -1px var(--mm-01), -1px -1px var(--mm-01); color: #FFF; } .MM040-tt > b { text-transform: capitalize; letter-spacing: 2px; } .MM040-tt > i { margin-left: auto; display: flex; } .MM040-tt > i::after{ content:"\ec8e"; } .MM040-tt > i::before { content:"\eabd"; } .MM040-tt > i::after, .MM040-tt > i::before { font: 8px Honeybee; padding: 5px 6px; margin-left: 5px; background: #FFF6; border: 1px solid var(--mm-01); border-radius: 3px; } .MM040-p { margin: 20px; position: relative; display: flex; flex-direction: column; align-items: flex-end; } .MM040-p::after, .MM040-p::before { content: ""; width: 50px; height: 50px; border: 2px solid; background: url(https://i.postimg.cc/9Q19t8pg/pipeta2.png) no-repeat center, #FFF; } .MM040-p::after { position: absolute; top: 0; right: 0; background: var(--mm-01); mix-blend-mode: color; } .MM040-p > label { border: 2px solid; height: 20px; width: 50px; margin-top: 5px; cursor: url(https://i.postimg.cc/9Q19t8pg/pipeta2.png), pointer; } .MM040-p > div { position: absolute; top: 34px; left: 0; bottom: 0; width: calc(100% - 55px); border: 2px solid; background: #FFF; padding: 20px; opacity: 0; pointer-events: none; } .MM040-p > label > b { position: absolute; top: 0; left: 0; border: 2px solid var(--mm-01); width: calc(100% - 55px); text-align: center; padding: 0 10px 0 0; background: #FFF; font-size: 14px; letter-spacing: 1px; height: 29px; opacity: 0; pointer-events: none; cursor: auto; display: flex; align-items: center; } .MM040-p > label > b > span { background: var(--mm-01); color: #FFF; padding: 6px; margin-right: auto; } #MM040-0:checked ~ div label[for*="-0"], #MM040-1:checked ~ div label[for*="-1"], #MM040-2:checked ~ div label[for*="-2"], #MM040-3:checked ~ div label[for*="-3"], #MM040-4:checked ~ div label[for*="-4"], #MM040-5:checked ~ div label[for*="-5"], #MM040-6:checked ~ div label[for*="-6"], #MM040-7:checked ~ div label[for*="-7"], #MM040-8:checked ~ div label[for*="-8"] { box-shadow: inset 0 0 0 2px #FFF; } .MM040-p > label:hover > b { opacity: 1; z-index: 20; } #MM040-0:checked ~ div .MM040-0, #MM040-1:checked ~ div .MM040-1, #MM040-2:checked ~ div .MM040-2, #MM040-3:checked ~ div .MM040-3, #MM040-4:checked ~ div .MM040-4, #MM040-5:checked ~ div .MM040-5, #MM040-6:checked ~ div .MM040-6, #MM040-7:checked ~ div .MM040-7, #MM040-8:checked ~ div .MM040-8, #MM040-0:checked ~ div label[for*="-0"] > b, #MM040-1:checked ~ div label[for*="-1"] > b, #MM040-2:checked ~ div label[for*="-2"] > b, #MM040-3:checked ~ div label[for*="-3"] > b, #MM040-4:checked ~ div label[for*="-4"] > b, #MM040-5:checked ~ div label[for*="-5"] > b, #MM040-6:checked ~ div label[for*="-6"] > b, #MM040-7:checked ~ div label[for*="-7"] > b, #MM040-8:checked ~ div label[for*="-8"] > b { pointer-events: auto; opacity: 1; } .MM040-p > div > div { height: 100%; overflow-y: hidden; } .MM040-p > div > div:hover { overflow-y: auto; padding-right: 5px; } .MM040-p > div > div > span { color: #444; text-align: justify; display: block; hyphens: auto; } .MM040-p > div > div > span * { color: var(--mm-01); } .MM040-p > div > div > div { height: 80px; border: 1px solid; margin-bottom: 5px; background-position: center; background-size: cover; background-color: var(--mm-01); padding: 3px; background-clip: content-box; } .MM040-p > div > div > span br { display: block; } .MM040-p > div > div > span br + br { margin: 5px; } .MM040 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM040 div::-webkit-scrollbar-thumb { background: var(--mm-01) !important; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>
Advertisement
Add Comment
Please, Sign In to add comment