Emmes

Renacer (pestañas)

Feb 14th, 2021
2,123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.65 KB | None | 0 0
  1. <div class="MM050"><div class="MM050-img" style="background-image: url(https://i.postimg.cc/rsynydfg/re1.jpg);">
  2.  
  3. <div class="MM050-tt">Renacer</div>
  4.  
  5. <input type="radio" name="MM050" id="MM050-0" checked><label style="display: none;"></label><div class="MM050-c m1"><div><div class="MM050-iimg" style="background-image: url(https://i.postimg.cc/Pxyy7XdD/re2.jpg);"></div></div>
  6. <b>Renacer Es...</b>
  7. <span>Nacer de nuevo [un ser vivo] después de la muerte real o aparente.
  8.  
  9. Es volver a la vida.</span>
  10. </div>
  11.  
  12.  
  13. <input type="radio" name="MM050" id="MM050-1"><label for="MM050-1">Primero</label><div class="MM050-c">
  14. <div class="MM050-up">Primer Pestaña<label for="MM050-0"></label></div>
  15. <div class="MM050-dimg" style="background-image: url(https://i.postimg.cc/sXsKKQCy/re3.jpg);"></div>
  16. <div class="MM050-sub">Subtitulo I Aquí</div>
  17. <div class="MM050-txt">Chocolate danish pie dessert oat cake. Jelly-o tootsie roll carrot cake gingerbread cake. Jujubes tart fruitcake. Tootsie roll sweet roll carrot cake ice cream halvah dessert macaroon.
  18.  
  19. Toffee gummies sesame snaps chocolate bar dessert lollipop lollipop. Chocolate bar pudding jelly beans lemon drops fruitcake ice cream. Biscuit chocolate caramels. Dragée donut chocolate bar croissant.
  20.  
  21. Chupa chups cotton candy candy canes apple pie lemon drops candy canes. Lollipop jelly pudding apple pie sweet roll halvah marshmallow jujubes dessert. Cake lollipop dragée jelly.
  22.  
  23. Chupa chups marshmallow candy canes cotton candy. Cake dessert chocolate bar chocolate cake. Chocolate icing sugar plum macaroon chocolate bar tart liquorice danish.
  24.  
  25. Marzipan candy canes chupa chups bear claw chupa chups biscuit. Brownie cotton candy carrot cake candy canes muffin. Dragée wafer marshmallow cake chocolate fruitcake. Danish wafer macaroon jujubes cheesecake dragée.</div></div>
  26.  
  27. <input type="radio" name="MM050" id="MM050-2"><label for="MM050-2">Segundo</label><div class="MM050-c">
  28. <div class="MM050-up">Segunda Pestaña<label for="MM050-0"></label></div>
  29. <div class="MM050-dimg" style="background-image: url(https://i.postimg.cc/s2pwpP8w/re4.jpg);"></div>
  30. <div class="MM050-sub">Subtitulo II Aquí</div>
  31. <div class="MM050-txt">Toffee gummies sesame snaps chocolate bar dessert lollipop lollipop. Chocolate bar pudding jelly beans lemon drops fruitcake ice cream. Biscuit chocolate caramels. Dragée donut chocolate bar croissant.
  32.  
  33. Chupa chups cotton candy candy canes apple pie lemon drops candy canes. Lollipop jelly pudding apple pie sweet roll halvah marshmallow jujubes dessert. Cake lollipop dragée jelly.
  34.  
  35. Chupa chups marshmallow candy canes cotton candy. Cake dessert chocolate bar chocolate cake. Chocolate icing sugar plum macaroon chocolate bar tart liquorice danish.
  36.  
  37. Marzipan candy canes chupa chups bear claw chupa chups biscuit. Brownie cotton candy carrot cake candy canes muffin. Dragée wafer marshmallow cake chocolate fruitcake. Danish wafer macaroon jujubes cheesecake dragée.</div>
  38. </div>
  39.  
  40. <input type="radio" name="MM050" id="MM050-3"><label for="MM050-3">Tercero</label><div class="MM050-c">
  41. <div class="MM050-up">Tercer Pestaña<label for="MM050-0"></label></div>
  42. <div class="MM050-dimg" style="background-image: url(https://i.postimg.cc/BnPhvfCW/re5.jpg);"></div>
  43. <div class="MM050-sub">Subtitulo III Aquí</div>
  44. <div class="MM050-txt">Toffee gummies sesame snaps chocolate bar dessert lollipop lollipop. Chocolate bar pudding jelly beans lemon drops fruitcake ice cream. Biscuit chocolate caramels. Dragée donut chocolate bar croissant.
  45.  
  46. Chupa chups cotton candy candy canes apple pie lemon drops candy canes. Lollipop jelly pudding apple pie sweet roll halvah marshmallow jujubes dessert. Cake lollipop dragée jelly.
  47.  
  48. Chupa chups marshmallow candy canes cotton candy. Cake dessert chocolate bar chocolate cake. Chocolate icing sugar plum macaroon chocolate bar tart liquorice danish.
  49.  
  50. Marzipan candy canes chupa chups bear claw chupa chups biscuit. Brownie cotton candy carrot cake candy canes muffin. Dragée wafer marshmallow cake chocolate fruitcake. Danish wafer macaroon jujubes cheesecake dragée.</div>
  51. </div>
  52.  
  53. <input type="radio" name="MM050" id="MM050-4"><label for="MM050-4">Cuarto</label><div class="MM050-c">
  54. <div class="MM050-up">Cuarta Pestaña<label for="MM050-0"></label></div>
  55. <div class="MM050-dimg" style="background-image: url(https://i.postimg.cc/k5rT6Yj2/re6.jpg);"></div>
  56. <div class="MM050-sub">Subtitulo IV Aquí</div>
  57. <div class="MM050-txt">Toffee gummies sesame snaps chocolate bar dessert lollipop lollipop. Chocolate bar pudding jelly beans lemon drops fruitcake ice cream. Biscuit chocolate caramels. Dragée donut chocolate bar croissant.
  58.  
  59. Chupa chups cotton candy candy canes apple pie lemon drops candy canes. Lollipop jelly pudding apple pie sweet roll halvah marshmallow jujubes dessert. Cake lollipop dragée jelly.
  60.  
  61. Chupa chups marshmallow candy canes cotton candy. Cake dessert chocolate bar chocolate cake. Chocolate icing sugar plum macaroon chocolate bar tart liquorice danish.
  62.  
  63. Marzipan candy canes chupa chups bear claw chupa chups biscuit. Brownie cotton candy carrot cake candy canes muffin. Dragée wafer marshmallow cake chocolate fruitcake. Danish wafer macaroon jujubes cheesecake dragée.</div>
  64. </div>
  65.  
  66. <input type="radio" name="MM050" id="MM050-5"><label for="MM050-5">Quinto</label><div class="MM050-c">
  67. <div class="MM050-up">Quinta Pestaña<label for="MM050-0"></label></div>
  68. <div class="MM050-dimg" style="background-image: url(https://i.postimg.cc/gjMMxY5p/re7.jpg);"></div>
  69. <div class="MM050-sub">Subtitulo V Aquí</div>
  70. <div class="MM050-txt">Toffee gummies sesame snaps chocolate bar dessert lollipop lollipop. Chocolate bar pudding jelly beans lemon drops fruitcake ice cream. Biscuit chocolate caramels. Dragée donut chocolate bar croissant.
  71.  
  72. Chupa chups cotton candy candy canes apple pie lemon drops candy canes. Lollipop jelly pudding apple pie sweet roll halvah marshmallow jujubes dessert. Cake lollipop dragée jelly.
  73.  
  74. Chupa chups marshmallow candy canes cotton candy. Cake dessert chocolate bar chocolate cake. Chocolate icing sugar plum macaroon chocolate bar tart liquorice danish.
  75.  
  76. Marzipan candy canes chupa chups bear claw chupa chups biscuit. Brownie cotton candy carrot cake candy canes muffin. Dragée wafer marshmallow cake chocolate fruitcake. Danish wafer macaroon jujubes cheesecake dragée.</div>
  77. </div>
  78.  
  79.  
  80. </div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Lora&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><style>.MM050, .MM050 * { box-sizing: border-box; scrollbar-color: #CCC #0002 !important; scrollbar-width: thin; transition: .5s; } .MM050 input, .MM050 br { display: none; } .MM050 { width: 500px; margin: auto; min-height: 300px; border: 5px solid #FFF; background: #EEE; outline: 1px solid #CCC; font: 10px Montserrat; color: #444; text-align: center; display: flex; position: relative; } .MM050 div[class*="img"] { background-position: center; background-size: cover; } .MM050-img { width: 150px; border: 1px solid #CCC; padding: 8px; } .MM050-tt { border: 1px solid #CCC; background: #FFF; font: 14px Lora; letter-spacing: 1px; padding: 5px; margin-bottom: 300px; } .MM050-c { position: absolute; border: 1px solid #CCC; top: 0; bottom: 0; right: 0; left: 150px; display: flex; justify-content: center; flex-direction: column; pointer-events: none; filter: blur(30px); opacity: 0; transition: 1s; } .MM050-c.m1 { padding: 60px; } .MM050-c.m1 > div { width: 70px; height: 70px; min-height: 70px; box-shadow: 0 0 0 5px #FFF, 0 0 0 6px #CCC; border: 1px solid #CCC; margin: 30px auto; transform: rotate(45deg); position: relative; overflow: hidden; } .MM050-iimg { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; transform: rotate(-45deg); } .MM050-c.m1 > b { font: 14px Lora; letter-spacing: 1px; } .MM050-c.m1 > b::after { content: ""; display: block; width: 50px; border-top: 1px solid #AAA; margin: 10px auto; } .MM050-img > label { border: 1px solid #CCC; display: block; margin: 5px 0 0; background: #FFFC; padding: 6px 5px 3px 7px; cursor: crosshair; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .MM050-img input:checked + label { background: #FFF; } .MM050-img input:checked + label + .MM050-c { pointer-events: auto; filter: blur(0px); opacity: 1; background: #EEE; } .MM050-up { display: flex; border: 1px solid #CCC; margin: 5px; background: #FFF; padding-left: 5px; align-items: center; letter-spacing: 3px; } .MM050-up label { border-left: 1px solid #CCC; width: 20px; height: 20px; margin-left: auto; display: flex; align-items: center; justify-content: center; cursor: crosshair; padding: 0; letter-spacing: 0; } .MM050-up label::before { content:"\01F5D9"; } .MM050-up label:hover { font-size: 12px; } .MM050-txt { flex: 1; border: 30px solid transparent; margin: 6px; background: #FFF; overflow: auto; outline: 1px solid #CCC; text-align: justify; padding-right: 5px; hyphens: auto; } .MM050-dimg { height: 100px; margin: 1px 6px; border: 5px solid #FFF; outline: 1px solid #CCC; box-shadow: inset 0 0 0 1px #DDD; } .MM050-sub { font: 12px Lora; letter-spacing: 1px; border: 1px solid #CCC; margin: 5px 5px 0; background: #FFF; padding: 5px; } .MM050-txt br, .MM050-c > span br { display: block; } .MM050-txt br + br, .MM050-c > span br + br { margin: 5px; } .MM050 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM050 div::-webkit-scrollbar-thumb { background: #CCC !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