• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101

<template>
  <main class="index">
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <div class="hero-text">
            <h4 class="is-size-4">bnbcrate</h4>
            <h2 class="is-size-2">
               The simplest, easiest, and most beautiful way to provide your guests with quality toiletries.
            </h2>
          </div>    
        </div>
      </div>
    </section>

    <div class="container">
      <div class="columns">
        <div class="column">
          <div class="feature">
            <h2 class="is-size-3">Beautifully Packed</h2>
            <p>
               Impress your guests by letting them arrive to beautifully and carefully packed toiletries &mdash; creating a clean &amp; warm welcome.
            </p>
          </div>
        </div>

        <div class="column">
          <div class="feature">
            <h2 class="is-size-3">Delightfully Simple</h2>
            <p>
              We offer 3 crates. Select the quantity of each
              crate and we'll deliver them to you or one of your
              properties.
            </p>
          </div>
        </div>

        <div class="column">
          <div class="feature">
            <h2 class="is-size-3">Earth Friendly</h2>
            <p>
              Most of our items are biodegradable, so that they
              won't be a burden on the planet if they don't
              end up in the recycle bin.
            </p>
          </div>
        </div>
      </div>

    </div>


  </main>
</template>

<script>
  export default {
   
  }
</script>

<style lang='stylus'>
  @import '~assets/css/variables'
  
  .hero
    background url('http://cdn.home-designing.com/wp-content/uploads/2012/12/Modern-bathroom-with-large-windows.jpg')
    //background-size 100%
    background-position 0 -292px
    height 55vh
    .hero-text
      color darken($salmon, 20%)
      color $darkblue
      display inline-block
      background alpha(white, 85%)
      padding 10px 20px
      width 50%
      margin 0 auto
      border 2px solid darken($darkblue, 20%)
      h2
        font-size 1.5em

      h4
        font-size 1.7em
        width 50%
        color $darksalmon
        //color $cadet
       

main.index
  margin 0
  
.feature
  padding 2em 1em
  box-sizing border-box
  h2
    color $blue



</style>