Ejercicio de SASS y PUG

10/53

Lectura

En este ejercicio te proveemos un par de Mockups para que pongas en pr谩ctica los conocimientos adquiridos durante los videos anteriores, recuerda que es muy importante compartir, as铆 que te invito a crear tus propios mockups, compartir tu c贸digo en el sistema de discusi贸nes y a retroalimentar a m谩s usuarios, revisando su c贸digo, ayud谩ndolos a resolver errores e inclusive proponiendo mejoras.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 74

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

![]()

<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:[email protected];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:[email protected];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>

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:[email protected];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:[email protected]&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:[email protected]&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:

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=鈥減ug鈥>
#app(class=鈥渢ap鈥)
img(src=鈥https://static.platzi.com/media/user_upload/Page 1-d8d869f4-7130-4ae9-9907-2fa809bd136a.jpg鈥 class=鈥渋mg鈥)
h1 {{ title }}
.box-elem
label(for=鈥渘ombre鈥 class=鈥渂ox-label鈥) Nombre
input(id=鈥渘ombre鈥 class=鈥渂ox-input鈥)
.box-elem
label(for=鈥渁pellido鈥 class=鈥渂ox-label鈥) Apellido
input(id=鈥渁pellido鈥 class=鈥渂ox-input鈥)
.box-elem
label(for=鈥減uesto鈥 class=鈥渂ox-label鈥) Puesto
input(id=鈥減uesto鈥 class=鈥渂ox-input鈥)
.box-elem
button(class=鈥渂ox-submit鈥) Enviar
.box-by
h5 By LeirAGS Develop
</template>

<script>
export default {
name: 鈥榓pp鈥,
data () {
return {
title: 鈥楻egistro estaci贸n Platzi鈥
}
}
}
</script>

<style lang=鈥渟css鈥>
@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: 鈥楻oboto鈥, 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>

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:[email protected];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>
<h1>Ejercicio</h1>

Te tom贸 por sorpresa Bulma ya que vengo de element-ui pero hice mi mejor intento.

<h1>Preview</h1>
<h1>C贸digo</h1>
<template lang="pug">
  #app
    .container
      .box.login-card
        .image-container
          img(src='./assets/login-logo.jpg')
        h1.title Registro estaci贸n Platzi
        form
          .field
            label.label(for='nombre') Nombre
            .control
              input#nombre.input(placeholder='Ingresa tu nombre',name='nombre')
          .field
            label.label(for='apellido') Apellido
            .control
              input#apellido.input(placeholder='Ingresa tu apellido',name='apellido')
          .field
            label.label(for='cargo') Cargo
            .control
              input#cargo.input(placeholder='Ingresa tu cargo',name='cargo')
          .button-submit
            button.button(type='submit') ENVIAR

</template>
<style lang="scss">
@import './styles/index.scss';
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]|200&display=swap');
</style>

<style lang="scss" scoped>
* {
  font-family: 'Roboto', sans-serif;
}
.container {
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-card {
    width: 320px;
    width: 409px;
    .image-container {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        width: 100%;
      }
      margin-bottom: 20px;
    }
    .title {
      color: #00BBD6;
      font-family: 'Roboto', sans-serif;
      font-size: 32px;
      font-weight: bold;
    }
    form {
      .field {
        border-style: solid;
        border-color: #FF8E00;
        border-width: 0px;
        border-bottom-width: 2px;
        .label {
          margin: 0px;
          font-size: 12px;
          color: #FF8E00;
        }
        .control {
          .input {
            height: 32px;
            border: none;
            box-shadow: none;
            font-size: 18px;
            padding: 0px;
          }
        }
      }
      .button-submit {
        display: flex;
        justify-content: flex-end;
        .button {
          background-color: #00C3DC;
          color: #FFFFFF;
          font-weight: bold;
        }
      }
    }
  }
}
</style>

Cambi茅 Bulma por Vuetify y as铆 lo hice

<template>
  <div id="app">
    <v-app>
        <v-card width="320" min-height="409" class="ma-auto">
          <v-img height="80" :src="require('./assets/logo.jpg')" contain />
          <v-card-title class="d-flex justify-center font-weight-black primary--text">
            Registro de estaci贸n Platzi
          </v-card-title>
          <v-card-text>
            <v-form>
              <v-container class="d-flex flex-column">
                <v-text-field label="Nombre" color="secondary" />
                <v-text-field label="Apellido" color="secondary" />
                <v-text-field label="Cargo" color="secondary" />
                <v-btn class="align-self-end font-weight-bold" color="primary" type="submit">Enviar</v-btn>
              </v-container>
            </v-form>
          </v-card-text>
        </v-card>
    </v-app>
  </div>
</template>

Veo un problema complicado con Bulma, una de las ventajas de los estilos en los componentes de Vue es que con scoped solo afectan a los elementos en ese componente.
Pero al usarse Bulma de esta forma no se puede usar el scoped porque deshabilita Bulma, por otra parte siento que Bulma no proporciona herramientas suficientes como s铆 lo hace Vuetify para crear estos componentes.
Me parece que Bulma no aporta mucho.