"Usuários Cadastrados"
Bootstrap 3.0.0 Snippet by GuilhermeCipriano

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>admin-template</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> <div class="container-2"> <div id="page-wrapper"> <div class="row"> <div class="col-md-12"> <div class="page-title"> <h2>Painel de Controle</h2> </div> </div> </div> <div class="row" > <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading dark-blue"> <i class="fa fa-graduation-cap fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content dark-blue"> <div class="circle-tile-description text-faded"> Usuários Cadastrados </div> <div class="circle-tile-number text-faded"> 140 <span id="sparklineA"></span> </div> <a href="#" class="circle-tile-footer">Ver usuários <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading green"> <i class="fa fa-check fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content green"> <div class="circle-tile-description text-faded"> Respostas </div> <div class="circle-tile-number text-faded"> 1024 </div> <a href="#" class="circle-tile-footer">Mais informações <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading orange"> <i class="fa fa-line-chart fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content orange"> <div class="circle-tile-description text-faded"> Rendimento dos estudantes </div> <div class="circle-tile-number text-faded"> 33 Atualizações </div> <a href="#" class="circle-tile-footer">Ver Mais <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading blue"> <i class="fa fa-question fa-fw fa-4x"></i> </div> </a> <div class="circle-tile-content blue"> <div class="circle-tile-description text-faded"> Questões Cadastradas </div> <div class="circle-tile-number text-faded"> 256 <span id="sparklineB"></span> </div> <a href="#" class="circle-tile-footer">Visualizar por matérias <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading red"> <i class="fa fa-university fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content red"> <div class="circle-tile-description text-faded"> Instituições </div> <div class="circle-tile-number text-faded"> 24 <span id="sparklineC"></span> </div> <a href="#" class="circle-tile-footer">Ver Instituições <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading purple"> <i class="fa fa-comments fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content purple"> <div class="circle-tile-description text-faded"> Perguntas a Analisar </div> <div class="circle-tile-number text-faded"> 96 <span id="sparklineD"></span> </div> <a href="#" class="circle-tile-footer">Analisar perguntas <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> <div class="col-lg-2 col-sm-6"> <div class="circle-tile"> <a href="#"> <div class="circle-tile-heading gray"> <i class="fa fa-users fa-fw fa-3x"></i> </div> </a> <div class="circle-tile-content gray"> <div class="circle-tile-description text-faded"> Professores Cadastrados </div> <div class="circle-tile-number text-faded"> 13 </div> <a href="#" class="circle-tile-footer">Ver Mais <i class="fa fa-chevron-circle-right"></i></a> </div> </div> </div> </div> </div><!-- page-wrapper END--> </div><!-- container-1 END--> <div class="container-fluid"> <div class="row"> <section class="content"> <h1>Alunos Cadastrados</h1> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="pull-right"> </div> <div class="table-container"> <table class="table table-filter"> <tbody> <tr> <td> <div class="ckbox"> <input type="checkbox" id="checkbox1"> <label for="checkbox1"></label> </div> </td> <td> <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr> <td> <div class="ckbox"> <input type="checkbox" id="checkbox3"> <label for="checkbox3"></label> </div> </td> <td> <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr> <td> <div class="ckbox"> <input type="checkbox" id="checkbox2"> <label for="checkbox2"></label> </div> </td> <td> <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr class="selected"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox4" checked> <label for="checkbox4"></label> </div> </td> <td> <a href="javascript:;" class="star star-checked"> <i class="glyphicon glyphicon-star"></i> </a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> <tr> <td> <div class="ckbox"> <input type="checkbox" id="checkbox5"> <label for="checkbox5"></label> </div> </td> <td> <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a> </td> <td> <div class="media"> <a href="#" class="pull-left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo"> </a> <div class="media-body"> <span class="media-meta pull-right">Febrero 13, 2016</span> <h4 class="title"> Lorem Impsum </h4> <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <div class="content-footer"> <p> Gamificação © - 2017 <br> Powered By Fábio De Moura, Guilherme Cipriano & Marlon Guarnieri </p> </div> </div> </section> </div> </div> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script>
/* Painel de Controle*/ body{background-color: #ecf0f1;} #page-wrapper { padding: 0 15px; border: none; } #page-wrapper .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #e0e7e8; border-radius: 0px; } @media (min-width: 768px){ .circle-tile { margin-bottom: 30px; } } .circle-tile { margin-bottom: 15px; text-align: center; } .circle-tile-heading { position: relative; width: 80px; height: 80px; margin: 0 auto -40px; border: 3px solid rgba(255,255,255,0.3); border-radius: 100%; color: #fff; transition: all ease-in-out .3s; } /* -- Background Helper Classes */ /* Use these to cuztomize the background color of a div. These are used along with tiles, or any other div you want to customize. */ .dark-blue { background-color: #34495e; } .green { background-color: #16a085; } .blue { background-color: #2980b9; } .orange { background-color: #f39c12; } .red { background-color: #e74c3c; } .purple { background-color: #8e44ad; } .dark-gray { background-color: #7f8c8d; } .gray { background-color: #95a5a6; } .light-gray { background-color: #bdc3c7; } .yellow { background-color: #f1c40f; } /* -- Text Color Helper Classes */ .text-dark-blue { color: #34495e; } .text-green { color: #16a085; } .text-blue { color: #2980b9; } .text-orange { color: #f39c12; } .text-red { color: #e74c3c; } .text-purple { color: #8e44ad; } .text-faded { color: rgba(255,255,255,0.7); } a { text-decoration: none; } .circle-tile-heading .fa { line-height: 80px; } .circle-tile-content { padding-top: 50px; } .circle-tile-description { } .text-faded { color: rgba(255,255,255,0.7); } .circle-tile-number { padding: 5px 0 15px; font-size: 20px; font-weight: 700; line-height: 1; } .circle-tile-footer { display: block; padding: 5px; color: rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.1); transition: all ease-in-out .3s; } .circle-tile-footer:hover { text-decoration: none; color: rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.2); } .morning { background: url(https://lh3.googleusercontent.com/-1YbV7nsVnX8/WMugaq-6BEI/AAAAAAAADSg/0wPfQ84vMUcCle_SkgiUDOumUKscMaA8QCL0B/w530-d-h353-p-rw/widget-bg-morning.jpg) center bottom no-repeat; background-size: cover; } .time-widget { margin-top: 5px; overflow: hidden; text-align: center; font-size: 1.75em; } .time-widget-heading { text-transform: uppercase; font-size: .5em; font-weight: 400; color: #fff; } #datetime{color:#fff;} .tile-img { text-shadow: 2px 2px 3px rgba(0,0,0,0.9); } .tile { margin-bottom: 15px; padding: 15px; overflow: hidden; color: #fff; } /* -------------------------------------------------- :: General -------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; color: #353535; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .ckbox { position: relative; } .ckbox input[type="checkbox"] { opacity: 0; } .ckbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ckbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .ckbox input[type="checkbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .ckbox input[type="checkbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 11px; font-family: 'Glyphicons Halflings'; position: absolute; } .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { font-size: 11px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.pagado { color: #5cb85c; } .table-filter .media .title span.pendiente { color: #f0ad4e; } .table-filter .media .title span.cancelado { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }

Related: See More


Questions / Comments: