Ir para conteúdo
dgonnasc

Dúvida de criação painéis tipo KPI

Por , em Desenvolvimento frontend

Recommended Posts

Jack Oliveira    1

Jack Oliveira
Postado
1 hora atrás, dgonnasc disse:

Pessoal preciso de ajuda! Sou iniciante na programação e preciso criar uma área assim:

 

 

Alguém pode me dar uma ideia? 1635665724_Semttulo.png.62a7a87ce4571dfd80c09e6f2b757dd6.png1635665724_Semttulo.png.62a7a87ce4571dfd80c09e6f2b757dd6.png

Seria mais o menos assim pra começar a fazer.. 

<!DOCTYPE html>
<html>
<head>
<title>Projetos</title>
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="https://adminlte.io/themes/dev/AdminLTE/dist/css/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Amaranth:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

</head>
<body>
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>150</h3>

                <p>Projetos Realizados</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">Gerenciar <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>53<sup style="font-size: 20px">%</sup></h3>

                <p>Projetos Realizados</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">Gerenciar <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>44</h3>

                <p>Projetos Realizados</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">Gerenciar <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3>65</h3>

                <p>Projetos Realizados</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">Gerenciar <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
        </div>
        <!-- /.row -->
		            </div>
   
         
<center><font color="#000" size="6">Novo</font></center>

			<div class="row">
				<div onclick="window.location.href='#'" class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="cursor:pointer;">
					<div class="info-box bg-primary">
			            <span class="info-box-icon"><i class="fa fa-list-ol" style="font-size:55px"></i></span>
			            <div class="info-box-content">
			              <span class="info-box-text">Projetos Realizados</span>
			              <span class="info-box-number" style="font-size:48px">1250</span>
			              <div class="progress">
			                <div class="progress-bar" style="width: 100%"></div>
			              </div>
		                  <span class="progress-description pull-right">
		                    <a href="#" style="color:#FFF;">Gerenciar</a>
		                  </span>
			            </div>
		          	</div>
				</div>
				
				<div onclick="window.location.href='#'" class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="cursor:pointer;">
					<div class="info-box bg-info">
			            <span class="info-box-icon"><i class="fa fa-list-ul" style="font-size:55px"></i></span>
			            <div class="info-box-content">
			              <span class="info-box-text">Projetos Realizados</span>
			              <span class="info-box-number">1250</span>
			              <div class="progress">
			                <div class="progress-bar" style="width: 100%"></div>
			              </div>
		                  <span class="progress-description pull-right">
		                    <a href="#" style="color:#FFF;">Gerenciar</a>
		                  </span>
			            </div>
		          	</div>
				</div>
				
				<div onclick="window.location.href='#'" class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="cursor:pointer;">
					<div class="info-box bg-warning">
			            <span class="info-box-icon"><i class="fa fa-list-ul" style="font-size:55px"></i></span>
			            <div class="info-box-content">
			              <span class="info-box-text">Projetos Realizados</span>
			              <span class="info-box-number">1250</span>
			              <div class="progress">
			                <div class="progress-bar" style="width: 100%"></div>
			              </div>
		                  <span class="progress-description pull-right">
		                    <a href="#" style="color:#FFF;">Gerenciar</a>
		                  </span>
			            </div>
		          	</div>
				</div>	
				
				<div onclick="window.location.href='#'" class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="cursor:pointer;">
					<div class="info-box bg-red">
			            <span class="info-box-icon"><i class="fa fa-list-ul" style="font-size:55px"></i></span>
			            <div class="info-box-content">
			              <span class="info-box-text">Projetos Realizados</span>
			              <span class="info-box-number">1250</span>
			              <div class="progress">
			                <div class="progress-bar" style="width: 100%"></div>
			              </div>
		                  <span class="progress-description pull-right">
		                    <a href="#" style="color:#FFF;">Gerenciar</a>
		                  </span>
			            </div>
		          	</div>
				</div>				
		    </div>	<!-- fim row -->
 </section>
</body>
</html>

Espero ter lhe ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Kaio Kdesigner
      Como faço UL LI responsivo?
      Por Kaio Kdesigner
      Pergunta meio tosca, eu sei, mas é que eu já procurei na internet e não encontrei...
      Quero fazer uma ul li resposiva.
       
      Pc: imgem imagem
      mobile: imagem
                    imagem
    • dgonnasc
      Pessoal preciso de ajuda! Sou iniciante na programação e preciso criar uma área assim:
      Por dgonnasc
      Alguém pode me dar uma ideia? 
    • Dauton
      Criar páginas e numerar no final da página
      Por Dauton
      Tipo o resultado de pesquisa do Google, onde o resultado é dividido em várias páginas, 1 2 3 4 5 6...
    • Sherlock02
      Criação de catálogo de filmes
      Por Sherlock02
      Boa tarde, pessoal.
      Eu já trabalhei como web designer, mas estou parada, então tenho bastante conhecimento de html e css.
      Eu gostaria de fazer um catálogo de filmes, muito simples, com capas dos filmes que assisti, incluindo alguns dados, como nome, nota, etc. Essas capas poderão ficar dentro de uma pasta junto com o arquivo em html para meu acesso pessoal. Arquivo offline.
       
      Mas eu gostaria de saber se existe alguma forma prática de enviar as imagens para esse site, já que estamos falando de +2000 filmes assistidos.
      Algo do tipo: clicar na imagem e arrastar, já se insere no código?
      Penso que o Dreamweaver me daria um trabalhão...
    • Fernando Matiello
      MUDAR A COR DO TEMPLATE INTEIRO
      Por Fernando Matiello
      Baixei um template incrível para restaurante, porém não consigo alterar a cor do template inteiro. Não achei onde faço isso 
      Preciso alterar a cor do template no código, mas não identifiquei onde faço. Alguém me ajuda? aqui está o link e o download
       
      o site online é http://themes.potenzaglobalsolutions.com/html/the-zayka/index-2.html
       
      o arquivo dele para baixar é www.belmaris.com.br/site.rar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito