dashboard

dashboard.markdown

dashboard

A Pen by Cristina González Marrero on CodePen.

License.

index.html

<div class="padre">

  <div class="columna1"> 
    CREATIVE TIM
    <div class="col1">Dashboard</div>
    <div class="col1">User profile</div>
    <div class="col1">Table list</div>
    <div class="col1">Typography</div>
    <div class="col1">Icons</div>
    <div class="col1">Maps</div>
    <div class="col1">Notifications</div>
    <div class="col1">RTL Suport</div>
  </div>
  
  <div class="contenido">
    <div class="barrita">
      <div>Izquierda</div>
      <div>Derecha jeje</div>
    </div>

    <div class="columna2">
      <div class="a">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="b">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="c">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

style.css

body{
  background: grey;
  padding: 1px;
  margin: 1px;
}

.padre{
  display: flex;
  width:100%;  
}

.columna1 {
  display: flex;
  background: white;
  padding:8px;
  margin: 3px;
  width: 15vw;
  height: 25vw;
  flex-direction: column;
}

.contenido{
  background: white;
  display: flex;
  flex-direction: column;
  width:100%;
}

.col1{
  background: pink;
  padding:8px;
  margin: 3px;
  flex-direction: column;
}

.barrita{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  padding:8px;
  margin: 3px;
  width: 100%;
}