MM005.- Día y Noche (índice)

OSCURO:
<div class="MM005"><b>Título Aquí</b><div class="MM005-img"><div style="background-image: url(https://i.pinimg.com/564x/0d/0c/09/0d0c09c1ca410dac35ea069f6463f27a.jpg);"></div></div><div class="MM005-links">
<a href="URL" class="th th-apple-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-badger-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-broom-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-cactus-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-coconut-o" title="Dónde Llevo?"></a>
</div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM005, .MM005 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; } .MM005 > br { display: none; } @font-face { font-family: Amable; src: url(https://dl.dropbox.com/s/wt8evw7ko36z2sg/Amable.ttf); } .MM005 { --mm-uno: orange; --mm-dos: green; --mm-tres: #111; } .MM005.whi { --mm-uno: #00b7ff; --mm-dos: #ff7e94; --mm-tres: #fff; } .MM005 { width: 300px; margin: 6px auto; text-align: center; background: var(--mm-tres); border: 1px solid transparent; padding: 40px; border-image: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)) 1; position: relative; } .MM005:before { content: ""; border: 1px solid transparent; border-image: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)) 1; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; opacity: .6; } .MM005 > * { position: relative; } .MM005-links a, .MM005-img:after, .MM005 > b { background: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)); } .MM005 > b { font: 16px Amable; letter-spacing: 2px; display: block; width: max-content; margin: auto; color: transparent; background-clip: text; -webkit-background-clip: text;} .MM005-img { width: 100px; height: 100px; margin: 30px auto; border-radius: 50%; overflow: hidden; padding: 1px; } .MM005-img::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .MM005-img > div { position: relative; z-index: 10; height: 100%; border-radius: 50%; background-position: center; background-size: cover; border: 3px solid var(--mm-tres); } .MM005-links { display: flex; } .MM005-links a { padding: 10px 0; font-size: 18px; flex: 1; background-clip: text; -webkit-background-clip: text;color: transparent; transition: .3s; } .MM005-links a ~ a { margin-left: 5px; } .MM005-links a:hover { transform: scale(1.4); } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; } .MM005 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM005 div::-webkit-scrollbar-thumb { background: #0003 !important; }</style>

CLARO:
<div class="MM005 whi"><b>Título Aquí</b><div class="MM005-img"><div style="background-image: url(https://i.pinimg.com/564x/c1/cb/ee/c1cbee8c72764a5ed56aadd1edf58447.jpg);"></div></div><div class="MM005-links">
<a href="URL" class="th th-apple-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-badger-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-broom-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-cactus-o" title="Dónde Llevo?"></a>
<a href="URL" class="th th-coconut-o" title="Dónde Llevo?"></a>
</div></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.MM005, .MM005 * { box-sizing: border-box; scrollbar-color: #0006 #0003; scrollbar-width: thin; } .MM005 > br { display: none; } @font-face { font-family: Amable; src: url(https://dl.dropbox.com/s/wt8evw7ko36z2sg/Amable.ttf); } .MM005 { --mm-uno: orange; --mm-dos: green; --mm-tres: #111; } .MM005.whi { --mm-uno: #00b7ff; --mm-dos: #ff7e94; --mm-tres: #fff; } .MM005 { width: 300px; margin: 6px auto; text-align: center; background: var(--mm-tres); border: 1px solid transparent; padding: 40px; border-image: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)) 1; position: relative; } .MM005:before { content: ""; border: 1px solid transparent; border-image: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)) 1; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; opacity: .6; } .MM005 > * { position: relative; } .MM005-links a, .MM005-img:after, .MM005 > b { background: linear-gradient(45deg, var(--mm-uno), var(--mm-dos)); } .MM005 > b { font: 16px Amable; letter-spacing: 2px; display: block; width: max-content; margin: auto; color: transparent; background-clip: text; -webkit-background-clip: text;} .MM005-img { width: 100px; height: 100px; margin: 30px auto; border-radius: 50%; overflow: hidden; padding: 1px; } .MM005-img::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .MM005-img > div { position: relative; z-index: 10; height: 100%; border-radius: 50%; background-position: center; background-size: cover; border: 3px solid var(--mm-tres); } .MM005-links { display: flex; } .MM005-links a { padding: 10px 0; font-size: 18px; flex: 1; background-clip: text; -webkit-background-clip: text; color: transparent; transition: .3s; } .MM005-links a ~ a { margin-left: 5px; } .MM005-links a:hover { transform: scale(1.4); } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: .5s; text-transform: uppercase; padding: 3px; } .miMM:hover { letter-spacing: 3px; } .MM005 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0006 !important; } .MM005 div::-webkit-scrollbar-thumb { background: #0003 !important; }</style>