API tools faq
paste
Advertisement
Emmes

Innecesario (multi - pestañas)

Emmes
Jun 13th, 2020
1,356
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.61 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM012"><b>Nombre o Título Aquí</b><div>
  2.  
  3. <input type="radio" name="MM012" id="MM012-01" checked>
  4. <input type="radio" name="MM012" id="MM012-02">
  5. <input type="radio" name="MM012" id="MM012-03">
  6. <input type="radio" name="MM012" id="MM012-04">
  7. <input type="radio" name="MM012" id="MM012-05">
  8.  
  9. <div class="MM012-in"><span>
  10. <label><input type="checkbox"><span class="th th-chevron-down"></span><div class="MM012-links">
  11.  
  12. <a href="URL">Enlace</a>
  13. <a href="URL">Enlace</a>
  14. <a href="URL">Enlace</a>
  15. <a href="URL">Enlace</a>
  16. <a href="URL">Enlace</a>
  17.  
  18. </div></label>
  19.  
  20. <b>Primero Lala</b>
  21. <b>Segundo</b>
  22. <b>Tercero Probando</b>
  23. <b>Cuarto Plop</b>
  24. <b>Quinto</b>
  25. </span>
  26. <div>
  27.  
  28. <div class="MM012-side aa" style="background-image: url(https://66.media.tumblr.com/53a63c111909b1b9c42f6d9dd29635a5/tumblr_oatrz69H8J1rsjdguo2_r1_540.gifv);"><div><strong>Primer Títulillo por Aquí</strong><span>Cupcake caramels croissant tootsie roll carrot cake candy canes biscuit. Cake wafer cake apple pie pastry gummi bears candy canes jelly-o. Pie chocolate sweet roll jujubes jelly beans jelly beans powder. Cookie soufflé carrot cake toffee topping croissant cupcake.
  29.  
  30. Biscuit powder ice cream carrot cake jelly beans candy. Apple pie bear claw cheesecake sesame snaps ice cream sesame snaps. Wafer topping sweet. Gummies powder jelly-o gummi bears jujubes sweet roll jelly-o.
  31.  
  32. Topping dragée tootsie roll toffee cotton candy cake. Cupcake oat cake powder toffee sweet powder danish powder. Danish pudding jelly tiramisu sesame snaps sweet halvah tootsie roll dessert.</span></div></div>
  33.  
  34. <div class="MM012-side bb" style="background-image: url(https://i.pinimg.com/564x/f0/cb/1a/f0cb1ab5f276758d4c8db6a1be6529e7.jpg);"><div><strong>Segundo Títulillo</strong><span>Biscuit powder ice cream carrot cake jelly beans candy. Apple pie bear claw cheesecake sesame snaps ice cream sesame snaps. Wafer topping sweet. Gummies powder jelly-o gummi bears jujubes sweet roll jelly-o.
  35.  
  36. Topping dragée tootsie roll toffee cotton candy cake. Cupcake oat cake powder toffee sweet powder danish powder. Danish pudding jelly tiramisu sesame snaps sweet halvah tootsie roll dessert.</span></div></div>
  37.  
  38. <div class="MM012-side cc" style="background-image: url(https://i.pinimg.com/564x/d5/96/d8/d596d818977dcda5acae95074f489ce1.jpg);"><div><strong>Tercer Títulillo por Aquí</strong><span>Cupcake caramels croissant tootsie roll carrot cake candy canes biscuit. Cake wafer cake apple pie pastry gummi bears candy canes jelly-o. Pie chocolate sweet roll jujubes jelly beans jelly beans powder. Cookie soufflé carrot cake toffee topping croissant cupcake.</span></div></div>
  39.  
  40. <div class="MM012-side dd" style="background-image: url(https://i.pinimg.com/564x/26/ae/34/26ae3489e499654271e8b158e1596797.jpg);"><div><strong>Cuarto</strong><span>Cupcake caramels croissant tootsie roll carrot cake candy canes biscuit. Cake wafer cake apple pie pastry gummi bears candy canes jelly-o. Pie chocolate sweet roll jujubes jelly beans jelly beans powder. Cookie soufflé carrot cake toffee topping croissant cupcake.
  41.  
  42. Biscuit powder ice cream carrot cake jelly beans candy. Apple pie bear claw cheesecake sesame snaps ice cream sesame snaps. Wafer topping sweet. Gummies powder jelly-o gummi bears jujubes sweet roll jelly-o.
  43.  
  44. Topping dragée tootsie roll toffee cotton candy cake. Cupcake oat cake powder toffee sweet powder danish powder. Danish pudding jelly tiramisu sesame snaps sweet halvah tootsie roll dessert.</span></div></div>
  45.  
  46. <div class="MM012-side ff" style="background-image: url(https://i.pinimg.com/564x/87/1f/d1/871fd1cf2d7ea39f94a4b75f8c117fb2.jpg);"><div><strong>Quinto por Aquí</strong><span>Biscuit powder ice cream carrot cake jelly beans candy. Apple pie bear claw cheesecake sesame snaps ice cream sesame snaps. Wafer topping sweet. Gummies powder jelly-o gummi bears jujubes sweet roll jelly-o.</span></div></div>
  47.  
  48. <i class="MM012-cont"><b></b></i></div></div>
  49.  
  50. <div class="MM012-bots">
  51. <label for="MM012-01"><span class="th th-apple"></span></label>
  52. <label for="MM012-02"><span class="th th-cake-2"></span></label>
  53. <label for="MM012-03"><span class="th th-carrot"></span></label>
  54. <label for="MM012-04"><span class="th th-coconut"></span></label>
  55. <label for="MM012-05"><span class="th th-cupcake"></span></label>
  56. </div>
  57.  
  58. </div></div><a class="miMMo" href="https://emmescodes.tumblr.com/" title="Code by Emme" style="margin-bottom: 40px;">Emme</a><link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&family=Roboto&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM012, .MM012 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; transition: .5s; } .MM012 { width: 450px; margin: auto; text-align: center; font: 12px 'Baloo Paaji 2'; color: #444; --mm-uno: #ff566e; --mm-dos: #ff1d3f; --mm-som: 1px 1px var(--mm-dos), -1px 1px var(--mm-dos), 1px -1px var(--mm-dos), -1px -1px var(--mm-dos); } .MM012 input, .MM012 br { display: none; } .MM012 > b { display: inline-block; background: var(--mm-uno); color: #FFF; padding: 6px 25px 5px 27px; border-radius: 50px 50px 0 0; letter-spacing: 2px; text-shadow: var(--mm-som); } .MM012 > div { border: 3px solid var(--mm-uno); margin-top: -3px; background: #FFF; padding: 30px; box-shadow: 0 10px 30px -20px #000; position: relative; border-radius: 50px; } .MM012 > div::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 50%; border-radius: 0 0 47px 47px; background: linear-gradient(to top, var(--mm-uno), #0000 ); opacity: .5; } .MM012-in { background: #FFF; position: relative; box-shadow: 0 5px 20px -10px #000; border-radius: 20px; padding-bottom: 40px; } .MM012-bots { position: absolute; border: 3px solid var(--mm-uno); height: 100px; width: 100px; border-radius: 50%; background: #FFF; left: calc(50% - 50px); bottom: -40px; box-shadow: 0 5px 20px -10px #000; } .MM012-bots label { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px dashed; margin: 0; border-radius: 50%; color: var(--mm-uno); padding: 5px; cursor: pointer; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 30px; } .MM012-bots label:before, .MM012-bots label:after { content:""; position: absolute; } .MM012-bots label::before { bottom: -20px; left: -20px; top: 50%; right: 50%; border-bottom: 3px solid; border-left: 3px solid; border-radius: 0 0 0 100px; } .MM012-bots label::after { width: 10px; height: 10px; box-shadow: inset 0 0 0 20px; right: 46%; bottom: -23px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } .MM012-bots label:active { transform: rotate(-50deg); } #MM012-01:checked ~ div label[for*="-02"], #MM012-02:checked ~ div label[for*="-03"], #MM012-03:checked ~ div label[for*="-04"], #MM012-04:checked ~ div label[for*="-05"], #MM012-05:checked ~ div label[for*="-01"] { opacity: 1; pointer-events: auto; } .MM012-bots label span { color: #999; } .MM012-bots:hover label span { color: var(--mm-som); } .MM012-in > span { display: block; padding: 10px; text-align: left; } .MM012-in > span > b { display: inline-block; background: var(--mm-uno); color: #FFF; font: bold 10px 'Baloo Paaji 2'; text-transform: uppercase; letter-spacing: 2PX; padding: 3px 8px 3px 10px; border-radius: 20px; opacity: 0; text-shadow: var(--mm-som); } .MM012-in > div { border-top: 3px solid var(--mm-uno); border-bottom: 3px solid var(--mm-uno); height: 300px; position: relative; overflow: hidden; } .MM012-in > span > b ~ b { position: absolute; top: 10px; left: 10px; } #MM012-01:checked ~ .MM012-in > span > b:nth-of-type(1), #MM012-02:checked ~ .MM012-in > span > b:nth-of-type(2), #MM012-03:checked ~ .MM012-in > span > b:nth-of-type(3), #MM012-04:checked ~ .MM012-in > span > b:nth-of-type(4), #MM012-05:checked ~ .MM012-in > span > b:nth-of-type(5) { opacity: 1; } .MM012-cont { width: 120px; position: absolute; bottom: 10px; left: calc(50% - 60px); padding: 2px; border-radius: 10px; background: #FFF9; box-shadow: 0 3px 8px -3px #000; } .MM012-cont > b { display: block; width: 20%; background: var(--mm-uno); height: 5px; border-radius: 5px; } #MM012-02:checked ~ div .MM012-cont > b { width: 40%; } #MM012-03:checked ~ div .MM012-cont > b { width: 60%; } #MM012-04:checked ~ div .MM012-cont > b { width: 80%; } #MM012-05:checked ~ div .MM012-cont > b { width: 100%; } .MM012-side { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translate(100%); animation-fill-mode: forwards; animation: mm-vuelta .5s ease; background-position: center; background-size: cover; } @keyframes mm-lado { from {transform: translate(-100%);} to {transform: translate(0%);} } @keyframes mm-vuelta { from {transform: translate(0%);} to {transform: translate(100%);} } #MM012-01:checked ~ div .MM012-side.aa, #MM012-02:checked ~ div .MM012-side.bb, #MM012-03:checked ~ div .MM012-side.cc, #MM012-04:checked ~ div .MM012-side.dd, #MM012-05:checked ~ div .MM012-side.ff { animation: mm-lado .5s ease; animation-fill-mode: forwards; } .MM012-side > div { background: #FFFD; top: 30px; position: absolute; bottom: 30px; left: 30px; right: 30px; padding: 10px; box-shadow: 0 10px 15px -10px #000; border-radius: 20px; } .MM012-side > div > strong { display: block; border-bottom: 1px solid var(--mm-uno); letter-spacing: 1px; margin: 0 -10px; padding-bottom: 5px; } .MM012-side > div > span { display: block; margin: 20px 10px; height: calc(100% - 55px); overflow: auto; text-align: justify; line-height: 15px; padding-right: 5px; } .MM012-side > div > span br { display: block; margin: 5px; } .MM012-in label { cursor: pointer; position: absolute; right: 15px; top: 18px; color: #999; margin: 0px; } .MM012-links { position: absolute; top: 100%; right: -5px; background: #FFF9; z-index: 20; padding: 1px; width: 120px; } .MM012-links > a { display: block; text-align: center; background: #FFF; text-transform: uppercase; font: bold 10px 'Baloo Paaji 2'; letter-spacing: 2px; padding-left: 2px; height: 0px; overflow: hidden; } .MM012-in label input:checked ~ .MM012-links { box-shadow: 0 5px 20px -10px #000; } .MM012-in label input:checked ~ .MM012-links > a { border: 1px dotted var(--mm-uno); margin: 4px; height: 20px; } .MM012-links > a:hover { background: var(--mm-uno); color: #FFF; text-shadow: var(--mm-som); } .MM012-in label input:checked ~ span { transform: rotate(180deg); } .MM012 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM012 div::-webkit-scrollbar-thumb { background: #0003 !important; } .miMMo { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: right; transition: 0.5s; text-transform: uppercase; width: 370px; margin: auto; } .miMMo:hover { letter-spacing: 3px; } </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!