API tools faq
paste
Emmes

MM004.- Es (crono + relas)

Emmes
Feb 27th, 2020
1,123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.63 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM004"><div class="MM004-img" style="background-image: url(https://i.pinimg.com/564x/de/5f/22/de5f22b42ffa4a438195d08de763e104.jpg);"></div><input type="radio" name="MM004" id="MM004-01" checked><label for="MM004-01"><b>Inicio</b></label><div class="MM004-txt mm1"><b>Nombre</b><b>Apellido</b><i><i></i></i><span>Eat and than sleep on your face. Meow in empty rooms fart in owners food for hell is other people lick arm hair kitty scratches couch bad kitty so drool.</span></div>
  2.  
  3. <input type="radio" name="MM004" id="MM004-02"><label for="MM004-02"><b>Relas</b></label><div class="MM004-txt mm2"><strong>Relaciones</strong><div>
  4. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  5. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  6. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  7. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  8. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  9. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  10. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  11. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  12. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  13. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  14. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  15. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  16. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  17. <a href="URL" style="background-image: url(https://via.placeholder.com/60.png);"><b>Nombre</b></a>
  18.  
  19. </div></div><input type="radio" name="MM004" id="MM004-03"><label for="MM004-03"><b>Crono</b></label><div class="MM004-txt mm3"><strong>Cronología</strong><div><a href="URL">Primer Tema</a>
  20. <b>activo - con Nombre Apellido</b>
  21. <a href="URL">Segundo Tema</a>
  22. <b>activo - con Nombre Apellido</b>
  23. <a href="URL">Tercer Tema</a>
  24. <b>activo - con Nombre Apellido</b>
  25. <a href="URL">Cuarto Tema</a>
  26. <b>activo - con Nombre Apellido</b>
  27. <a href="URL">Quinto Tema</a>
  28. <b>activo - con Nombre Apellido</b>
  29. <a href="URL">Sexto Tema</a>
  30. <b>activo - con Nombre Apellido</b>
  31.  
  32. </div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css?family=Josefin+Slab:700|Lato&display=swap" rel="stylesheet"><style>.MM004, .MM004 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; } .MM004-txt.mm2 > div > br, .MM004 input, .MM004 > br { display: none; } .MM004 { position: relative; background: #242424; width: 500px; margin: auto; overflow: hidden; border: 1px solid #111; height: 400px; } .MM004-img { width: 180px; height: 100%; border-radius: 0 250px 250px 0; border-right: 1px solid #111; background-position: center; background-size: cover; box-shadow: inset -5px 0 0 5px #1119, 0 0 0 10px #1119; } .MM004 label { position: absolute; top: 0; right: 0; width: 40px; margin-right: 0; height: calc(100% / 3); background: #111; display: flex; align-items: center; justify-content: center; color: #999; } .MM004 label ~ label { top: calc(100% / 3); } .MM004 label ~ label ~ label { top: calc(100% / 3 * 2); } .MM004 label b { font: bold 10px Lato; text-transform: uppercase; letter-spacing: 5px; transform: rotate(-90deg); padding-left: 5px; } .MM004 input:checked + label { background: #ff5674; border-top: 1px solid #111; color: #111; } .MM004-txt { position: absolute; left: 50px; bottom: 50px; right: 90px; transform: translateY(500px); transition: .5s; color: #DDD; max-height: calc(100% - 100px); } .MM004 input:checked + label + .MM004-txt { transform: translateY(0); } .MM004-txt > strong, .MM004-txt.mm1 > b { font: bold 40px Josefin Slab; display: block; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111, 4px 4px #111; } .MM004-txt.mm1 > b ~ b { font-size: 50px; } .MM004-txt.mm1 > i { display: block; margin: 10px 10px; } .MM004-txt.mm1 > i:before, .MM004-txt.mm1 > i:after, .MM004-txt.mm1 > i i { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid #111; margin: 5px; border-radius: 50%; animation: MM004 2s linear infinite; transition: .3s; transform: scale(1); background: #DDD; box-shadow: 4px 4px #111; } .MM004-txt.mm1 > i i { animation-delay: .2s; } .MM004-txt.mm1 > i:after { animation-delay: .4s; } .MM004-txt.mm1 > span { padding: 5px 10px; background: #242424DD; font-size: 10px; display: block; } @keyframes MM004 { 0% { transform: scale(1); background: #DDD; } 15% { transform: scale(1.5); background: #ff5674; } 30% { transform: scale(1); background: #DDD; } 100% { transform: scale(1); background: #DDD; } } .MM004-txt.mm3, .MM004-txt.mm2 { top: 50px; } .MM004-txt > strong { display: block; text-align: right; } .MM004-txt > div { text-align: center; height: calc(100% - 48px); overflow: auto; } .MM004-txt.mm2 a { display: inline-block; width: 70px; height: 70px; border: 5px solid #111; margin: 7px; position: relative; transition: .3s; vertical-align: top; background-position: center; background-size: cover; } .MM004-txt.mm2 a:hover { border: 5px solid #ff5674; box-shadow: 0 0 0 1px #111, inset 0 0 0 1px #111; z-index: 10; } .MM004-txt.mm2 a b { font-size: 8px; text-transform: uppercase; color: #999; background: #111; padding: 5px 10px; letter-spacing: 1px; position: absolute; top: 0; left: 50%; transform: translate(-50%); opacity: 0; pointer-events: none; transition: .5s; } .MM004-txt.mm2 a:hover b { top: calc(100% + 2px); opacity: 1; } .MM004-txt.mm3 a { font: bold 20px Josefin Slab; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111, 2px 2px #111; color: #DDD; transition: .3s; } .MM004-txt.mm3 a:hover { color: #ff5674; letter-spacing: 1px; } .MM004-txt.mm3 > div { text-align: left; } .MM004-txt.mm3 b { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: 5px; padding: 0 8px; background: #242424DD; margin-left: 10px; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; } .MM004 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM004 div::-webkit-scrollbar-thumb { background: #0003 !important; }</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!