Emmes

MM066.- En la Vida (pestañas - afiliaciones)

May 23rd, 2022
1,088
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.52 KB | None | 0 0
  1. <div class="MM066">
  2. <div class="MM066-tt"><b>Sitio</b><a href="URL">https://forobonito.com/</a></div>
  3.  
  4. <input type="radio" name="MM066" id="MM066-01" checked />
  5. <input type="radio" name="MM066" id="MM066-02" />
  6. <input type="radio" name="MM066" id="MM066-03" />
  7. <input type="radio" name="MM066" id="MM066-04" />
  8.  
  9. <div class="MM066-fx">
  10. <div class="MM066-la">
  11. <label for="MM066-01">Ambientación</label>
  12. <label for="MM066-02">Enlaces</label>
  13. <label for="MM066-03">Botones</label>
  14. <label for="MM066-04">Con Amor</label>
  15. </div>
  16.  
  17. <div class="MM066-da">
  18.  
  19. <div class="MM066-txt m1">
  20. <div style="background-image: url(https://i.pinimg.com/564x/94/2f/ca/942fca369e2e556b9f9fa8c0ed8a8442.jpg);"></div>
  21. <span>Jelly beans jelly-o topping cupcake jujubes wafer apple pie. Liquorice cake cake cake danish croissant. Sugar plum pudding biscuit.
  22.  
  23. Apple pie marshmallow tart macaroon gummies pudding lemon drops. Cheesecake liquorice fruitcake sesame snaps. Pie croissant jelly beans toffee powder bear claw carrot cake chocolate sugar plum.
  24.  
  25. Tootsie roll tart cake. Cake carrot cake sweet roll gummi bears chocolate cake sugar plum topping. Chocolate bar macaroon chupa chups toffee sugar plum. Wafer tart jujubes tiramisu cookie jelly beans.
  26.  
  27. Cake carrot cake powder chocolate cake. Danish soufflé candy canes. Topping cotton candy bear claw icing cake toffee muffin candy. Chupa chups tootsie roll pastry tart cheesecake cheesecake cotton candy pie dragée.</span>
  28. <a href="URL">Leer Más</a>
  29. </div>
  30.  
  31. <div class="MM066-txt m2">
  32. <b>Administración</b>
  33. <a href="URL"><b>Admin</b><span>Nombre Aquí</span></a>
  34. <a href="URL"><b>Admin</b><span>Nombre Aquí</span></a>
  35. <a href="URL"><b>Mod</b><span>Nombre Aquí</span></a>
  36. <a href="URL"><b>Mod</b><span>Nombre Aquí</span></a>
  37. <b>Navegación</b>
  38. <div>
  39. <a href="URL"><span class="th th-bee"></span><b>Normas</b></a>
  40. <a href="URL"><span class="th th-notebook"></span><b>Ambientación</b></a>
  41. <a href="URL"><span class="th th-star"></span><b>Grupos</b></a>
  42. <a href="URL"><span class="th th-bookmark-1"></span><b>Rangos</b></a>
  43. <a href="URL"><span class="th th-users"></span><b>Físicos</b></a>
  44. <a href="URL"><span class="th th-tumblr-o"></span><b>Tumblr</b></a>
  45. <a href="URL"><span class="th th-discord"></span><b>Discord</b></a>
  46. <a href="URL"><span class="th th-push-pin"></span><b>Afiliaciones</b></a>
  47. </div>
  48. </div>
  49.  
  50. <div class="MM066-txt m3">
  51. <b>Botones</b>
  52. <div><div><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a>
  53. 40x40
  54. <textarea rows="2" disabled><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a></textarea>
  55.  
  56. <a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a>
  57. 40x40
  58. <textarea rows="2" disabled><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a></textarea>
  59.  
  60. <a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a>
  61. 40x40
  62. <textarea rows="2" disabled><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a></textarea>
  63.  
  64. <a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a>
  65. 40x40
  66. <textarea rows="2" disabled><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a></textarea>
  67.  
  68. <a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a>
  69. 40x40
  70. <textarea rows="2" disabled><a href="URL.FORO"><img src="https://via.placeholder.com/40.png" /></a></textarea>
  71. </div></div></div>
  72.  
  73. <div class="MM066-txt m4">
  74. <span class="th th-heart-1"></span>
  75. <b>Gracias</b>
  76. </div>
  77.  
  78. </div></div><a href="https://emmescodes.tumblr.com/">emme's codes</a>
  79. </div><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Concert+One&family=Montserrat&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><style>.MM066, .MM066 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .5s; } .MM066 input, .MM066 br { display: none; } .MM066 { width: 500px; margin: auto; border-radius: 20px; overflow: hidden; font: 10px Montserrat; color: #fde4dd; } .MM066-tt { padding: 10px; background: #ec877d; display: flex; align-items: center; } .MM066-tt > b { font: 20px Concert One; text-transform: uppercase; letter-spacing: 2px; margin: 0 10px 2px 5px; } .MM066-tt > a { flex: 1; background: #fde4dd; border-radius: 10px; padding: 9px 10px 7px; letter-spacing: 2px; } .MM066-fx { background: #434868; display: flex; } .MM066-la { background: #7b8bad; padding: 15px 20px; display: flex; flex-direction: column; width: 150px; } .MM066-la label { text-transform: uppercase; font-weight: bold; letter-spacing: 1px; display: flex; font-size: 8px; align-items: center; cursor: pointer; padding: 5px 0; color: #434868; } .MM066-la label::before { content: ""; width: 5px; border-top: 2px solid; margin-right: 5px; transition: .3s; } #MM066-01:checked ~ div label[for*="01"]::before, #MM066-02:checked ~ div label[for*="02"]::before, #MM066-03:checked ~ div label[for*="03"]::before, #MM066-04:checked ~ div label[for*="04"]::before { width: 20px; } #MM066-01:checked ~ div label[for*="01"], #MM066-02:checked ~ div label[for*="02"], #MM066-03:checked ~ div label[for*="03"], #MM066-04:checked ~ div label[for*="04"] { color: #fde4dd; } .MM066-da { flex: 1; margin: 20px; position: relative; overflow: hidden; } .MM066-da > div { min-height: 300px; transform: translate(100%); } .MM066-da > div ~ div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #MM066-01:checked ~ div .m1, #MM066-02:checked ~ div .m2, #MM066-03:checked ~ div .m3, #MM066-04:checked ~ div .m4 { transform: translate(0%); } .MM066-txt { display: flex; flex-direction: column; } .MM066 > a { display: block; background: #fde4dd; text-align: center; letter-spacing: 5px; padding: 5px 0 5px 5px; } .MM066-txt.m1 > div { height: 120px; border-radius: 10px; background-position: center; background-size: cover; border: 5px solid #fde4dd; } .MM066-txt.m1 > span { padding: 20px; text-align: justify; hyphens: auto; } .MM066-txt > b, .MM066-txt.m1 > a { margin: auto; background: #fde4dd; font: bold 8px Montserrat; text-transform: uppercase; letter-spacing: 2px; padding: 8px 12px 8px 14px; border-radius: 10px; } .MM066-txt > b { margin: 0 auto 10px; color: #434868 !important; } .MM066-txt.m2 > div > a, .MM066-txt.m2 > a { border-radius: 10px; text-transform: uppercase; padding: 5px; background: #434868; } .MM066-txt.m2 > a { display: flex; align-items: center; } .MM066-txt.m2 > a > * { background: #ec877d; padding: 8px; color: #fde4dd; letter-spacing: 2px; border-radius: 5px 0 0 5px; } .MM066-txt.m2 > a > span { flex: 1; text-align: right; background: #fde4dd; color: #434868; border-radius: 0 5px 5px 0; } .MM066-txt.m2 > div > a:hover, .MM066-txt.m2 a:hover { background: #7b8bad; } .MM066-txt.m1 > a:hover { background: #ec877d; } .MM066 a { color: #434868 !important; font: bold 8px montserrat; } .MM066-txt.m2 > b ~ b { margin-top: 30px; } .MM066-txt.m2 > div { display: flex; flex-wrap: wrap; } .MM066-txt.m2 > div > a { text-align: center; flex-grow: 1; min-width: 25%; } .MM066-txt.m2 > div > a > span { font-size: 16px; display: block; padding: 10px; background: #fde4dd; border-radius: 5px 5px 0 0; } .MM066-txt.m2 > div > a > b { background: #ec877d; display: block; padding: 3px 10px; letter-spacing: 1px; color: #fde4dd; border-radius: 0 0 5px 5px; } .MM066-txt.m3 > div { flex: 1; margin-top: 5px; position: relative; } .MM066-txt.m3 > div > div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; text-align: center; } .MM066-txt.m3 textarea { border: none; width: 100%; border-radius: 10px; padding: 8px; text-align: center; color: #434868; font: 10px Montserrat; background: #fde4dd; } .MM066-txt.m4 { justify-content: center; } .MM066-txt.m4 > span { margin: 0 auto 15px; font-size: 70px; color: #ec877d; -webkit-text-stroke: 5px #7b8bad; animation: late 1.5s infinite; } @keyframes late { 0% { transform: scale(1)); } 10% { transform: scale(.8); } 20% { transform: scale(1); } 40% { transform: scale(.8); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .MM066-txt.m3 > div > div br, .MM066-txt.m1 > span br { display: block; } .MM066-txt.m3 > div > div br + br, .MM066-txt.m1 > span br + br { margin: 5px; } .MM066 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM066 div::-webkit-scrollbar-thumb { background: #0006 !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