MM108.- Twins Sisters (baúl)

<div class="MM108">

<div class="MM108-tt m1">
<b>Cherry</b>
<i class="cp cp-cherry"></i>
</div>

<div class="MM108-ce">
<div class="MM108-img" style="background-image: url(https://i.postimg.cc/kGxFyBQ7/s2.png);"></div>
<div class="MM108-img" style="background-image: url(https://i.postimg.cc/kM8cChkL/s1.png);"></div>
<div class="MM108-gr"><b>Twins Sisters</b><i>baúl</i></div>

<div class="MM108-aa"><b>Enlaces</b>
<a href="URL"><i class="cp cp-bagel"></i><b>Ficha</b></a>
<a href="URL" class="m2"><i class="cp cp-beer-alt"></i><b>Crono</b></a>
<a href="URL"><i class="cp cp-cake"></i><b>Relas</b></a>
<a href="URL" class="m2"><i class="cp cp-coconut"></i><b>Diario</b></a>
<a href="URL"><i class="cp cp-cookie"></i><b>Galeria</b></a>
<a href="URL" class="m2"><i class="cp cp-latte"></i><b>Móvil</b></a>
</div>

</div>

<div class="MM108-tt m2">
<i class="cp cp-leaf-alt"></i>
<b>Mint</b>
</div>

</div><a href="https://emmescodes.tumblr.com/" class="miMM">emme</a><link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"><style>.MM108, .MM108 * { box-sizing: border-box; scrollbar-color: #0006 #0002 !important; scrollbar-width: thin; transition: 0.5s; } .MM108 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM108 div::-webkit-scrollbar-thumb { background: #0006 !important; } .MM108 br { display: none; } @font-face { font-family: Abingdon; src: url(https://dl.dropbox.com/s/uk9gywmg2pw9hmx/Abingdon.otf); } .MM108 { width: 540px; margin: auto; background: #fff; overflow: hidden; font: 10px montserrat; border-radius: 10px; color: #fff; --m1: #ff448a; --m2: #df005f; --m1a: #15c0ca; --m2a: #006d8f; } .m2 { --m1: #15c0ca; --m2: #006d8f; } .MM108-tt { display: flex; align-items: center; justify-content: space-between; background: var(--m1); text-shadow: 1px 1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), -1px -1px var(--m2); text-transform: uppercase; font-size: 12px; letter-spacing: 2px; } .MM108-tt > b { margin: 0 15px 0 17px; } .MM108-tt > i { font-size: 24px; padding: 14px; background: var(--m2); border-radius: 50px 0 0 50px; } .MM108-tt.m2 > i { border-radius: 0 50px 50px 0; } .MM108-ce { display: flex; position: relative; height: 250px; justify-content: space-between; overflow: hidden; } .MM108-img { background-position: center; background-size: cover; clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0% 100%); flex: 1; margin-right: -40px; } .MM108-img ~ .MM108-img { clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%); margin: 0 0 0 -40px; } .MM108-img:hover { flex: 5; } .MM108-gr { pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; } .MM108-gr > b { font: 70px/70px Abingdon; color: var(--m1); text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 2px 2px #fff, -2px 2px #fff, 2px -2px #fff, -2px -2px #fff; } .MM108-gr > i { display: block; background: var(--m1a); text-transform: uppercase; font-weight: bold; letter-spacing: 10px; padding: 2px 0 2px 10px; margin: -5px auto 0; border-radius: 10px; border: 1px solid; width: max-content; font-size: 8px; text-shadow: 1px 1px var(--m2a), -1px 1px var(--m2a), 1px -1px var(--m2a), -1px -1px var(--m2a); font-style: normal; } .MM108-aa { position: absolute; z-index: 10; bottom: 0; left: 20px; right: 20px; background: #fff; padding: 17.5px; border-radius: 10px 10px 0 0; display: flex; flex-wrap: wrap; transform: translateY(100%); } .MM108-aa > b { position: absolute; bottom: calc(100% - 1px); background: #FFF; left: 50%; color: var(--m2a); padding: 3px 0 3px 10px; text-transform: uppercase; letter-spacing: 10px; font-size: 8px; border-radius: 5px 5px 0 0; transform: translate(-50%); } .MM108-aa:hover { transform: translateY(0%); } .MM108-aa > a { background: var(--m1); color: #fff !important; margin: 2.5px; min-width: 27%; flex: 1; text-align: center; text-shadow: 1px 1px var(--m2), -1px 1px var(--m2), 1px -1px var(--m2), -1px -1px var(--m2); overflow: hidden; } .MM108-aa > a > i { font-size: 20px; display: block; padding: 10px; } .MM108-aa > a > b { background: var(--m2); display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 8px; } .MM108-aa a:first-of-type { border-top-left-radius: 5px; } .MM108-aa a:nth-of-type(3) { border-top-right-radius: 5px; } .MM108-aa a:nth-last-of-type(3) { border-bottom-left-radius: 5px; } .MM108-aa a:last-of-type { border-bottom-right-radius: 5px; } .MM108-aa > a:hover { background: var(--m2); } .MM108-aa > a:hover b { background: var(--m1); } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 2px; color: #444; } .miMM:hover { letter-spacing: 2px; } </style>