Márciusi OC kihívás

<div id="SPOTTY"><div id="sbar"><b>Nombre de usuario</b><conts><span class="th th-minus"></span><span class="th th-cross"></span></conts></div><div class="SPOTTY"><div id="ALBUM">
<imm><img src="IMAGEN"></imm>
<info><h10>Lista</h10><h9>Nombre de la lista</h9>_{00 canciones, 00 min 00 s}<botum>Reproducir</botum>^{seguidores<br>0}</info></div>
<div class="canciones"><play><one>Título</one><two>Artista</two><tre><span class="th th-clock-o"></span></tre></play>
<song><nom class="like">Canción</nom><art>Grupo</art><tim>00:00</tim></song>
<song><nom class="nolike">Canción</nom><art>Grupo</art><tim>00:00</tim></song>
<song><nom class="nolike">Canción</nom><art>Grupo</art><tim>00:00</tim></song>
</div></div><div id="PRODUCCION"><crons><i class="ti ti-control-skip-backward"></i><b class="ti ti-control-pause"></b><i class="ti ti-control-skip-forward"></i></crons><repro><tims>1:50</tims><bar><bar2 style="width: 50%;"></bar2></bar><tims>3:23</tims></repro></div></div><div id="code"><a href="https://isleycodes.tumblr.com/">Isley</a></div>


<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet"><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet" /><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet" /><link rel="stylesheet" href="@icon/themify-icons/themify-icons.css"><link rel="stylesheet" href="https://unpkg.com/@icon/themify-icons/themify-icons.css"><style>#SPOTTY{--claro: #47a022;--brill:#6bce42;--negro: #111;--negr2: #222;--negr3: #000;--gris: #999;--gri2: #666;--blan:#eee;}#SPOTTY{width: 560px; margin: 10px auto;background:var(--negr2);border: 1px solid var(--negr3);border-radius: 5px; overflow: hidden;cursor: context-menu;font-family: Open Sans; color:var(--blan);}#sbar {padding: 15px; position: relative; background: var(--negro);text-align:center;border-bottom: 1px solid var(--negr3);}#sbar b{font-size: 14px; text-align: center; font-weight: 400; letter-spacing: 1px;}#sbar b:before{content:"SPOTIFY ";position:absolute;left:10px;top:9px;font-size: 20px; letter-spacing: 1px; text-transform: lowercase;color:var(--brill);text-shadow:-1px 1px var(--negr3);}#sbar conts{font-size: 12px; position: absolute; right: 0px; top: 0px;}#sbar span{background:var(--negr3);display:inline-block;padding:10px;margin-left:1px;transition:0.8s;cursor: pointer;}#sbar span:hover{background:var(--negr2);color:var(--claro);transition:0.8s;}.SPOTTY{background: -webkit-linear-gradient(var(--negr2), var(--negro));padding: 40px;}#ALBUM{display: flex;flex-flow: wrap;align-items: flex-end;}#ALBUM imm{width: 150px; height: 150px;box-shadow:-1px 1px 10px var(--negr3);margin:5px;}#ALBUM imm img{width: 150px; height: 150px;}#ALBUM info{width: 310px;margin:5px;font-size:12px;position:relative;}#ALBUM info h10{display:block;text-transform:uppercase;letter-spacing:1px;}#ALBUM info h9{display:block;letter-spacing:0.5px;font-weight:800;font-size:18px;cursor: pointer;}#ALBUM sub {color:var(--gris);display:block;font-size:11px;margin-left:10px;}#ALBUM sup {color:var(--gris);display:block;font-size:11px;text-transform:uppercase;text-align:right;position:absolute;right:0px;bottom:5px;}#ALBUM botum {background:var(--claro);display:block;text-transform:uppercase;font-size:11px;width: 85px;padding:7px 12px;border-radius:20px;margin:15px 10px;font-weight:600;letter-spacing:1px;font-size:12px;cursor: pointer;transition:0.8s;}#ALBUM botum:hover{transform:scale(1.1,1.1);background:var(--brill);transition:0.8s;}.canciones{margin:10px -5px;font-size:13px;}.canciones br {display: contents;}.canciones play{display:flex;color:var(--gris);text-transform:uppercase;font-weight:600;border-bottom:1px solid var(--gri2);}.canciones one{width: 235px;padding-left:10px;}.canciones two{width: 200px;}.canciones tre{width: 45px;}.canciones song{display:flex;border-bottom:1px solid var(--gri2);padding:5px 0;text-transform: capitalize;transition:0.8s;height: 18px;overflow:hidden;}.canciones song:hover{background:var(--negr2);transition:0.8s;}.canciones nom{width: 235px;padding:0 5px;overflow:hidden;}.canciones art{width: 190px;padding:0 5px;cursor: pointer;overflow:hidden;transition:0.8s;}.canciones art:hover{color:var(--claro);letter-spacing:1px;transition:0.8s;}.canciones tim{width: 35px;padding:0 5px;overflow:hidden;}.like:before{content:"\ea54";font-family:"honeybee";font-size:10px;padding-right:5px;}.nolike:before{content:"\ea55";font-family:"honeybee";font-size:10px;padding-right:5px;}#PRODUCCION{padding: 10px 5px;border-top: 0px solid #ddd;background:var(--negr2);border-top: 1px solid var(--negr3);}#PRODUCCION crons{line-height: 18px;display: block; text-align: center; font-size:18px;position: relative;}#PRODUCCION crons b{display: inline-block; font-size: 28px;padding:14px 8px 12px;width: 30px;height: 20px;border:1px solid #eee;border-radius:100%;margin:0 10px;transition:0.8s;cursor: pointer;}#PRODUCCION crons b:hover{transform:scale(1.1,1.1);color:var(--brill);transition:0.8s;}#PRODUCCION repro{display: block;text-align: center;margin:5px;}#PRODUCCION tims{display: inline-block; font-size: 9px;padding: 0 5px;letter-spacing:1px;}#PRODUCCION bar{display: inline-block; border-radius: 5px; background: var(--gri2); width: 250px; height: 4px;position: relative; margin: 0 5px 1px;text-align:left;}#PRODUCCION bar2{border-radius: 5px; background:var(--claro); height: 4px;display:block;}#PRODUCCION bar2:after{content:"";float: right;margin-top: -3px;font-size: 33px;border-radius: 10px;width: 8px;height: 8px;border: 1px solid var(--gris);background: var(--blan);cursor: pointer;}#code a{display:block;margin:5px auto;text-decoration:none;text-transform:uppercase;font:10px arial;width: 30px;}</style>

