API tools faq
paste
Emmes

MM088.- Luna Roja (cronología)

Emmes
Aug 31st, 2022
1,838
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.44 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM088" style="background-image: url(https://i.postimg.cc/Bv3jN4HR/lr01.jpg);">
  2.  
  3. <input type="radio" name="MM088" id="MM088-01" checked />
  4. <input type="radio" name="MM088" id="MM088-02" />
  5. <input type="radio" name="MM088" id="MM088-03" />
  6.  
  7. <div><b>Luna Roja</b>
  8. <div class="MM088-con"><div>
  9.  
  10. <div class="MM088-aa">
  11. <div><a href="URL">Tema Activo</a> con Nombre Apellido</div>
  12. <div><a href="URL">Tema Activo</a> con Nombre Apellido</div>
  13. <div><a href="URL">Tema Activo</a> con Nombre Apellido</div>
  14. <div><a href="URL">Tema Activo</a> con Nombre Apellido</div>
  15. <div><a href="URL">Tema Activo</a> con Nombre Apellido</div>
  16. </div>
  17.  
  18. <div class="MM088-aa">
  19. <div><a href="URL">Tema Completado</a> con Nombre Apellido</div>
  20. <div><a href="URL">Tema Completado</a> con Nombre Apellido</div>
  21. <div><a href="URL">Tema Completado</a> con Nombre Apellido</div>
  22. <div><a href="URL">Tema Completado</a> con Nombre Apellido</div>
  23. <div><a href="URL">Tema Completado</a> con Nombre Apellido</div>
  24. </div>
  25.  
  26. <div class="MM088-aa">
  27. <div><a href="URL">Tema Abandonado</a> con Nombre Apellido</div>
  28. <div><a href="URL">Tema Abandonado</a> con Nombre Apellido</div>
  29. <div><a href="URL">Tema Abandonado</a> con Nombre Apellido</div>
  30. <div><a href="URL">Tema Abandonado</a> con Nombre Apellido</div>
  31. <div><a href="URL">Tema Abandonado</a> con Nombre Apellido</div>
  32. </div>
  33.  
  34. </div></div>
  35.  
  36. <i>cronología</i>
  37.  
  38. </div>
  39.  
  40. <div class="MM088-labs">
  41. <label for="MM088-01"><b>Activos</b></label>
  42. <label for="MM088-02"><b>Completos</b></label>
  43. <label for="MM088-03"><b>Abandonados</b></label>
  44. </div>
  45.  
  46. </div><a href="https://emmescodes.tumblr.com/" class="miMM"style="color: #a6001f;">emme</a><link href="https://fonts.googleapis.com/css2?family=Joan&family=Lato:wght@400;700&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM088, .MM088 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .3s; } .MM088 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM088 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM088 input, .MM088 br { display: none; } .MM088 { --m1: #222; --m2: #111; --m3: #e1e1e1; --m4: #a6001f; width: 550px; margin: auto; min-height: 100px; background-position: center; background-size: cover; border-top: 15px solid; border-bottom: 15px solid; color: var(--m1); display: flex; justify-content: space-between; font: 10px Lato; outline: 1px solid var(--m2); box-shadow: inset 0 -1px var(--m2), inset 0 1px var(--m2); text-shadow: -1px -1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), 1px 1px var(--m2); padding: 0 20px; } .MM088 > div { width: 250px; border-left: 1px solid var(--m2); border-right: 1px solid var(--m2); display: flex; align-items: center; justify-content: center; padding: 40px 10px; flex-direction: column; background: linear-gradient(to top, var(--m1), transparent, var(--m1)); position: relative; z-index: 1; color: var(--m3); } .MM088 > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--m1); opacity: .6; z-index: -1; } .MM088 > div > b { position: relative; color: var(--m3); font: 16px Joan; letter-spacing: 2px; z-index: 1; padding: 15px 0; } .MM088 > div > b::before { content: ""; width: 50px; height: 50px; border-radius: 100px; color: var(--m4); z-index: -1; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); animation: moon 4s linear infinite; transform: rotate(45deg); } @keyframes moon { 0% { border-top: 49px solid; border-bottom: 1px solid; } 50% { border-top: 1px solid; border-bottom: 1px solid; } 100% { border-top: 1px solid; border-bottom: 49px solid; } } .MM088-con { border-top: 1px solid var(--m4); border-bottom: 1px solid var(--m4); width: 100%; margin: 15px; padding: 10px; position: relative; } .MM088-con::after, .MM088-con::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 16px; border-left: 1px solid var(--m4); } .MM088-con::after { bottom: -16px; } .MM088-con > div { height: 200px; overflow: hidden; } .MM088-aa { height: 100%; overflow: auto; } .MM088-aa > div { border: 1px solid var(--m2); background: var(--m1); padding: 5px; text-align: center; } .MM088-aa > div ~ div { margin-top: 5px; } .MM088-aa a { display: block; color: var(--m4) !important; font-size: 12px; font-weight: bold; letter-spacing: 1px; margin-bottom: -2px; } #MM088-02:checked ~ div .MM088-aa:first-of-type { margin-top: -200px; } #MM088-03:checked ~ div .MM088-aa:first-of-type { margin-top: -400px; } .MM088-aa > div:hover { background: var(--m2); } .MM088-aa a:hover { letter-spacing: 3px; } .MM088 > div > i { border-top: 1px solid var(--m4); border-bottom: 1px solid var(--m4); padding: 2px 5px 3px 10px; letter-spacing: 5px; text-transform: uppercase; font: bold 10px Lato; } .MM088-labs { width: auto !important; padding: 0 !important; } .MM088-labs > label { position: relative; width: 10px; height: 10px; border: 2px solid var(--m4); border-radius: 50%; margin: 5px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--m2), 0 0 0 1px var(--m2); } .MM088-labs > label::before { content: "\e9d9"; font: 0px cappuccicons; color: var(--m3); position: absolute; bottom: 0px; transition: .3s; left: 1px; } #MM088-01:checked ~ .MM088-labs > label[for*="-01"], #MM088-02:checked ~ .MM088-labs > label[for*="-02"], #MM088-03:checked ~ .MM088-labs > label[for*="-03"], .MM088-labs > label:hover { width: 14px; height: 14px; } #MM088-01:checked ~ .MM088-labs > label[for*="-01"]::before, #MM088-02:checked ~ .MM088-labs > label[for*="-02"]::before, #MM088-03:checked ~ .MM088-labs > label[for*="-03"]::before { font-size: 12px; } .MM088-labs > label > b { position: absolute; color: var(--m3); text-transform: uppercase; background: var(--m1); right: 20px; top: 50%; transform: translateY(-50%); letter-spacing: -5px; background: var(--m1); border: 1px solid var(--m2); padding: 3px 5px; opacity: 0; pointer-events: none; } .MM088-labs > label:hover > b { letter-spacing: 1px; opacity: 1; } .MM088-labs > label > b::before { content: ""; position: absolute; height: 10px; width: 10px; background: var(--m1); position: absolute; right: -4px; top: calc(50% - 5px); transform: rotate(45deg); clip-path: polygon(100% 0, 0 0, 100% 100%); border: 1px solid var(--m2); } .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!