<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!--
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
-->
<!DOCTYPE html>
<html>
<head>
<title>Progresso</title>
</head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Início</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<!-- <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- Css da Pasta -->
<link href="assets/css/progresso.css" rel="stylesheet" type="text/css">
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid col-md-12">
<div id="lateral">
<div id="menu">
<div class="row profile container-fluid">
<div class="col-sm-12">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="https://yt3.ggpht.com/-Mkzp5zptlJU/AAAAAAAAAAI/AAAAAAAAAAA/blLjbZhAFoA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" class="img-responsive" alt="">
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Guilherme Cipriano
</div>
<div class="profile-usertitle-job">
2info1
<br>
<i class="fa fa-btc"></i>50 Cipricoins
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu accordion">
<ul class="nav">
<li>
<a href="progress.html">
<i class="glyphicon glyphicon-home"></i>
Início </a>
</li>
<li>
<a href="profile.html">
<i class="glyphicon glyphicon-user"></i>
Perfil </a>
</li>
<li class= "accordion-item">
<a href="#">
<i class = "glyphicon glyphicon-list"></i>
Ranking </a>
<div class="accordion-item-content">
<ul>
<li><a href="ranking-institution.html">
<i class="fa fa-users"></i></i>
Turma</a>
</li>
<li><a href="ranking-institution.html">
<i class="fa fa-fort-awesome"></i></i>
Insituição</a></li>
<li><a href="ranking-institution.html">
<i class="fa fa-university"></i>
Escolas
</a>
</li>
</ul>
</div>
</li>
<li class= "accordion-item" id="materias">
<a href="#" target="_blank">
<i class="glyphicon glyphicon-fire"></i>
Modo de Jogo </a>
<div class="accordion-item-content">
<ul>
<li>
<a href="ranked-mode.html">
<i class= "glyphicon glyphicon-king"></i>
Ranqueado</a>
</li>
<li>
<a href="duel-mode.html">
<i class= "glyphicon glyphicon-flash"></i>
Duelo</a>
</li>
</ul>
</div>
</li>
<li class= "accordion-item">
<a href="#">
<i class = "glyphicon glyphicon-list"></i>
Disciplinas </a>
<div class="accordion-item-content" id="ac2">
<ul>
<li>
<a href="portuguese.html">
<i class="glyphicon glyphicon-book"></i>
Português</a>
</li>
<li>
<a href="mathematics.html">
<i class="glyphicon glyphicon-plus"></i>
Matemática</a>
</li>
<li>
<a href="science.html">
<i class="fa fa-flask"></i>
Ciências</a>
</li>
<li><a href="history.html">
<i class="glyphicon glyphicon-hourglass"></i>
História</a>
</li>
<li><a href="geography.html">
<i class="glyphicon glyphicon-globe"></i>
Geografia</a>
</li>
<li><a href="english.html">
<i class="glyphicon glyphicon-pencil"></i>
Inglês</a>
</li>
<li><a href="art.html">
<i class="glyphicon glyphicon-tint"></i>
Artes</a>
</li>
<li><a href="fisic-education.html">
<i class="glyphicon glyphicon-heart-empty"></i>
Ed.Física</a>
</li>
</ul>
</div>
</li>
<li>
<a href="settings.html" target="_blank">
<i class="glyphicon glyphicon-cog"></i>
Configurações</a>
</li>
<li>
<a href="shop.html" target="_blank">
<i class="glyphicon glyphicon-shopping-cart"></i>
Compras </a>
</li>
<li>
<a href="achievements.html" target="_blank">
<i class="glyphicon glyphicon-star"></i>
Conquistas </a>
</li>
<li>
<a href="help.html">
<i class="glyphicon glyphicon-question-sign"></i>
Ajuda </a>
</li>
<li>
<a href="index.html" target="_blank">
<i class="glyphicon glyphicon-share-alt"></i>
Sair </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Container -->
<div class="col-md-12 principal">
<div class="profile-content">
<div class="container-fluid">
<div class="row">
<h2>Bem-Vindo! Veja seu progresso</h2>
</div>
<!--Portuguê-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-danger">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Português: <label class="label label-danger">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-success">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!--Matemática-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-primary">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Matemática: <label class="label label-primary">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-primary">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!--Ciências-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-info">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Ciências: <label class="label label-info">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-info">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!-- História -->
<div <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-danger">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
História: <label class="label label-danger">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-success">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!-- Geografia -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-success">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Geografia: <label class="label label-success">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-success">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!-- Inglês -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-primary">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Inglês: <label class="label label-primary">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-primary">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
<!-- Inglês -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="offer offer-warning">
<div class="shape">
<div class="shape-text">
<span class="glyphicon glyphicon glyphicon-th"></span>
</div>
</div>
<div class="offer-content">
<h3 class="lead">
Artes: <label class="label label-warning">60/100 Lições </label>
</h3>
<p>
Concluído
<br>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%" >
60%
</div>
</div>
</p>
<h5>
<button class="btn btn-warning">Jogar!</button>
<button class="btn btn-danger">Reforçar!</button>
</h5>
</div>
</div>
</div>
</body>
</html>
/***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
body {
background: #F1F3FA;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 2px 0;
background:;
max-width: 300px;
}
.profile-userpic img {
float: none;
margin: 0 auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #fff;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #9BADC1;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
.glyphicon{
color: #fff;
}
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
height: auto;
line-height: 3em;
background-color:
}
.accordion-item-content,
.accordion:hover .accordion-item-content {
height: 0;
overflow: hidden;
transition: height .25s;
background-color:;
color:;
}
.accordion-item-content ul{
list-style-type: none;
}
.accordion-item-content ul li a{
text-decoration: none;
color: ##122F4F;
border-left: 0px;
}
/*efeito OverFlow */
@charset "UTF-8";
/* =CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
*, html, body {
margin:0;
padding:0;
}
... /* mais regras CSS reset */
/* regra para o box-sizing */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* regra para o clear float */
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
body {
margin-left:55px; /* espaço à esquerda para a barra vertical vísivel do menu */
font: 62.5%/1.2 Verdana, Helvetica, Arial, sans-serif;
}
#lateral {
padding:0 50px 0 0;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
font-size:1.2em;
background:rgb(44,62,80);
background-image: -moz-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: -webkit-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: -o-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79) );
background-image: -ms-linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
background-image: linear-gradient(135deg, rgb(3,8,12), rgb(16,57,79));
height:100%;
overflow:hidden;
width:370px;
position:fixed;
top:0;
left:-320px;
z-index: 100;
}
#lateral:before {
z-index:1000;
content: url(http://www.maujor.com/tutorial/menu-maujor/icone-menu.png);
font-size:4em;
color:white;
position:fixed;
left:4px;
top:45px;
}
#lateral:hover:before, #lateral:focus:before {
left:-100px
}
#lateral:hover, #lateral:focus, #lateral:active {
overflow-y:scroll;
-moz-transform: translate(320px, 0);
-webkit-transform: translate(320px, 0);
-o-transform: translate(320px, 0);
transform: translate(320px, 0);
padding-right:0;
}
#lateral .box {
list-style-type:none;
margin-bottom:1em;;
padding-bottom:1em;
}
#lateral h3 {
display:inline-block;
font-weight:bold;
font-size:1.6em;
font-style:normal;
padding-bottom:0.2em;
margin: 2em 0 2em 0.81em;
color:rgb(255,255,255);
border-bottom: 4px solid rgb(155,155,155);
}
#menu {
position:relative;
font-size:1.0em;
margin:1em 0 1em -1em;
padding:0;
}
#menu li {padding:0; margin:0;}
#menu li a, #menu li a:link {
font-size:2em;
color:rgb(255,255,255);
text-decoration: none;
padding: 0.8em 0 0.8em 1em;
display: block;
-moz-transition: all 1.2s ease;
-webkit-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}
#menu li a:hover {
color:rgb(255,255,255);
background-color:rgba(255,255,255,0.2);
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media (max-width:359px) {
body {margin-left:0;background-size:100% 28em!important;}
#lateral {
padding:0;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
font-size:1.2em;
height:100%;
overflow:auto;
width:100% !important;
position:static;
top:0;
left:0;
}
#lateral:before {
z-index: 1000;
width:0;
text-align:center;
content: "http://icon-icons.com/icons2/906/PNG/512/square-menu_icon-icons.com_69888.png";
font-size:0;
color:white;
position:static;
top:0;
left:0;
display:inline-block;
}
#lateral:hover, #lateral:focus {
overflow:scroll;
-moz-transform: none;
-webkit-transform: none;
-o-transform:none;
transform:none;
}
#menu li a {border-bottom:1px solid #ccc;}
#menu li:first-child a {border-top:1px solid #ccc;}
}
/*Termina barra lateral*/
/*Inicia Gráfico Matérias*/
.shape{
border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
-ms-transform:rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
transform:rotate(360deg);
}
.offer{
background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
}
.offer:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform:rotate scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.shape {
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-radius{
border-radius:7px;
}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{
border-color: transparent #d9534f transparent transparent;
}
.offer-success { border-color: #5cb85c; }
.offer-success .shape{
border-color: transparent #5cb85c transparent transparent;
}
.offer-default { border-color: #999999; }
.offer-default .shape{
border-color: transparent #999999 transparent transparent;
}
.offer-primary { border-color: #428bca; }
.offer-primary .shape{
border-color: transparent #428bca transparent transparent;
}
.offer-info { border-color: #5bc0de; }
.offer-info .shape{
border-color: transparent #5bc0de transparent transparent;
}
.offer-warning { border-color: #f0ad4e; }
.offer-warning .shape{
border-color: transparent #f0ad4e transparent transparent;
}
.shape-text{
color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
-ms-transform:rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
transform:rotate(30deg);
}
.offer-content{
padding:0 20px 10px;
}
@media (min-width: 480px) {
.container {
max-width: 750px;
}
.col-sm-6 {
width: 50%;
}
}
@media (min-width: 900px) {
.container {
max-width: 970px;
}
.col-md-4 {
width: 33.33333333333333%;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1170px;
}
.col-lg-3 {
width: 25%;
}
}
.label {
text-align: center;
}
p {
font-size: 3em;
}
}
$("#lateral").click(function(e) {
e.preventDefault();
$("#lateral").toggleClass("active");
});
