API tools faq
paste
Emmes

MM034.- Pinky Bear (crono + relas)

Emmes
Aug 12th, 2020
458
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.32 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM034"><b></b><b></b><div><input type="radio" name="MM034" id="MM034-a" checked><input type="radio" name="MM034" id="MM034-b"><input type="radio" name="MM034" id="MM034-c"><div class="MM034-la"><label for="MM034-a">Intro</label><label for="MM034-b">Crono</label><label for="MM034-c">Relas</label></div><div class="MM034-ps">
  2.  
  3. <div class="MM034-1"><div class="MM034-img" style="background-image: url(https://64.media.tumblr.com/f01982739ae30d7c351077d2aabb7a26/tumblr_p8wareu8xq1rt7dy9o2_540.png);"></div>
  4. <div class="MM034-bl"><b>¡Hola, Mundo!</b>
  5.  
  6. Mi nombre es ________ y tengo ____ años. Vivo en ________ y me dedico a ________. Tengo muchos intereses, como ________, ________ y ________, pero mi pasatiempo preferido es y siempre será ________. ¡Espero hacer amigo y divertirnos juntos!</div>
  7. </div>
  8.  
  9. <div class="MM034-2">
  10. <div>
  11.  
  12. <a href="URL"><div><b>Nombre del Tema</b>
  13. <span>con Nombre Apellido</span></div>
  14. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  15. </a>
  16.  
  17. <a href="URL"><div><b>Nombre del Tema</b>
  18. <span>con Nombre Apellido</span></div>
  19. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  20. </a>
  21.  
  22. <a href="URL"><div><b>Nombre del Tema</b>
  23. <span>con Nombre Apellido</span></div>
  24. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  25. </a>
  26.  
  27. <a href="URL"><div><b>Nombre del Tema</b>
  28. <span>con Nombre Apellido</span></div>
  29. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  30. </a>
  31.  
  32. <a href="URL"><div><b>Nombre del Tema</b>
  33. <span>con Nombre Apellido</span></div>
  34. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  35. </a>
  36.  
  37. <a href="URL"><div><b>Nombre del Tema</b>
  38. <span>con Nombre Apellido</span></div>
  39. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  40. </a>
  41.  
  42. <a href="URL"><div><b>Nombre del Tema</b>
  43. <span>con Nombre Apellido</span></div>
  44. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  45. </a>
  46.  
  47. <a href="URL"><div><b>Nombre del Tema</b>
  48. <span>con Nombre Apellido</span></div>
  49. <i class="sf sf-beating-heart-o"><b>activo/cerrado</b></i>
  50. </a>
  51.  
  52. </div></div>
  53.  
  54. <div class="MM034-3">
  55.  
  56. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  57. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  58. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  59. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  60. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  61. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  62. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  63. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  64. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  65. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  66. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  67. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  68. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  69. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  70. <div style="background-image: url(https://i.postimg.cc/hjfvtZ4D/friend.png);"><span><b>Nombre</b>Relación</span></div>
  71.  
  72. </div>
  73.  
  74. </div></div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><style>.MM034, .MM034 * { box-sizing: border-box; scrollbar-color: var(--mm-01) #0002 !important; scrollbar-width: thin; transition: .5s; } .MM034 input, .MM034 br { display: none; } .MM034 { --mm-01: #ffe6f1; --mm-02: #ff99c0; --mm-03: #eb79a6; width: 350px; margin: auto; background: linear-gradient(to left, var(--mm-02), var(--mm-03) ); padding: 20px; border-radius: 40px; min-height: 300px; box-shadow: 0 20px 50px -20px var(--mm-03), inset 3px 3px 3px var(--mm-01), inset -3px -3px 3px var(--mm-03); font: 12px montserrat; position: relative; } .MM034 > b { content: ""; position: absolute; width: 60px; height: 40px; background: var(--mm-03); left: 40px; bottom: calc(100%); border-radius: 60px 60px 0 0; box-shadow: inset 2px 2px 3px -1px var(--mm-01); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .MM034 > b ~ b { left: inherit; right: 40px; background: var(--mm-02); } .MM034 > b::before { content: ""; position: absolute; background: var(--mm-01); top: 20px; left: 20px; right: 20px; bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 0 5px 5px var(--mm-03), inset 0 0 3px 1px var(--mm-02); } .MM034 > div { background-color: var(--mm-01); border-radius: 20px; min-height: 300px; box-shadow: 3px 3px 3px var(--mm-03), inset 3px 3px 3px var(--mm-02); border: 3px solid var(--mm-02); background-clip: padding-box; padding: 25px; } .MM034-la { display: flex; } .MM034-la label ~ label { margin-left: 10px; } .MM034-la label { flex: 1; text-align: center; font: bold 10px montserrat; text-transform: uppercase; letter-spacing: 4px; padding: 8px 1px 7px 5px; border-radius: 10px; color: var(--mm-03); cursor: crosshair; } .MM034 input[id*="-a"]:checked ~ div label[for*="-a"], .MM034 input[id*="-b"]:checked ~ div label[for*="-b"], .MM034 input[id*="-c"]:checked ~ div label[for*="-c"] { background: var(--mm-02); color: var(--mm-01); box-shadow: inset 0 0 3px, inset -3px -3px 3px var(--mm-03); text-shadow: 1px -1px var(--mm-03), -1px 1px var(--mm-03), -1px -1px var(--mm-03), 1px 1px var(--mm-03); } .MM034-ps { margin-top: 15px; position: relative; height: 350px; } .MM034-ps > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; text-shadow: 1px -1px var(--mm-03), -1px 1px var(--mm-03), -1px -1px var(--mm-03), 1px 1px var(--mm-03); } .MM034 input[id*="-a"]:checked ~ div div[class*="-1"], .MM034 input[id*="-b"]:checked ~ div div[class*="-2"], .MM034 input[id*="-c"]:checked ~ div div[class*="-3"] { pointer-events: auto; opacity: 1; } .MM034-1 { display: flex; flex-direction: column; } .MM034-img { border-radius: 10px; background-position: center; background-size: cover; box-shadow: 20px 20px 20px -10px var(--mm-02); border-top: 3px solid var(--mm-02); border-left: 3px solid var(--mm-02); border-bottom: 3px solid var(--mm-03); border-right: 3px solid var(--mm-03); flex: 1; } .MM034-bl { margin-top: 15px; background: linear-gradient(-45deg, var(--mm-02), var(--mm-03) ); border-radius: 10px; padding: 20px; color: var(--mm-01); box-shadow: inset 0 0 3px var(--mm-01), inset -3px -3px 3px var(--mm-03), 20px 20px 20px -10px var(--mm-02); } .MM034-2 > div { background: linear-gradient(-45deg, var(--mm-02), var(--mm-03) ); border-radius: 10px; box-shadow: inset 0 0 3px var(--mm-01), inset -3px -3px 3px var(--mm-03), 20px 20px 20px -10px var(--mm-02); height: 100%; overflow-x: hidden; overflow-y: auto; } .MM034-2 a { color: var(--mm-01) !important; display: flex; align-items: center; padding: 5px; margin: 0 5px; } .MM034-2 a:hover { background: var(--mm-03); } .MM034-2 a ~ a { border-top: 1px dotted; } .MM034-2 a > i { position: relative; border-left: 1px dotted; font-size: 30px; padding: 10px 10px 10px 15px; } .MM034-3 > div > span, .MM034-2 a > i > b { position: absolute; font-size: 10px; letter-spacing: 2px; background: var(--mm-01); text-shadow: none; color: var(--mm-03); padding: 5px 3px 5px 5px; border-radius: 8px; top: 0%; left: 50%; transform: translate(-50%); pointer-events: none; box-shadow: 0 10px 10px -5px; opacity: 0; z-index: 20; text-align: center; } .MM034-3 > div:hover > span, .MM034-2 a > i:hover > b { opacity: 1; top: 80%; } .MM034-2 a > div { flex: 1; margin-right: 5px; } .MM034-2 a > div > b { display: block; padding: 0 5px 5px; font-size: 14px; border-bottom: 1px dotted; } .MM034-2 a > div > span { padding: 0 5px; } .MM034-3 { display: flex; flex-wrap: wrap; overflow: auto; align-content: start; } .MM034-3 > div { width: 70px; height: 70px; border-width: 3px; border-style: solid; border-color: var(--mm-02) var(--mm-03) var(--mm-03) var(--mm-02); margin: 0 10px 10px 0; border-radius: 10px; box-shadow: 20px 20px 20px -10px var(--mm-02); position: relative; background-position: center; background-size: 100% auto; } .MM034-3 > div:hover { background-size: 150% auto; } .MM034-3 > div b { display: block; font-size: 14px; } .MM034-bl br { display: block; } .MM034-bl br + br { margin: 5px; } .MM034 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM034 div::-webkit-scrollbar-thumb { background: var(--mm-01) !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>
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!