API tools faq
paste
Emmes

MM100.- The Power of Color II (expediente)

Emmes
Aug 31st, 2022
1,634
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.50 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM100"><div class="MM100-tt"><div class="MM100-bo"><i class="cp cp-balloons"></i></div><span>
  2. <b>Nombre Apellido</b>The Power of Color
  3. </span></div>
  4.  
  5. <div class="MM100-fx">
  6. <div class="MM100-img"><div style="background-image: url(https://i.postimg.cc/kGy5Ch51/cg-1.jpg);"></div></div>
  7. <div class="MM100-dd">
  8. <div><i class="cp cp-card"></i><b>Nombre</b>Info aquí</div>
  9. <div><i class="cp cp-calendar"></i><b>Edad</b>Info aquí</div>
  10. <div><i class="cp cp-factory"></i><b>Ocupación</b>Info aquí</div>
  11. <div><i class="cp cp-location"></i><b>Nacionalidad</b>Info aquí</div>
  12. <div><i class="cp cp-star"></i><b>Grupo</b>Info aquí</div>
  13. <div><i class="cp cp-paper-clip-o"></i><b>Rango</b>Info aquí</div>
  14. <div><i class="cp cp-clapperboard"></i><b>Played by</b>Info aquí</div>
  15. </div>
  16. </div>
  17.  
  18. <div class="MM100-bt">
  19. <input type="radio" name="MM100" id="MM100-a1" checked/><input type="radio" name="MM100" id="MM100-a2" /><input type="radio" name="MM100" id="MM100-a3" />
  20.  
  21. <div class="MM100-fk">
  22. <div class="MM100-labs">
  23. <div><label for="MM100-a1">Historia</label>
  24. <label for="MM100-a2">Personalidad</label>
  25. <label for="MM100-a3">Extras</label></div>
  26. </div>
  27. <div class="MM100-txt">
  28.  
  29. <div class="MM100-m1">Gummi bears donut soufflé [b]lemon drops danish tiramisu[/b] sweet roll oat cake shortbread. Croissant jelly pie chupa chups pudding cupcake. Tootsie roll icing halvah gummi bears bonbon toffee lollipop. Danish jelly-o icing biscuit gummi bears. Jujubes powder icing biscuit topping muffin cake candy. Oat cake marshmallow sesame snaps danish jujubes dessert pie lemon drops halvah. Caramels tart pie ice cream marshmallow jelly-o cake jujubes cookie.
  30.  
  31. Pudding jelly-o biscuit jujubes apple pie gummies soufflé wafer. Chocolate bar sesame snaps carrot cake chupa chups danish dessert cookie caramels apple pie.
  32.  
  33. Cake carrot cake chocolate bar tiramisu tootsie roll. Fruitcake bonbon bonbon muffin icing chupa chups muffin. Caramels bonbon apple pie brownie bear claw chocolate cake oat cake. Sesame snaps candy ice cream biscuit cake icing biscuit danish. Sesame snaps chocolate cake marzipan gingerbread pastry sweet cupcake sesame snaps chocolate. Bonbon candy icing lemon drops powder.
  34.  
  35. Soufflé oat cake gingerbread gummies bear claw sweet caramels bonbon. Wafer tiramisu shortbread dragée brownie chupa chups. Gummies toffee marshmallow sesame snaps apple pie. Cheesecake jelly beans chocolate bar cake jujubes caramels cotton candy bonbon tootsie roll. Bear claw gummies jelly-o muffin soufflé apple pie marshmallow pastry. Croissant chocolate cake halvah marzipan marzipan. Jelly bear claw chupa chups candy sugar plum carrot cake muffin. Jelly brownie chupa chups dragée cookie.</div>
  36.  
  37. <div class="MM100-m2">Pudding jelly-o biscuit jujubes apple pie gummies soufflé wafer. Chocolate bar sesame snaps carrot cake chupa chups danish dessert cookie caramels apple pie.
  38.  
  39. Cake carrot cake chocolate bar tiramisu tootsie roll.
  40.  
  41. Fruitcake bonbon bonbon muffin icing chupa chups muffin. Caramels bonbon apple pie brownie bear claw chocolate cake oat cake. Sesame snaps candy ice cream biscuit cake icing biscuit danish. Sesame snaps chocolate cake marzipan gingerbread pastry sweet cupcake sesame snaps chocolate.
  42.  
  43. Bonbon candy icing lemon drops powder.</div>
  44.  
  45. <div class="MM100-m3">Cupcake tootsie roll pie cookie gummies jelly lemon drops jelly beans bear claw.
  46.  
  47. Muffin sweet roll gummi bears sugar plum jelly.
  48.  
  49. Marzipan carrot cake wafer sweet roll soufflé topping.
  50.  
  51. Dessert bonbon liquorice tart cake pastry chocolate cake.
  52.  
  53. Jelly-o jelly-o dessert fruitcake toffee biscuit oat cake wafer carrot cake.
  54.  
  55. Sesame snaps jelly beans biscuit cupcake dessert.
  56.  
  57. Apple pie biscuit pudding gummi bears macaroon cheesecake. Candy canes danish gummi bears biscuit wafer donut tootsie roll candy ice cream.
  58.  
  59. Pastry macaroon biscuit dragée halvah candy canes.</div>
  60.  
  61. </div>
  62. </div>
  63.  
  64. </div>
  65.  
  66. </div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet"><style>.MM100, .MM100 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; --m1: #33b7af; --m2: #19556a; } .MM100 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM100 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM100 br { display: none; } .MM100 { width: 500px; margin: auto; background: repeating-linear-gradient(-50deg, #FFF, #FFF 3px, #CCC 3px, #CCC 4px); border: 1px solid var(--m2); color: #222; font: 12px Calibri; } .MM100-tt { background: linear-gradient(to right, var(--m1), var(--m2)); display: flex; padding: 10px; color: #FFF; align-items: center; border-bottom: 1px solid var(--m2); text-shadow: 1px 1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), -1px -1px var(--m2); justify-content: space-between; } .MM100-bo { font-size: 16px; width: 50px; height: 50px; position: relative; z-index: 1; padding: 8px; } .MM100-bo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid; clip-path: polygon(15px 0%, 0% 0%, 0% 15px, 100% 15px, 100% 0%, calc(100% - 15px) 0%, calc(100% - 15px) 100%, 100% 100%, 100% calc(100% - 15px), 0% calc(100% - 15px), 0% 100%, 15px 100%); } .MM100-bo > i { background: var(--m2); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .MM100-tt > span { text-align: right; } .MM100-tt b { display: block; font: bold 14px Nunito Sans; text-transform: uppercase; } .MM100-fx { display: flex; } .MM100-dd { flex: 1; margin: 30px 30px 30px -26px; } .MM100-img { margin: 15px; background: linear-gradient(to right, var(--m1), var(--m2)); padding: 5px; border: 1px solid var(--m2); } .MM100-img > div { border: 1px solid var(--m2); height: 100%; background-color: #DDD; background-position: center; width: 152px; background-size: cover; } .MM100-dd > div { background: #FFF; border: 1px solid var(--m2); display: flex; align-items: center; padding-right: 5px; margin: 5px; } .MM100-dd > div > i { width: 25px; height: 24px; color: #FFF; display: flex; align-items: center; justify-content: center; background: var(--m2); } .MM100-dd > div > b { margin-right: auto; background: var(--m1); padding: 5px; color: #FFF; letter-spacing: 1px; text-shadow: 1px 1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), -1px -1px var(--m2); border-right: 1px solid var(--m2); } .MM100-bt input { display: none; } .MM100-bt { border-top: 1px solid var(--m2); padding: 15px; } .MM100-fk { display: flex; height: 300px; } .MM100-labs { width: 24px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; } .MM100-labs > div { display: flex; min-width: 300px; text-align: center; transform: rotate(90deg); } .MM100-labs label { flex-grow: 1; transform: rotate(-180deg); background: var(--m2); border: 1px solid var(--m2); color: var(--mm-b4); text-transform: uppercase; letter-spacing: 1px; padding: 4px; cursor: pointer; transition: .3s; position: relative; } .MM100-txt { flex: 1; border: 1px solid var(--m2); margin-left: -1px; background: #FFF; position: relative; overflow: hidden; } #MM100-a1:checked ~ div label[for*="a1"], #MM100-a2:checked ~ div label[for*="a2"], #MM100-a3:checked ~ div label[for*="a3"] { background: var(--m1); text-shadow: 1px 1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), -1px -1px var(--m2); } .MM100-labs label::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--m1); transform: rotate(-45deg); border: 1px solid var(--m2); bottom: -7px; left: calc(50% - 7px); clip-path: polygon(0 0, 0% 100%, 100% 100%); transition: .3s; opacity: 0; } #MM100-a1:checked ~ div label[for*="a1"]::before, #MM100-a2:checked ~ div label[for*="a2"]::before, #MM100-a3:checked ~ div label[for*="a3"]::before { opacity: 1; } .MM100-txt > div { position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; pointer-events: none; text-align: justify; overflow: auto; padding-right: 5px; transition: .5s; opacity: 0; } #MM100-a1:checked ~ div .MM100-m1, #MM100-a2:checked ~ div .MM100-m2, #MM100-a3:checked ~ div .MM100-m3 { pointer-events: auto; opacity: 1; } .MM100-txt > div br { display: block; margin: 5px; } .MM100-txt > div > i, .MM100-txt > div > strong { color: var(--m1); } .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
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!