Drag and drop (Only CSS with some gradients)

HTML
<section> <h1>Drag and Drop</h1> <article> <div class="compu"> <div class="template5"> <div class="one"></div> <div class="two"></div> <div class="tres"></div> <div class="cuatro"></div> <div class="cinco"></div> <div class="seis"></div> <div class="arrow"></div> </div> </div> </article> <article> <div class="compu3"> <div class="template"> <div class="h"><div class="n"></div></div> <div class="sli"></div> <div class="sli5"></div> </div> <ul class="dragable"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="cont"></div> <div class="arrow3"></div> </div> </article> <article> <div class="compu5"> <div class="template5"> <div class="hj"><div class="nj"></div></div> <div class="sli3"></div> <div class="b3"> <ul class="website"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="foo"></div> </div> <div class="arrow"></div> </div> </div> </article> </section>
CSS
body{ background:#f9b44a; } h1{ font-family:Verdana; font-size:3em; } section{ position:relative; width:100%; min-height:500px; margin:231px auto; text-align:center; } .icono { text-align:center; vertical-align: center; } article{ width: 26%; height:300px; margin:90px auto; display:inline-block; } .compu{ position:relative; width:281px; height:213px; overflow:hidden; background:#333; border:12px solid black; border-radius:12px; margin:65px auto; } .template5{ position:absolute; width:271px; height: 428px; margin:0px 0px; -moz-animation: textmoveup9 3s alternate infinite; -webkit-animation:textmoveup9 3s alternate infinite; animation: textmoveup9 3s alternate infinite; border-right:9px solid gray; } .arrow{ position:absolute; display:block; width:9px; height:9px; border-radius:100%; background:white; margin: 0px 271px; -moz-animation: textmoveup 3s alternate infinite; -webkit-animation:textmoveup 3s alternate infinite; animation: textmoveup 3s alternate infinite; } .arrow::before{ content:""; display:block; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 21px solid black; margin: 3px -4px; } .arrow::after{ content:""; display:block; width:3px; height:17px; background:black; margin:-3px 3px; } .one{ position:absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 6em; height: 4em; background: white; margin:5px 21px; } .one::before{ content:""; display:block; width: 6em; height: 4em; background: -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), -webkit-linear-gradient(-90deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1); background: -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), -moz-linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1); background: linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(249,214,124) 66%, rgb(249,214,124) 99%, rgb(249,214,124) 100%), linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,219,136) 66%, rgb(252,219,136) 100%), linear-gradient(180deg, rgba(252,234,187,0) 0, rgba(252,234,187,0) 66%, rgb(252,214,126) 66%, rgb(252,214,126) 99%, rgb(252,214,126) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 6%, rgba(252,234,187,0) 6%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgba(1,96,82,1); background-repeat: no-repeat; background-position: 95% 333%, 5% 333%, 50% 333%, -21% 7%, -32% 7%, -43% 7%, -75% 7%, -49% 28%, -49% 81%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 25px 70px, 25px 70px, 25px 70px, 271px 6px, 271px 6px, 271px 6px, 102px 17px, 97px 9px, 97px 9px; background-size: 25px 70px, 25px 70px, 25px 70px, 271px 6px, 271px 6px, 271px 6px, 102px 17px, 97px 9px, 97px 9px; margin:0px 132px } .two{ position:absolute; box-sizing: content-box; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(0deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -webkit-linear-gradient(-90deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1); background: -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), -moz-linear-gradient(180deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1); background: linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(90deg, rgba(64,150,238,1) 0, rgba(64,150,238,1) 22%, rgba(14,90,255,0) 22%, rgba(14,90,255,0) 100%), linear-gradient(180deg, rgba(219,89,8,1) 0, rgba(219,89,8,1) 31%, rgba(249,251,252,1) 32%, rgba(249,251,252,1) 67%, rgba(219,89,8,1) 67%, rgba(219,89,8,1) 100%), rgba(255,255,255,1); background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-position: 1155% 49%, 626% 49%, 112% 49%, 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 90px 21px, 90px 21px, 90px 21px, auto auto; background-size: 90px 21px, 90px 21px, 90px 21px, auto auto; margin:74px 21px; } .two::before{ content:""; display:block; box-sizing: content-box; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(0,91,62,1) 0, rgba(0,91,62,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,189,59,1) 0, rgba(249,189,59,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background-repeat: no-repeat; background-position: -90% 86%, -49% 86%, -7% 86%, -6% 12%, -90% 12%, -47% 12%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 172px 21px; background-size: 172px 21px; margin:0px 132px } .tres{ position:absolute; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,98,122,1) 0, rgba(2,98,122,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(244,61,61,1) 0, rgba(244,61,61,1) 13%, rgba(252,234,187,0) 14%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background-repeat: no-repeat; background-position: -89% 50%, -49% 50%, -8% 50%, -8% 7%, -49% 7%, -89% 7%, -89% 95%, -49% 95%, -8% 95%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 172px 33px, 172px 33px, 172px 33px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px; background-size: 172px 33px, 172px 33px, 172px 33px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px, 172px 7px; margin:144px 21px; } .tres::before{ content:""; display:block; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -webkit-linear-gradient(0deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255); background: -moz-linear-gradient(90deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), -moz-linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255); background: linear-gradient(90deg, rgba(249,135,34,1) 0, rgba(249,135,34,1) 27%, rgba(252,234,187,0) 28%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), linear-gradient(90deg, rgba(2,91,62,1) 0, rgba(2,91,62,1) 16%, rgba(252,234,187,0) 16%, rgba(249,232,77,0) 100%), rgb(255, 255, 255); background-repeat: no-repeat; background-position: -12% 12%, -65% 90%, -8% 90%, -121% 90%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 231px 30px, 152px 23px, 152px 23px, 152px 23px; background-size: 231px 30px, 152px 23px, 152px 23px, 152px 23px; margin:0px 132px } .cuatro{ position:absolute; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: -moz-linear-gradient(90deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: linear-gradient(90deg, rgb(158,156,156) 0, rgb(158,156,156) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(224,71,71,1) 0, rgba(224,71,71,1) 20%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(3,128,191,1) 0, rgba(3,128,191,1) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background-repeat: no-repeat; background-position: -88% 86%, -88% 21%, -5% 47%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 162px 17px, 162px 30px, 231px 50px; background-size: 162px 17px, 162px 30px, 231px 50px; margin:216px 21px; } .cuatro::before{ content:""; display:block; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -webkit-linear-gradient(0deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1); background: -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), -moz-linear-gradient(90deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1); background: linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(255,255,255) 74%, rgb(255,255,255) 100%), linear-gradient(90deg, rgba(101,201,247,1) 0, rgba(101,201,247,1) 25%, rgba(183,222,237,0) 26%, rgba(183,222,237,0) 100%), rgba(255,142,50,1); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-position: 85% 93%, -13% 93%, -112% 93%, 86% 50%, -13% 50%, -114% 50%, 89% 8%, -13% 8%, -114% 9%, 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, auto auto; background-size: 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, 73px 17px, auto auto; margin:0px 132px; } .cinco{ position:absolute; width: 6em; height: 4em; border: none; font: normal 100%/normal "Times New Roman", Times, serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(-90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), -webkit-linear-gradient(-90deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), -webkit-linear-gradient(-90deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219); background: -moz-linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), -moz-linear-gradient(180deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), -moz-linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219); background: linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 74%, rgb(249,159,162) 74%, rgb(249,159,162) 100%), linear-gradient(180deg, rgb(249,144,144) 0, rgb(249,144,144) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(249,159,162) 0, rgb(249,159,162) 26%, rgba(183,222,237,0) 27%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), linear-gradient(180deg, rgb(255,255,255) 0, rgb(255,255,255) 32%, rgba(183,222,237,0) 33%, rgba(183,222,237,0) 100%), rgb(107, 178, 219); background-repeat: repeat, repeat, repeat, no-repeat, no-repeat; background-position: 57% 49%, 50% 14%, 50% 50%, 55px 172%, 4px 172%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto, auto auto, auto auto, 37px 50px, 37px 50px; background-size: auto auto, auto auto, auto auto, 37px 50px, 37px 50px; margin:287px 21px; } .cinco::before{ content:""; display:block; width: 6em; height: 4em; background: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -webkit-linear-gradient(-90deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), -webkit-linear-gradient(-90deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), -moz-linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), -moz-linear-gradient(180deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122); background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 77%, rgb(255,255,255) 78%, rgb(255,255,255) 100%), linear-gradient(180deg, rgba(183,222,237,0) 0, rgba(183,222,237,0) 84%, rgba(183,222,237,0) 84%, rgb(95,182,244) 84%, rgb(95,182,244) 100%), linear-gradient(180deg, rgb(102,196,255) 0, rgb(102,196,255) 30%, rgba(183,222,237,0) 31%, rgba(183,222,237,0) 100%), rgb(249, 122, 122); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-position: 93% 231%, 50% 231%, 6% 231%, -3% 73%, 36% 95%, 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 21px 80px, 30px 80px, 21px 80px, 96px 21px, 97px 109px, auto auto; background-size: 21px 80px, 30px 80px, 21px 80px, 96px 21px, 97px 109px, auto auto; margin:0px 132px } .seis{ position:absolute; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: -moz-linear-gradient(90deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background: linear-gradient(90deg, rgba(119,208,249,1) 0, rgba(119,208,249,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 23%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(206,202,202) 0, rgb(206,202,202) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,129,129,1) 0, rgba(249,129,129,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(252,129,58,1) 0, rgba(252,129,58,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(165,162,162) 0, rgb(165,162,162) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(2,102,75,1) 0, rgba(2,102,75,1) 21%, rgba(252,234,187,0) 22%, rgba(252,234,187,0) 100%), rgb(255, 255, 255); background-repeat: no-repeat; background-position: -421% 12%, -230% 12%, -45% 12%, -45% 88%, -230% 88%, -416% 88%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 112px 21px; background-size: 112px 21px; margin:357px 21px; } .seis::before{ content:""; display:block; width: 6em; height: 4em; background: -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -webkit-linear-gradient(0deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1); background: -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), -moz-linear-gradient(90deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1); background: linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgb(252,252,252) 0, rgb(252,252,252) 21%, rgba(252,234,187,0) 21%, rgba(252,234,187,0) 100%), linear-gradient(90deg, rgba(249,157,172,1) 0, rgba(249,157,172,1) 25%, rgba(252,234,187,0) 27%, rgba(252,234,187,0) 100%), rgba(148,196,247,1); background-repeat: no-repeat; background-position: -3% 95%, -3% 51%, -3% 5%, -422% 88%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: 271px 18px, 271px 18px, 271px 18px, 112px 74px; background-size: 271px 18px, 271px 18px, 271px 18px, 112px 74px; margin:0px 132px } @-webkit-keyframes textmoveup{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top:403px;} 100%{margin-top:403px;} } @-moz-keyframes textmoveup{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top:403px;} 100%{margin-top:403px;} } @keyframes textmoveup{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top:403px;} 100%{margin-top:403px;} } @-webkit-keyframes textmoveup3{ 0%{margin-top: -214px;} 25%{margin-top: -214px;} 50%{margin-top: -428px;} 100%{margin-top:-428px;} } @-moz-keyframes textmoveup3{ 0%{margin-top: -214px;} 25%{margin-top: -214px;} 50%{margin-top: -428px;} 100%{margin-top:-428px;} } @keyframes textmoveup3{ 0%{margin-top: -214px;} 25%{margin-top: -214px;} 50%{margin-top: -428px;} 100%{margin-top:-428px;} } .template{ position:absolute; width:231px; height:214px; background:#333; margin:0 25px; } .h{ position:absolute; display:block; width:201px; height:70px; opacity:1; font-size:12px; margin: 0px -23px; background:#fc6621; -moz-animation: colores 3s alternate infinite; -ms-animation: colores 3s alternate infinite; -webkit-animation:colores 3s alternate infinite; -o-animation:colores 3s alternate infinite; animation: colores 3s alternate infinite; } .h::before{ content:"LOGO"; position:absolute; display:block; font-family:Verdana; font-size:16px; color:white; font-weight:700; margin:40px 9px; -moz-animation: drag6 3s alternate infinite; -ms-animation: drag6 3s alternate infinite; -webkit-animation: drag6 3s alternate infinite; -o-animation:drag6 3s alternate infinite; animation: drag6 3s alternate infinite; } .n{ position:absolute; width:35px; height:12px; background:white; margin:12px 60px; } .n::before{ content:""; display:block; width:35px; height:12px; background:white; margin:0px 50px; } .n::after{ content:""; display:block; width:35px; height:12px; background:white; margin:-12px 100px; } .sli{ position:absolute; width:201px; height:162px; background:white; margin:70px -23px; } .sli5{ position:absolute; width:152px; height:90px; opacity:1; background:lightgray; margin: 95px 3px; -moz-animation: drag3 3s alternate infinite; -ms-animation: drag3 3s alternate infinite; -webkit-animation:drag3 3s alternate infinite; -o-animation:drag3 3s alternate infinite; animation: drag3 3s alternate infinite; } .b{ position:absolute; display:block; width:271px; height:162px; opacity:1; font-size:12px; margin: 212px auto; background:#eee; } ul.dragable{ position:absolute; width:50px; height:55px; list-style:none; margin:80px 182px; } ul.dragable li{ display:inline-block; width:12px; height:12px; background: white; margin:2px 1px; } ul.dragableli:nth-child(1){ background:white; } ul.dragable li:nth-child(2){ background:gray; } ul.dragable li:nth-child(3){ background:black; } ul.dragable li:nth-child(4){ background:#fabbc3; } ul.dragable li:nth-child(5){ background:#0380bf; } ul.dragable li:nth-child(6){ background:#f46534;; } ul.dragable li:nth-child(7){ background:#0abf9b; } ul.dragable li:nth-child(8){ background:#a566ed; } ul.dragable li:nth-child(9){ background:yellow; } .cont{ position:absolute; opacity:1; width:50px; height:30px; margin:152px 221px; background:lightgray; -moz-animation:drag 3s alternate infinite; -webkit-animation: drag 3s alternate infinite; animation: drag 3s alternate infinite; } .compu3{ position:relative; width:281px; height:213px; overflow:hidden; background:#333; border:12px solid black; border-radius:12px; margin:65px auto; } .arrow3{ position:absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid black; margin: 132px 267px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -moz-animation:sube 3s alternate infinite; -ms-animation: sube 3s alternate infinite; -webkit-animation:sube 3s alternate infinite; -o-animation:sube 3s alternate infinite; animation: sube 3s alternate infinite; } .arrow3::before{ content:""; display:block; width:3px; height:12px; background:black; margin:12px -2px; } @-webkit-keyframes colores{ 0%{background:#f46534;} 25%{background:#f46534;} 50%{ background:#0380bf; } 100%{ background:#0389bf; } } @keyframes colores{ 0%{background:#f46534;} 25%{background:#f46534;} 50%{ background:#0380bf; } 100%{ background:#0389bf; } } @-moz-keyframes colores{ 0%{background:#f46534;} 25%{background:#f46534;} 50%{ background:#0380bf; } 100%{ background:#0389bf; } } @-webkit-keyframes drag { 0%,25%,35%{opacity:1; } 50%,100%{ opacity:0;} } @-moz-keyframes drag { 0%,25%,35%{opacity:1; } 50%,100%{ opacity:0;} } @keyframes drag { 0%,25%,35%{opacity:1; } 50%,100%{ opacity:0;} } @-webkit-keyframes drag3 { 0%{opacity:0;} 25%{opacity:0;} 50%{opacity: 1;} 100%{opacity: 1;} } @-moz-keyframes drag3 { 0%{opacity:0;} 25%{opacity:0;} 50%{opacity: 1; } 100%{opacity: 1; } } @keyframes drag3 { 0%{opacity:0;} 25%{opacity:0;} 50%{opacity: 1;} 100%{opacity: 1;} } @-webkit-keyframes drag6 { 0%{margin:30px 217px} 25%{margin:30px 217px} 50%{ margin:40px 9px;} 100%{ margin:40px 9px;} } @-moz-keyframes drag6 { 0%{margin:30px 217px} 25%{margin:30px 217px} 50%{ margin:40px 9px;} 100%{ margin:40px 9px;} } @keyframes drag6 { 0%{margin:30px 217px} 25%{margin:30px 217px} 50%{ margin:40px 9px;} 100%{ margin:40px 9px;} } @-moz-keyframes drag7 { 0%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 25%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 50%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} 100%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} } @keyframes drag7 { 0%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 25%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 50%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} 100%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} } @-webkit-keyframes drag7 { 0%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 25%{-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 50%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} 100%{-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} } @-webkit-keyframes sube { 0%{margin: 102px 267px;} 25%{margin: 102px 267px;} 50%{ margin: 102px 243px;} 100%{ margin: 102px 243px;} } @-moz-keyframes sube { 0%{margin: 102px 267px;} 25%{margin: 102px 267px;} 50%{ margin: 102px 243px;} 100%{ margin: 102px 243px;} } @keyframes sube { 0%{margin: 102px 267px;} 25%{margin: 102px 267px;} 50%{ margin: 102px 243px;} 100%{ margin: 102px 243px;} } .template3{ position:absolute; width:271px; height:393px; background:#333; margin:0 auto; -moz-animation: textmoveup9 3s alternate infinite; -webkit-animation:textmoveup9 3s alternate infinite; animation: textmoveup9 3s alternate infinite; } .hj{ position:absolute; display:block; width:291px; height:70px; opacity:1; font-size:12px; margin: 0px -23px; background:#0380bf; } .hj::before{ content:"LOGO"; position:absolute; display:block; font-family:Verdana; font-size:16px; color:white; font-weight:700; margin:25px 35px; } .nj{ position:absolute; width:40px; height:12px; background:white; margin:12px 121px; } .nj::before{ content:""; display:block; width:40px; height:12px; background:white; margin:0px 50px; } .nj::after{ content:""; display:block; width:40px; height:12px; background:white; margin:-12px 100px; } .sli3{ position:absolute; width:291px; height:162px; background:white; margin:70px -23px; } .sli3::before{ content:""; display:block; width:172px; height:90px; background: rgba(226,226,226,1); background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(226,226,226,1)), color-stop(50%, rgba(209,209,209,1)), color-stop(100%, rgba(209,209,209,1))); background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%); background: -o-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%); background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%); background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(226,226,226,1) 50%, rgba(209,209,209,1) 50%, rgba(209,209,209,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1', GradientType=1 ); margin: 25px 71px; } .b3{ position:absolute; display:block; width:291px; height:162px; opacity:1; font-size:12px; margin: 212px -23px; background:#eee; } ul.website{ position:absolute; width:271px; height:112px; text-align:center; list-style:none; margin:0 -18px; } ul.website li{ display:inline-block; width:35px; height:35px; background: #e04747; margin:12px 9px; } ul.website li:nth-child(9){ width:70px; height:30px; background:#0380bf; border-radius:9px; margin-top:0px; } ul.website li:nth-child(9)::before{ content:"BUY"; display:block; width:70px; height:30px; font-family:Verdana; font-weight:700; color:white; text-align:center; margin-top:9px; } .foo{ position:absolute; width:270px; height:58px; background:#0380bf; margin:162px 21px; } .foo::before{ content:"Copyright - 2015"; display:block; font-family:Verdana; font-size:1.2em; color:white; text-align:center; margin-top:21px; } .compu5{ position:relative; width:281px; height:213px; overflow:hidden; background:#333; border:12px solid black; border-radius:12px; margin:65px auto; } .barra3{ position:absolute; width:9px; height:450px; background:gray; margin:0px 271px; } .barra3::before{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:white; margin: 0 0; -moz-animation: textmoveup7 3s alternate infinite; -ms-animation:textmoveup7 3s alternate infinite; -webkit-animation: textmoveup 3s alternate infinite; -o-animation:textmoveup7 3s alternate infinite; animation: textmoveup7 3s alternate infinite; } @-webkit-keyframes textmoveup7{ 0%{margin-top: 3px;} 25%{margin-top: 3px;} 50%{margin-top:192px;} 100%{margin-top:192px;} } @-moz-keyframes textmoveup7{ 0%{margin-top: 3px;} 25%{margin-top: 3px;} 50%{margin-top:192px;} 100%{margin-top:192px;} } @keyframes textmoveup7{ 0%{margin-top: 3px;} 25%{margin-top: 3px;} 50%{margin-top:192px;} 100%{margin-top:192px;} } @-webkit-keyframes textmoveup9{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top: -212px;} 100%{margin-top:-212px;} } @-moz-keyframes textmoveup9{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top: -212px;} 100%{margin-top:-212px;} } @keyframes textmoveup9{ 0%{margin-top: 0px;} 25%{margin-top: 0px;} 50%{margin-top: -212px;} 100%{margin-top:-212px;} }
JAVASCRIPT
Expand for more options Login