Emmes

MM106.- Twins Sisters (ficha doble)

Aug 31st, 2022
2,117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.05 KB | None | 0 0
  1. <div class="MM106">
  2.  
  3. <div class="MM106-1">
  4. <div class="MM106-name"><b>Cherry</b><i class="cp cp-cherry"></i></div>
  5. <div class="MM106-img" style="background-image: url(https://i.postimg.cc/kGxFyBQ7/s2.png);">
  6.  
  7. <div class="MM106-txt"><b>Resumen</b>
  8. <div><div>Historia</div>
  9. Cookie chocolate bar cheesecake [b]topping sugar plum toffee[/b]. Lollipop powder bonbon powder chupa chups sesame snaps jelly beans apple pie pudding. Soufflé danish gummi bears dessert dragée bear claw candy apple pie.
  10.  
  11. Tart gummies liquorice soufflé croissant dragée. [i]Donut caramels lollipop[/i] cake macaroon. Sweet roll fruitcake liquorice danish shortbread chocolate bar tiramisu caramels carrot cake.
  12.  
  13. <div>Extras</div>
  14. Muffin toffee jelly-o sugar plum chocolate cake shortbread shortbread gummies. Chocolate cake gingerbread cake powder danish tart. Sugar plum donut fruitcake wafer dragée jelly beans.
  15.  
  16. Fruitcake carrot cake brownie cupcake icing jujubes. Sweet roll powder muffin macaroon ice cream. Bonbon liquorice croissant tiramisu bear claw wafer cake.</div></div>
  17. </div>
  18. <div class="MM106-dd">
  19. <b>Edad</b>
  20. <b>Ocupación</b>
  21. <b>Raza</b>
  22. </div>
  23. </div>
  24.  
  25. <div class="MM106-2">
  26. <div class="MM106-name"><i class="cp cp-leaf-alt"></i><b>Mint</b></div>
  27. <div class="MM106-img" style="background-image: url(https://i.postimg.cc/kM8cChkL/s1.png);">
  28. <div class="MM106-txt"><b><b>Resumen</b></b>
  29. <div><div>Historia</div>
  30. Cookie chocolate bar cheesecake [b]topping sugar plum toffee[/b]. Lollipop powder bonbon powder chupa chups sesame snaps jelly beans apple pie pudding. Soufflé danish gummi bears dessert dragée bear claw candy apple pie.
  31.  
  32. Tart gummies liquorice soufflé croissant dragée. [i]Donut caramels lollipop[/i] cake macaroon. Sweet roll fruitcake liquorice danish shortbread chocolate bar tiramisu caramels carrot cake.
  33.  
  34. <div>Extras</div>
  35. Muffin toffee jelly-o sugar plum chocolate cake shortbread shortbread gummies. Chocolate cake gingerbread cake powder danish tart. Sugar plum donut fruitcake wafer dragée jelly beans.
  36.  
  37. Fruitcake carrot cake brownie cupcake icing jujubes. Sweet roll powder muffin macaroon ice cream. Bonbon liquorice croissant tiramisu bear claw wafer cake.</div></div>
  38. </div>
  39. <div class="MM106-dd">
  40. <b>Edad</b>
  41. <b>Ocupación</b>
  42. <b>Raza</b>
  43. </div>
  44. </div>
  45.  
  46. </div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM106, .MM106 * { box-sizing: border-box; scrollbar-color: var(--m1) #0006 !important; scrollbar-width: thin; transition: 1s; } .MM106 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM106 div::-webkit-scrollbar-thumb { background: var(--m1) !important; } .MM106 br { display: none; } .MM106 { width: 540px; display: flex; margin: auto; color: #fff; overflow: hidden; font: 10px montserrat; border-radius: 10px; } .MM106 > div { min-height: 350px; flex: 1; display: flex; flex-direction: column; text-shadow: 1px -1px var(--m2), -1px 1px var(--m2), -1px -1px var(--m2), 1px 1px var(--m2); } .MM106 > div:hover { flex: 10; } .MM106-1 { --m1: #ff448a; --m2: #df005f; } .MM106-2 { --m1: #15c0ca; --m2: #006d8f; flex-direction: column-reverse !important; } .MM106-img { flex: 1; } .MM106-1 .MM106-img { background-position: left center; } .MM106-2 .MM106-img { background-position: right center; } .MM106-name { background: var(--m1); display: flex; align-items: center; position: relative; margin-right: -24px; border-radius: 0 30px 30px 0; justify-content: space-between; overflow: hidden; font-size: 12px; } .MM106-name > i { padding: 14px; background: var(--m2); font-size: 24px; border-radius: 50px; } .MM106-name > b { text-transform: uppercase; letter-spacing: 2px; padding: 0 15px; } .MM106-2 .MM106-name { margin: 0 0 0 -24px; border-radius: 30px 0 0 30px; } .MM106-dd { background: var(--m2); display: flex; text-align: center; padding-right: 22px; } .MM106-2 .MM106-dd { padding: 0 0 0 22px; } .MM106-dd > b { flex-grow: 1; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; padding: 3px 0; } .MM106-dd > b:nth-of-type(2n) { background: var(--m1); } .MM106-txt { margin: 30px 30px 30px 0; background: #fff; color: #111; text-align: justify; height: 300px; border-radius: 0 0 10px 0; transform: translate(-100%); border-left: none; text-shadow: none; position: relative; padding: 20px 0; } .MM106-2 .MM106-txt { transform: translate(100%); margin: 30px -1px 30px 30px; border-radius: 10px 0 0 0; border-right: 0; } div .MM106-txt:hover { transform: translate(0); } .MM106-txt > b { position: absolute; left: calc(100% - 1px); background: #FFF; color: var(--m1); text-transform: uppercase; letter-spacing: 5px; padding: 3px 3px 3px 8px; transform-origin: bottom left; transform: rotate(90deg); top: -19px; border-radius: 5px 5px 0 0; } .MM106-2 .MM106-txt > b { left: auto; right: calc(100% - 1px); top: inherit; bottom: -19px; transform-origin: top right; border-radius: 0 0 5px 5px; } .MM106-2 .MM106-txt > b > b { font-weight: bold; transform: rotate(-180deg); display: block; margin: 0 4px 0 -4px; } .MM106-txt > div {hyphens: auto; margin: 0 20px 0 0; max-height: 100%; overflow: auto; padding: 0 5px 0 20px; } .MM106-txt > div > div { background: var(--m1); width: max-content; padding: 10px 10px 10px 20px; margin-left: -20px; border-radius: 0 50px 50px 0; color: #FFF; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px -1px var(--m2), -1px 1px var(--m2), -1px -1px var(--m2), 1px 1px var(--m2); } .MM106-2 .MM106-txt > div { margin: 0 0 0 20px; padding: 0 20px 0 0; } .MM106-2 .MM106-txt > div > div { padding: 10px 17px 10px 13px; margin: 0 -20px 0 auto; border-radius: 50px 0 0 50px; } .MM106-txt > div br { display: block; margin: 5px; } .MM106-txt i, .MM106-txt strong { color: var(--m2); } .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>
Advertisement
Add Comment
Please, Sign In to add comment