"Gamification V2.2"
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> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <div id="menujav" class="container"> <div class="row"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-folder-close"></span> <p>Operadores</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-calendar"></span> <p>Historial</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-globe"></span> <p>Ranking</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-time"></span> <p>Informes GTR</p> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-nav"> <span class="glyphicon glyphicon-bell"></span> <p>Eventos</p> </button> </div> </div> </div> </div> <header> <div class="container"> <div class="row"> <div class="col-md-12 text-center "> <div class="panel panel-default"> <div class="userprofile social "> <div class="userpic" style="width:78px"> <img src="https://image.ibb.co/b2hiUd/Screenshot_2.jpg" alt="" class="userpicimg"> </div> <h3 class="username">Juan Pablo Alonso</h3> <p>Supervisor</p> <span class="glyphicon fa fa-star"></span> <span class="glyphicon fa fa-star"></span> <span class="glyphicon fa fa-star"></span> <span class="glyphicon fa fa-star"></span> <span class="glyphicon fa fa-star"></span> </div> <div class="col-md-12 border-top border-bottom"> <ul class="nav nav-pills pull-left countlist" role="tablist"> <li role="presentation"> <h3>10<br> <small><img src="https://i.imgur.com/0qE5RDI.png"> MEGAMONEDAS</small> </h3> </li> </ul> </div> <div class=" col-sm-12 pull-left"></div> <div class="clearfix"></div> </div> </div> </div> </div> </header> <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="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="skills"> <h2 class="white">Skills</h2> <strong>Habilidades blandas</strong> <span class="pull-right">70%</span> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div> </div> <strong>Control de llamada</strong> <span class="pull-right">85%</span> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div> </div> <strong>Login</strong> <span class="pull-right">40%</span> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> </div> <strong>Otra metrica</strong> <span class="pull-right">65%</span> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div> </div> </div> </div> </div> </div> </div> </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); } } /* Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174 */ *, *:before, *:after { /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */ -webkit-box-sizing: border-box; /* Firefox (desktop or Android) 28- */ -moz-box-sizing: border-box; /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */ box-sizing: border-box; } body { background: 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"); text-align: center; padding-top: 40px; } .btn-nav { background-color: #fff; border: 1px solid #e0e1db; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .btn-nav:hover { color: #e92d00; cursor: pointer; -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */ transition: color 1s; } .btn-nav.active { color: #e92d00; padding: 2px; border-top: 6px solid #e92d00; border-bottom: 6px solid #e92d00; border-left: 0; border-right: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s; -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */ -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s; transition: border 0.3s ease-out, color 0.3s ease 0.5s; -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } .btn-nav.active:before { content: ''; position: absolute; border-style: solid; border-width: 6px 6px 0; border-color: #e92d00 transparent; display: block; width: 0; z-index: 1; margin-left: -6px; top: 0; left: 50%; } .btn-nav .glyphicon { padding-top: 16px; font-size: 40px; } .btn-nav.active p { margin-bottom: 8px; } @-webkit-keyframes pulsate { 50% { color: #000; } } @keyframes pulsate { 50% { color: #000; } } @media (max-width: 480px) { .btn-group { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; } } @media (max-width: 600px) { .btn-nav .glyphicon { padding-top: 12px; font-size: 26px; } } #menujav { display:block; position:relative; top:-50px; } #Valora { display:block; position:relative; top:-50px; } .userprofile.social { background: url(http://www.hdbilder.eu/pictures/2015/0702/1/abstract-minimalistic-placebo-gaussian-blur-blurred-pics-628682.jpg) no-repeat top center; background-size: 100%; padding: 50px 0; margin: 0 } }
var activeEl = 2; $(function() { var items = $('.btn-nav'); $( items[activeEl] ).addClass('active'); $( ".btn-nav" ).click(function() { $( items[activeEl] ).removeClass('active'); $( this ).addClass('active'); activeEl = $( ".btn-nav" ).index( this ); }); });

Related: See More


Questions / Comments: