Ejercicio de SASS y PUG

![](

)

<template>
  <div id="app">
    <section style="section">
      <img
        src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg"
        alt="Imagen Registro Platzi"
      />
      <h1>Registro estación Platzi</h1>
      <span>Nombre</span>
      <input type="text" placeholder="Platzerito" />
      <span>Apellido</span>
      <input type="text" placeholder="Cool de la Web" />
      <span>Cargo</span>
      <input type="text" placeholder="FullStack JS" />
      <div class="button-container">
        <button>ENVIAR</button>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss">
@import '@/scss/main.scss';

#app {
  //font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

section {
  display: inline-flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
}

section h1 {
  font-size: 24px;
  font-weight: bold;
  color: #00bfd6;
}

section span {
  width: inherit;
  text-align: left;
  color: #ff9300;
  justify-self: left;
  font-weight: bold;
  font-size: 8px;
  margin-top: 12px;
}

section input {
  justify-self: center;
  width: inherit;
  border-width: 0px 0px 1px 0px;
  border-color: #ff9300;
}

section input::placeholder {
  color: black;
}

.button-container {
  display: inline-flex;
  justify-content: flex-end;
}

section button {
  background-color: #00bfd6;
  border: none;
  margin-top: 16px;
  width: 120px;
  height: 34px;
  border-radius: 4px;
  font-weight: bold;
  color: white;
}
</style>

<template lang="pug">
  #app.container.box.wrap.has-text-centered
    img(src="./assets/satellite-platzi.jpg")
    h1.title.is-4 {{ title }}
    .field
      label.label.has-text-left.is-small Nombre
      .control
        input.input(type="text", value="Platzetiro")
    .field
      label.label.has-text-left.is-small Apellido
      .control
        input.input(type="text", value="Cool de la web")
    .field
      label.label.has-text-left.is-small Cargo
      .control
        input.input(type="text", value="FullStack JS")
    .control.has-text-right
      button.button.is-primary Enviar
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "Registro estación Platzi"
    };
  }
};
</script>

<style lang="scss">
@import "./scss/main.scss";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

$font-1: "Roboto", sans-serif;

$color-1: #a3ecf3;
$color-2: #00bfd6;
$color-3: #212121;
$color-4: #ff9300;

$width-1: 320px;
$height-1: 409px;

.wrap {
  width: $width-1;
  font-family: $font-1;
  border: 0px solid black;
}

.title {
  color: $color-2;
}

.label {
  color: $color-4;
}

.input {
  border-color: $color-4;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 0;
  box-shadow: none;
}

.button.is-primary {
  width: $width-1/2;
  background-color: $color-2;
}
</style>

Resultado:

Código:

<template>
  <div id="app">
    <img src="@/assets/platzi_foto.jpg" />
    <h1 class="title">{{ msgH1 }}</h1>
    <form class="form">
      <label class="nameInput">
        <small>Nombre</small>
        <input type="text" name="" id="" placeholder="Ejemplo: Miguel">
      </label>
      <label class="lastNameInput">
        <small>Apellido</small>
        <input type="text" name="" id="" placeholder="Ejemplo: Reyes">
      </label>
      <label class="workInput">
        <small>Cargo</small>
        <input type="text" name="" id="" placeholder="Ejemplo: Software Developer">
      </label>
      <button class="sendButton" type="submit">
        ENVIAR
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgH1: 'Registro estación Platzi',
    }
  }
}
</script>

<style lang="scss">
$blue: #00bfd6;
$blue2: #a3ecf3;
$orange: #ff9300;
$black: #212121;

#app, .form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app {
  width: 409px;
  height: 320px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  & img {
    width: 100%;
    height: auto;
  }

  & .title {
    font-style: bold;
    color: $blue;
  }

  & .form {
    width: 100%;
    & small {
      color: $orange;
      font-weight: bold;
      font-size: 10px;
    }

    & input, & label {
      width: 100%;
    }

    & input {
      border: none;
      border-bottom: 2px solid $orange;
      font-size: 16px;
      color: $black;

      &:focus {
        outline: none;
      }
    }

    & .sendButton {
      width: fit-content;
      margin-top: 20px;
      align-self: flex-end;
      background: $blue;
      color: white;
      border: none;
      border-radius: 2px;
      font-size: 16px;
      padding: 10px 40px;
      box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 25%);

      &:hover {
        background: $blue2;
      }
    }
  }
}
</style>

Lo logre!

<template lang="pug">
  #app
    .container
      img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
      h1 Registro estación Platzi
      form        
        label Nombre
        input(name="nombre" id="nombre" value="Robert")
      
        label Apellido
        input(name="usuario" id="usuario" value="Kiyosaki")
      
        label Cargo
        input(name="cargo" id="cargo" value="Mercadeo")
      
        div.caja_button
          button(type='submit' class='btn-action') ENVIAR
  
</template>

<style>
:root {
/* --color_primary: #A3ECF3; */
  --color_primary: #00BFD6;
  --color_secondary: #FF9300;
  --color_text: #212121;
}
#app {
  font-family: Roboto;
  width:100%;
  display: flex;
  justify-content: center;
  font-size: 16px;
}
.container{
  width: 320px;
  height: 409px;
  padding: 16px;
}

h1{
  color: var(--color_primary);
}

label{
  color: var(--color_secondary);
}
label, input{
  display: block;
  width: 100%;
  font-weight: 500;
}
input{
    border: 0px;
    border-bottom: 1px solid var(--color_secondary);
    color: var(--color_text);
    margin-bottom: 16px;
    font-size: 24px;
}
button{
  background-color: var(--color_primary);
  color: #FFF;
  padding: 8px;
  width: 150px; 
  border-radius: 4px;
}
.caja_button{
  display: flex; 
  justify-content: flex-end;
  margin-bottom:16px;
}
</style>

MY CODE:

<template >
  <div class="register-container">
    <img src="./assets/header-img.png" alt="">
    <h1>{{title}}</h1>
    <div class="field">
      <label for="">{{label1}}</label>
      <input type="text">
    </div>
    <div class="field">
      <label for="">{{label2}}</label>
      <input type="text">
    </div>
    <div class="field">
      <label for="">{{label3}}</label>
      <input type="text">
    </div>
    <div class="button-container">
      <button>{{buttonText}}</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      title: "Registro estacion platzi",
      label1: "Nombre",
      label2: "Apellido",
      label3: "Cargo",
      buttonText: "ENVIAR"
    }
  }
}
</script>

<style lang="sass">
  .register-container
    width: 280px
    height: 409px
    padding: 0px 20px
    margin: 20px auto 0px
    img
      width: 280px
      height: 100px
    h1
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
      font-weight: bold
      font-size: 20px
      color: #00BFD6
      text-align: center
    .field
      display: flex
      flex-direction: column
      align-items: flex-start
      padding: 10px 0px
      label
        color: #FF9300
        font-size: 10px
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
        font-weight: bold
        margin-bottom: 10px
      input
        border: none
        border-bottom: 1px solid #FF9300
        width: 100%
        outline-color: transparent
        outline: none
        height: 20px
        font-size: 16px
        color: #212121
    .button-container
      display: flex
      align-items: flex-end
      justify-content: flex-end
      button
        background-color: #00BFD6
        border: none
        padding: 10px 30px
        color: white
        font-weight: bold
        box-shadow: 0px 5px 8px -5px rgba(179,179,179,1)
</style>```

Supongo que es que ya debo tener conocimientos de PUG y SASS? en los vídeos anteriores no trataron nada de como usar PUG y BULMA, y de repente PUM! Haz este ejercicio, y el siguiente es mas avanzado aun 😥😥

<template lang="pug">
  #app
    div(class="container container-form")
      figure(class="logo-figure")
        img(src="./assets/logo.jpg" class="logo-img")
      h1(class="h1") Registro estación
      div(class="field")
        label(class="control") Nombre
        div(class="control")
          input(class='input-form' type="text" placeholder="Ingresa tu nombre")
      div(class="field")
        label(class="control") Apellido
        div(class="control")
          input(class='input-form' type="text" placeholder="Ingresa tu apellido")
      div(class="field")
        label(class="control") Cargo
        div(class="control")
          input(class='input-form' type="text" placeholder="Ingresa tu cargo")
      div(class="field is-grouped")
        div(class="control")
          button(class="button is-custom") ENVIAR
</template>

<script>
export default {
  name: 'app',
 data(){
   return{
     
   }
  }
}
</script>

<style lang="scss">
@import '../node_modules/bulma/bulma.sass';
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

$color-title: #A3ECF3;
$color-button: #00BFD6;
$color-labels: #FF9300;
$color-letter: #212121;

.container-form{
  width: 480px;
  height: 614px;
  font-family: 'Roboto', sans-serif;
  margin-top: 40px;
}
.logo-figure{
  display: flex;
  justify-content: center;
}
.logo-img{
  width: 85%;
}
.h1{
  color: $color-title;
  font-size: 52px;
  text-align: center;  
  padding: 5px 0;
}
.control{
  color: $color-labels;
  font-size: 20px;  
}
.input-form {
  border-color: transparent;
  border-bottom: 2px solid $color-labels;
  color: $color-letter;
  align-items: center;
  width: 100%;
  font-size: 16px;
  padding: 7px;
}
.input-form:focus{
  outline: none;
  border-bottom: 2px solid $color-labels;
}
.field.is-grouped {
  display: flex;
  justify-content: flex-end;
}
.is-custom{
  color: white;
  background: $color-button;
  width: 114px;
}
</style>

Register.vue

<template lang="pug">
  .container.platzi-register-container
    img(src="@/assets/images/logo.jpg")
    
    h1 Registro estación Platzi
    
    <Field label="Nombre" id="first-name"/>
    <Field label="Apellido" id="last-name"/>
    <Field label="Cargo" id="position"/>

    button.button.is-link.is-pulled-right Enviar
</template>

<script>
import Field from "@/components/Field.vue";

export default {
  name: "Register",
  props: {
    msg: String
  },
  components: { Field }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "@/scss/main.scss";

#app {
  .platzi-register-container {
    max-width: 500px;
    padding: 0 5%;

    h1 {
      color: $platzi-music-strong-blue;
      font-size: 1.4em;
      font-weight: bold;
      margin: 0.5em 0;
    }

    button {
      background-color: $platzi-music-strong-blue;
      padding: 1em 2.5em;
    }
  }
}
</style>

Field.vue

<template lang="pug">
.field
  label.label {{ label }}
  .control
    input.input(type="text" v-bind:id="id")
</template>

<script>
export default {
  name: "Field",
  props: {
    label: String,
    id: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "@/scss/main.scss";

#app {
  .platzi-register-container {
    .field {
      margin-bottom: 1em;
    }

    input {
      border-color: $platzi-music-orange;
      border-radius: 0px;
      border-width: 0px 0px 1.5px 0px;
      border-style: solid;
      box-shadow: none;
      color: $platzi-music-black;
      padding-left: 0;
    }

    label {
      text-align: left;
      font-size: 0.75em;
      color: $platzi-music-orange;
      margin-bottom: 0;
    }
  }
}
</style>

main.scss

@import "../../node_modules/bulma/bulma.sass";

$platzi-music-blue:#A3ECF3;
$platzi-music-strong-blue:#00BFD6;
$platzi-music-black:#212121;
$platzi-music-orange:#FF9300;

#app {
  font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

<template lang="pug">
  #app.my-3.mx-3
    section(class="section")
      div(class="columns")
        .column.is-6.is-offset-3
          .card
            .card-image.has-text-centered
              img(src="./assets/page1.jpg")
            .card-content
              h1.title.has-text-weight-bold.has-text-info.has-text-centered Registro estación Platzi
              form
                label.has-text-weight-bold.is-size-7 Nombre
                input.input.is-warning.is-shadowless
                label.has-text-weight-bold.is-size-7 Apellido
                input.input.is-warning.is-shadowless
                label.has-text-weight-bold.is-size-7 Cargo
                input.input.is-warning.is-shadowless
                button.button.is-pulled-right.is-primary.mt-2 Enviar
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello wordl!!'
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';

label {
  color: $platzi-music-orange;
}

</style>

Cree mi código: Utilizando Pug

<template lang="pug">

#app
  img(src="@/assets/Page1.webp", alt="PLatzi logo", id="logo")
  h1 {{ msg }}
  br
  section
    span(for="name") Nombre
    input(type="text", id="name", name="name")
    span(for="apellido") Apellido
    input(type="text", id="Apellido", name="Apellido")
    span(for="cargo") Cargo
    input(type="text", id="cargo", name="cargo")
    .button-container
      button(type="submit") Enviar

</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Registro estación Platzi",
    };
  },
};
</script>

<style lang="scss">
@import "scss/main.scss";

html {
  background-color: #dc7633;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  padding: 25px 25px 25px 25px;
  border-radius: 10px;
  box-shadow: 3.5px 7px 7px #00000061;
  background-color: white;
}

section {
  display: inline-flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  width: 100%;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  color: #00bfd6;
}

span {
  width: inherit;
  text-align: left !important;
  color: #ff9300;
  justify-self: left;
  font-weight: bold;
  font-size: 10px;
  margin-top: 12px;
}

input {
  justify-self: center;
  width: inherit;
  border-width: 0px 0px 1px 0px;
  border-color: #ff9300;
}

input::placeholder {
  color: black;
}

input:focus {
  outline: none;
  border-color: #00bfd6;
}

.button-container {
  display: inline-flex;
  justify-content: flex-end;
}

button {
  background-color: #00bfd6;
  border: none;
  margin-top: 16px;
  width: 120px;
  height: 34px;
  border-radius: 4px;
  font-weight: bold;
  color: White;
}
</style>

CODIGO App.vue

<template>
  <div id="app">
    <img src="@/platzi_foto.jpg" />
    <h1 class="title">{{ msgH1 }}</h1>
    <form class="form">
      <label class="nameInput">
        <small>Name</small>
        <input type="text" name="" id="" placeholder=" Ayda">
      </label>
      <label class="lastNameInput">
        <small>Last Name</small>
        <input type="text" name="" id="" placeholder=" Montoya">
      </label>
      <label class="workInput">
        <small>Position</small>
        <input type="text" name="" id="" placeholder=" Software Developer">
      </label>
      <button class="sendButton" type="submit">
        SEND
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgH1: 'Station Registration Platzi',
    }
  }
}
</script>

<style lang="scss">
$blue: #00bfd6;
$blue2: #a3ecf3;
$orange: #ff9300;
$black: #212121;

#app, .form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app {
  width: 409px;
  height: 320px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  & img {
    width: 100%;
    height: auto;
  }

  & .title {
    font-style: bold;
    color: $blue;
  }

  & .form {
    width: 100%;
    & small {
      color: $orange
      font-weight: bold;
      font-size: 10px;
    }

    & input, & label {
      width: 100%;
    }

    & input {
      border: none;
      border-bottom: 2px solid $orange;
      font-size: 16px;
      color: $black;

      &:focus {
        outline: none;
      }
    }

    & .sendButton {
      width: fit-content;
      margin-top: 20px;
      align-self: flex-end;
      background: $blue;
      color: white;
      border: none;
      border-radius: 2px;
      font-size: 16px;
      padding: 10px 40px;
      box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 25%);

      &:hover {
        background: $blue2;
      }
    }
  }
}
</style>

hola amigos! Dejo mi Ejercicio:

main.scss:

@import '~bulma/bulma.sass';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
$platzi-cyan: #A3ECF3;
$platzi-cyan-dark: #00BFD6;
$platzi-black: #212121;
$platzi-orange: #FF9300;
#estacion-platzi-container{
    width:100%;
    height: 100vh;
}
.estacion-platzi{
    font-family: 'Roboto' sans-serif;
    width:320px;
    height: 450px;
    color: $platzi-black;
    .title{
        font-weight: 700;
        font-size: x-large;
        color: $platzi-cyan-dark;
    }
    label{
        font-weight: 500;
        font-size:small;
        display:block;
        color: $platzi-orange;
    }
    input{
        width: 100%;
        height: 4vh;
        border-top:none;
        border-left:none;
        border-right:none;
        border-bottom: 3px solid $platzi-orange;
        font-weight: 500;
        &:focus{
            outline: none;
        }
    }
    button{
        background-color: $platzi-cyan-dark;
        color:white;
        text-transform: uppercase;
        font-weight: 500;
    }
}

Y mi App.vue con pug:

<template lang="pug">
#estacion-platzi-container.is-flex.is-justify-content-center.is-align-content-center
  .estacion-platzi.is-align-self-center.box
    img.mb-2(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
    h1.title {{ msg }}
    label Nombre
    input.mb-3(type="text" spellcheck="false")
    label Apellido
    input.mb-3(type="text" spellcheck="false")
    label Cargo
    input.mb-3(type="text" spellcheck="false")
    button.button.is-pulled-right Enviar
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';
</style>

Así quedó:

Aporte de Noviembre 2021:

HTML

  #app.hero.is-fullheight
    .hero-body
      .container
        .columns.is-centered
          .column.is-5-table.is-4-desktop.is-3-widescreen
            .image.is-inline-block
              img(src="./assets/logo-platzi-reto1.png")
            h1.title.has-text-centered Registro estación de Platzi
            form.box
              label.field
                label.label Nombre
                input(type="text").input
              label.field
                label.label Apellido
                input(type="text").input
              label.field
                label.label Cargo
                input(type="text").input
              .field.field-button
                button(type="button").button.is-medium Enviar

CSS

  .image {
    margin: 1rem 0 1rem 0;
  }

  .title {
    font-size: 1.5rem;
    font-weight: bold;;
    color: #00BFD6;
  }

  .box {
    margin-top: 2rem;
  }

  .label {
    font-size: .7rem;
    color: #FF9300;
  }

  .input {
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 2px solid #FF9300;
    color: #212121;
  }

  .field-button {
    display: flex;
    justify-content: flex-end;
  }

  .button {
    width: 8rem;
    margin-top: 1.5rem;
    background-color: #00BFD6;
    color: white;
  }

Este es mi aporte con sass y pug
component - Login.vue

<template lang="pug">
    .login-container
        img.login__image(src="@/assets/logoPlatzi.jpg")
        h2.login--title Registro estación Platzi
        .login-input__group
            label.login-input__label(for="nombre") Nombre
            input.login-input__input(id="nombre" value="Rafael")
        .login-input__group
            label.login-input__label(for="apellido") Apellido
            input.login-input__input(id="apellido" value="Cool de la Web")
        .login-input__group
            label.login-input__label(for="carga") Carga
            input.login-input__input(id="carga" value="FullStack JS")
        .login-input__group
            button.login-button ENVIAR
</template>
<style lang="sass">
$principal-font: 'Roboto Bold', sans-serif;
$color-naranja: #FF9300;
$color-celete: #A3ECF3;
$color-turquesa: #00BFD6;
$color-black: #212121;
body
    font-family: $principal-font
.login
    &-container
        box-shadow: 3px 6px 17px -1px rgba(0,0,0,0.87)
        box-sizing: border-box
        width: 320px
        height: 409px
        margin: 0px auto
        padding: 15px 25px
    &--title
        color: $color-turquesa
        font-size: 23px
        font-weight: 800
        margin: 10px 0

    &-input
        &__group
            width: 100%
            margin-top: 17px
        &__label
            display: block
            text-align: left
            color: $color-naranja
            font-size: 10px
        &__input
            box-sizing: border-box
            width: 100%
            padding: 5px 0
            border-width: 0
            border-bottom: $color-naranja solid 2px
            font-size: 15px
    &-input__group
        .login-button
            width: 40%
            height: 3em
            float: right
            font-size: 13px
            font-weight: 800
            color: white
            text-align: center
            background-color: $color-turquesa
            border: transparent
            border-radius: 3px
            box-shadow: 6px 6px 10px -5px rgba(0,0,0,0.5)
</style>

Ejercicio completo!
Link: https://codepen.io/paolojoaquin/pen/wvJpOYj

Acá va el mio.

<template lang="pug">
  #app.hero.is-fullheight
    .hero-body.container.has-text-centered
      .box
        img(src='./assets/img.jpg')
        h1.title.is-4.mb-1 {{ title }}

        label.label.has-text-left Nombre
        .control
          input.input(type='text', :value='nombre')

        label.label.has-text-left Apellido
        .control
          input.input(type='text', :value='apellido')

        label.label.has-text-left Cargo
        .control
          input.input(type='text', :value='cargo')
        .control.has-text-right
          button.button.is-small Enviar
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Registro estación Platzi',
      nombre: 'Luis',
      apellido: 'Iriarte',
      cargo: 'FullStack JS'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  @import url( 'https://fonts.googleapis.com/css?family=Roboto' );

  $font-family: 'Roboto', 'sans-serif';
  $title-color: #A3ECF3;
  $button-color: #00BFD6;
  $text-color: #212121;
  $label-color: #FF9300;
  $bg-color: #121f3d;
  $border-color: #8DA2C0;
  $box-width: 320px;
  $box-height: 409px;

  .hero {
    background-color: $bg-color !important;
  }

  .box {
    font-family: $font-family;
    width: $box-width;
    height: $box-height;
    border: 10px solid $border-color;
  }

  .title {
    color: $title-color;
  }

  .label {
    color: $label-color;
    font-size: 0.5em;
  }

  .input {
    border-color: $label-color;
    border-width: 0 0 1px 0;
    /* border-radius: 0; */
    box-shadow: none;
    margin-bottom: 4px;
  }

  .button {
    margin-top: 5px;
    width: $box-width/2;
    color: white;
    background-color: $button-color;
  }
</style>

<template lang="pug">
  .container
    .columns.is-centered
      .column
        form.box
          img(src="https://picsum.photos/300/150?random=1")
          .title.is-2.has-text-info.has-text-bold.has-text-centered Registro
          .field
            label.label Nombre
            .control
              input.input(
                type="text" 
                placeholder="Nombre"
                v-model="form.name"
              )
          .field
            label.label Apellido
            .control
              input.input(
                type="text" 
                placeholder="Apellido"
                v-model="form.lastname"
              )
          .field
            label.label Cargo
            .control
              input.input(
                type="text" 
                placeholder="Ingresa tu cargo"
                v-model="form.position"
              )
          .control.has-text-right
            button.button.is-info.is-uppercase(
              @click.prevent="sendForm"
            ) Enviar
</template>

<script>
export default {
  name: "Login",
  data () {
    return {
      form: {
        name: '',
        lastname: '',
        position: '',
      },
    } 
  },
}
</script>```

Para resolver el ejercicio realice lo siguiente: Utilice un componente para agregar todo el contenido del formulario, al hacerlo utilice html y bulma y un poco de estilos personalizados. Además para realizar el efecto de labels flotantes utilice el plugin vue-float-label. Aquí dejo el código y una imagen del resultado.

<template>
   <div class="has-background-light container-form-register">
       <div class="content-form card p-5">

            <div class="header-form mb-4">
                <img src="../assets/logo-platzi-demo.png" alt="">
                <h1 class="title is-2">Registro estación Platzi</h1>
            </div>
            

            <form class="form-register" action="">
                <float-label label="Nombre" class="mb-5">
                    <input 
                        v-model="formRegister.name"
                        required
                        class="input is-warning field-with-one-border" 
                        type="text" 
                        placeholder="Nombre">
                </float-label>

                <float-label label="Apellido" class="mb-5">
                    <input 
                        v-model="formRegister.lastName"
                        required
                        class="input is-warning field-with-one-border" 
                        type="text" 
                        placeholder="Apellido">
                </float-label>

                <float-label label="Cargo" class="mb-5">
                    <input 
                        v-model="formRegister.position"
                        required
                        class="input is-warning field-with-one-border" 
                        type="text" 
                        placeholder="Cargo">
                </float-label>

                <button 
                    type="submit" 
                    class="button is-primary button-send-form pl-6 pr-6">
                    Enviar
                </button>
            </form>
       </div>
       
   </div>
</template>

<script>
export default {
    name: 'formRegister',
    data(){
        return {
            formRegister: {
                name: '',
                lastName: '',
                position: ''
            }
        }
    }
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

$color-primary: #00bfd6;
$color-secondary: #ff9300;
$color-text: #212121;

html,
body,
.vfl-label{
    font-family: 'Roboto', sans-serif !important;
}
.container-form-register{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .form-register{
        label{
            color: $color-secondary;
        }
        input{
            border-color: $color-secondary;
            color: $color-text;
        }
        .button-send-form{
            background: $color-primary !important;
            text-transform: uppercase;
            font-weight: bold;
            display: block;
            margin-left: auto;
        }
        ::placeholder { 
            color: $color-secondary;
            opacity: 1;
        }
    }
    .header-form{
        text-align: center;
        padding-bottom: 15px;
        h1{
            color: $color-primary;
        }
    }
    .content-form{
        max-width: 500px;
        width: 55%;
        margin: auto;
    }
    .field-with-one-border,
    .field-with-one-border:focus{
        border-top: none;
        border-right: none;
        border-left: none;
        box-shadow: none;
        border-radius: 0px;
    }
}
</style>

Esta es mi solución, bulma y pug son completamente nuevos para mi.

<template lang="pug">
  #app
    .container
      form
        .logo
          img(alt="estacion", src="./assets/logo.jpg")
        h1.title.is-4 Registro Estacion PLatzi
        .field
          label.has-text-weight-bold.is-size-7 Nombre
          .control
            input.input(value="Platzetiro")
        .field
          label.has-text-weight-bold.is-size-7 Apellido
          .control
            input.input(value="cool de la web")
        .field
          label.has-text-weight-bold.is-size-7 Cargo
          .control
            input.input(value="FullStack JS")
        .column.is-offset-7
          button.button ENVIAR
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data () {
    return {
      msg: 'Hola Vue.js'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss">
@import './sass/main.sass';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
.container{
  position: relative;
  color: $color-letras;
  width: 320px;
  height: 409px;
  font-family: 'Roboto', sans-serif;
  box-shadow: rgba(44, 39, 39, 0.911);
}
.logo{
  text-align: center;
}
.title{
  color: $color-boton;
  font-weight: bold;
  text-align: center;
}
label{
  color: $color-letras-form;
  font-size: 0.75em;
}
.button{
  background: $color-boton;
  color: $color-letras-boton;
}
</style>

No se mucho de Bulma así que a SASS puro:D

<template lang="pug">

section.columns.is-centered
  .column.is-half

    form

      img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")

      h1 Registro estación Platzi

      .field
        label.label Nombre
        input(value="Platzetiro")

      .field
        label.label Apellido
        input(value="Cool de la Web")

      .field
        label.label Cargo
        input(value="FullStack JS")

      .button-container
        button ENVIAR
    

</template>

<script>
export default {
  name: 'App',
  components: { }
}
</script>

<style lang="scss">
/* Es una buena pŕactica importar los estiulos generales desde el componente App.vue */
@import "./scss/main.scss";
form {
  text-align: center;
}
h1 {
  color: #00BFD6;
  font-weight: bold;
  font-size: 2em;
}
.field {
  label {
    color: #ff9300;
    text-align: left;
  }
  input {
    border: none;
    border-bottom: 1px solid #ff9300;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
  }
}
.button-container {
  display: flex;
  justify-content: flex-end;
  button {
    padding: 14px 37px;
    border: none;
    background: #a3ecf3;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 1px 1px 5px #ccc;
  }
}
</style>

<template lang="pug">
.container.columns
  .column.box.is-3.is-offset-5
    .column.is-10.is-offset-1
      img(alt="Vue logo", src="../assets/imagen.jpg")
      h1.title.is-4 Estacion Platzi

    .field
      label.has-text-weight-bold.is-size-7 Nombre
      .control
        input.input(type="text")

    .field
      label.label Apellido
      .control
        input.input(type="text")

    .field
      label.label Nombre
      .control
        input.input(type="text")

    .column.is-offset-8
      button.button ENVIAR

</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {}
}
</script>
<style lang="scss" scoped>
@import "../scss/my-style.scss";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
.container{
  color: #212121;
  font-family: 'Roboto', sans-serif;
}
h1{
  color: #00BFD6 ;
}

 label {
 color: $naranja-platzi;
 font-size:  0.75rem;
}
button{
  background: #00BFD6 ;
  color: white;
}

</style>```

Dejo aquí mi tarea!

App.vue

<template lang="pug">
    #app
      div.container
        img(src="./assets/platzi.jpg")
        h1 {{ titulo }}

        div.group-input
          label(for="") Nombre
          input(name='nombre', type='text', class="text-line", required='', style="border:none")
          hr

        div.group-input
          label(for="") Apellido
          input(name="apellido", type='text', class="text-line", required='', style="border:none")
          hr

        div.group-input
          label(for="") Cargo
          input(name="cargo", type='text', class="text-line", required='', style="border:none")
          hr

        div.group-button
          button(type="submit", class="btn", name="enviar") ENVIAR


</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      titulo: 'Registro estación Platzi',
      nombre: 'Dahiana Benitez'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'

</style>

Main.scss

@import"~bulma/bulma.sass";
//'../../node_modules/bulma/bulma.scss';

h1 label input button{
  font-family: "Roboto";
}
.container{
    width: 350px;
    height: 400px;
    //background: red;
    padding: 10px;
}

h1{
  padding-bottom: 30px;
  font-weight: bold;
  font-size: 30px;
  color: #00BFD6;
}
.group-input{
   padding-bottom: 5px;
}

hr {
  height: 1px;
  width: 330px;
  background-color: #FF9300;
  margin-top: 5px;
}

label{
  color:#FF9300;
  font-size: 10px;
}

input{
  color: black;
  display: block;
  border: 0;
  border-bottom: 1px solid  #FF9300;
  outline: 0;
  font-size: 25px;
}

.btn {
  padding: 10px;
  background: #00BFD6;
  border: 0;
  color: white;
  font-size: 20px;
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 6px;
  font-weight: 600;
  float:right;
}

App.vue

<template lang="pug">
  #app
    .container
      img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
      h1 Registro Estación Platzi
      form
        label Nombre
        input(type="text")
        label Apellido
        input(type="text")
        label Cargo
        input(type="text")
        input(type="submit" id="submit" value="Enviar")
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola mundo'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
</style>

main.scss

@import'../../node_modules/bulma/bulma.sass';

$orange: #FF9300;
$light_blue: #A3ECF3;
$sky_blue: #00BFD6;
$black: #212121;

.container {
  width: 320px;
  height: 409px;
  margin: 30px auto;
  padding: 015px;
  position: relative;
  font-family: "Roboto", sans-serif;
}

img {
  width: 100%;
}

h1 {
  font-size: 20px;
  color: $sky_blue;
  text-align: center;
  font-weight: bold;
  margin: 10px0;
  font-weight: 900
}

label {
  display: block;
  font-size: 10px;
  color: $orange;
  font-weight: bold;
  margin: 5px0;
}

input[type="text"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid $orange;
  color: $black;
  font-size: 1.5em;
}

input[type="submit"] {
  margin: 10px 0 0 145px;
  width: 50%;
  color: #FFF;
  background: $sky_blue;
  font-size: 20px;
  border: none;
  padding: 5px;
}

input:focus {
  outline: none;
}

Mockup.vue

<template lang="pug">
.container
  img(src='../assets/Page 1-d8d869f4-7130-4ae9-9907-2fa809bd136a.png')
  h1 {{ title }}
  Field(v-for="field in fields" v-bind:field="field" v-bind:key="field.id")
  button {{ buttonText }}
</template>
<script>
import Field from '@/components/Field.vue'
export default {
  name: 'Mockup',
  components: {
    Field
  },
  data () {
    return {
      title: 'Registro estación  Platzi',
      fields: [
        {id: 'name', label: 'Nombre'},
        {id: 'last_name', label: 'Apellido'},
        {id: 'position', label: 'Cargo'}
      ],
      buttonText: 'Enviar'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
  @import '../scss/mockup.scss';
</style>

mockup.scss

@import "~bulma/bulma.sass";

$container-w:       320px;
$container-h:       409px;
$color-black:       #212121;
$color-yellow:      #ff9300;
$color-lightblue:   #00bfd6;
$color-whiteblue:   #A3ECF3;

.container{
    width:  $container-w;
    height: $container-h;
    border-width: 1px;
    /*padding: 20px;*/
}
h1{
    color:      $color-lightblue;
    font-size:  25px;
    margin-top: 5%;
}
body{
    justify-content: flex-end;
    display: flex;
    background: gray;
}
html{
    background: white;
}

button{
    width: 40%;
    height: 35px;
    right: 10%;
    position: absolute;
    background-color: $color-lightblue;
    color: $color-whiteblue;
    font-weight: bold;
    font-size: 1em;
    border-radius: 5px;
    box-shadow: #212121;
}

Field.vue

<template lang="pug">
  .field
    label(v-bind:for="field.id") {{ field.label }}
    input(v-bind:id="field.id")
</template>

<script>
export default {
  name: 'Field',
  props: ['field']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" scoped>
  @import '../scss/field.scss';
</style>

field.vue

$color-yellow:      #ff9300;

.field {
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    margin-top: 5%;
    font-weight: bold;
}
label{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 0.9em;
    color: $color-yellow;
    margin-bottom: 3%;
}
input{
    display: block;
    width: 80%;
    border-top:none;
    border-right: none;
    font-size: 1em;
    border-left: none;
    border-bottom-color: $color-yellow;
}

Dejo por aquí el ejercicio y el resultado 😃

<template lang="pug">
  #app
    #content
      img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
      #title
        h3 Registro estación Platzi
      #name-field.field
        label Nombre
        input(type="text")
      #lastname-field.field
        label Apellido
        input(type="text")
      #position-field.field
        label Cargo
        input(type="text")
      button ENVIAR
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
$cyan: #a3ecf3;
$blue: #00BFD6;
$black: #212121;
$orange: #FF9300;
#app {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  color: $black;
}
#title{
  color: $blue;
  font-size: 20px;
}
label{
  display: block;
  color: $orange;
  font-size:.6em;
  font-weight: bold;
}
.field{
  text-align: left;
  margin-bottom: 20px;
}
#content{
  height: 409px;
  width: 320px;
  margin: auto;
  padding: 25px;
  box-sizing: border-box;
}
input{
  width: 100%;
  border: none;
  border-bottom: solid $orange 2px;
}
button{
  background: $blue;
  border: none;
  color: white;
  float: right;
  padding: .6em 2.5em;
  font-weight: bold;
  border-radius: 2px;
  box-shadow: 0px 5px 7px #DDDDDD;
}

</style>

Un saludo!

Hola les comparto el ejercicio

Codigo:

 .container
      img(src="./assets/logo_platzi.jpg")
      h1 {{ msg }}
      form
        label(class="label") Nombre
        input(type="text" id="name")
        label(class="label") Apellido
        input(type="text" id="lastName")
        label(class="label") Cargo
        input(type="text" id="job")
        input(type="submit" value="Enviar" class="button")

Estilos

// External Style dependencies
@import '../../node_modules/bulma/bulma.sass';

// Default colors
$color1: #A3ECF3;
$color2: #00BFD6;
$color3: #212121;
$color4: #FF9300;
$color5: #FFFFFF;
$color6: #BCBCBC;

// Container sizes
$container-width: 380px;
$container-height: 520px;

// Fonts sizes
$h1-font-size: 1.8em;
$input-font-size: 1.5em;
$label-font-size: 0.8em;

body, html {
  width: 100%;
  min-height: 100%;
  background-color: $color6;
}

.container {
  background-color: $color5;
  width: $container-width;
  height: $container-height;
  margin-top: 5em;
  padding: 1.5em;
  border-radius: 0.5em;
  box-shadow: 2px 3px 8px $color3;

  img {
    display: block;
    margin: 0 auto;
  }

  h1 {
    font-size: $h1-font-size;
    font-weight: 700;
    color: #00BFD6;
    text-align: center;
    margin-top: 0.5em;
  }

  label {
    display: block;
    margin-top:1.5em;
    color: $color4;
    font-size: $label-font-size;
  }

  input[type="text"] {
    color: $color3;
    width: 100%;
    border: none;
    border-bottom: 1px solid $color4;
    font-size: $input-font-size;
  }

  input[type="submit"] {
    float: right;
    width: 50%;
    margin-top: 1em;
    color: $color5;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 500;
    background: $color2;
  }

  input:focus {
    outline: none;
  }
}

Ahh caray, me llevo tiempo con mi poco conocimiento de estilos jeje

Les comparto mi práctica.

<template lang="pug">
#formulario
  .container
    img(
		src='https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg', alt='platzi-music' width="310" height="310",
		class="image"
    ) 
    .card
      .card-content
        p.title Registro estación Platzi
        form
         .field
          label.label Nombre
          .control
           input(type="text", class="input")
         .field
          label.label Apellido
          .control
           input(type="text", class="input") 
         .field
          label.label Cargo
          .control
           input(type="text", class="input")
         .field
          button(        	
          	type="submit",
        	class="button is-medium is-pulled-right"
          ) Enviar 

</template>

<script>

export default {
  name: "formulario"
}


</script>

<style lang="scss">
$width: 320px;
$height: 409px;
$color-black: #212121;
$color-yellow: #ff9300;
$color-lightblue: #00bfd6;
$color-whiteblue: #A3ECF3;

#formulario{
	font-family: 'Roboto', sans-serif;
	margin: 15px 0;
} 

.card{
	margin-top: 15px;
	width: $width;
	height: $height;
 }


.title{
  	color: $color-lightblue;
	font-weight: bold;
	font-size: 1.5rem;
}	

.label{
	color: $color-yellow;
}

.input{
	box-shadow: none;
	border:0;
	border-bottom: 1.5px solid $color-yellow;
	border-radius: 0;
	color:$color-black;
	font-weight: 500;

}

.input:focus{
 	-moz-box-shadow:    inset 0 0 10px $color-yellow;
   	-webkit-box-shadow: inset 0 0 10px $color-yellow;
   	box-shadow:         inset 0 0 10px $color-yellow;
}

.button{
	background-color: $color-lightblue;
	color: $color-whiteblue;
	width: 10rem;
	font-weight: bold;
	border: 1px solid $color-lightblue;
}

.button:hover{
	background-color: $color-whiteblue;
	color: $color-lightblue;
}

</style>

Al ver lo que se pedía realizar en el ejercicio, me percaté que su apariencia estaba basada en Material Design, así que decidí usar Vuetify para aplicar el Material Design en su más fiel expresión y este fue el resultado:

Archivo: vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
  theme: {
    primary: '#00bfd6',
    secondary: '#ff9300'
  }
})

Archivo: main.scss

input {
  color: #212121;
}

.main-container {
  width: 320px;
  height: 409px;
}

Archivo: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Ejercicio 01 - SASS y PUG</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but ex01_sasypug doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Archivo: App.vue

<template lang="pug">
v-app
	v-content
		v-container.main-container
			v-layout(row wrap)
				v-flex.xs12
					img(:src="require('./assets/logo.jpg')" alt="Logo")
					h2.primary--text Registro estación Platzi
					v-form
						v-text-field(label="Nombre" type="text" v-model="model.name" color="secondary")
						v-text-field(label="Apellido" type="text" v-model="model.lastname" color="secondary")
						v-text-field(label="Cargo" type="text" v-model="model.position" color="secondary")
				v-flex.xs6.offset-xs6
					v-btn.btn-send(color="primary" block) Enviar
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      model: {
        name: 'Leonardo',
        lastname: 'Campo',
        position: 'Analista de Sistemas Informáticos'
      }
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss'
</style>

Para este ejercicio opte por usa los scss de Bootstrap y omitir el uso Pug (preferencia personal) y el ejercicio quedó de la siguiente manera:

Ejercicio
main.scss

@import './bootstrap/bootstrap.scss';
@import url('https://fonts.googleapis.com/css?family=Roboto');

//Ejercicio 1
body{
    
    #app {
        
        .contenedor{
            @extend .mx-auto;   
            @extend .my-3;
            
            box-shadow: 0px 2px 7px 1px #dcdcdc;
            font-family: 'Roboto', sans-serif !important;
            width: 320px;
            height: 409px;

            .img-responsive{
                @extend .mx-auto;   
                @extend .d-block;
                @extend .py-3;                 
            }
            
            

            h2 {
              color: #00BFD6;
              text-align: center;
              font-size: 25px;
              font-weight: bold;
            }
            
            .formulario{
                margin: 0 25px;
                margin-bottom: 2px;

                label{
                    color: #FF9300;
                    font-size: 10px;
                    font-weight: bold;
                    margin-bottom: 0;
                }

                .form-control {
                  @extend .p-0;
                  color: #212121;
                  border-color: #FF9300;
                  border-top: none;
                  border-left: none;
                  border-right: none;
                  border-radius: 0;
                  height: calc(2.25rem + -5px);
                }

            }
            .boton-flotante {
                @extend .float-right;
                display: block;
                margin-right: 25px;
                margin-top: 5px;

                .btn-primary{
                    font-size: 12px;
                    width: 100px;
                    padding: 8px;
                    background-color: #00BFD6;
                    border-color: #A3ECF3;
                    box-shadow: 0px 2px 7px 1px #dcdcdc;
                }
            }

            
        }
    }
}

App.vue

<template>
  <div id="app">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="contenedor">
            <img src="./assets/ejercicio1/logo.png" class="img-responsive">
            <h2>Registro estación Platzi</h2>

            <div class="formulario">
              <label>Nombre</label>
              <input type="text" class="form-control" value="Platzetiro">
            </div>
            <div class="formulario">
              <label>Apellido</label>
              <input type="text" class="form-control" value="Cool de la Web">
            </div>
            <div class="formulario">
              <label>Cargo</label>
              <input type="text" class="form-control" value="FullStack JS">
            </div>

            <div class="boton-flotante">
              <button class="btn btn-primary">
                ENVIAR
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

con bootstrap

<template lang="pug">
  #app(class="container")
    div(class="row")
      div(class="col")
        img(src="./assets/sass.jpg")
    div(class="row")
      div(class="col text-center")
        h1 {{ titulo }}
    div(class="row mt-2")
      div(class="col")
        form
          div(class="form-row")
            div(class="form-group col")
              input(type="text" id="nombre" class="form-control" placeholder="Nombre")
          div(class="form-row")
            div(class="form-group col")
              input(type="text" class="form-control" placeholder="Apellido")
          div(class="form-row")
            div(class="form-group col")
              input(type="text" class="form-control" placeholder="Cargo")
          div(class="form-row")
            div(class="form-group col-3 offset-8")
              button(type="button" class="btn btn-success btn-lg") ENVIAR

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      titulo: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

App.vue

<template lang="pug">
  #app
    .wrapper
      img(src="./assets/platzi.png")
      h1 Registro estación Platzi
      form(@submit.prevent="submit")
        label(for='nombre') Nombre
        input#nombre(v-model="nombre")
        label(for='apellido') Apellido
        input#apellido(v-model="apellido")
        label(for='cargo') Cargo
        input#cargo(v-model="cargo")
        button(type="submit") ENVIAR
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      nombre: 'Platzerito',
      apellido: 'Cool de la Web',
      cargo: 'FullStack JS'
    }
  },
  methods: {
    submit () {
      alert('enviando...!')
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';
#app {
  width: 320px;
  height: 409px;
  background: $blanco;
  margin: 100px auto;
  border-radius: 2px;
  border: solid 3px $gris;
  .wrapper{
    padding: 20px 28px;

    h1 {
      color: $azul;
      font-size: 25px;
      font-weight: bold;
    }

    label, input {
      display: block;
      width: 100%;
    }

    label {
      color: $naranja;
      font-size: 10px;
    }

    input {
      border: none;
      font-size: 16px;
      border-bottom: 1px solid $naranja;
      margin-bottom: 15px;
      padding: 5px 0px;
    }

    button {
      background: $azul;
      color: $blanco;
      font-size: 12px;
      padding: 8.5px 38px;
      border-radius: 3px;
      border: none;
      float: right;
      font-weight: bold;
      box-shadow: 2px 2px 8px $gris;
    }
  }
}
</style>

main.scss

@import url("https://fonts.googleapis.com/css?family=Roboto");

// Colores
$azul: #00BFD6;
$azulclaro: #A3ECF3;
$naranja: #FF9300;
$blanco: #FFFFFF;
$gris: rgb(232, 232, 232);
$grisclaro: rgb(242, 242, 242);

body {
	background: $grisclaro;
	font-family: 'roboto', sans-serif;
	font-weight: normal;
}

Resltado:
miniFormulario.png

App.vue

<template lang="pug">
  #app
    img(src="./assets/imagen.jpg")
    h3.title Registro Estacion Platzi
    form
        label(for="nombre") Nombre
        input(type="text", id="nombre", value="Platzetiro")
        label(for="apellido") Apellido
        input(type="text", id="apellido", value="Cool de la Web" )
        label(for="cargo") Cargo
        input(type="text", id="cargo", value="FullStack JS")
        button.button ENVIAR
</template>

<style lang="scss">
@import './scss/main.scss';
@import url("https://fonts.googleapis.com/css?family=Roboto");
</style>

Main.css

$color-title: #00bfd6;
$color-label: #ff9300;
$color-button: #00bfd6;
$color-button-text: #ffffff;
$color-input-text: #212121;

body {
  font-family: Roboto;
}

#app {
  width: 320px;
  height: 409px;
}

.title {
  color: $color-title;
  width: 100%;
}

label {
  color: $color-label;
  font-size: 11px;
  display: block;
  margin-top: 10px;
}

input[type="text"] {
  border: 0;
  border-bottom: 1px solid $color-label;
  height: 20px;
  width: 100%;
  color: $color-input-text;
  font-weight: bold;
  padding: 5px;
}

.button {
  float: right;
  margin-top: 15px;
  padding-left: 40px;
  padding-right: 40px;
  color: $color-button-text;
  background-color: $color-button;
  border: none;
  height: 40px;
  border-radius: 4px;
  font-weight: bold;
}

Lo realicé con HTML puro y SASS

<template>
  <div id="app" class="mockup_container">
    <div class="mck_imagen">
      <img src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg">
    </div>
    <div class="mck_tittle">
      <h1>Registro estación platzi</h1>
    </div>
    <div class="mck_form">
      <form>
        <div class="mck_field">
          <label>Nombre</label>
          <span>Platzeiro</span>  
        </div>
        <div class="mck_field">
          <label>Apellido</label>
          <span>Cool de la Web</span>  
        </div>
        <div class="mck_field">
          <label>Cargo</label>
          <span>Fullstack JS</span>  
        </div>
      </form> 
    </div>
    <div class="mck_buttom">
      <a href="">ENVIAR</a>
    </div>
  </div>
</template>

Hoja de estilos

@import '../../node_modules/bulma/bulma.sass';

$colOrange: #FF9300;
$colLblue:  #A3ECF3;
$colSblue:  #00BFD6;
$colBlack:  #212121;

.mockup_container {
  width: 320px;
  height: 409px;
  margin: 30px auto;
  padding: 015px;
  position: relative;
  font-family: "Roboto", sans-serif;
}

img {
  width: 100%;
}

h1 {
  font-size: 1.5em;
  color: $colLblue;
  text-align: center;
  font-weight: bold;
  margin: 10px 0;
  font-weight: 900
}

label {
  display: block;
  font-size: 10px;
  color: $colOrange;
  font-weight: bold;
  margin: 5px0;
}

input[type="text"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid $colOrange;
  color: $black;
  font-size: 1.5em;
}

.mck_imagen,
.mck_tittle,
.mck_form,
.mck_form .mck_field,
.mck_buttom {
  display: inline-block;
  float: left;
  position: relative;
  width: 100%;
}
.mck_buttom {
  height: 50px;
  text-align: right;
}
.mck_field {
  border-bottom: 1px solid $colOrange;
  margin-bottom: 30px; 
}

a {
  width: 50%;
  color: #FFF;
  background: $colSblue;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
  border: none;
  padding: 7px 28px;
  cursor: pointer;
}

Realicé la prueba con todos los elementos de Bulma y solo los modifiqué un poco para que sean como se indica:

<template lang="pug">
  #app
    .columns
      .column
      .column.is-three-fifths
        img(src="./assets/logo.jpg")
        h1 Registro Estación Platzi
        br
        .field
          label.label Nombre
            .control
              input.input(type="text", name='nombre', placeholder="Nombre")
        .field
          label.label Apellidos
            .control
              input.input(type="text", name='apellidos', placeholder="Apellidos")
        .field
          label.label Cargo
            .control
              input.input(type="text", name='cargo', placeholder="Cargo")
        .field.is-grouped.is-grouped-right
          .control
            button.button.is-primary Enviar
      .column
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola Mundo!'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  #app {
    margin-top: 5%;
    margin-left: 5%;
    max-width: 420px;
  }
  h1 {
    color: #A3ECF3;
    font-size: 20px;
    font-weight: bolder;
    text-align: center
  }
  img {
    margin:10px auto;
		display:block;
  }
  .label{
    color:#FF9300;
    font-size: 11px;
  }
  .input{
    border: none;
    border-bottom: 1px solid #FF9300;
    box-shadow: none !important;
    color:#212121;
  }
</style>

reto

App.vue

El archivo App.vue

<template lang="pug">
  #app
    div(class="columns")
        div(class="column")
        div(class="column contenedor")
            figure(class="image")
                img(src="./assets/vueplt.png" class="imgEspecial")
            form(action="" name="formulario")
                p {{msg}}
                div(class="field")
                    label(class="label") Nombre
                    div(class="control")
                    input(class="input" type="text" placeholer="Platzerito")
                div(class="field")
                    label(class="label") Apellido
                    div(class="control")
                        input(class="input" type="text" placeholer="Cool de la web")
                div(class="field")
                    label(class="label") Cargo
                    div(class="control")
                        input(class="input" type="text" placeholer="Full Stack JS")
                div(class="field is-grouped is-grouped-right")
                    p(class="control")
                        a(class="button is-medium is-info" ) ENVIAR
        div(class="column")
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

El archivo main.scss

@import '../../node_modules/bulma/bulma.sass';

@font-face {font-family:"Roboto Bold";
    src: url("assets/DroidSans-Bold.eot?") format("eot"), url("assets/DroidSans-Bold.woff") format("woff"), url("assets/DroidSans-Bold.ttf") format("truetype"), url("assets/DroidSans-Bold.svg#Roboto-Bold") format("svg");
    font-weight:normal;
    font-style:normal;
}

.contenedor{
    font-family:"Roboto Bold";
    padding: 60px 30px;
    width:320px;
    height:409px;
    .imgEspecial{
        margin:0 auto;
        width: 70%;
    }
    p{
        color:#00BFD6;
        font-size:40px;
        font-weight:bolder;
        text-align:center;
    }
    label{
        color:#FF9300;
    }
    input{
        color: #212121;
        border-bottom:2px solid#FF9300;
    }

}

y en la parte de webpack.config.js quedo asi

{
        test: /\.(png|jpg|gif|svg|eot|svg|ttf|woff)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }

Aqui va mi pequeño aporte.

El App.vue es este:

<template lang="pug">
  #app
    .container_general
      .container
        .img
          img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
        
        .mensaje_principal {{ msg }}

        .container_dato
          label(for='nombre') Nombre
          input.text(type='text', id='nombre', name='nombre', placeholder='Benjamín')

        .container_dato  
          label(for='apellido') Apellido
          input.text(type='text', id='apellido', name='apellido', placeholder='Parra')
        
        .container_dato  
          label(for='cargo') Cargo
          input.text(type='text', id='cargo', name='cargo', placeholder='FullStack')

        .enviar
          input(type='button', id='enviar', name='enviar', value='ENVIAR', class='btn') 
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

El main.scss es:

@import "~bulma/bulma.sass";

$celeste_fuerte: #00BFD6;
$labels: #FF9300;

.container_general{
	text-align: center;
	border: red;
}


.container{
	margin-top: 20px;
	text-align: center;
	width: 320px;
	height: 409px;
	border: solid 1px #dcd7d7;
}

.mensaje_principal{
	text-align: center;
	color: $celeste_fuerte;
	font-size: 20px;
	font-family: "Roboto", "Verdana";
	font-weight: bold;
}

.enviar{
	text-align: right;
}

.btn{
	margin-top: 15px;
	background: $celeste_fuerte;	
	width: 100px;
	height:30px;
	color: white;
	font-weight: bold;
	font-size:13px;
	border-radius: 3px;
	margin-right: 27px;
}


img{
	margin-top:20px;
	text-align: center;
	height: auto;
	width: 260px;
}

label{
	text-align: left;
	margin-left: 29px;
	margin-top: 20px;
	font-size: 10px;
	display: block;
	font-weight: bold;
	color: $labels;
}


.text{	
	font-size: 15px;
	font-family: "Roboto", "Verdana";
	border: none;
	width: 260px;
	border-bottom: 1px solid #FF9300;
	size: 20px;
}```

y el resultado final : 
![](https://i.ibb.co/LJf5WTF/Captura-de-pantalla-2019-03-20-a-las-12-48-46.png)

App.vue

<template lang="pug">
  #app
    .columns
      #platzi-form.column.is-one-third.is-offset-4
        center
          img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
          h1.title Registro estación Platzi
        form#myform
          .field
            label.label Nombre
            .control
              input.input(type="text")
          .field
            label.label Apellido
            .control
              input.input(type="text")
          .field
            label.label Cargo
            .control
              input.input(type="text")
        .columns
          .column.is-half.is-offset-6
            button.button Enviar
</template>

main.scss

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

$roboto-font: 'Roboto', sans-serif;

html {
    background: #F3F3F6;
}

#platzi-form {
    font-family: $roboto-font;
    margin-top: 2em;
    padding: 2em;
    background: #ffffff;
    box-shadow: 0px 1px 2px 2px #ccc;
}

#platzi-form .title {
    color: #02BFD8;
}

#platzi-form .field {
    margin-top: 1em;
}

#platzi-form .label {
    color: #FF9300;
    font-size: 0.75em;
    font-weight: bold;
}

#platzi-form .input {
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-radius: none;
    box-shadow: none;
    border-bottom: 1px solid #FF9300;
}

#platzi-form .button {
    width: 100%;
    color: #ffffff;
    margin-top: 1em;
    background: #00bfd6;
}

Captura:

Ejercicio Sass y Pug - Joshua Mora

Template Vue

<template lang="pug">
  #app
    .container
      img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
      h1 {{ msg }}

      form(v-on:submit.prevent="submit")
        label(for="name") Nombre
        input(type="text" id="name")
        label(for="lastname") Apellido
        input(type="text" id="lastname")
        label(for="rol") Cargo
        input(type="text" id="rol")
        button(type="submit") ENVIAR
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  },
  methods: {
    submit () {
      console.log('se ejecuta submit')
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.css'
</style>

main.css

@import '~/node_modules/bulma/bulma.sass';
@import 'https://fonts.googleapis.com/css?family=Roboto:400,700';

#app {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 auto;

    font-family: Roboto;
}

.container  {
    width: 320px;
    height: 409px;
    position: relative;
    margin: 25% auto;
}

.container > img {
    width: 100%;
    height: auto;

    position: relative;
}

.container > h1 {
    color: #A3ECF3;

    font-size: 1.85em;
    font-weight: bold;

    text-align: center;
}

.container > form label {
    display: block;
    color: #FF9300;
}

.container > form input {
    width: 100%;
    height: 32px;

    color: #212121;
    background: transparent;

    margin-bottom: 2em;
    border: 1px solid #fff;
    border-bottom-color: #FF9300;
}

.container > form button {
    float: right;

    color: #fff;
    padding: 10px 30px;
    background-color: #00BFD6;

    border: 1px solid;

    font-weight: bold;
    font-size: 1em;
}

<template lang=“pug”>
#app(class=“tap”)
img(src=“https://static.platzi.com/media/user_upload/Page 1-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg” class=“img”)
h1 {{ title }}
.box-elem
label(for=“nombre” class=“box-label”) Nombre
input(id=“nombre” class=“box-input”)
.box-elem
label(for=“apellido” class=“box-label”) Apellido
input(id=“apellido” class=“box-input”)
.box-elem
label(for=“puesto” class=“box-label”) Puesto
input(id=“puesto” class=“box-input”)
.box-elem
button(class=“box-submit”) Enviar
.box-by
h5 By LeirAGS Develop
</template>

<script>
export default {
name: ‘app’,
data () {
return {
title: ‘Registro estación Platzi’
}
}
}
</script>

<style lang=“scss”>
@import ‘./scss/main.scss’;

// Variables
$ags-w: 320px;
$ags-h: 409px;
$ags-bg: #212121;
$ags-tx: #ff9300;
$ags-h1: #00bfd6;
$ags-bt: #00bfd6;

.tap {
width: $ags-w;
heigth: $ags-h;
font-family: ‘Roboto’, sans-serif;
border: 1px solid blue;
.img{
height: 64px;
}
.box-elem{
width: 100%;
}
.box-label, .box-input{
width: 100%;
display: block;
}
.box-label{
font-size: 9px;
color: $ags-tx;
}
.box-input{
font-size: 14px;
border: 0;
border-bottom: 1px solid $ags-tx;
margin-bottom: 0.2em;
padding: 6px 0.5em;
}
.box-submit{
width: 40%;
float: right;
background-color: $ags-bt;
color: white;
}
}

</style>

Yo preferi encapsularlo en un solo componente dado que es el approach que estamos trantando de seguir.

<template lang='pug'>
  #app
    img.logo(src='./assets/satellite.jpg')
    div.form-container
      h1 {{ msg }}
      form
        label(for='name') Name
        input.form-input(type='text' id='name' name='name')
        label(for='lastname') Last Name
        input.form-input(type='text' id='lastname' name='lastname')
        label(for='role') Role
        input.form-input(type='text' id='role' name='role')
        input.form-submit(type='submit')
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>
<style lang='scss'>
@import './scss/main.scss';

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  max-height: 409px;
}

h1 {
  margin: 0 auto;
  font-weight: bold;
  color: #00BFD6;
}

.logo {
  margin: 10px 0;
}

.form-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 55px;
}

