How to create a DASHBOARD like this?!

Asked

Viewed 716 times

0

Will I have to create everything in DIV? Can someone make an example of this " LINE A " so I can follow? The rest I managed to create, just these " LINE A, B, C ... " that I’m having difficulty " stack " the same way it is in the image.
inserir a descrição da imagem aqui

html5 css3

  • Put here the code of what you’ve done

  • Vish. I’m at work, I left the file at home. I forgot to send it to my e-mail. But I made that header there, "OEE DASHBOARD and the company icons " and the bottom there " Planned(turn) etc " and the footer down there " WHS Dashboard ".

  • I’m having trouble just making those " LINE A, B, C, D ... "leave "stacked" as it is in the picture, percentage, the balls there, rate, head, meta, real...

  • Is using bootstrap or doing everything from scratch?

  • Doing everything from scratch.

1 answer

4


There are n ways to assemble this layout, follows a alternative that will give you a "north" of how to do those divs of the lines, I left an example of the basic structure of the layout, it is all a matter of showing off and positioning , works within these structures that you will get into something very similar, I hope it helps.

.painel-principal {
  width: 100%;
  height: auto;
  border: 1px solid black;
  display: inline-flex;
}

.bloco-painel {
  height: 250px;
  border: 1px solid grey;
  width: 150px;
  margin: 5px 5px 5px 5px;
}

.cabecalho-bloco {
  border: 1px solid red;
  margin-top: 5px;
  height: 10%;
}
<div class="painel-principal">
  <div class="bloco-painel">
    <div class="cabecalho-bloco">
      LINHA A
    </div>
  </div>

  <div class="bloco-painel">
    <div class="cabecalho-bloco">
      LINHA B
    </div>
  </div>

  <div class="bloco-painel">
    <div class="cabecalho-bloco">
      LINHA C
    </div>
  </div>

  <div class="bloco-painel">
    <div class="cabecalho-bloco">
      LINHA D
    </div>
  </div>

</div>

  • Perfect! Already gave me a light. I thank you from my heart Mathias :D

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.