Vue.JS Material

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-material@latest/dist/vue-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script src="https://unpkg.com/vue-material@latest"></script>
<div class="app-viewport" id="file-list">

  <div class="" id="explain">

    <h1 class="md-title">{{ message }}</h1>

    <h3> Collect, analyse  and do better with data! </h3>

  </div>
  <hr>
  <md-layout id="container">

    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">

      <span class="md-headline">HOW does levi function ?</span>
    </md-layout>


    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      <h3>levi uses research and experimentation to provide
  'actionable knowledge' that you can use to <b>do well </b>in your environment. </h3>
    </md-layout>

    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      <h4>  Identify and Collect what is needed</h4>
    </md-layout>
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      <h4> Organize and analyse the evidence</h4>
    </md-layout>
    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large="33" md-flex-xlarge="33">
      <h4>Communicate and act on the evidence! </h4>
    </md-layout>


  </md-layout>



  <md-layout id="Identity">

    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      <span class="md-headline"> HOW do we exist?</span>
    </md-layout>

    <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100">
      Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic');
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
h1 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 400;
  font-size: 49px;
  line-height: 1.1em;
  font-family: Heiti SC;
  color: #ffffff;
}

h2 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 600;
  font-size: 19px;
  color: #ffffff;
}

h3 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 300;
  font-size: 19px;
  color: #ffffff;
}

h4 {
  font-family: Helvetica neue;
  text-align: center;
  font-weight: 300;
  font-size: 19px;
  color: #ffffff;
}

#Identity > .md-layout {
  /*background-color: lightgrey;*/
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
  font-weight: 200;
  font-size: 20px;
  line-height: 1.4em;
  color: #ffffff;
}

#file-list {
  background: url(https://s2.postimg.org/jyt3e83tl/white_Coffeedarken.jpg)
}

span {
  font-family: Helvetica neue;
}

span {
  color: #ffffff;
}

#container > .md-layout {
  /*background-color: lightgrey;*/
  border-color: black;
  align-items: center;
  justify-content: center;
  /*border-style: dotted;*/
  border-width: 1px;
  padding: 8px;
  color: #ffffff;
}

JavaScript

Vue.use(VueMaterial)

Vue.material.registerTheme('default', {
  primary: 'deep-purple',
  accent: 'red',
  warn: 'red',
  background: 'amber'
})

new Vue({
  el: '#file-list'
})