form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  label {
    font-size: 12px;
    font-weight: bold;
    color: #ff9300;
  }

  .form-input {
    margin: 5px 0 10px;
    border:1px solid #ff9300;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 14px;
  }

  .form-submit {
    margin: 20px 0;
    background: #00bfd6;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    height: 40px;
    width: 120px;
    align-self: flex-end;
  }
}
</style>

<template>
  <div id="app">
    <div class="container">
       <img src="./assets/satelite.webp" alt="satelite">
       <h1>{{ title }}</h1>
       <form>
          <label for="name">Nombre</label>
          <input type="text" id="name" value="Platzetiro">

          <label for="lastname">Apellido</label>
          <input type="text" id="lastname" value="Cool de la Web">

          <label for="job">Cargo</label>
          <input type="text" id="job" value="Fullstack JS">

          <button type="submit">Enviar</button>
       </form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
     return {
        title: 'Registro estación platzi'
     }
  }
}
</script>

<style lang="scss">
   @import './scss/main.scss'

</style>


////////  the sass  /////////


@import '../../node_modules/bulma/bulma.sass';

$title-color: #00bfd6;
$font-color: #212121;
$label-color: #ff9300;

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

.container {
   width: 320px;
   height: 409px;
   position: relative;
   img {
      margin-left: 20px;
   }
   h1 {
      color: $title-color;
      font-size: 25px;
      font-weight: bold;
      padding-top: 15px;
      text-align: center;
   }

   form {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
   }
   label, input {
      display: block;
   }
   
   label {
      font-size: 12px;
      color: $label-color;
      font-weight: bold;
   }
   
   input {
      margin-bottom: 10px;
      border-bottom: 1px solid $label-color;
      border-top: none;
      border-left: none;
      border-right: none;
   }
   button {
      margin-top: 10px;
      padding: 10px 30px;
      background-color: #00bfd6;
      color: #fff;
      border: none;
      width: 30%;
      align-self: flex-end;
   }
}

lo hice en un componente separado, use materialize css y no me gusta usar pug

<template>
  <div class="container box">
    <div class="signIn-box">
      <div class="img-box">
        <img src="../assets/login/logo.jpg" class="" alt="">
      </div>
      <h1 class="primary-text">Registro estación Platzi</h1>
      <form action="">
        <div class="input-field">
          <input id="nombre" type="text" class="validate">
          <label for="nombre">Nombre</label>
        </div>
        <div class="input-field">
          <input id="apellido" type="text" class="validate">
          <label for="apellido">Apellido</label>
        </div>
        <div class="input-field">
          <input id="cargo" type="text" class="validate">
          <label for="cargo">Cargo</label>
        </div>
      </form>
      <div class="btn-box">
        <button class="waves-effect waves-light primary btn">Enviar</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
h1 {
  font-weight: bold;
  font-size: 23px;
  margin-top: 16px;
  align-self: flex-start;
}
form {
  width: 100%;
}
.primary {
  background-color: #01BFD7;
  &-text {
    color: #00bfd6;
  }
}
.box {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.signIn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 320px;
  padding: 16px 32px;
}
.img-box {
  width: 262px;
}
.btn-box {
  align-self: flex-end;
}
.input-field label {
  color: #ff9300;
}
.input-field input[type=text]:focus + label {
  color: #ff9300;
}
.input-field input[type=text]:focus,
input.valid[type=text] {
  border-bottom: 1px solid #ff9300;
  box-shadow: 0 1px 0 0 #ff9300;
}
</style>

app.vue

<template lang="pug">
  #app
    img(src="./assets/form.png")
    h1(class="titulo") {{ msg }}

    div(id="idform")
      form
        label(for="nombre" class="titform") Nombre
        p
        input(id="nombre" type="text" class="cajas" :value="name")
        p
        label(for="apellido" class="titform") Apellido
        p
        input(id="apellido" type="text" class="cajas" :value="apellido")
        p
        label(for="cargo" class="titform") Cargo
        p
        input(id="cargo" type="text" class="cajas" :value="cargo")
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi',
      name: 'Platzetiro',
      apellido: 'Cool de la web',
      cargo: 'FullStack JS.'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

main.scss
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900');

body {
	text-align: center;	
	font-family: 'Roboto';
}
.idform {
	width: 200px;
	max-width: 200px;
	display: block;
	border-style: solid;
	background-color: #FFFFFF;	
}
.titulo {
	
	font-size: 24px;
	font-weight: 700;
	color: #00BFD6;	 
}
.titform{
	
	font-size: 14px;
	font-weight: bold;
	font-weight: 120;
	color: #FF9300;
	text-align: left; 
}
.cajas{
	font-size: 16px;
	display: inline-block;
	border: none;
	border-bottom: 1px solid #FF9300;
	width: 100%;
}

Mi solucion 😄

<template lang="pug">
  #app
    section(class="section")
      div(class="container")
        img(src="./assets/logo.png")
        h1(class="title")
          b Registro de estacion Platzi
        form
          .field
            label(class="label") Nombre
            .control
              input(class="input is-complete" type="text" v-model="register.name")
          .field
            label(class="label") Apellido
            .control
              input(class="input is-complete" type="text" v-model="register.lastname")
          .field
            label(class="label") Cargo
            .control
              input(class="input is-complete" type="text" v-model="register.position")
          div(class="field is-grouped is-grouped-right")
            p(class="control")
              a(class="button is-primary is-large") Enviar
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      register: {
        name: 'Alexander',
        lastname: 'Buendia',
        position: 'Full'
      }
    }
  }
}
</script>
<style lang="scss">
  @import './scss/main.scss';
  $color-first:#a3ecf3;
  $color-secondary:#00BFD6;
  $color-third:#212121;
  $color-fourth:#dd9300;

  .title{
    color:$color-secondary;
    bold:700;
  }
  .is-complete{
    border-color: white;
    border-bottom:2px solid $color-fourth;
  }
  .label{
    color:$color-fourth;
  }
  .container{
    display:flex;
    flex-flow:column wrap;
    align-content:center;
  }

</style>

Mi código 😄

esta es la realización del ejercicio

<template lang="pug">
  #app
    .columns
      .column
        img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
        h1 {{ msg }}
        .field
          label.label Nombre
            .control
            input.input(type="text", name="nombre", placeholder="Nombre")
        .field
          label.label Apellido
            .control
            input.input(type="text", name="apellido", placeholder="Apellido")
        .field
          label.label Cargo
            .control
            input.input(type="text", name="cargo", placeholder="Cargo")
        .field.is-grouped.is-grouped-right
          .control
            button.button ENVIAR
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  #app {
    margin: 5%;
  }
  h1 {
    color: #00BFD6;
    font-weight: bold;
    font-size: 27px;
    text-align: center;
    font-family: roboto;
    margin-bottom: 5%;
  }
  .columns {
    width: 320px;
    height: 409px;
    align-content: center;
  }
  img {
    width: 100%;
  }
  .label {
    color: #ff9300;
    font-size: 14px;
    font-weight: bold;
    font-family: roboto;
  }
  .input{
    border: none;
    border-radius: 0%;
    border-bottom: 1px solid #FF9300;
    box-shadow: none !important;
    color:#212121;
  }
  .button {
    background: #00BFD6;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    font-family: roboto;
    border-radius: 3%;
    width: 120px;
  }
</style>

Adjunto el ejercicio usando Bulma, SCSS Y PUG

<template lang="pug">
    .container.register
        figure.image
            img(:src='sateliteImg')
        .title.is-4
            | Registro estación Platzi

        .columns
            .column.register__fields
                .field
                    label.label Nombre
                    .control
                        input.input(type="text", name="name", placeholder="Nombre")
                .field
                    label.label Apellidos
                    .control
                        input.input(type="text", name="lastname", placeholder="Apellidos")
                .field
                    label.label Cargo
                    .control
                        input.input(type="text", name="job", placeholder="Cargo")
        p.control.register__cta
            a.button.is-medium
                | Enviar

</template>

<script>
    import sateliteImg from '../assets/satelite.png';
    export default {
        name: 'register',
        data(){
            return{
                sateliteImg : sateliteImg,
            }
        }
    }
</script >

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');


    $main-color: #00bfd6;
    $font-color: #212121;
    $secondary-color: #a3ecf3;
    $input-color: #ff9300;
    $container-width: 320px;
    $container-height: 409px;

    .register{
        font-family: Roboto ,'sans-serif';
        max-width: $container-width;
        max-height: $container-height;
        margin:auto;
        top: 0;
        bottom:0;
        &__fields{
            color: $input-color;
            .field{
                border: none;
                .control{
                    .input{
                        border:none;
                        border-bottom: 1px solid $input-color;
                        border-radius: 0;
                        box-shadow: none;
                        color: $font-color;
                        font-weight: 400;
                        font-size: 1.3rem;


                    }
                }

            }
            .label{
                text-align: left;
                font-size: 10px;
                color: $input-color;
            }

        }
        .title{
            margin-top: 10px;
            margin-bottom: 10px;
            color: $main-color;

            text-align: left;
            font-weight: 800;
        }
        &__cta{
            display: flex;
            justify-content: flex-end;

            .button{
                background: $main-color;
                color: #fff;
                width: $container-width / 2;
                text-transform: uppercase;
            }



        }
    }
</style>

Me ha tomado casi dos semenas hacerlo por pereza, pero al final lo hice en 15 min.

<template lang="pug">
  #app
    div(class="container is-widescreen")
      div(class="columns is-centered")
        div(class="column is-5 box mt-1")
          .column.is-12
            img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg", alt="Platzi vue profesional" class="image")
          .column.is-12
            h1(class="title has-text-primary text-center") Registro estación Platzi
          .column.is-12
            input(type="text" class="input" placeholder="Nombre" v-model="registerModel.name")
          .column.is-12
            input(type="text" class="input" placeholder="Apellido" v-model="registerModel.lastname")
          .column.is-12
            input(type="text" class="input" placeholder="Cargo" v-model="registerModel.position")
          .column.is-12.text-right
            button(class="button is-primary" type="btn") Enviar
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      registerModel: {
        name: null,
        lastname: null,
        position: null
      }
    }
  }
}
</script>

<style lang="sass">
@import '../node_modules/bulma/css/bulma.min.css'

*
  font-family: 'Roboto', sans-serif

html
  background-color: rgba(0, 0, 0, .05)

.mt-1
  margin-top: 20px !important

.image
  width: 100%

.text-center
  text-align: center

.text-left
  text-align: left

.text-right
  text-align: right
</style>

<template lang="pug">
  #app
    img(src="./assets/logo.jpg")
    h1 {{msg}}
    .row
      div(class="col-sm-12 d-flex justify-content-center")
          form(class="m-center")
            input(type="text" class="form-control mt-2" name="name" placeholder="Name")
            input(type="text" class="form-control mt-2" name="sname" placeholder="Surname")
            input(type="text" class="form-control mt-2" name="occupation" placeholder="Occupation")
            input(type="submit" class="btn mt-2 d-flex ml-auto" name="submit" value="Send")
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Log On Platzi Station'
    }
  }
}
</script>

<style lang="scss">
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

$primary: #00BFD6;
$secondary: #FF9300;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  color: $primary;
}

.form-control{
  min-width: 0;
  width: 24rem !important;
}

.form-control:focus {
  border-color: $secondary !important;
  box-shadow: 0 0 10px $secondary !important;
}

.btn {
  background-color: $primary;
  color: white;
}
</style>

<template lang='pug'>
  #div
    .container
      .columns.is-centered
        .column.is-4
          .card.card-layout
            .card-image
              figure.image.logo-card
                img(src="@/assets/logo.webp")
            .card-content
              h1.title.is-5 Registro estación Platzi
              form
                .field
                  input.input(placeholder='Name')
                .field
                  input.input(placeholder='Surname')
                .field
                  input.input(placeholder='Occupation')
                .field
                  button.button.is-fullwidth.is-primary(type='submit') Send
</template>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import "@/scss/main.scss";

* {
  font-family: 'Roboto', sans-serif;
}

.card-layout {
  margin-top: 4rem;
  .logo-card {
    padding: 2rem;
  }
}
</style>

Buenas tardes

Brindo mi aporte de código y la UI

![](

<template lang="pug">
    div(class="columns is-centered")
        div(class="column is-half is-offset-one-quarter")
            #register.card
                .card-image
                    figure.image
                        img(src="../assets/img/demo.png", alt="image-demo")
                    .is-centered
                        h1
                            strong {{ title }}
                .card-content
                    form(action="")
                        .field
                            .control
                                input(placeholder="Nombre", type="text", class="input color-input", v-model="registrar.name" )
                        .field
                            .control
                                input(placeholder="Apellido", type="text", class="input color-input", v-model="registrar.lastname" )
                        .field
                            .control
                                input(placeholder="Cargo", type="text", class="input color-input", v-model="registrar.occupation")
                        .align-right
                            button(class="button") Enviar
    
</template>


<script>
    export default {
        name: 'register',
        data() {
            return {
                title: 'Registro estación Demo',
                registrar: {
                    name: 'Miguel Alejandro',
                    lastname: 'Castillo',
                    occupation: 'Desarrollador Junior'
                }
            }
        }
    }
</script>

<style lang="scss">
    @import '../scss/main.scss';
    
    /* ----- Variables ----- */
    $color-first:#00BFD6;
    $color-secondary:#A3ECF3;
    $color-fonts:#212121;
    $color-border:#FF9300;
    $container-width: 320px;
    $container-height: 409px;


    #register{
        *{
            font-family: 'Roboto', sans-serif;
        }
        width: $container-width;
        height: $container-height;
            figure{
                padding: 20px 30px;
            }
            h1 {
                font-size: 1.3vw;
                strong{
                    color: $color-first;
                }
            }
            .color-input.input{
                border-color: $color-border;
                box-shadow: none;
            }
            input{
                color: $color-fonts;
            }
            .align-right{
                text-align: right;
                .button{
                    background-color: $color-first;
                    color: white;
                    padding: 5px 50px;
                }
            }
    }

</style>

Codigo:

Ui

Este es mi codigo. No esta optimizado. Esto es nuevo para mi siempre he sido back de hueso colorado no me habia querido meter en front pero hoy en dia es muy necesario conocer los dos puntos de vista si uno quiere comprender al 100% el desarrollo de un producto. Para mi en verdad es un reto este tipo de cosas. Y prometo mejorarlas.

<template lang="pug">
  #app
    img(src="./assets/logo.png")
    h1 {{ msg }}
    .columns.is-multiline.custom-isaac
      .column.is-half.is-offset-one-quarter
        .box
          article.media
            .media-left
              figure
                img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
                figcaption
                  h1.custom-isaac-title Registro estación Platzi
            .media-content
              .content
                form
                  .field
                    label.custom-isaac-label Name
                    .control
                      input.input(type='text', placeholder='Name' :value='name')
                  .field
                    label.custom-isaac-label Apellido
                    .control
                      input.input(type='text', placeholder='Apellido' :value='apellido')
                  .field
                    label.custom-isaac-label Cargo
                    .control
                      input.input(type='text', placeholder='Cargo' :value='cargo')
                  .field.is-grouped.is-grouped-right
                    .control
                      button.button.custom-isaac-button Enviar

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello Vue.js App',
      name: 'Platzeiro',
      apellido: 'Cool de la web',
      cargo: 'FullStack JS'
    }
  }
}
</script>
<style  lang="scss">
  @import './scss/main.scss'
</style>

<style lang="scss">
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

 .custom-isaac {
    color: #212121 !important;
    font-family: 'Roboto';
    font-weight: bold;
 }

 .custom-isaac-title {
    color: #00BFD6;
 }

 .custom-isaac-label {
    color: #FF9300;
    font-size: 12px;
 }

 .custom-isaac-button {
  background-color: #A3ECF3;
  color: #FFF !important;
  font-weight: bolder;
  text-transform: uppercase;
  padding: 18px 50px;
 }

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Codigo:

<template lang="pug">
  #app
    .container
      .row
        .col.s12
          #img-container.center-align
            img(src="./assets/platzi-station.jpg")
          h3.center-align.light-blue-text {{ msg }}
          .row
            .input-field.col.s6.offset-s3
              input#nombre.validate(type="text")
              label.active.amber-text.text-darken-3(for="nombre") Nombre
            .input-field.col.s6.offset-s3
              input#apellido.validate(type="text")
              label.active.amber-text.text-darken-3(for="apellido") Apellido
            .input-field.col.s6.offset-s3
              input#cargo.validate(type="text")
              label.active.amber-text.text-darken-3(for="cargo") Cargo
            .col.s6.offset-s3
              button.btn.btn-large.waves-effect.waves-light.light-blue(type="submit" name="action") Enviar
                i.material-icons.right
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Registro estación Platzi'
      }
    }
  }
</script>

<style lang="scss">
@import './scss/main.scss';

#img-container{
  margin-top: 1em;
}
h3, label, button{
  font-weight: bold;
}

</style>

UI:

![](

<template lang="pug">
  #app
    .container.is-fluid
      .columns
        .column#div_formulario.is-half.is-offset-one-quarter.card
          #img-container.is-offset-one-quarter
            img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")        
          .row
            .control
              label.active.amber-text.text-darken-3(for="nombre") Nombre
              input#nombre.input(type="text" autocomplete="off")
              
            .control
              label.active.amber-text.text-darken-3(for="apellido") Apellido
              input#apellido.input(type="text" autocomplete="off")
              
            .control
              label.active.amber-text.text-darken-3(for="cargo") Cargo
              input#cargo.input(type="text" autocomplete="off")              
            .control.has-text-right
              button.button(type="submit" name="action") Enviar
                i.material-icons.right
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola Vue!'
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';
.notification{
  background: transparent
}
.input:focus{
  border-color: #ff9300
}
@media screen and (min-width: 991px) {
  #div_formulario{
    max-width: 320px;
    margin: 0 auto;
  } 
  .card{
    padding: 20px;
    margin-top: 40px
  }
}
@media screen and (max-width: 990px){
  .container{
        max-width: 96%;
  }
}
.button{
      background-color: #00BFD6;
    border-color: #00BFD6;
    color: white;
    font-weight: bold;
}
#img-container{
  text-align: center;
}
.control{
  margin-top: 10px
}
</style>

