API tools faq
paste
Emmes

MM104.- She Corvus (relaciones)

Emmes
Aug 31st, 2022
1,480
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.32 KB | None | 0 0
raw download clone embed print report
  1. <div class="MM104"><div style="background-image: url(https://i.postimg.cc/xj5skqgY/max-bedulenko-black-bath.jpg)"><b></b><input type="checkbox" id="MM104" /><div class="MM104-mv"><div>
  2.  
  3. <div class="MM104-tt">
  4. <i>Relaciones de</i>
  5. <b>She Corvus Clan</b>
  6. </div>
  7.  
  8. <div class="MM104-img">
  9. <div style="background-image: url(https://i.postimg.cc/bwc6KQ3W/hr01.png);"></div>
  10. <div style="background-image: url(https://i.postimg.cc/vZrPMcKB/hr02.png);"></div>
  11. </div>
  12.  
  13. <div class="MM104-txt">Jujubes pudding biscuit lollipop sweet roll. Caramels chocolate cake gingerbread fruitcake icing gummi bears topping. Cookie danish lollipop sweet roll shortbread candy tart bear claw cotton candy. Muffin cookie candy canes sweet roll topping.</div>
  14.  
  15. <label for="MM104"></label>
  16.  
  17. <div class="MM104-cn">
  18.  
  19. <div class="MM104-a">
  20. <div><div style="background-image: url(https://dummyimage.com/70x70/595959/fff.png);"></div></div>
  21. <a href="URL">Nombre</a>
  22. <i>Parentesco/Relación</i>
  23. </div>
  24.  
  25. <div class="MM104-a">
  26. <div><div style="background-image: url(https://dummyimage.com/70x70/595959/fff.png);"></div></div>
  27. <a href="URL">Nombre</a>
  28. <i>Parentesco/Relación</i>
  29. </div>
  30.  
  31. <div class="MM104-a">
  32. <div><div style="background-image: url(https://dummyimage.com/70x70/595959/fff.png);"></div></div>
  33. <a href="URL">Nombre</a>
  34. <i>Parentesco/Relación</i>
  35. </div>
  36.  
  37. <div class="MM104-a">
  38. <div><div style="background-image: url(https://dummyimage.com/70x70/595959/fff.png);"></div></div>
  39. <a href="URL">Nombre</a>
  40. <i>Parentesco/Relación</i>
  41. </div>
  42.  
  43. <div class="MM104-a">
  44. <div><div style="background-image: url(https://dummyimage.com/70x70/595959/fff.png);"></div></div>
  45. <a href="URL">Nombre</a>
  46. <i>Parentesco/Relación</i>
  47. </div>
  48.  
  49. </div>
  50.  
  51. </div></div>
  52.  
  53. </div></div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"><style>.MM104, .MM104 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: 1.5s; } .MM104 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM104 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM104 input, .MM104 br { display: none; } .MM104 { --mm-01: #564d25; --mm-02: #FFF; width: 500px; background: #111; overflow: hidden; padding: 20px; margin: auto; border: 1px solid #000; font: 10px Montserrat; color: #DDD; position: relative; text-shadow: 1px 1px #111, -1px 1px #111, 1px -1px #111, -1px -1px #111, 0 5px 5px #000; box-shadow: 0 20px 30px -20px #000; } .MM104 > div { min-height: 300px; background-position: top center; border: 1px solid var(--mm-01); padding: 30px; display: flex; flex-direction: column; align-items: center; z-index: 1; } .MM104 > div::after, .MM104 > div::before, .MM104::after, .MM104::before { content: ""; position: absolute; width: 10px; height: 10px; top: 20px; left: 20px; z-index: 200; background: #111; border-color: var(--mm-01); border-style: solid; } .MM104::before { border-width: 0 1px 1px 0; } .MM104::after { left: calc(100% - 30px); border-width: 0 0 1px 1px; } .MM104 > div::before { top: calc(100% - 30px); border-width: 1px 1px 0 0; } .MM104 > div::after { left: calc(100% - 30px); top: calc(100% - 30px); border-width: 1px 0 0 1px; } .MM104 > div > b { position: absolute; top: 21px; left: 21px; right: 21px; bottom: 21px; background: linear-gradient(to bottom, transparent, #1119, #111); } .MM104-img { margin: 50px; height: 280px; display: flex; align-items: center; justify-content: center; } .MM104-img::after { content: url('https://i.postimg.cc/kgH5JgR0/klipartz-com.png'); } .MM104-img > div { position: absolute; width: 130px; height: 170px; margin-top: 5px; background-position: center; background-size: cover; border-radius: 50%; box-shadow: inset 5px 9px 5px #000; } .MM104-img > div ~ div { opacity: 0; } .MM104:hover .MM104-img > div ~ div { opacity: 1; } .MM104-tt { display: flex; flex-direction: column; align-items: center; letter-spacing: 2px; } .MM104-tt > b { font: 30px/24px Playfair Display; color: var(--mm-02); display: flex; align-items: center; } .MM104-tt > b::after, .MM104-tt > b::before { content: ""; width: 30px; background: var(--mm-01); height: 4px; border: 1px solid #111; margin: 10px; box-shadow: 0 3px 8px #000; } .MM104-mv { position: relative; overflow: hidden; } .MM104-txt { text-align: justify; hyphens: auto; } .MM104-txt::before {content: "''";float: left;font-size: 90px;line-height: 20px;color: var(--mm-01);margin: 28px 5px -18px;} .MM104-mv > div > label { width: 30px; height: 35px; background-image: url(https://i.postimg.cc/dQ2C6pLb/hrFlecha.png); transition: 0s !important; cursor: pointer; background-size: 100% 100%; display: block; margin: 10px auto 0; transform: rotate(-90deg); } .MM104-mv > div > label:hover { width: 35px; height: 45px; margin: 5px auto -5px; } .MM104-mv > div > label:active { width: 25px; height: 25px; margin: 15px auto 5px; } #MM104:checked ~ .MM104-mv > div { transform: translateY(calc(-100% + 38px)); } #MM104:checked ~ .MM104-mv > div > label { transform: rotate(90deg); } .MM104-cn { position: absolute; top: 100%; left: 0; right: 0; height: calc(100% - 38px); overflow: auto; } .MM104-a { display: flex; flex-direction: column; align-items: center; width: 60%; } .MM104-a ~ .MM104-a { margin-top: -20px; } .MM104-a:nth-of-type(2n) { margin-left: auto; } .MM104-a > div { padding: 3px; border: 1px solid #111; background: linear-gradient(135deg, #FFF, #666); border-radius: 50%; box-shadow: 0px 5px 10px #000; } .MM104-a > div > div { border: 1px solid #111; width: 72px; height: 72px; border-radius: 50%; background-position: center; background-color: #222; box-shadow: inset 3px 3px 10px -5px #000; } .MM104-a > a { font: 18px/24px Playfair Display; display: flex; align-items: center; color: #FFF !important; letter-spacing: 2px; } .MM104-a > a:hover { letter-spacing: 3px; } .MM104-a > a::after, .MM104-a > a::before { content: ""; width: 20px; background: var(--mm-01); height: 4px; border: 1px solid #111; margin: 5px; box-shadow: 0 3px 8px #000; } .MM104-txt br { display: block; margin: 5px; }.miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #DDD !important; } .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!