Emmes

MM069.- La Niña Bonita (ficha)

May 23rd, 2022 (edited)
1,127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.03 KB | None | 0 0
  1. <div class="MM069"><div>
  2.  
  3. <div class="MM069-fx">
  4. <div class="MM069-img" style="background-image: url(https://i.postimg.cc/zXy6W6HY/p1.png);"></div>
  5. <div class="MM069-li"></div>
  6. <div class="MM069-txt">
  7. <div class="MM069-tt">Información Básica</div>
  8. <div class="MM069-dd">
  9. <div><b>Nombre</b>Info Aquí</div>
  10. <div><b>Edad</b>Info Aquí</div>
  11. <div><b>Ocupación</b>Info Aquí</div>
  12. <div><b>Nacionalidad</b>Info Aquí</div>
  13. <div><b>Grupo</b>Info Aquí</div>
  14. <div><b>Rango</b>Info Aquí</div>
  15. <div><b>Registro</b>Info Aquí</div>
  16. </div>
  17. </div>
  18. </div>
  19.  
  20. <div class="MM069-ho"></div>
  21. <div class="MM069-gr">Nombre Apellido</div>
  22. <div class="MM069-ho"></div>
  23.  
  24. <input type="radio" name="MM069" id="MM069-01" checked>
  25. <input type="radio" name="MM069" id="MM069-02">
  26. <input type="radio" name="MM069" id="MM069-03">
  27. <input type="radio" name="MM069" id="MM069-04">
  28.  
  29. <div class="MM069-sd">
  30.  
  31. <div class="MM069-m1"><b>Personalidad</b><div>Lollipop cheesecake pie marzipan cake pudding fruitcake candy canes. Cake macaroon chocolate cake ice cream apple pie. Jujubes powder tootsie roll chupa chups oat cake marshmallow powder ice cream cake. Pudding cotton candy ice cream tiramisu dragée lemon drops.
  32.  
  33. Oat cake fruitcake liquorice marzipan. Topping bonbon jelly-o. Cotton candy candy canes bonbon toffee powder macaroon toffee.
  34.  
  35. Fruitcake soufflé tart cake danish. Lemon drops soufflé gummies chocolate cake. Halvah cotton candy cotton candy. Cake carrot cake oat cake lollipop sweet dessert liquorice cookie.
  36.  
  37. Cotton candy dragée tart. Candy canes gummies caramels chocolate cake bonbon gingerbread cookie jelly-o. Tootsie roll cotton candy carrot cake chocolate cake bonbon powder candy sweet roll. Tootsie roll dragée gummi bears.</div></div>
  38.  
  39. <div class="MM069-m2"><b>Historia</b><div>Cotton candy dragée tart. Candy canes gummies caramels chocolate cake bonbon gingerbread cookie jelly-o. Tootsie roll cotton candy carrot cake chocolate cake bonbon powder candy sweet roll.
  40.  
  41. Tootsie roll dragée gummi bears.
  42.  
  43. Sesame snaps fruitcake tootsie roll halvah cupcake. Dessert halvah gummies cheesecake tootsie roll topping dessert. Oat cake tootsie roll gummies marshmallow chocolate cake fruitcake tiramisu.
  44.  
  45. Bonbon cheesecake croissant gingerbread pie sweet roll jelly-o cupcake chocolate bar.</div></div>
  46.  
  47. <div class="MM069-m3"><b>Gustos</b><div>Lollipop cheesecake pie marzipan cake pudding fruitcake candy canes. Cake macaroon chocolate cake ice cream apple pie.
  48.  
  49. Jujubes powder tootsie roll chupa chups oat cake marshmallow powder ice cream cake. Pudding cotton candy ice cream tiramisu dragée lemon drops.
  50.  
  51. Oat cake fruitcake liquorice marzipan. Topping bonbon jelly-o. Cotton candy candy canes bonbon toffee powder macaroon toffee.
  52.  
  53. Fruitcake soufflé tart cake danish. Lemon drops soufflé gummies chocolate cake. Halvah cotton candy cotton candy. Cake carrot cake oat cake lollipop sweet dessert liquorice cookie.</div></div>
  54.  
  55. <div class="MM069-m4"><b>Extras</b><div>Oat cake fruitcake liquorice marzipan. Topping bonbon jelly-o. Cotton candy candy canes bonbon toffee powder macaroon toffee.
  56.  
  57. Fruitcake soufflé tart cake danish. Lemon drops soufflé gummies chocolate cake. Halvah cotton candy cotton candy. Cake carrot cake oat cake lollipop sweet dessert liquorice cookie.
  58.  
  59. Cotton candy dragée tart. Candy canes gummies caramels chocolate cake bonbon gingerbread cookie jelly-o. Tootsie roll cotton candy carrot cake chocolate cake bonbon powder candy sweet roll. Tootsie roll dragée gummi bears.</div></div>
  60.  
  61. </div>
  62.  
  63. <div class="MM069-ho"></div>
  64. <div class="MM069-bo">
  65. <label for="MM069-01">Perso</label>
  66. <label for="MM069-02">Historia</label>
  67. <label for="MM069-03">Gustos</label>
  68. <label for="MM069-04">Extras</label>
  69. </div>
  70.  
  71. </div><a href="https://emmescodes.tumblr.com/" class="MM069-MM">emme</a></div><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet"><style>@font-face { font-family: 'PinkS'; src: url(//dl.dropbox.com/s/z30jel1s8hrvpa1/PinkS.otf); } .MM069, .MM069 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .5s; } .MM069 input, .MM069 br { display: none; } .MM069 { --mm-a0: #fff3e6; --mm-a1: #f2d6c1; --mm-a2: #d7b6ac; --mm-a3: #99ac9e; --mm-a4: #788d83; --mm-a5: #51484d; --mm-a6: repeating-linear-gradient(to left, var(--mm-a3), var(--mm-a3) 10px, var(--mm-a4) 10px, var(--mm-a4) 11px, var(--mm-a3) 11px, var(--mm-a3) 21px, var(--mm-a4) 21px, var(--mm-a4) 23px ); --mm-a7: repeating-linear-gradient(45deg, var(--mm-a1), var(--mm-a1) 10px, var(--mm-a0) 10px, var(--mm-a0) 11px, var(--mm-a1) 11px, var(--mm-a1) 21px, var(--mm-a0) 21px, var(--mm-a0) 23px ); } .MM069 { width: 450px; margin: 0 auto 20px; text-align: center; font: 10px Raleway; color: var(--mm-a5); background: var(--mm-a7); padding: 60px; border: 1px solid var(--mm-a1); box-shadow: 0 20px 20px -20px var(--mm-a5); position: relative; } .MM069 > div { background: var(--mm-a0); border: 1px solid var(--mm-a2); padding: 10px; box-shadow: 0 10px 20px -10px var(--mm-a5); border-radius: 5px; display: flex; flex-direction: column; } .MM069-fx { display: flex; } .MM069-img { min-width: 120px; min-height: 200px; border: 1px solid var(--mm-a2); border-radius: 5px; margin-left: -21px; background-color: var(--mm-a0); box-shadow: 0 5px 10px -5px; background-position: center; background-size: cover; } .MM069-li { border-left: 1px solid var(--mm-a2); margin: -10px 10px; } .MM069-txt { flex: 1; display: flex; flex-direction: column; } .MM069-tt { margin: 10px auto 0 -22px; padding: 5px 10px; border-radius: 0 5px 5px 0; font-size: 12px; font-weight: bold; letter-spacing: 1px; } .MM069-ho { margin: 10px -10px; border-top: 1px solid var(--mm-a2); } .MM069-rt > div > b, .MM069-MM, .MM069-bo > label, .MM069-tt, .MM069-gr { background: var(--mm-a6); color: var(--mm-a0); box-shadow: 0 5px 10px -5px var(--mm-a5); border: 1px solid var(--mm-a4); text-shadow: 1px 1px var(--mm-a4), -1px 1px var(--mm-a4), 1px -1px var(--mm-a4), -1px -1px var(--mm-a4); } .MM069-gr { margin: 0 -21px; padding: 15px 10px 10px; border-radius: 5px; font: 50px/24px PinkS; } .MM069-dd { margin: 20px -21px 10px 10px; } .MM069-rt, .MM069-sd > div, .MM069-dd > div { border: 1px solid var(--mm-a2); background: var(--mm-a1); padding: 8px; border-radius: 5px; position: relative; box-shadow: 0 5px 10px -5px var(--mm-a5); text-shadow: 1px -1px var(--mm-a0), -1px 1px var(--mm-a0), -1px -1px var(--mm-a0), 1px 1px var(--mm-a0); } .MM069-dd > div ~ div { margin-top: 10px; } .MM069-rt > b, .MM069-sd > div > b, .MM069-dd > div > b { position: absolute; text-transform: uppercase; font-size: 8px; top: -5px; left: 8px; letter-spacing: 2px; } .MM069-bo { display: flex; margin: 0 -21px; } .MM069-bo > label ~ label { margin-left: 5px; } .MM069-bo > label { flex-grow: 1; padding: 10px; border-radius: 5px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; opacity: .7; cursor: pointer; } .MM069-bo > label:hover, #MM069-01:checked ~ div > label[for*="01"], #MM069-02:checked ~ div > label[for*="02"], #MM069-03:checked ~ div > label[for*="03"], #MM069-04:checked ~ div > label[for*="04"] { opacity: 1; } .MM069-bo > label:active { transform: scale(.8); } .MM069-sd { position: relative; margin: 10px -21px 10px 10px; } .MM069-sd > div ~ div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .MM069-sd > div { transform: scale(.0); pointer-events: none; } #MM069-01:checked ~ div > .MM069-m1, #MM069-02:checked ~ div > .MM069-m2, #MM069-03:checked ~ div > .MM069-m3, #MM069-04:checked ~ div > .MM069-m4 { transform: scale(1); pointer-events: auto; } .MM069-sd > div > div { margin: 10px; max-height: 180px; overflow: auto; text-align: justify; hyphens: auto; padding-right: 5px; } .MM069-MM { position: absolute; bottom: 0; left: 50%; padding: 5px 5px 5px 10px; color: var(--mm-a0) !important; transform: translate(-50%, 50%); font-weight: bold; letter-spacing: 5px; border-radius: 5px; } .MM069-MM:hover { letter-spacing: 7px; } </style>
Advertisement
Add Comment
Please, Sign In to add comment