@import '../../node_modules/bulma/bulma.sass';
$azul_oscuro: #00BFD6;
$naranja: #FF9300;
$gris: #212121;
$bold: 700;
#app{
    width: 320px;
    height: 409px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    .titulo{
        color: $azul_oscuro;
        font-size: 25px;
        font-weight: $bold;
    }
    .formulario{
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        label{
            font-size: 12px;
            font-weight: $bold;
            color: $naranja;
            margin-top: 10px;
        }
        input{
           border: 0;
           border-bottom: 2px solid $naranja; 
           color: $gris;
        }
        input:focus{
            outline:none !important;
            outline-width: 0 !important;
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
        }
        .btn{
            cursor: pointer;
            width: 100px;
            height: 40px;
            align-self: flex-end;
            margin-top: 10px;
            border: 0;
            background-color: $azul_oscuro;
            color: white;
            font-weight: $bold;
            border-radius: 10px;
            font-size: 18px;
        }
    }
}```

<template lang="pug">
  #app
    img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg" class="img")
    h1 {{ msg='Registro estación Platzi' }}
    #peor
      div.form-group
          label(for='name' class="label") Nombre:
          input#name.form-control(type='text', placeholder='Platzetiro' name='name')
      div.form-group
          label(for='name' class="label") Apellido:
          input#name.form-control(type='text', placeholder='Cool de la Web' name='name')
      div.form-group
          label(for='name' class="label") Cargo:
          input#name.form-control(type='text', placeholder='FullStack JS' name='name')
      button(class="send") ENVIAR

</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}

#peor {
  display: block;
  margin-left: 620px;
  margin-right: auto;
  width: 360px;
  text-align: left;
  color: #e7a545;
}

h1 {
  color: #00BFD6;
}

.img {
  width: 320px;
}

.label {
  font-size: 14px;
}

input {
  width: 350px;
  border: none;
  border-bottom: 2px solid #e7a545;
  font-size: 20px;
  padding: 5px;
}

.send {
  margin-top: 2vh;
  padding: 8px;
  float: right;
  font-size: 18px;
  width: 149px;
  background-color: #00BFD6;
  color: aliceblue;
  font-weight: bold;
}

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
</style>

<template>
  <section class="registro">
    <img src="../assets/logo.jpg" alt="logo" class="registro-img" />
    <h1>Registro estación Platzi</h1>
    <div class="inputs">
      <h6 class="input-context">Nombre</h6>
      <input class="input" type="text" />
      <h6 class="input-context">Apellido</h6>
      <input class="input" type="text" />
      <h6 class="input-context">Cargo</h6>
      <input class="input cargo" type="text" />
    </div>
    <button class="enviar" type="submit">ENVIAR</button>
  </section>
</template>

<script>
export default {
  name: 'pxMockups1',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scope>
.registro {
  width: 320px;
  height: 409px;
  display: flex;
  margin: 10px;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 0 10px 0 #d7d7d7;
  img {
    margin-top: 10px;
    width: 260px;
    align-self: center;
  }
  h1 {
    color: #00bfd6;
    margin: 15px 0 5px 15px;
  }
  .inputs {
    width: 100%;
    padding: 0 15px;
    .input {
      width: 90%;
      background: white;
      border-style: none;
      border-bottom: 1px solid #e98800;
    }
  }
  .input-context {
    margin: 0;
    padding-top: 5px;
    color: #e98800;
  }
  .cargo {
    margin-bottom: 10px;
  }
  button {
    font-weight: bold;
    font-size: 16px;
    width: 150px;
    height: 40px;
    margin-right: 15px;
    align-self: flex-end;
    color: white;
    background: #00bfd6;
    border: 1px solid #00dfd6;
    box-shadow: 0 2px 10px 0 #cccad9;
  }
}
</style>

Actualmente la versión de mi vue-cli es el 4.2.3

al utilizar vue init para crear este proyecto posteriormente me sale algunos errores cuando voy incorporando algunas dependencias. Habrá alguna actualización del curso?

Aquí está mi código 🚀 =>

<code>
// ./App.vue
<template lang="pug">
  #app.container.box.wrap
    img(src="https://static.platzi.com/media/user_upload/Page%201-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg")
    h1.title {{ msg }}
    .field
      label.label(for='name') Nombre
      input#name.control(type='text', name='name', value='Plazitero') 
    .field
      label.label(for='lastname') Apellido
      input#lastname.control(type='text' name='lastname' value='Cool de la Web')
    .field
      label.label(for='position') Cargo
      input#position.control(type='text' name='position' value='FullStack JS')
    .buttons.has-addons.is-right
      button.button.is-right(type='submit') ENVIAR
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

// ./scss/main.scss
@charset "utf-8";
@import '../../node_modules/bulma/bulma.sass';
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

$font: 'Roboto', sans-serif;
$color-first: #A3ECF3;
$color-second: #00BFD6;
$color-third: #212121;
$color-fourth: #FF9300;
$width: 320px;
$height: 409px;

html{
    background-color: #dddddd;
}

.wrap {
    width: $width;
    height: $height;
    font-family: $font;
    border: 0px solid black;
    border-radius: 3px;
}

.title{
    color: $color-second;
    font-size: 1.6rem;    
}

.label{
    font-size: 0.6em;
    color: $color-fourth;
}

input{
    border-left-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-color: $color-fourth;
    box-sizing: border-box;
    width: 100%;
}

.button{
    font-weight: bold;
    background-color: $color-second;
    color: white;
}

<template lang="pug">
  #App.container.wrap
   img(src="./assets/EstacionPlatzi.jpg")
   h1#titulo {{ msg }}

   .field#estacionEspacial
   .label Nombre
   .control
   input.input(type="text" placeholder="Nombre" value='Plazitero')
   .label Apellido
   .control
   input.input(type="text" placeholder="Apellido" value='Cool de la Web')
   .label Cargo
   .control
   input.input(type="text" placeholder="Cargo" value='FullStack JS')
   .control
   button.button.is-large.is-right Enviar


</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'Registro estación Platzi'
    }
}
}
</script>

<style>
@import './scss/main.scss'
</style>
.wrap {
  font-family: roboto roboto-bold;
  width: 320px;
  height: 409px;
  
  font-size: large;

}

#titulo {
  color: #00BFD6;
}

.label {
  color: #FF9300;


}

.button {
  background-color: #00BFD6;
  font-size: 35px;
  float: right;
}
.input {
  border-bottom: 2px solid #FF9300;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

<template lang="pug">
  #app
    .section
      .container
        .column.is-6.is-offset-3
          .card
            .card-image.has-text-centered
              img( src="./assets/logo.jpg" )
            .card-content
              h1.title.has-text-weight-bold Registro estación Platzi
              form
                label Nombre
                input.input
                label Apellido
                input.input
                label Cargo
                input.input

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title_form: 'Registro estación Platzi'
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';

</style>

Reto terminado en codeSandbox

.

Hola a todos!!!

Me encanta el potencial de vue…
Aunque me falta pulir pug y scss 😉

<template lang="pug">
  #app
    form.form(@submit="onSubmit")
      .form__img
        img(src="./assets/t.jpg", alt="platzi")
      h1 Registro estación Platzi
      .form__item
        label(for="firstname") Nombre
        input(id="firstname",v-model="firstname")
      .form__item
        label(for="lastname") Apellido
        input(id="lastname",v-model="lastname")
      .form__item
        label(for="ocupation") Cargo
        input(id="ocupation",v-model="ocupation")
      .form__button
        button(type="submit") ENVIAR
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      firstname: 'Platzeiro',
      lastname: 'Cool de la Web',
      ocupation: 'Fullstack JS',
    };
  },
  methods: {
    onSubmit(e) {
      console.log('submit ', e.target);
    },
  },
};
</script>

<style lang="scss">
@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(/fonts/Roboto-Regular.ttf) format('truetype');
}
:root {
  --primary: #a3ecf3;
  --secondary: #00bfd6;
  --terciary: #ff9300;
  --dark: #212121;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: var(--dark);
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.form {
  width: 320px;
  height: 409px;
  padding: 0.5rem 2rem;
  text-align: center;
  background: transparent;
  &__item {
    position: relative;
    width: 100%;
    height: 3rem;
    margin: 0 auto 0.5rem;
    input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 1rem 0 0.3rem;
      font-size: 1rem;
      border: none;
      border-bottom: 1px solid var(--terciary);
      background: transparent;
    }
    label {
      position: absolute;
      top: 4px;
      left: 0;
      font-size: 0.6rem;
      color: var(--terciary);
    }
  }
  &__img {
    width: 100%;
    img {
      max-width: 100%;
    }
  }
  h1 {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--secondary);
    margin: 0.7rem 0;
  }
  &__button {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    button {
      font-size: 0.85rem;
      font-weight: 700;
      margin-top: 10px;
      padding: 0.65rem 2rem;
      border: none;
      border-radius: 2px;
      background: var(--secondary);
      color: white;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
    }
  }
}
</style>

![](

<template>
  <div id="app">
    <div
      class="is-flex is-flex-direction-column is-justify-content-center is-align-items-center"
    >
      <header class="text-center">
        <img src="@/assets/imgreto.jpg" alt="logo" />
      </header>
      <section>
        <div><h1 class="is-size-2"><b>Registro estación Platzi</b></h1></div>
        <div
          class="is-flex is-flex-direction-column is-justify-content-start is-align-items-start campos"
        >
          <div class="mt-2 is-full ">
            <label>Nombre</label>
            <br />
            <input type="text" />
          </div>
          <div class="mt-2">
            <label>Apellido</label>
            <br />
            <input type="text" />
          </div>
          <div class="mt-2">
            <label>Cargo</label>
            <br />
            <input type="text" />
          </div>
          <div class="mt-2 has-text-right">
            <button class="button is-info">Enviar</button>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import "@/scss/main.scss";
export default {
  name: "App",
  components: {},
  data() {
    return {
      msg: "Hola Vue",
    };
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  img {
    width: 100%;
  }
  .content {
    border: 1px solid black;
    width: 320vw;
  }
  h1 {
    color: #00bfd6;
  }
}
.campos {
  width: 100%;
  div {
    width: 100%;
    label {
      color: #ff9300;
    }
    input {
      width: 100%;
      padding: 0em 0;
      border: 0px;
      border-bottom: 2px solid #ff9300;
      font-size: 1.5em;
      color: rgba(0, 0, 0, 0.685);
    }
  }
}
button {
  background: #00bfd6 !important;
  width: 150px;
  font-weight: bold;
}
</style>

La verdad es que no tengo much experiencias con esas, así es que básicamente lo hice con puro css y html, aquí el resultado y mi código

<template>
    <div id="login" class="login">
        <img src="/dist/platzi-station.png?a5524eabd9a55238ef0e3e008d69712d">
        <h1>Registro estación platzi</h1>
        <label for="Name">Nombre</label>
        <input type="text" placeholder="Nommbre" id="Name"><br>
        <label for="Surname">Apellido</label>
        <input type="text" placeholder="Apellido" id="Surname"><br>
        <label for="Charge">Cargo</label>
        <input type="text" placeholder="Ingresa tu cargo" id="Charge"><br>
        <button>ENVIAR</button></div>
</template>
<script>
export default {}
</script>

<style lang="scss" scoped>
    $light-blue: #A3ECF3;
    $blue: #00BFD6;
    $font-color: #212121;
    $orange: #FF9300;

    #login {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 320px;
        height: 409px;
        border: gray solid 2px;
        margin: 30px;
        font-family: 'Roboto', sans-serif;
        padding: 0 20px 0 20px;
    }

    #login img {
       width: 280px;
       align-self: center;
    }

    #login h1 {
        align-self: center;
        font-weight: bold;
        color: $blue;
        font-size: 24px;
    }
    #login label {
        color: $orange;
        font-size: 10px;
        font-weight: bold;
    }

    #login input {
        font-size: 14px;
        border-bottom-color: $orange;
        border-width: 0 0 1px 0;
    }

    #login input:focus {
        outline: none;
    }

    #login button {
        border-radius: 0;
        color: white;
        background-color: $blue;
        font-size: 14px;
        width: 120px;
        height: 2.5em;
        border: none;
        align-self: flex-end;
        font-weight: bold;
    }

    #login button:hover {
        cursor: pointer;
    }
</style>