<div class="M46" style="background: linear-gradient(45deg, #333, #000);"><div class="inM46"><div class="ttM46" style="background-image: url(https://i.imgur.com/ghCGEKe.jpg?1);">Mi Música</div><div class="subM46">Sesame snaps brownie gummies cake pastry candy canes croissant cake.</div></div><div class="ddM46"><a href="URL">Primer Enlace</a>
<a href="URL">Segundo Enlace</a>
<a href="URL">Tercer Enlace</a>
<a href="URL">Cuarto Enlace</a>
<a href="URL">Quinto Enlace</a>
<a href="URL">Sexto Enlace</a>
<a href="URL">Séptimo Enlace</a></div></div><a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="miM46">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <style> @font-face {font-family: 'Contraband'; src: url('https://cdn.staticaly.com/gh/EmmesCodes/Tipografias/22edb3d6d0d1295fbbbddbb47cb8fed1c7724b80/Contraband_demo.otf');}.M46, .M46 * {transition-duration: 1s; box-sizing: border-box;} .M46 {width: 400px; position: relative; margin: auto; border: 1px solid transparent; color: #444; overflow: hidden;} .inM46 {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10;} .ttM46 {font: bold 110px/110px Contraband; -webkit-background-clip: text; color: transparent; text-transform: uppercase; background-position: center center; background-size: cover; white-space: nowrap;} .subM46 {font: italic 11px Lato; text-align: center; color: #999; margin-top: -15px;} .M46:hover .inM46 {left: 10px; top: 10px; transform: translateX(0%) translateY(0%); z-index: 0;} .M46:hover .ttM46 {font: bold 40px/40px Contraband; letter-spacing: 2px;} .M46:hover .subM46 {font-size: 0px; margin-top: 600px;} .ddM46 {margin: 55px 10px 10px; left: 10px; right: 10px; padding: 20px; border: 1px solid; transition-delay: 0s; opacity: 0; overflow: hidden; line-height: 5px;} .M46:hover .ddM46 {transition-delay: .5s; opacity: 1;} .ddM46 a {display: block; border: 1px solid; padding: 5px 30px; font: 12px/20px Lato; text-transform: uppercase; position: relative; margin-left: 400px; width: calc(100%);} .ddM46:hover a:hover {transition-delay: 0s !important; color: #436bff;} .ddM46 a::before {content: ""; border-left: 17px solid; height: 20px; position: absolute; left: 4px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; box-sizing: border-box;} .M46:hover .ddM46 a {margin-left: 0;} .M46:hover .ddM46 a:nth-of-type(1) {transition-delay: 1s;} .M46:hover .ddM46 a:nth-of-type(2) {transition-delay: 1.1s;} .M46:hover .ddM46 a:nth-of-type(3) {transition-delay: 1.2s;} .M46:hover .ddM46 a:nth-of-type(4) {transition-delay: 1.3s;} .M46:hover .ddM46 a:nth-of-type(5) {transition-delay: 1.4s;} .M46:hover .ddM46 a:nth-of-type(6) {transition-delay: 1.5s;} .M46:hover .ddM46 a:nth-of-type(7) {transition-delay: 1.6s;}.M46:hover .ddM46 a:nth-of-type(8) {transition-delay: 1.7s;}.M46:hover .ddM46 a:nth-of-type(9) {transition-delay: 1.8s;}.M46:hover .ddM46 a:nth-of-type(10) {transition-delay: 1.9s;} .ddM46 a:hover::before {animation: play .5s linear infinite alternate;} @keyframes play {from {margin-left: 0px;} to {margin-left: 5px;}} .miM46 {font: 10px/15px Lato !important; display: block; text-align: center; transition: .5s;} .miM46:hover {letter-spacing: 5px;}</style>

<div class="M47" style="color: #c9b000;"><div class="ttM47"><img src="https://i.imgur.com/Q5h6gWi.jpg?1">Título por Acá
<span>Tootsie roll bonbon ice cream. Oat cake marshmallow dragée chocolate cotton candy donut.

Marzipan bonbon jelly beans. Lemon drops jujubes marzipan jujubes sesame snaps cheesecake soufflé chocolate donut.</span></div>
<div class="inM47"><a>Primer Tema<span class="th th-heart-1"></span>
<audio src="canción.mp3" controls></audio></a>
<a>Segundo Tema<span class="th th-heart-1"></span><span class="th th-heart-1"></span><span class="th th-heart-1"></span>
<audio src="canción.mp3" controls></audio></a>
<a>Tercer Tema<span class="th th-heart-1"></span><span class="th th-heart-1"></span><span class="th th-heart-1"></span>
<audio src="canción.mp3" controls></audio></a>
<a>Cuarto Tema<span class="th th-heart-1"></span>
<audio src="canción.mp3" controls></audio></a>
<a>Quinto Tema<span class="th th-heart-1"></span>
<audio src="canción.mp3" controls></audio></a>
<a>Sexto Tema<span class="th th-heart-1"></span><span class="th th-heart-1"></span>
<audio src="canción" controls></audio></a>
<a>Séptimo Tema<span class="th th-heart-1"></span>
<audio src="canción" controls></audio></a>
<a>Octavo Tema<span class="th th-heart-1"></span>
<audio src="canción" controls></audio></a></div></div><a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="miM47">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style> @font-face {font-family: 'Alpha'; src: url('https://cdn.staticaly.com/gh/EmmesCodes/Tipografias/22edb3d6d0d1295fbbbddbb47cb8fed1c7724b80/Alpha-Regular.otf');}.M47, .M47 * {transition-duration: 1s; box-sizing: border-box;} .M47 {width: 520px; padding: 20px; background: #000D; margin: auto; position: relative;} .ttM47 {font: 40px Alpha; text-shadow: 2px 2px #000, 3px 3px 2px; margin-top: -10px;} .ttM47 img {width: 100px; height: 100px; float: left; margin: 10px 10px 10px 0;} .ttM47 span {font: 10px Montserrat; color: #999; text-shadow: none; display: block; min-height: 81px;} .inM47 {padding: 10px; border: 1px dotted; position: relative;} .M47:before, .M47:after, .inM47:before, .inM47:after {content: ""; border-top: 3px solid; border-left: 3px solid; width: 30px; height: 30px; position: absolute;} .M47::before {transform: rotate(-90deg); bottom: 19px; left: 19px;} .M47::after {transform: rotate(-180deg); bottom: 19px; right: 19px;} .inM47::before {top: -2px; left: -2px;} .inM47::after {transform: rotate(90deg); top: -2px; right: -2px;} .inM47 br {display: none;} .inM47 a {display: inline-block; width: calc(50% - 4px); background: #0009; margin: 2px; padding: 7px; position: relative; perspective: 800px; transform-style: preserve-3d; border-bottom: 20px solid transparent; font: 12px Montserrat; transition: .5s;} .inM47 a:hover {color: #ff7d00;} .inM47 a audio {background: transparent; transform: scale(.65); position: absolute; left: -61px; bottom: -25px; width: 154%; height: 30px; opacity: .5;} .inM47 a audio:hover {opacity: .7;} .inM47 a span {float: right; font-size: 12px; margin: 2px 0 0 5px;} .inM47 a span:last-of-type {filter: saturate(0); opacity: .5;} .inM47 a span:nth-last-of-type(2) {filter: saturate(.5); opacity: .7;} .inM47 a span:nth-last-of-type(3) {filter: saturate(1);} .miM47 {font: 10px/15px Montserrat !important; display: block; text-align: center; transition: .5s;} .miM47:hover {letter-spacing: 5px;}</style>