API tools faq
paste
Emmes

MM078.- Hello (cronología)

Emmes
Jun 14th, 2022
899
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.94 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM078"><div><div class="MM078-img" style="background-image: url(https://i.postimg.cc/g2SVVJ0Z/001.jpg);"></div>
  2. <b>Nombre</b>
  3. <span>Cronología</span>
  4.  
  5. <div class="MM078-fx">
  6. <input type="radio" name="MM078" id="MM078-01" checked/><input type="radio" name="MM078" id="MM078-02" /><input type="radio" name="MM078" id="MM078-03" />
  7.  
  8. <div class="MM078-labs">
  9. <label for="MM078-01"><i class="cp cp-agenda"></i><b>Activos</b></label>
  10. <label for="MM078-02"><i class="cp cp-box"></i><b>Completos</b></label>
  11. <label for="MM078-03"><i class="cp cp-cancel"></i><b>Avandonado</b></label>
  12. </div>
  13.  
  14. <div class="MM078-txts">
  15.  
  16. <div class="MM078-xx m1">
  17. <a href="URL_DEL_TEMA">Primer Tema Activo</a>
  18. <b>con Nombre Apellido</b>
  19.  
  20. <a href="URL_DEL_TEMA">Segundo Tema Activo</a>
  21. <b>con Nombre Apellido</b>
  22.  
  23. <a href="URL_DEL_TEMA">Tercer Tema Activo</a>
  24. <b>con Nombre Apellido</b>
  25.  
  26. <a href="URL_DEL_TEMA">Cuarto Tema Activo</a>
  27. <b>con Nombre Apellido</b>
  28.  
  29. <a href="URL_DEL_TEMA">Quinto Tema Activo</a>
  30. <b>con Nombre Apellido</b>
  31.  
  32. <a href="URL_DEL_TEMA">Sexto Tema Activo</a>
  33. <b>con Nombre Apellido</b>
  34. </div>
  35.  
  36. <div class="MM078-xx m2">
  37. <a href="URL_DEL_TEMA">Primer Tema Completo</a>
  38. <b>con Nombre Apellido</b>
  39.  
  40. <a href="URL_DEL_TEMA">Segundo Tema Completo</a>
  41. <b>con Nombre Apellido</b>
  42.  
  43. <a href="URL_DEL_TEMA">Tercer Tema Completo</a>
  44. <b>con Nombre Apellido</b>
  45.  
  46. <a href="URL_DEL_TEMA">Cuarto Tema Completo</a>
  47. <b>con Nombre Apellido</b>
  48.  
  49. <a href="URL_DEL_TEMA">Quinto Tema Completo</a>
  50. <b>con Nombre Apellido</b>
  51.  
  52. <a href="URL_DEL_TEMA">Sexto Tema Completo</a>
  53. <b>con Nombre Apellido</b>
  54. </div>
  55.  
  56. <div class="MM078-xx m3">
  57. <a href="URL_DEL_TEMA">Primer Tema Abandonado</a>
  58. <b>con Nombre Apellido</b>
  59.  
  60. <a href="URL_DEL_TEMA">Segundo Tema Abandonado</a>
  61. <b>con Nombre Apellido</b>
  62.  
  63. <a href="URL_DEL_TEMA">Tercer Tema Abandonado</a>
  64. <b>con Nombre Apellido</b>
  65.  
  66. <a href="URL_DEL_TEMA">Cuarto Tema Abandonado</a>
  67. <b>con Nombre Apellido</b>
  68.  
  69. <a href="URL_DEL_TEMA">Quinto Tema Abandonado</a>
  70. <b>con Nombre Apellido</b>
  71.  
  72. <a href="URL_DEL_TEMA">Sexto Tema Abandonado</a>
  73. <b>con Nombre Apellido</b>
  74. </div>
  75.  
  76. </div></div></div></div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM078 br { display: none; } .MM078 { width: 400px; margin: auto; border-radius: 40px; padding: 30px; box-shadow: 0 40px 40px -30px #0009; font: 10px Open Sans; color: #555; } .MM078 { background: linear-gradient(-45deg, #FFF, #e1e2e7); border-style: solid; border-width: 1px; border-color: #dddee2 #FFF #FFF #dddee2; } .MM078 > div { border-style: solid; border-width: 1px; border-color: #dddee2 #FFF #FFF #dddee2; border-radius: 20px; background: linear-gradient(-45deg, #e1e2e7, #FFF9); text-align: center; display: flex; flex-direction: column; } .MM078-img { height: 150px; background-position: center; background-size: cover; margin: 20px; border-radius: 10px; } .MM078-labs i, .MM078 > div > b { background: linear-gradient(45deg, #9ca2b9, #5e667b); background-clip: text; color: transparent; } .MM078 > div > b { font: 700 40px Josefin Sans; text-transform: uppercase; } .MM078 > div > span { margin-top: 5px; text-transform: uppercase; letter-spacing: 3px; padding-left: 3px; color: #f58b2e; font-weight: bold; min-width: 100%; } .MM078-fx input { display: none; } .MM078-fx { margin: 20px; display: flex; align-items: flex-start; } .MM078-labs { display: flex; flex-direction: column; } .MM078-labs > label { border-style: solid; border-width: 1px; border-color: #dddee2 #FFF #FFF #dddee2; padding: 15px; border-radius: 10px; position: relative; background: #FFF; font-size: 16px; margin: 0; cursor: pointer; } .MM078-labs > label ~ label { margin-top: 10px; } #MM078-01:checked ~ div > label[for*="01"], #MM078-02:checked ~ div > label[for*="02"], #MM078-03:checked ~ div > label[for*="03"], .MM078-labs label:hover { transform: scale(1.1); box-shadow: 0 10px 20px -10px #0009; z-index: 20; } .MM078-labs b { position: absolute; opacity: 0; pointer-events: none; font-size: 10px; white-space: nowrap; background: #dddee2; top: 10px; left: 50%; padding: 10px; border-radius: 10px; transform: translate(-50%); z-index: 10; } .MM078-labs label:hover b { top: calc(100% + 5px); box-shadow: 0 10px 20px -10px #0009; opacity: 1; } .MM078-labs b::before { content: ""; position: absolute; width: 16px; height: 8px; top: -8px; left: calc(50% - 8px); background: #dddee2; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .MM078-txts { flex: 1; margin-left: 10px; height: 270px; position: relative; overflow: hidden; } .MM078-xx { transition: .5s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform-origin: top left; transform: rotate(-90deg); overflow: auto; display: flex; flex-direction: column; } #MM078-01:checked ~ div > .m1, #MM078-02:checked ~ div > .m2, #MM078-03:checked ~ div > .m3 { transform: rotate(0deg); } .MM078-xx > a { background: #FFF; border-radius: 10px 10px 0 0; overflow: hidden; line-height: 30px; min-height: 30px; } .MM078-xx > a ~ a { margin-top: 10px; } .MM078-xx > b { background: linear-gradient(45deg, #9ca2b9, #5e667b); color: #FFF; text-transform: uppercase; font-size: 8px; letter-spacing: 2px; padding: 3px 3px 3px 5px; text-shadow: 1px 1px #5e667b, -1px 1px #5e667b, 1px -1px #5e667b, -1px -1px #5e667b; line-height: 10px; border-radius: 0 0 10px 10px; } .MM078, .MM078 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .3s; } .MM078 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM078 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
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!