"Gamification V2.1"
Bootstrap 4.1.1 Snippet by Guido87

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://rawgithub.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css" rel="stylesheet"/> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <div id="pagina" style> <h1 class="animated zoomIn" style="animation-duration: 5s;">Nombre del operador <br><h3 class="animated zoomIn" style="animation-delay: 3s;">Skill</h3></h1><br> </div> <div ID="pagina" class='row-fluid'> <div class='span5 offset1'> <div class='row-fluid'> <div class='span4'> <div class='module aqua-light'> <div class='module-content text-center'> <h1>6/12</h1> <h4>Logros del <strong>Dia</strong></h4> </div> <div class='progress progress-small progress-striped'> <div class='bar' style='width: 56%'></div> </div> </div> </div> <div class='span4'> <div class='module bittersweet-light'> <div class='module-content text-center'> <h1>10/14</h1> <h4>Logros del <strong>Mes</strong></h4> </div> <div class='progress progress-small progress-striped'> <div class='bar bar-success' style='width: 90%'></div> </div> </div> </div> </div> <div class='span6'> <div class='module mbn module-large module-square lavender-light'> <div class='module-content text-center'> <h2>Cuartil actual</h2> </div> <table class='table-fixed text-center'> <tr> <td class='grass-light'>Q1</td> <td class='bittersweet-light'>Q2</td> <td class='bittersweet-light'>Q3</td> <td class='grass-light'>Q4</td> </tr> </table> </div> </div> <div class='span4'> <div class='module mbn module-large module-square lavender-light'> <div class='module-content text-center'> <h2>SPL por dia</h2> </div> <table class='table-fixed text-center'> <tr> <td class='grass-light'>Lu</td> <td class='bittersweet-light'>Ma</td> <td class='bittersweet-light'>Mie</td> <td class='grass-light'>Jue</td> <td class='grass-light'>Vie</td> <td class='bittersweet-light'>Sab</td> <td class='bittersweet-light'>Dom</td> </tr> </table> </div> </div> <div class='row-fluid'> <div class='span12'> <div class='module lavender-dark'> </div> </div> </div> <div class='row-fluid'> <div class='span12'> <div class='clearfix'></div> </div> </div> <div class='row-fluid'> <div class='span12'> </div> </div> <div class='module mbn module-large module-square lavender-light'> <div class='span12'> <table> <tr> <td> <div class='module mbn module-xlarge module-square lavender-light'> <div class='module-content text-center'> <h2>Cuartil Mensual</h2> </div> <table class='table-content text-center'> <tr> <td class='bittersweet-light'>ENE/</td> <td class='aqua-light'>FEB/</td> <td class='bittersweet-light'>MAR/</td> <td class='aqua-light'>ABR/</td> <td class='bittersweet-light'>MAY/</td> <td class='aqua-light'>JUN/</td> <td class='bittersweet-light'>JUL/</td> <td class='aqua-light'>AGO/</td> <td class='bittersweet-light'>SEP/</td> <td class='aqua-light'>OCT/</td> <td class='bittersweet-light'>NOV/</td> <td class='aqua-light'>DIC/</td> </tr> </table> </div> </td> </tr> </table> </div> </div> </div> <div class='span5'> <div class='module module-small mrm grass-light'> <div class='row-fluid module-image-top module-image-medium'> <div class='span12 module-image' style='background-image: url(https://image.ibb.co/b2hiUd/Screenshot_2.jpg);'> </div> </div> <div class='module-content'> <h4>Juan Pablo Alonso</h4> </div> </div> <div class='span12'> <div class='module aqua-dark'> <div class='module-content'> <div class='module-foreground'> <div class='module-content-small mbn'> <h3 class='mbn mtn'>Tabla de posiciones</h3> </div> <table class='table'> <thead> <tr> <th>Posicion Ranking</th> <th>Puntos</th> <th>Nombre</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>450</td> <td>Alan Gay</td> </tr> <tr> <td>2.</td> <td>400</td> <td>Santiago Gonzalez</td> </tr> <tr> <td>3.</td> <td>310</td> <td>Alejandra Moreno</td> </tr> <tr> <td>4.</td> <td>220</td> <td>Ignacio Falcato</td> </tr> <tr> <td>5.</td> <td>160</td> <td>Sabrina Villar</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class='module'> </div> </div> </div>
#pagina{ width: 100%; min-height: 30vh; background-color: #eee; background-color: #ffdd99; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffdd99'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover; background-position: center; padding-top: 40px; text-align: Left; } body { padding: 20px 0 0 0; } h1, h2, h3, h4, h5, h6 { font-weight: 300 !important; margin: 0 0 10px 0 !important; } hr { margin: 10px 0 !important; height: 1px !important; background: #e8e8e8; border: 0 !important; } .header { border-bottom: 1px solid #e8e8e8; padding-bottom: 4px; } .table-fixed { float: left; table-layout: fixed; width: 100%; } table.text-center td { text-align: center !important; } .row-slide td { padding: 0; vertical-align: top; } .module { border-radius: 3px; margin-bottom: 15px; position: relative; width: 100%; } .module.module-hidden { overflow: hidden; } .module.module-small, .module.module-medium, .module.module-large, .module.module-xlarge { display: block; float: left; } .module.module-small { width: 123px; } .module.module-medium { width: 163px; } .module.module-large { width: 223px; } .module.module-xlarge { width: 418px; } .module .module-image { background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 6px 0 0 6px; position: absolute; top: 0; bottom: 0; } .module .module-image-top { height: 130px; position: relative; } .module i.module-background-icon { position: absolute; font-size: 250px; top: -70px; left: -70px; z-index: 0; } .module .module-foreground { position: relative; z-index: 1; } .module .module-image-top.module-image-small { height: 100px; } .module .module-image-top.module-image-medium { height: 130xp; } .module .module-image-top.module-image-large { height: 180px; } .module .module-image-top.module-image-xlarge { height: 230px; } .module .module-image-top.module-image-xxlarge { height: 300px; } .module .module-image-top .module-image { border-radius: 6px 6px 0 0; left: 0; right: 0; } .module .module-content { padding: 15px; } .module .module-content-small { padding: 5px 15px; } .module .module-content.module-content-large { padding: 50px 20px; } .module input, .module textarea { box-shadow: none !important; border: 1px solid #eee !important; } .module .nav-tabs a { border: 0 !important; color: white !important; } .module .btn { background-image: none; background-gradient: none; border: 0; padding: 8px 12px; } .module > *:last-child, .module > *:last-child > *:last-child, .module > *:last-child > *:last-child > *:last-child { margin: 0 !important; } .progress-small { margin: 0 !important; border-radius: 0 !important; } .module > .progress-small { height: 22px !important; border-radius: 0 0 6px 6px !important; } .module.module-square { border-radius: 0; } .module.module-square > .progress-small { border-radius: 0 !important; } .colorblock { height: 80px; line-height: 8000px; font-weight: 300; font-size: 1.5em; text-align: center; float: left; width: 50%; } .row-slide { overflow-x: scroll; overflow-y: hidden; max-height: 200px !important; } /** * * Grass * */ .btn.grass-light, .btn.grass-dark, .btn.bittersweet-light, .btn.bittersweet-dark, .btn.lavender-light, .btn.lavender-dark, .btn.aqua-light, .btn.aqua-dark, .btn.cloud-dark { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important; } .grass-light { background: #A0D468 !important; color: #fff !important; } .grass-dark { background: #8CC152 !important; color: white !important; } .module.grass-light .nav-tabs a:hover, .module.grass-light .nav-tabs a.active { background: #8CC152 !important; } .module.grass-dark .nav-tabs a:hover, .module.grass-dark .nav-tabs a.active { background: #A0D468 !important; } .module.grass-light i.module-background-icon { color: #8CC152 !important; } .module.grass-dark i.module-background-icon { color: #A0D468 !important; } /** * * Bittersweet * */ .bittersweet-light { background: #f06e51 !important; color: white !important; } .bittersweet-dark { background: #e9573f !important; color: white !important; } .module.bittersweet-light .nav-tabs a:hover, .module.bittersweet-light .nav-tabs a.active { background: #e9573f !important; } .module.bittersweet-dark .nav-tabs a:hover, .module.bittersweet-dark .nav-tabs a.active { background: #f06e51 !important; } .module.bittersweet-light i.module-background-icon { color: #e9573f !important; } .module.bittersweet-light i.module-background-icon { color: #f06e51 !important; } /** * * lavender * */ .lavender-light { background: #ac92ec !important; color: white !important; } .lavender-dark { background: #967adc !important; color: white !important; } .module.lavender-light .nav-tabs a:hover, .module.lavender-light .nav-tabs a.active { background: #967adc !important; } .module.lavender-dark .nav-tabs a:hover, .module.lavender-dark .nav-tabs a.active { background: #ac92ec !important; } .module.lavender-light i.module-background-icon { color: #967adc !important; } .module.lavender-dark i.module-background-icon { color: #ac92ec !important; } /** * * Cloud * */ .cloud-light { background: #ecf0f1 !important; color: #474747 !important; } .cloud-dark { background: #bdc3c7 !important; color: white !important; } .module.cloud-light .nav-tabs a:hover, .module.cloud-light .nav-tabs a.active { background: #ecf0f1 !important; } .module.cloud-dark .nav-tabs a:hover, .module.cloud-dark .nav-tabs a.active { background: #bdc3c7 !important; } .module.cloud-light i.module-background-icon { color: #ecf0f1 !important; } .module.cloud-dark i.module-background-icon { color: #bdc3c7 !important; } /** * * Aqua * */ .aqua-light { background: #4dc1e9 !important; color: white !important; } .aqua-dark { background: #3bafda !important; color: white !important; } .module.aqua-light .nav-tabs a:hover, .module.aqua-light .nav-tabs a.active { background: #3bafda !important; } .module.aqua-dark .nav-tabs a:hover, .module.aqua-dark .nav-tabs a.active { background: #4dc1e9 !important; } .module.aqua-light i.module-background-icon { color: #3bafda !important; } .module.aqua-dark i.module-background-icon { color: #4dc1e9 !important; } /* Margin Bottom Small/Medium/Large */ .mbn { margin-bottom: 0px !important; } .mbs { margin-bottom: 5px; } .mbm { margin-bottom: 10px; } .mbl { margin-bottom: 15px; } /* Margin Top Small/Medium/Large */ .mtn { margin-top: 0px !important; } .mts { margin-top: 5px; } .mtm { margin-top: 10px; } .mtl { margin-top: 15px; } /* Margin Right Small/Medium/Large */ .mrn { margin-right: 0px !important; } .mrs { margin-right: 5px; } .mrm { margin-right: 10px; } .mrl { margin-right: 15px; } /* Margin Right Small/Medium/Large */ .mln { margin-left: 0px !important; } .mls { margin-left: 5px; } .mlm { margin-left: 10px; } .mll { margin-left: 15px; } #loading { background: #f4f4f2 url("img/page-bg.png") repeat scroll 0 0; height: 100%; left: 0; margin: auto; position: fixed; top: 0; width: 100%; } .bokeh { border: 0.01em solid rgba(150, 150, 150, 0.1); border-radius: 50%; font-size: 100px; height: 1em; list-style: outside none none; margin: 0 auto; position: relative; top: 35%; width: 1em; z-index: 2147483647; } .bokeh li { border-radius: 50%; height: 0.2em; position: absolute; width: 0.2em; } .bokeh li:nth-child(1) { animation: 1.13s linear 0s normal none infinite running rota, 3.67s ease-in-out 0s alternate none infinite running opa; background: #00c176 none repeat scroll 0 0; left: 50%; margin: 0 0 0 -0.1em; top: 0; transform-origin: 50% 250% 0; } .bokeh li:nth-child(2) { animation: 1.86s linear 0s normal none infinite running rota, 4.29s ease-in-out 0s alternate none infinite running opa; background: #ff003c none repeat scroll 0 0; margin: -0.1em 0 0; right: 0; top: 50%; transform-origin: -150% 50% 0; } .bokeh li:nth-child(3) { animation: 1.45s linear 0s normal none infinite running rota, 5.12s ease-in-out 0s alternate none infinite running opa; background: #fabe28 none repeat scroll 0 0; bottom: 0; left: 50%; margin: 0 0 0 -0.1em; transform-origin: 50% -150% 0; } .bokeh li:nth-child(4) { animation: 1.72s linear 0s normal none infinite running rota, 5.25s ease-in-out 0s alternate none infinite running opa; background: #88c100 none repeat scroll 0 0; margin: -0.1em 0 0; top: 50%; transform-origin: 250% 50% 0; } @keyframes opa { 12% { opacity: 0.8; } 19.5% { opacity: 0.88; } 37.2% { opacity: 0.64; } 40.5% { opacity: 0.52; } 52.7% { opacity: 0.69; } 60.2% { opacity: 0.6; } 66.6% { opacity: 0.52; } 70% { opacity: 0.63; } 79.9% { opacity: 0.6; } 84.2% { opacity: 0.75; } 91% { opacity: 0.87; } } @keyframes rota { 100% { transform: rotate(360deg); } } } #loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader { bottom: 0; height: 175px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 175px; } #loader .dot { bottom: 0; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 87.5px; } #loader .dot::before { border-radius: 100%; content: ""; height: 87.5px; left: 0; position: absolute; right: 0; top: 0; transform: scale(0); width: 87.5px; } #loader .dot:nth-child(7n+1) { transform: rotate(45deg); } #loader .dot:nth-child(7n+1)::before { animation: 0.8s linear 0.1s normal none infinite running load; background: #00ff80 none repeat scroll 0 0; } #loader .dot:nth-child(7n+2) { transform: rotate(90deg); } #loader .dot:nth-child(7n+2)::before { animation: 0.8s linear 0.2s normal none infinite running load; background: #00ffea none repeat scroll 0 0; } #loader .dot:nth-child(7n+3) { transform: rotate(135deg); } #loader .dot:nth-child(7n+3)::before { animation: 0.8s linear 0.3s normal none infinite running load; background: #00aaff none repeat scroll 0 0; } #loader .dot:nth-child(7n+4) { transform: rotate(180deg); } #loader .dot:nth-child(7n+4)::before { animation: 0.8s linear 0.4s normal none infinite running load; background: #0040ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+5) { transform: rotate(225deg); } #loader .dot:nth-child(7n+5)::before { animation: 0.8s linear 0.5s normal none infinite running load; background: #2a00ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+6) { transform: rotate(270deg); } #loader .dot:nth-child(7n+6)::before { animation: 0.8s linear 0.6s normal none infinite running load; background: #9500ff none repeat scroll 0 0; } #loader .dot:nth-child(7n+7) { transform: rotate(315deg); } #loader .dot:nth-child(7n+7)::before { animation: 0.8s linear 0.7s normal none infinite running load; background: magenta none repeat scroll 0 0; } #loader .dot:nth-child(7n+8) { transform: rotate(360deg); } #loader .dot:nth-child(7n+8)::before { animation: 0.8s linear 0.8s normal none infinite running load; background: #ff0095 none repeat scroll 0 0; } #loader .lading { background-image: url("../images/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; bottom: -40px; height: 20px; left: 0; position: absolute; right: 0; width: 180px; } @keyframes load { 100% { opacity: 0; transform: scale(1); } } @keyframes load { 100% { opacity: 0; transform: scale(1); } }

Related: See More


Questions / Comments: