API tools faq
paste
Emmes

MM089.- Luna Roja (relaciones)

Emmes
Aug 31st, 2022
1,860
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.15 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM089" style="background-image: url(https://i.pinimg.com/564x/ba/13/2a/ba132a23cd3628972b631a5d3e8a3f63.jpg);"><div>
  2.  
  3. <b>Luna Roja</b>
  4.  
  5. <div class="MM089-con"><div>
  6.  
  7. <label style="background-image: url(https://i.postimg.cc/7hYvmVdh/lr02.png);"><input type="checkbox" /><b>Amigo</b>
  8. <div><b><i class="cp cp-crown"></i>Nombre Apellido</b>
  9. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  10. </div></label>
  11.  
  12. <label style="background-image: url(https://i.postimg.cc/GtMWNDnQ/lr03.png);"><input type="checkbox" /><b>Inamigo</b>
  13. <div><b><i class="cp cp-orange"></i>Nombre Apellido</b>
  14. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  15. </div></label>
  16.  
  17. <label style="background-image: url(https://i.postimg.cc/05c1rTKw/lr04.png);"><input type="checkbox" /><b>Amigo</b>
  18. <div><b><i class="cp cp-heart"></i>Nombre Apellido</b>
  19. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  20. </div></label>
  21.  
  22. <label style="background-image: url(https://i.postimg.cc/8PNsVgQf/lr01.png);"><input type="checkbox" /><b>Amigo</b>
  23. <div><b><i class="cp cp-cookies"></i>Nombre Apellido</b>
  24. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  25. </div></label>
  26.  
  27. <label style="background-image: url(https://i.postimg.cc/8PNsVgQf/lr01.png);"><input type="checkbox" /><b>Amigo</b>
  28. <div><b><i class="cp cp-dolphin"></i>Nombre Apellido</b>
  29. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  30. </div></label>
  31.  
  32. <label style="background-image: url(https://i.postimg.cc/8PNsVgQf/lr01.png);"><input type="checkbox" /><b>Amigo</b>
  33. <div><b><i class="cp cp-dreamcatcher"></i>Nombre Apellido</b>
  34. <span>Danish chocolate pastry liquorice marzipan cake. Chocolate cake oat cake tart liquorice chocolate bar apple pie brownie. Sweet muffin sweet roll chupa chups cake pastry cheesecake chupa chups.</span>
  35. </div></label>
  36.  
  37. </div></div>
  38.  
  39. <i>Relaciones</i>
  40.  
  41. </div></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>.MM089, .MM089 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: .3s; } .MM089 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM089 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM089 input, .MM089 br { display: none; } .MM089 { --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: flex-end; 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; position: relative; } .MM089 > div { width: 220px; 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); } .MM089-con label > div::before, .MM089 > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--m1); opacity: .6; z-index: -1; } .MM089 > div > b { position: relative; color: var(--m3); font: 16px Joan; letter-spacing: 2px; z-index: 1; padding: 15px 0; } .MM089 > 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; } } .MM089 > 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; } .MM089-con { border-top: 1px solid var(--m4); border-bottom: 1px solid var(--m4); width: 100%; margin: 15px; padding: 10px; position: relative; } .MM089-con label > div > span::before, .MM089-con::after, .MM089-con::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 16px; border-left: 1px solid var(--m4); } .MM089-con::after { bottom: -16px; } .MM089-con > div { height: 200px; overflow: auto; display: flex; flex-wrap: wrap; align-items: flex-start; } .MM089-con label { min-width: 40%; flex: 1; margin: 5px; border: 1px solid var(--m2); background: var(--m1); padding: 0; cursor: pointer; background-position: center; background-size: auto 100%; } .MM089-con label:hover { background-size: auto 150%; } .MM089-con label > b { background: var(--m2); display: block; text-align: center; text-transform: uppercase; letter-spacing: 2px; font-size: 8px; padding: 2px; margin-top: 59px; } .MM089-con label > div { position: absolute; top: -86px; border: 1px solid var(--m2); left: -301px; right: 230px; bottom: -54px; background: linear-gradient(to top, var(--m1), transparent, var(--m1)); padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 50; filter: blur(10px); opacity: 0; pointer-events: none; } .MM089-con label > div > b { position: relative; color: var(--m3); font: 16px Joan; letter-spacing: 2px; z-index: 1; padding: 15px 0; } .MM089-con label > div > b > i { position: absolute; font-size: 40px; color: var(--m4); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .MM089-con label > div > span { border-top: 1px solid var(--m4); border-bottom: 1px solid var(--m4); padding: 10px; text-align: justify; hyphens: auto; position: relative; margin-top: 10px; } .MM089-con label > input:checked ~ div { filter: blur(0px); opacity: 1; pointer-events: auto; cursor: auto; } .MM089-con label > div::after { content: ""; position: absolute; z-index: -1; top: -21px; left: -21px; right: -262px; bottom: -21px; cursor: poiter; } .MM089-con label > div > span br { display: block; margin-top: 5px; } .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!