Блог

 @font-face {
    font-family: AlvaroCondensed;
    src: url("AlvaroCondensed.woff") format("woff"), url("AlvaroCondensed.ttf")  format("truetype");
}

@font-face {
    font-family: AlvaroCondensed;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

div {
    font-family: Raleway, sans-serif, Arial, Helvetica, AlvaroCondensed;
  }

body {
    margin: 0 auto;
    --color: #d0afcf;
   color:  rgba(240, 221, 241);;
    background-color: var(--color);
    font-size: 1em;
}

.zone {
    transition: all 0.3s linear;
}

/* TITLE */
.green {
    display: flexbox;
    padding: 20px;
    margin: 20px;
}

.green h1 {
    font-family: Raleway;
    font-size: 3em;
    /* margin-top: -0.1em;
    margin-bottom: 0.1em; or line-height: default or 150% */

}

.active {
    font: Raleway;
    font-style: italic;
    /* font-size: 0.7em; */
}


h1 {
    font-family: AlvaroCondensed;
    text-transform:uppercase;
}


/* @media only screen and (max-width: 600px) {
    .green {
        font-size: 0.938em;
    }
    .box {
        font-size: 0.938em;
    }
} */


/***********************************************************************
 *  Cover
 **********************************************************************/
.cover  {
    /*show heigh: auto*/
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}



/***********************************************************************
 *  Grid Panel
 **********************************************************************/
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.box {
    background-color:#fff;
    padding: 20px;
    margin: 20px;

}

/* Secondary font */
.one h1{
    font-size: 9em;
    margin-top: -0.05em;
    margin-bottom: -0.15em;
    text-transform: uppercase;

}

/* Secondary font */
.two h1{
    font-size: 6em;
    margin-top: -0.1em;

    margin-bottom: -0.1em;
    text-transform: uppercase;
}

.five h1 {
    text-transform: uppercase;
}

ol li {
    margin-bottom: 10px;

}
ol{
    padding-left: 0;
    margin-left: 20px;
}

/* Primary font */
h4 {

    text-transform: uppercase;
}

.five h1 {
    font-family: AlvaroCondensed;
    font-size: 4em;
    margin-top: -0.2em;
    margin-bottom: -0.3em;
}

.box > canvas {
    width: 100%;
    height: auto;
}

/***********************************************************************
 *  Footer
 **********************************************************************/
footer {
    text-align: center;
    background-color: #444;
} 

 <div class="zone green">
    <p class="anyname active">Arbeidsmarkt annu nu</p>

    <h1>Meeste kans op het vinden van baanin post corona tijden</h1>
    <hr>
    <h4>TL AANTAL BEROEPEN OP LBO </h4>
</div>

<div class="cover">
  <div class="container">
    <canvas id="myChart"></canvas>
  </div>
</div>

<div class="zone blue grid-wrapper">
  <div class="box one">
    <h4>TL AANTAL BEROEPEN OP LBO </h4>
    <h1>23953</h1>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p>
  </div>

  <div class="box two">
    <h4>MEES KANSGENDE BEROEP OP EEN BAAN ALLE NIVEAUS</h4>
    <h1> Beroepen
      <h1>naam</h1>
    </h1>
    <ol>
      <li>Tweede beroep naam</li>
      <li>Derde beroep naam</li>
      <li>Vierde beroep naam</li>
      <li>Vijfde beroep naam</li>
      <li>zESDE beroep naam</li>
      <li>Zevende beroep naam</li>
    </ol>
  </div>

  <div class="box three">
    <h4>Chart met beroepennamen op lbo niveau van laag naar hoog </h4>
    <!-- <div class="container">
      <canvas id="myChart"></canvas>
    </div> -->
    <p>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
  </div>

  <div class="box four">
    <h4>Chart met beroepennamen op hbo niveau van laag naar hoog </h4>
    <!-- <div class="container">
      <canvas id="myChart2"></canvas>
    </div> -->
    <p>Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
  </div>

  <div class="box five">
    <h4>Hier komt nog een titel</h4>
    <h1>Hier komt iets</h1>
    <p>Ipsum as their default model text</p>
    <hr>
    <h4>Hier komt een anderer titel</h4>
    <h1>Hier waarschijnlijk ook</h1>
    <p>Ipsum as their default model text</p>
    <hr>
  </div>

  <div class="box six">
    <h4>Intermediairs/werkgevers met de meesta aanbod vacatures</h4>

    <!-- <div class="container">
      <canvas id="myChart"></canvas>
    </div> -->
    <p>Ipsum as their default model text</p>
  </div>

</div>

<footer class="zone yellow">made by z => m</footer>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="script.js"></script>