API tools faq
paste
Emmes

MM101.- Saligup (multi - pestañas)

Emmes
Aug 31st, 2022
1,299
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.86 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM101"><input type="radio" name="MM101" id="MM101-1" checked /><input type="radio" name="MM101" id="MM101-2" /><input type="radio" name="MM101" id="MM101-3" /><input type="radio" name="MM101" id="MM101-4" /><input type="radio" name="MM101" id="MM101-5" /><input type="radio" name="MM101" id="MM101-6" /><input type="radio" name="MM101" id="MM101-7" />
  2.  
  3. <div class="MM101-top">
  4. <label for="MM101-1">soberbia</label>
  5. <label for="MM101-2">avaricia</label>
  6. <label for="MM101-3">lujuria</label>
  7. <label for="MM101-4">ira</label>
  8. <label for="MM101-5">gula</label>
  9. <label for="MM101-6">envidia</label>
  10. <label for="MM101-7">pereza</label>
  11. </div>
  12.  
  13. <div class="MM101-mov">
  14.  
  15. <div class="m1" style="background-image: url(https://i.postimg.cc/xTKz1VyQ/01.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/QxbLpSp7/01.jpg);"><b>Soberbia</b></div></div>
  16. <div class="MM101-txt"><div>
  17. <b>Edad</b>
  18. <b>Nacionalidad</b>
  19. <b>Ocupación</b>
  20. <b>Grupo</b>
  21. <b>Rango</b>
  22. <b>Físico</b>
  23. </div>
  24. <span><div><b>Resumen</b></div>Dessert lemon drops fruitcake gingerbread biscuit macaroon ice cream. Shortbread macaroon chupa chups cheesecake bear claw pudding. Cake jelly chocolate chocolate bar lollipop shortbread ice cream. Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  25.  
  26. Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  27.  
  28. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div>
  29. </div>
  30.  
  31. <div class="m2" style="background-image: url(https://i.postimg.cc/0NNMnMg5/02.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/kgX0w8cp/002.jpg);"><b>Avaricia</b></div></div>
  32. <div class="MM101-txt"><div>
  33. <b>Edad</b>
  34. <b>Nacionalidad</b>
  35. <b>Ocupación</b>
  36. <b>Grupo</b>
  37. <b>Rango</b>
  38. <b>Físico</b>
  39. </div>
  40. <span><div><b>Resumen</b></div>Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  41.  
  42. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  43.  
  44. <div class="m3" style="background-image: url(https://i.postimg.cc/Dw641QMY/03.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/HkZfNxvs/003.jpg);"><b>Lujuria</b></div></div>
  45. <div class="MM101-txt"><div>
  46. <b>Edad</b>
  47. <b>Nacionalidad</b>
  48. <b>Ocupación</b>
  49. <b>Grupo</b>
  50. <b>Rango</b>
  51. <b>Físico</b>
  52. </div>
  53. <span><div><b>Resumen</b></div>Dessert lemon drops fruitcake gingerbread biscuit macaroon ice cream. Shortbread macaroon chupa chups cheesecake bear claw pudding. Cake jelly chocolate chocolate bar lollipop shortbread ice cream. Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  54.  
  55. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  56.  
  57. <div class="m4" style="background-image: url(https://i.postimg.cc/tRFTht1t/04.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/8C7qgSxd/04.jpg);"><b>Ira</b></div></div>
  58. <div class="MM101-txt"><div>
  59. <b>Edad</b>
  60. <b>Nacionalidad</b>
  61. <b>Ocupación</b>
  62. <b>Grupo</b>
  63. <b>Rango</b>
  64. <b>Físico</b>
  65. </div>
  66. <span><div><b>Resumen</b></div>Dessert lemon drops fruitcake gingerbread biscuit macaroon ice cream. Shortbread macaroon chupa chups cheesecake bear claw pudding. Cake jelly chocolate chocolate bar lollipop shortbread ice cream. Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  67.  
  68. Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  69.  
  70. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  71.  
  72. <div class="m5" style="background-image: url(https://i.postimg.cc/RZ4n3pXH/05.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/VN22Yhcx/05.jpg);"><b>Gula</b></div></div>
  73. <div class="MM101-txt"><div>
  74. <b>Edad</b>
  75. <b>Nacionalidad</b>
  76. <b>Ocupación</b>
  77. <b>Grupo</b>
  78. <b>Rango</b>
  79. <b>Físico</b>
  80. </div>
  81. <span><div><b>Resumen</b></div>Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  82.  
  83. Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  84.  
  85. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  86.  
  87. <div class="m6" style="background-image: url(https://i.postimg.cc/gJXw9Ckf/06.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/W3rCt7Nh/06.jpg);"><b>Envidia</b></div></div>
  88. <div class="MM101-txt"><div>
  89. <b>Edad</b>
  90. <b>Nacionalidad</b>
  91. <b>Ocupación</b>
  92. <b>Grupo</b>
  93. <b>Rango</b>
  94. <b>Físico</b>
  95. </div>
  96. <span><div><b>Resumen</b></div>Dessert lemon drops fruitcake gingerbread biscuit macaroon ice cream. Shortbread macaroon chupa chups cheesecake bear claw pudding. Cake jelly chocolate chocolate bar lollipop shortbread ice cream. Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  97.  
  98. Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  99.  
  100. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  101.  
  102. <div class="m7" style="background-image: url(https://i.postimg.cc/SsBnmgnj/07.jpg);"><div class="MM101-img"><div style="background-image: url(https://i.postimg.cc/zvrMhRvp/07.jpg);"><b>Pereza</b></div></div>
  103. <div class="MM101-txt"><div>
  104. <b>Edad</b>
  105. <b>Nacionalidad</b>
  106. <b>Ocupación</b>
  107. <b>Grupo</b>
  108. <b>Rango</b>
  109. <b>Físico</b>
  110. </div>
  111. <span><div><b>Resumen</b></div>Dessert lemon drops fruitcake gingerbread biscuit macaroon ice cream. Shortbread macaroon chupa chups cheesecake bear claw pudding. Cake jelly chocolate chocolate bar lollipop shortbread ice cream. Jelly beans oat cake gummies fruitcake halvah jujubes chocolate oat cake.
  112.  
  113. Macaroon jelly marzipan brownie chocolate muffin jelly-o caramels soufflé. Candy sesame snaps sugar plum sweet roll ice cream. Marshmallow bonbon macaroon gingerbread macaroon icing muffin sugar plum.
  114.  
  115. <div><b>Extras</b></div>Carrot cake candy canes jelly beans caramels danish dragée cheesecake. Cookie jujubes brownie sugar plum sweet roll danish. Sugar plum jujubes lemon drops jelly-o cheesecake soufflé danish danish.</span></div></div>
  116.  
  117. </div>
  118.  
  119. </div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><style>.MM101, .MM101 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; } .MM101 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM101 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM101 input, .MM101 br { display: none; } .MM101 { width: 550px; border: 1px solid; color: #111; margin: auto; font: 10px Montserrat; background: #111; --m1: #cc2058; --m2: #ff3000; overflow: hidden; box-shadow: 0 10px 20px -10px #000; } .MM101-top { display: flex; border-bottom: 1px solid; background: #111C; position: relative; z-index: 10; } @font-face { font-family: Gogoia; src: url(https://dl.dropbox.com/s/kqxzv7ta10etcaz/Gogoia.otf); } .MM101-top > label { color: #FFF; flex-grow: 1; text-align: center; letter-spacing: 1px; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: bold; height: 31px; } .MM101-txt > div > b ~ b, .MM101-top > label ~ label { border-left: 1px solid #111; } #MM101-1:checked ~ div label[for*="-1"], #MM101-2:checked ~ div label[for*="-2"], #MM101-3:checked ~ div label[for*="-3"], #MM101-4:checked ~ div label[for*="-4"], #MM101-5:checked ~ div label[for*="-5"], #MM101-6:checked ~ div label[for*="-6"], #MM101-7:checked ~ div label[for*="-7"] { background: linear-gradient(45deg, var(--m1), var(--m2)); font: 30px/26px Gogoia; padding-top: 5px; } .MM101-mov { height: 400px; position: relative; overflow: hidden; margin-top: -32px; } .MM101-mov > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; background-color: #333; transition: .5s; opacity: 0; pointer-events: none; background-position: center; } #MM101-1:checked ~ div .m1, #MM101-2:checked ~ div .m2, #MM101-3:checked ~ div .m3, #MM101-4:checked ~ div .m4, #MM101-5:checked ~ div .m5, #MM101-6:checked ~ div .m6, #MM101-7:checked ~ div .m7 { opacity: 1; pointer-events: auto; } .MM101-top > label::after, .MM101-top > label::before { content: ""; position: absolute; left: -1px; top: 162px; width: 20px; background: var(--m1); border: 1px solid #111; display: none; box-shadow: 0 5px 10px #000; bottom: -220px; } .MM101-top > label::after { left: calc(100% - 19px); background: var(--m2); } .MM101-top > label:active::after, .MM101-top > label:active::before { top: 172px; bottom: -210px; } #MM101-1:checked ~ div label[for*="-2"]::after, #MM101-2:checked ~ div label[for*="-3"]::after, #MM101-3:checked ~ div label[for*="-4"]::after, #MM101-4:checked ~ div label[for*="-5"]::after, #MM101-5:checked ~ div label[for*="-6"]::after, #MM101-6:checked ~ div label[for*="-7"]::after, #MM101-7:checked ~ div label[for*="-1"]::after, #MM101-1:checked ~ div label[for*="-7"]::before, #MM101-2:checked ~ div label[for*="-1"]::before, #MM101-3:checked ~ div label[for*="-2"]::before, #MM101-4:checked ~ div label[for*="-3"]::before, #MM101-5:checked ~ div label[for*="-4"]::before, #MM101-6:checked ~ div label[for*="-5"]::before, #MM101-7:checked ~ div label[for*="-6"]::before { display: block; } .MM101-img { height: calc(100% - 20px); display: flex; align-items: center; justify-content: center; padding-top: 30px; } .MM101-img > div { background-color: #111; border-image-source: linear-gradient(to right, var(--m1), var(--m2)); border-image-slice: 1; border-width: 3px; border-style: solid; box-shadow: 0 20px 20px -10px #000; height: 200px; display: flex; align-items: flex-end; padding: 0 10px; background-position: center; position: relative; z-index: 1; min-width: 100px; justify-content: center; } .MM101-img > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(#0000, #000); z-index: -1; } .MM101-img b { font: 40px/20px Gogoia; background: linear-gradient(45deg, var(--m1), var(--m2)); color: transparent; -webkit-background-clip: text; padding-top: 10px; } .MM101-txt { background: #111C; border-top: 1px solid #111; color: #FFF; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111; } .MM101-txt > div { border-bottom: 1px solid #111; display: flex; text-align: center; } .MM101-txt > div > b { flex-grow: 1; font-weight: normal; letter-spacing: 1px; padding: 3px; } .MM101-txt > span { display: block; padding: 50px; text-align: justify; hyphens: auto; font-size: 12px; } .MM101-txt > span br { display: block; margin: 5px; } .MM101-txt > span > div { display: flex; align-items: center; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; } .MM101-txt > span > div > b { background: linear-gradient(45deg, var(--m1), var(--m2)); color: transparent; -webkit-background-clip: text; text-shadow: none; padding: 0 3px 0 5px; } .MM101-txt > span > div::after, .MM101-txt > span > div::before { content: ""; flex: 1; height: 3px; background: var(--m1); border: 1px solid #111; } .MM101-txt > span > div::after { background: var(--m2); } .MM101-txt > span > div ~ div { margin-top: 20px; } .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!