API tools faq
paste
Emmes

Tea Time (multi - pestañas)

Emmes
Jun 13th, 2020
1,840
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.41 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM021"><div class="MM021-tt">Título Facherito Aquí</div><input type="radio" name="MM021" id="MM021-01"><input type="radio" name="MM021" id="MM021-02"><input type="radio" name="MM021" id="MM021-03"><input type="radio" name="MM021" id="MM021-04"><input type="radio" name="MM021" id="MM021-05">
  2.  
  3. <div class="MM021-si">
  4.  
  5. <div class="MM021-in m1" style="background-image: url(https://i.pinimg.com/564x/17/dd/ee/17ddee30365db04469018b98a694ea9c.jpg);"><div><div>
  6. <b>Título 01</b>
  7. <div>Caramels marshmallow chupa chups cake jelly-o candy canes dessert. Icing apple pie halvah liquorice chocolate cake. Liquorice tootsie roll marshmallow lollipop.
  8.  
  9. Cotton candy icing biscuit danish icing. Carrot cake bear claw candy canes fruitcake candy wafer powder. Gummies cotton candy croissant cake bear claw cake fruitcake.</div>
  10. </div></div><label for="MM021-05"></label></div>
  11.  
  12. <div class="MM021-in m2" style="background-image: url(https://i.pinimg.com/564x/79/06/14/790614603caab0e3c87357864df09df8.jpg);"><div><div>
  13. <b>Título 02</b>
  14. <div>Caramels marshmallow chupa chups cake jelly-o candy canes dessert. Icing apple pie halvah liquorice chocolate cake. Liquorice tootsie roll marshmallow lollipop.
  15.  
  16. Cotton candy icing biscuit danish icing. Carrot cake bear claw candy canes fruitcake candy wafer powder. Gummies cotton candy croissant cake bear claw cake fruitcake.</div>
  17. </div></div><label for="MM021-05"></label></div>
  18.  
  19. <div class="MM021-in m3" style="background-image: url(https://i.pinimg.com/564x/3f/78/59/3f78593a8d0d956de3f0c9a65e655763.jpg);"><div><div>
  20. <b>Título 03</b>
  21. <div>Caramels marshmallow chupa chups cake jelly-o candy canes dessert. Icing apple pie halvah liquorice chocolate cake. Liquorice tootsie roll marshmallow lollipop.
  22.  
  23. Cotton candy icing biscuit danish icing. Carrot cake bear claw candy canes fruitcake candy wafer powder. Gummies cotton candy croissant cake bear claw cake fruitcake.</div>
  24. </div></div><label for="MM021-05"></label></div>
  25.  
  26. <div class="MM021-in m4" style="background-image: url(https://i.pinimg.com/564x/da/92/42/da924278e25fcb81174da868642d577b.jpg);"><div><div>
  27. <b>Título 04</b>
  28. <div>Caramels marshmallow chupa chups cake jelly-o candy canes dessert. Icing apple pie halvah liquorice chocolate cake. Liquorice tootsie roll marshmallow lollipop.
  29.  
  30. Cotton candy icing biscuit danish icing. Carrot cake bear claw candy canes fruitcake candy wafer powder. Gummies cotton candy croissant cake bear claw cake fruitcake.</div>
  31. </div></div><label for="MM021-05"></label></div>
  32.  
  33. </div>
  34.  
  35. <div class="MM021-bot">
  36. <label for="MM021-01" style="background: #e9aca3;"><span class="th th-vinegar"></span></label>
  37. <label for="MM021-02" style="background: #f6ce91;"><span class="th th-cake-3"></span></label>
  38. <label for="MM021-03" style="background: #a0b4a2;"><span class="th th-holly"></span></label>
  39. <label for="MM021-04" style="background: #aebdd6;"><span class="th th-tea"></span></label>
  40. </div>
  41.  
  42. </div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet"> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM021, .MM021 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; transition: .5s; } .MM021 { background-color: #FFF; background-image: repeating-linear-gradient(-45deg, #0001, #0001 15px, #0000 15px, #0000 30px); width: 500px; margin: 0 auto 20px; border-radius: 50px; box-shadow: 0 20px 50px -40px, inset 0 10px 30px -20px; border: 10px solid #FFF; position: relative; color: #555; font: 10px Nunito Sans; padding: 30px; } .MM021-tt { position: absolute; background: #FFF; bottom: -5px; padding: 10px 12px 10px 15px; left: 50%; transform: translate(-50%, 50%); border-radius: 20px; box-shadow: 0 10px 20px -15px; font-size: 14px; font-weight: bold; letter-spacing: 3px; } .MM021-bot, .MM021-si { display: flex; justify-content: space-between; } .MM021-si { height: 200px; position: relative; } .MM021-bot label, .MM021-in { flex: 1; border: 5px solid #FFF; box-shadow: 0 10px 25px -10px, inset 0 10px 30px -20px; border-radius: 47px; margin: 0; position: relative; } .MM021-bot { height: 94px; margin-top: 10px; } .MM021-bot label ~ label, .MM021-in ~ .MM021-in { margin-left: 15px; } #MM021-01:checked ~ div .m1, #MM021-02:checked ~ div .m2, #MM021-03:checked ~ div .m3, #MM021-04:checked ~ div .m4 { flex: 15; } .MM021-bot label {cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; } .MM021-bot span { color: #FFF; font-size: 30px; text-shadow: 0 5px 5px #0006; } #MM021-01:checked ~ div label[for*="-01"], #MM021-02:checked ~ div label[for*="-02"], #MM021-03:checked ~ div label[for*="-03"], #MM021-04:checked ~ div label[for*="-04"] { background: #FFF !important; } label[for="MM021-05"]::before {cursor: pointer; content:"\ec8e"; font: 8px honeybee; color: #0003; } label[for="MM021-05"]:hover:before { color: #0004; } label[for="MM021-05"] { position: absolute; margin: 0; background: #FFF; top: 0; right: 0; padding: 8px; border-radius: 50%; box-shadow: 0 5px 10px -5px; opacity: 0; transition-delay: 0s; } .MM021-in { background-position: center; background-size: cover; } .MM021-in > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #FFF9; border-radius: 41px; border: 20px solid transparent; overflow: hidden; opacity: 0; transition-delay: 0s; } #MM021-01:checked ~ div .m1 *, #MM021-02:checked ~ div .m2 *, #MM021-03:checked ~ div .m3 *, #MM021-04:checked ~ div .m4 * { opacity: 1; transition-delay: .33s; } .MM021-in > div > div { width: 239px; height: 100%; } .MM021-in > div > div > b { display: block; background: #FFF; padding: 5px 2px 3px 5px; text-align: center; text-transform: uppercase; letter-spacing: 3px; } .MM021-in > div > div > div { margin-top: 1px; background: #FFF; height: calc(100% - 23px); border: 10px solid transparent; overflow: auto; text-align: justify; padding-right: 3px; } .MM021 input, .MM021 br { display: none; } .MM021-in > div > div > div br { display: block; margin: 5px; } .MM021 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM021 div::-webkit-scrollbar-thumb { background: #0003 !important; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; } .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!