<template>
  <div class="inputs">
    <FormulateInput
      type="email"
      name="email"
      label="Enter your email address"
      help="We’ll send you an email when your ice cream is ready"
      validation="required|email"
    />
    <FormulateInput
      type="checkbox"
      name="flavors"
      label="Pick your 2 favorite flavors"
      validation="min:2,length"
      :options="{
       vanilla: 'Vanilla',
       chocolate: 'Chocolate',
       strawberry: 'Strawberry',
       apple: 'Apple'
      }"
    />
  </div>
</template>

<script>
</script>

<style lang="scss">
  .inputs {
    background-color: white;
    max-width: 25em;
    padding: 2em;
    margin: 6.5em auto 2em auto;
    border-radius: .25em;
    box-shadow: 0 0 1em rgba(0, 0, 0, .25);
  }
  html{
    min-height: 100%;
  }
  body {
    padding: 2em;
    background-image: url('https://vueformulate.com/logo.svg'), linear-gradient(-45deg, #7ccea9 , #ffffff);
    background-repeat: no-repeat;
    background-size: 3em, 100%;
    background-position: center 2em, center center;
  }
</style>