Ejercicio Avanzado de Pug y SASS

11/53

Lectura

En este ejercicio te proveemos un par de Mockups para que pongas en pr谩ctica los conocimientos adquiridos durante los videos anteriores y para que al final puedas crear con todo lo aprendido en este curso otra aplicaci贸n, con estilo muy profesional que sin lugar a dudas se ver谩 muy bien en tu portafolio.

Recuerda que es muy importante compartir, as铆 que te invito a crear tus propios mockups o 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.

Este es el segundo de los ejercicios que deber谩s realizar y m谩s adelante darle vida utilizando vue.js:

final.png

Aqu铆 encuentras a detalle las vistas que debes crear:

header.png
barra lateral.png
card.png
logo.png

Aportes 26

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Paso xD Vine a aprender Vue, de igual manera tampoco usar茅 PUG, para hacer este dise帽o prefiero usar HTML puro con Bootstrap o CSS Grid, sin embargo, quiero seguir con Vue xD

Lo logre!

<template lang="pug">
  #App
    section.header
      .logo
        img(src="https://static.platzi.com/media/user_upload/logo-d871d30b-ac23-4240-93f3-13e49084d80b.jpg" alt="")
      .buscar
        input.buscar_texto(type="text" placeholder="Busca tu pel铆cula, actor, o director favorito.")
      .usuario
        h2.usuario_text Kiyosaki
        img.avatar(src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyv-9ZkEOJqXyELYYJZ3UJ_bvqVhIkaYGL0cpVIVrZr5v-fF7c7O2UZP6W_ISSeIE5rxUZPPMiy7nPNXhYjPwh6hM9Dsse_yBq1w&usqp=CAU&ec=45761792" alt="")
        icon.opciones
          i(class="fas fa-fire fa-2x")
    
    section.menu_lateral
      .menu_container_top
        .opcion_menu
          icon.icono
            i(class="fas fa-home fa-2x")
          label Home
        .opcion_menu
          icon.icono
            i(class="fas fa-fire fa-2x")
          label Trending
        .opcion_menu
          icon.icono
            i(class="fas fa-heart fa-2x")
          label M谩s likes
      .menu_container_bottom
        .opcion_menu
          icon.icono
            i(class="fas fa-cog fa-2x")
          label Ajustes

    section.main
      h2.texto_categoria Ahora en el cine
      .pelicula_categoria
        .pelicula
          img.foto_pelicula(src="https://i1.wp.com/www.sopitas.com/wp-content/uploads/2019/05/up-pelicula-quiz.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
        .pelicula
          img.foto_pelicula(src="https://i.blogs.es/554926/carlyesposa/450_1000.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
        .pelicula
          img.foto_pelicula(src="https://blog.stannah.co/wp-content/uploads/sites/17/2019/10/carl-russel-dug.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
      h2.texto_categoria Ahora en el cine
      .pelicula_categoria
        .pelicula
          img.foto_pelicula(src="https://fotografias.flooxernow.com/clipping/cmsimages01/2020/01/09/44992B47-09FA-4EE9-9B24-E9100A76CB2F/58.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
        .pelicula
          img.foto_pelicula(src="https://blog.stannah.co/wp-content/uploads/sites/17/2019/10/russell-carl.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
        .pelicula
          img.foto_pelicula(src="https://www.tuenlinea.com/wp-content/uploads/2018/08/Abuelitos-festejan-su-60-Aniversario-llevando-a-la-realidad-la-peli-UP-1280x720.jpg" alt="")
          .pelicula_hover
            h2 Up
            p.descripcion_pelicula Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis, praesentium
          
      
</template>

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

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

<style>
 @import '//use.fontawesome.com/releases/v5.0.7/css/all.css';
 @import 'https://fonts.gstatic.com';
 @import 'https://fonts.googleapis.com/css2?family=Lato:[email protected];300;400;700&display=swap';

#App {
  font-family: 'Lato', sans-serif;
  width: 1024px;
  margin: 0 auto;

}

/* header */
.header{
  display: flex;
  height: 72px;
  align-items: center;
   box-shadow: 0px 0px 3px 3px #ccc
}

.logo{
  width:200px;
}

.buscar{
  width:600px;
  text-align: center;
  margin-top: 6px;
  margin-left: 32px;
}

.buscar_texto{
  display: block;
  width: 100%;
  padding: 2px 6px;
  font-size: 16px;
  line-height: 24px;
}

.usuario{
  width: 224px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.usuario_text{
  margin-right: 8px;
  font-size: 16px;
  color: #38292a;
}
.avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}

.usuario .opciones{
  margin-right: 16px;
}

/* Menu Laterial */
.menu_lateral{
  float: left;
  width: 89px;
  height: 810px;
  background: linear-gradient(to right,  #FF535B, #FD746C);
  text-align: center;
}
.menu_container_bottom{
  margin-top: 330px;
  padding-top: 16px;
  height: 60px;
}
.opcion_menu icon, .opcion_menu label{
  color: white;
  display: block;
  margin-top: 16px;
}

/* Main */
.main{
  float: left;
  width: 935px;
}

.texto_categoria{
  margin-left: 16px;
  font-size: 20px;
}

.pelicula_categoria{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.pelicula{
  width: 287px;
  height: 192px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  color: #ffffff;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pelicula_hover{
  position: absolute;
  padding: 8px;
  width: 271px;
  height: 84px;
  top: 92px;
  background: rgba(255, 83, 91, 0.7);

}
.pelicula_hover h2, .pelicula_hover p{
  margin: 0px;
}

</style>

Yo hice esto:

C贸digo:

<template>
  <div id="app">
    <header class="header">
      <img src="@/assets/movies.jpg" alt="Movies.es" class="logo" />
      <input type="search" class="searchBar" name="" id="" placeholder="Busca tu peli, actor, actriz o director favorito">
      <div class="profile">
        <p>{{ this.name }}</p>
        <img :src=profilePic class="profilePic" alt="Profile Pic" />
      </div>
    </header>
    <aside class="menu">
      <div class="features">
        <div class="home">
          <img src="@/assets/home.svg" alt="Home">
          <p>Home</p>
        </div>
        <div>
          <img src="@/assets/favorite.svg" alt="Favorites">
          <p>M谩s likes</p>
        </div>
        <div>
          <img src="@/assets/whatshot.svg" alt="Trending" />
          <p>Trending</p>
        </div>
      </div>
      <div class="settings">
        <div>
          <img src="@/assets/settings.svg" alt="Settings" />
          <p>Ajustes</p>
        </div>
      </div>
    </aside>
    <main class="main">
      <div class="movies">
        <div class="movie" v-for="movie in 9" :key="movie">
          <img src="@/assets/metal-gear-solid.jpg" />
          <div class="description">
            <h3> Metal Gear Solid </h3>
            <p>A Hideo Kojima's Game</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Miguel Reyes',
      profilePic: "https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/1200/public/media/image/2015/01/438806-metal-gear-solid-v-nos-muestra-sangriento-big-boss.jpg?itok=iJlnY4ge",
    }
  }
}
</script>

<style lang="scss">
$pink: #ff535bc7;
$purple: #50557F;

  #app {
    width: 1024px;
    height: 72vh;
    display: grid;
    font-family: 'Lato', sans-serif;
    grid-template-areas: "header header header"
                          "menu main main";

    & .header {
      grid-area: header;
      background-color: white;
      width: 100vw;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;

      & .logo {
        width: 5%;
        height: fit-content;
      }

      & .searchBar {
        width: 30%;
        border: 1px solid $purple;
        border-radius: 5px;
        padding: 5px;
      }

      & .profile {
        width: 15%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        font-weight: bold;

        & .profilePic {
          width: 25px;
          height: 25px;
          border-radius: 50%;
        }
      }
    }

    & .menu {
      grid-area: menu;
      background-color: $pink;
      width: 5vw;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & .features div,
      & .settings div {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;

        & p {
          text-align: center;
        }
      }

      & .features,
      & .settings {
        & img {
          filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(212deg) brightness(109%) contrast(104%);
        }

        & p {
          color: white;
        }
      }
    }

    & .main {
      grid-area: main;
      grid-template-columns: 2fr;
      width: 95vw;
      height: fit-content;

      & .movies {
        display: grid;
        grid-template-columns: repeat(3, 30%);
        gap: 20px;

        & .movie {
          box-shadow: 0px 10px 10px 2px rgb(94 94 94 / 75%);

          & img {
            width: 100%;
          }

          & .description {
            background-color: $pink;
            color: white;
            text-align: right;
            margin-top: -50px;

            & h3,
            & p {
              margin: 0;
            }
          }
        }
      }
    }
  }
</style>

<template lang="pug">
.container
  .columns
    .container.level
      .level-left
        img(src="../../assets/cinema.jpg")
      .column.is-6
        input.input(type="text"
            placeholder="Busca tu peli, actor, actriz o director favorito")
      .level-right
        label Vivi Rodriguez
        figure.image.p-2
          img.is-rounded.imgmio(src="../../assets/Bambi.png" )
        span.icon
          i.fas fa-caret-down

  .columns
    .column.is-1
      .tile.is-ancestor 
        .tile.is-parent
          .otro.tile.is-child.notification
            .content.icono90
              span.icon.mt-5.iconWhite
                i.fas.fa-3x.fa-home
              p.subtitle.is-size-5.has-text-white Home

              span.icon.mt-5.iconWhite
                i.fas.fa-3x.fa-fire
              p.subtitle.has-text-white Trending

              span.icon.mt-5.iconWhite
                i.fas.fa-3x.fa-heart
              p.subtitle.has-text-white Mas Likes
              
              .espacio

              span.icon.mt-5.iconWhite
                i.fas.fa-3x.fa-cog
              p.subtitle.has-text-white Ajustes
 
    .column.is-size-10.is-offset-1
      p.tile.is-size-4.level-left.has-text-weight-bold Ahora en Cine
      .tile.is-ancestor
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg" )
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
                
      p.tile.is-size-4.level-left.has-text-weight-bold Aclamadas por la critica
      .tile.is-ancestor
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg" )
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.

      p.tile.is-size-4.level-left.has-text-weight-bold No te debes perder
      .tile.is-ancestor
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg" )
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.
        .tile.is-parent
          article.is-child.box
            img.img(src="../../assets/movie.jpg")
            .mio
              span.has-text-weight-bold.tile.is-size-5.has-text-white.level-left  The Secret Live of Pets
              p.has-text-justified.is-size-6.m-0.img.ml-2.pr-4 The quiet life of a terrier named Max is 
                upended when his owner takes in Duke, a stray whom Max instanly dislikes.

</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style   lang="scss" scoped>
h3 {
  margin: 40px 0 0;
}
.otro {
  background: -webkit-repeating-linear-gradient(left, #ff535b, #fd746c);
}
.container {
  font-family: Lato Bold;
}
.mio {
  position: absolute;
  background: rgb(255, 83, 91, 0.75);
  width: 287px;
  height: 96px;
  margin-top: -103px;
  color: white;
}

.img {
  width: 287px;
  height: 192px;
}
.iconWhite {
  color: white;
}
.box {
  box-shadow: none;
  padding: 0px;
}
.tile {
  margin: 0px;
}
.imgmio {
  width: 60px;
}
.level {
  color: #50557f;
}
.icono90 {
  width: 89px;
}
.espacio{
    height: 325px;
}
</style>```

Resultado:
peliculas.png

App.vue

<template lang="pug">
  #app
    m-header
    .columns.is-mobile.is-gapless
      navbar.column.is-narrow
      section.column
        .wrapper
          h2 Ahora en cine
          pelicula(
            :pelicula="pelicula",
            :key="pelicula.id",
            v-for="pelicula in peliculas")
        .wrapper
          h2 Aclamadas por la critica
          pelicula(
            :pelicula="pelicula",
            :key="pelicula.id",
            v-for="pelicula in peliculas")
        .wrapper
          h2 No te debes perder
          pelicula(
            :pelicula="pelicula",
            :key="pelicula.id",
            v-for="pelicula in peliculas")
</template>

<script>
import MHeader from './components/header'
import Navbar from './components/navbar'
import Pelicula from './components/pelicula'

export default {
  name: 'app',
  components: {
    MHeader,
    Navbar,
    Pelicula
  },
  data () {
    return {
      peliculas: [
        {
          id: 1,
          titulo: 'The Secret Life of Pets',
          contenido: `Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
        },
        {
          id: 2,
          titulo: 'The Secret Life of Pets',
          contenido: `Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
        },
        {
          id: 3,
          titulo: 'The Secret Life of Pets',
          contenido: `Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
        }
      ]
    }
  }
}
</script>

<style lang="scss">
@import './scss/main.scss';
#app {
  margin: 0 auto;
  width: 1024px;
  background: white;

  .wrapper {
    padding: 28px 0 0 28px;

    h2 {
      margin-bottom: 15px;
    }
  }
}

</style>

main.scss

@import "~bulma/bulma.sass";
@import url("https://fonts.googleapis.com/css?family=Lato:700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

// Colores
$gris: #eaeaea;
$grisclaro: rgb(242, 242, 242);
$rosa: #FF535B;
$rosaclaro: #FD746C;
$rosatraslucido: #FD746CBF;
$blanco: white;

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

components/header.vue

<template lang="pug">
  header#m-header.level
    .level-left
      img(src="../assets/logo.png")
    .level-right
      .level-item
        input.input(type="text" :placeholder="placeholder")
      .level-item
        a.button
          span Jesus Quinto
          span.icon
            img(src="../assets/profile.png")
          span.icon
            i.material-icons arrow_drop_down
</template>

<script>
export default {
  name: 'm-header',
  data () {
    return {
      placeholder: 'busca tu peli, actor, actriz o director favorito'
    }
  }
}
</script>

<style lang="scss">
@import '../scss/main.scss';
#m-header {
  min-height: 72px;
  padding: 0 20px;
  margin-bottom: 0;
  box-shadow: 0px 5px 5px $gris;
  .level-left {
    img {
      margin-left: 15px;
    }
  }
  .level-right {
    input {
      width: 480px;
    }
    img {
      margin-left: 10px;
      border-radius: 15px;
      width: 24px;
      height: 24px;
    }
    a.button {
      margin-left: 13px;
      border: none;
    }
  }
}

</style>

components/pelicula.vue

<template lang="pug">
  .pelicula
    img(src="../assets/item.jpg")
    .info
      h1 {{pelicula.titulo}}
      p {{pelicula.contenido}}

</template>

<script>
export default {
  name: 'pelicula',
  props: ['pelicula'],
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
@import '../scss/main.scss';
.pelicula {
  width: 278px;
  height: 192px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  margin-right: 24px;
  box-shadow: 0 0 8px gray;

  img {
    height: 100%;
    position: absolute;
    bottom: 0;
  }

  .info {
    position: absolute;
    bottom: 0;
    background: $rosatraslucido;
    color: $blanco;
    padding: 8px;

    h1 {
      font-size: 18px;
    }

    p {
      font-weight: normal;
      font-size: 13px;
    }
  }
}
</style>

components/navbar.vue

<template lang="pug">
  .pelicula
    img(src="../assets/item.jpg")
    .info
      h1 {{pelicula.titulo}}
      p {{pelicula.contenido}}

</template>

<script>
export default {
  name: 'pelicula',
  props: ['pelicula'],
  data () {
    return {
    }
  }
}
</script>

<style lang="scss">
@import '../scss/main.scss';
.pelicula {
  width: 278px;
  height: 192px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  margin-right: 24px;
  box-shadow: 0 0 8px gray;

  img {
    height: 100%;
    position: absolute;
    bottom: 0;
  }

  .info {
    position: absolute;
    bottom: 0;
    background: $rosatraslucido;
    color: $blanco;
    padding: 8px;

    h1 {
      font-size: 18px;
    }

    p {
      font-weight: normal;
      font-size: 13px;
    }
  }
}
</style>

App.vue

<template lang='pug'>
  #app
    search
    sideBar
    movieCards
</template>
<script>
import Search from './components/search/Search.vue'
import SideBar from './components/sideBar/SideBar.vue'
import movieCards from './components/movieCards/movieCards.vue'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Registro estaci贸n Platzi'
    }
  },
  components: {
    Search,
    SideBar,
    movieCards
  }
}
</script>
<style lang='scss'>
@import './scss/main.scss';

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

Search.vue

<template lang='pug'>
  #search
    div.search-container
      img.logo(src='../../assets/movie.jpg')
      input.search-box(type='text' placeholder='Search for your favorite movies')
      div.user-container
        p Francisco Sanchez
        img.user-pic(src='../../assets/avatar.png')
        i.arrow
</template>
<script>
export default {
  name: 'search',
  data () {
    return {
    }
  }
}
</script>
<style lang='scss'>
#search {
  width: 100%;
  box-shadow: 0px 1px 15px -5px;
}

.search-container {
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: center;

  .logo {
    position: absolute;
    left: 0;
    margin-left: 20px;
  }

  .search-box {
    font-size: 14px;
    width: 30%;
    padding: 10px;
    border-radius: 5px;
    border-style: solid;
    border: 1px solid #bbb;

  }

  .user-container {
    position: absolute;
    right: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;

    p {
      padding-right: 10px;
    }
    .user-pic {
      border-radius: 20px;
      margin-right: 10px;
      width: 40px;
      height: 40px;
    }
    .arrow {
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
    }
  }
}
</style>

sideBar.vue

<template lang='pug'>
  #sidebar
    div.sidebar-container
      div.sidebar-container__card
        img(src='../../assets/home.svg')
        p Home
      div.sidebar-container__card
        img(src='../../assets/claqueta.svg')
        p Trending
      div.sidebar-container__card
        img(src='../../assets/like.svg')
        p Most Liked
      div.sidebar-container__card#settings
        img(src='../../assets/setting.svg')
        p Settings
</template>
<script>
export default {
  name: 'sidebar',
  data () {
    return {
    }
  }
}
</script>
<style lang='scss'>
.sidebar-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  align-items: center;
  left: 0;
  width: 89px;
  height: 100vh;
  background-image: linear-gradient(#ff535b,#fd746c)
}

.sidebar-container__card {
  color: #fff;
  text-align: center;
  margin: 20px 0 30px;
  cursor: pointer;
  &#settings {
    position: absolute;
    bottom: 0;
  }
}
</style>

movieCard.vue

<template lang='pug'>
  #movieCards
    div.movie-card-container
      h1 Available movies
      div.movie-cards
        div.movie-card(v-for='movie in movies')
          img(src='../../assets/skeleton.jpg')
          div.text-container
            h2 {{ movie.name }}
            p {{ movie.desc }}
</template>
<script>
export default {
  name: 'movieCards',
  data () {
    return {
      movies: [
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        },
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        },
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        },
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        },
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        },
        {
          name: 'Skeleton Dance by Silly Symphonies',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
        }
      ]
    }
  }
}
</script>
<style lang='scss'>
#movieCards {
  width: 100%;
}

.movie-card-container {
  display: flex;
  flex-direction: column;
  margin: 20px 0 0 119px;

  .movie-card,
  .movie-card img {
    width: 287px;
    height: 192px;
    img {
      position: absolute;
      z-index: 0;
    }
  }

  .movie-cards {
    display: flex;
    flex-wrap: wrap;
  }

  .movie-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 10px 10px 10px 0;

    .text-container {
      color: #fff;
      padding: 3px 5px 0;
      z-index: 1;
      background: #ff535b92;
      h2 {
        font-weight: bold;
      }
      p {
        font-size: 12px;
      }
    }
  }
}
</style>

Este es el resultado que obtuve:

Nuevamente decid铆 usar Vuetify, con esto no tuve necesidad de crear tanto c贸digo de estilos.

vuetify.js

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

Vue.use(Vuetify, {
  iconfont: 'md',
  theme: {
    secondary: '#50557f'
  }
})

App.vue

<template lang="pug">
v-app
  SideBar
  NavBar
  v-content
    v-container(grid-list-xs)
      v-layout(row wrap)
        v-flex.font-weight-bold.mb-2(xs12) Ahora en cine
        v-flex(xs4 v-for="i in 3" key="i")
          Movie
        v-flex.font-weight-bold.mb-2.mt-4(xs12) Aclamadas por la cr铆tica
        v-flex(xs4 v-for="i in 3" key="i")
          Movie
        v-flex.font-weight-bold.mb-2.mt-4(xs12) No te debes perder
        v-flex(xs4 v-for="i in 3" key="i")
          Movie
</template>

<script>
import NavBar from './components/NavBar'
import SideBar from './components/SideBar'
import Movie from './components/Movie'

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

SideBar.vue

<template lang="pug">
v-navigation-drawer.side-bar(v-model="drawer" :mini-variant-width="100" mini-variant hide-overlay stateless permanent clipped dark app)
  v-layout(column fill-height)
    v-btn.pt-5.pb-5(v-for="item in items" :key="item.title" flat)
      v-layout(column)
        v-icon(large) {{ item.icon }}
        span.text-capitalize.font-weight-bold {{ item.title }}
    v-spacer
    v-btn.pt-5.pb-5(flat large)
      v-layout(column)
        v-icon(large) settings
        span.text-capitalize.font-weight-bold Ajustes
</template>

<script>
export default {
  data () {
    return {
      drawer: true,
      items: [
        { title: 'Home', icon: 'home' },
        { title: 'Trending', icon: 'whatshot' },
        { title: 'M谩s likes', icon: 'favorite' }
      ]
    }
  }
}
</script>

<style lang="scss">
.side-bar {
  background: linear-gradient(to right, #ff535b, #fd746c);
}
</style>

NavBar.vue

<template lang="pug">
v-toolbar(color="white" clipped-left fixed app)
  v-toolbar-title
    img(:src="require('@/assets/logo.jpg')")
  v-spacer
  input(type="text" placeholder="Busca tu peli, actor, actriz o director favorito")
  v-spacer
  v-toolbar-items
    v-btn.secondary--text(flat)
      span.text-capitalize.font-weight-bold Leonardo C
      v-avatar.ml-2(:size="40" color="grey lighten-1")
        img(:src="require('@/assets/avatar.png')" alt="avatar")
      v-icon arrow_drop_down
</template>

<script>
export default {
}
</script>

<style lang="scss">
input[type=text] {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px 10px;
  max-width: 400px;
  width: 100%;
}
</style>

Movie.vue

<template lang="pug">
v-card(:max-width="287" :max-height="192")
  v-img(:src="require('@/assets/tslop.png')" aspect-ratio="2")
    v-layout(align-end fill-height white--text)
      div.custom-caption.pl-2
        div.font-weight-bold The Secret Life of Pets
        div.caption The quiet life of a terrier named Max is unpended when his owner takes in Duke, a stray whom Max instantly dislikes.
</template>

<script>
export default {
}
</script>

<style lang="scss">
.custom-caption {
  background-color: rgba(255, 83, 91, 0.75);
}
</style>

Despues de mucho tiempo, solo falta que sea responsive jaja
https://github.com/DonaldoLog/template-movie

Listo

Resultado

App.vue

<template>
  <div id="app">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">    
        <barra></barra>
        <sidebar></sidebar>

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

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>

<script>
import barra from './components/barra';
import sidebar from './components/sidebar';
import principal from './components/principal';
export default {
  name: 'app',
  components: {
    barra, sidebar, principal
  },
  data () {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

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

barra.vue

<template>
    <div id="barra">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-12">
                    <img src="../assets/ejercicio2/logo.png" alt="" class="img-fluid">

                    <div class="usuario">
                        <img src="../assets/ejercicio2/user.png" class="img-fluid rounded-circle">
                        <p><b>Manuel Ojeda</b></p>
                    </div>
                    <input type="text" class="form-control" placeholder="Busca tu peli, actor, actriz o director favorito">

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

sidebar.vue

<template>
    <div id="sidebar">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-home fa-3x"></i>
                        Home
                    </a>
                </div>
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-fire fa-3x"></i>
                        Trending
                    </a>
                </div>
                <div class="col-12 text-center mt-3">
                    <a href="#">
                        <i class="fas fa-heart fa-3x"></i>
                        M谩s likes
                    </a>
                </div>
                <div class="col-12 fixed-bottom">
                    <a href="#">
                        <i class="fas fa-cog fa-3x ml-2"></i> <br>
                        <span class="ml-2 mb-2">Ajustes</span>
                        <br>
                        <br>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

principal.vue

<template>
    <div id="principal">
        <div class="container-fluid my-3">
            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        Ahora en el cine
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        Aclamadas por la critica
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mt-4">
                    <h4 class="text-left">
                        No te debes perder
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-sm-6 col-12 elemento">
                    <a href="#">
                        <img src="../assets/ejercicio2/pets.jpg" alt="" class="img-fluid">
                        
                        <div class="sobreposicion">
                            <h4>
                                The Secret Life of Pets
                            </h4>
                            <p>
                                The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

main.scss

@import './bootstrap/bootstrap.scss';


html{
    height: 100%;
    body {
        @import url('https://fonts.googleapis.com/css?family=Lato');
        height: 100%;

        #app {
            height: 100%;
            #barra {
                box-shadow: 1px 1px 10px #aaa;

                img.img-fluid {
                @extend .mx-auto;
                @extend .d-block;

                max-width: 65px;
                margin-top: 5px;
                margin-bottom: 5px;

                @media(min-width: 992px) {
                    float: left;
                    margin-left: 20px !important;
                }
                }

                .form-control {
                    @extend .mx-auto;

                    max-width: 500px;
                    margin-top: 15px;
                    margin-bottom: 15px;
                    
                }

                .usuario {
                    text-align: center;

                    @media(min-width: 992px) {
                        float: right;
                        width: 100%;
                        max-width: 180px;

                        .img-fluid {
                        margin-top: 13px;
                        float: right;
                        max-width: 40px;
                        }

                        p {
                        margin-top: 20px;
                        }
                    }
                }
            }

            #sidebar {
                @media(min-width: 992px){
                    float: left;
                    width: 100px;
                    height: -webkit-fill-available;
                    background-image: linear-gradient(to right, #FF535B, #FD746C);
                }

                a{
                    color: #fff;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
            }

            #principal{
                font-family: 'Lato', sans-serif;
                .elemento{
                    a{
                        font-family: 'Lato', sans-serif;
                        color: #fff;
                        .sobreposicion{
                            position: absolute;
                            bottom: 0;
                            padding: 10px;
                            background-color: rgba(255, 83, 91, .5);
                            margin-right: 15px;
                            h4{
                                font-weight: bold;
                            }
                            p{
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

Hola!!! dej茅 el curso por unas semanas鈥 ejecut茅 mi index.html y no me trajo la 煤ltima tarea que hab铆a realizado. Este es el c贸digo de mi index:

La tarea era el form de Platzi de la clase anterior鈥 no encuentra mi carpeta dist/build.js y no tal carpeta ni el archivo鈥 no recuerdo que sucedi贸 en verdad鈥

Alguien podr铆a darme una mano para saber qu茅 me falta para avanzar?

Gracias!!!

No pude hacer que el titulo del genero abarcara todo el renglon

<template lang="pug">
#app
  .header
    nav
      .logo
        img.logo(src='./assets/peliculas.jpg')
      .search-bar
        input.search(type='text' placeholder='Encuentra')
      .user
        div.container
          p.user-name {{ user.name }}
          img.avatar(src='./assets/ArielitoSmall.png')
          i.fa.fa-user-circle-o(aria-hidden='true')
          i.fa.fa-sort-desc(aria-hidden='true')
  .content
    .side-bar
      .first
        i.fa.fa-home(aria-hidden='true')
        p Inicio
        i.fa.fa-heart(aria-hidden='true')
        p Populares
        i.fa.fa-fire(aria-hidden='true')
        p Mas titulos
      .last
        i.fa.fa-cog(aria-hidden='true')
        p Configurar
    .content-space
      div.container-genero(v-for="genero in generos" v-bind:genero="genero" v-bind:key="genero.gid")
        h2 {{ genero.nombre }}
        div.container-pelicula(v-for="pelicula in genero.peliculas" v-bind:pelicula="pelicula" v-bind:key="pelicula.pid")
          div.peli_fondo
            div.peli_resumen
              h4 {{ pelicula.titulo }}
              h6 {{ pelicula.resumen }}
  .footer
      h5 LeirAGS Develop
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: 'Registro estaci贸n Platzi',
      user : {
        name : 'Ariel Garcia'
      },
      generos : [
        { gid: 1,
          nombre: 'Estrenos',
          peliculas: [
            { pid: 100, titulo:'Mi Chica Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 101, titulo:'Mi Chico Favorito', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 102, titulo:'Mi Hija Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
          ]
        },
        { gid: 2,
          nombre: 'En Cartelera',
          peliculas: [
            { pid: 200, titulo:'Mi Hijo Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 201, titulo:'Mi Mama Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 202, titulo:'Mi Papa Favorito', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
          ]
        },
        { gid: 3,
          nombre: 'Terror',
          peliculas: [
            { pid: 300, titulo:'Mi Hermano Favorito', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 301, titulo:'Mi Hermana Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
            { pid: 302, titulo:'Mi Novia Favorita', resumen: 'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.' },
          ]
        }
      ]
    }
  }
}
</script>

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

  // Variables
  #app {
      height: 133vh;
  }
  .side-bar {
    background-color: #ff5358;
    width: 10%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .header {
    height: 9%;
    box-shadow: 0 0 10px 10px #D9D9D9;
  }
  nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .content {
    width: 100%;
    display: flex;
    height: 100vh;
  }
  .user {
    width: 14%;
  }
  .user.fa, .user p {
    color: #000;
  }
  .user p {
    color: #5d557f !important;
    font-weight: bold;
  }
  .user.fa {
    margin-top: 10px;
    margin-left: 5px;
  }
  .user.fa-user-circle-o {
    margin-bottom: 6px;
  }
  .user.fa-sort-desc {
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .avatar{
    width:64px;
  }
  .logo img {
    width: 132px;
    margin-left: 15px;
  }
  .search-bar {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
  }
  .container {
    display: flex;
    align-items: center;
  }
  .search-bar.search {
    width: 100%;
    padding: 8px;
    border-radius: 9px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .logo {
    margin-top:4px;
  }
  .search-bar.search:focus {
    outline: none;
    box-shadow: 0 0 2px 2px #ff5358;
  }
  .first, .last {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .last.fa {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .last p {
    margin-bottom: 20px;
  }
  .fa{
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
    text-align: center;
  }
  p {
    font-size: 16px;
    color: #fff;
  }
  .container-genero h2 {
    font-size: 22px;
    margin: 25px 35px;
    font-weight: bold;
  }
  .content {
    width: 100%;
    margin: 0;
    height: 91%;
  }
  .content-space {
    width: 90%;
  }
  .container-genero {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .container-pelicula {
    width: 33%;
  }
  .peli_fondo {
    background-image: url("./assets/fondos/hielo.jpg");
    background-repeat: no-repeat;
    height: 30vh;
    width: 100%;
    margin-left: 35px;
    position: relative;
  }
  .peli_resumen {
    background: rgba(255,83,88,.8);
    width: 95.5%;
    height: 50%;
    position: absolute;
    bottom: 0;
  }
  .peli_resumen h4, .peli_resumen h6 {
    color: #fff;
    width: 90%;
    margin: 0px auto 0px auto;
  }
  .peli_resumen h4 {
    margin-bottom: 10px;
  }

</style>

Pr谩ctica Realizada:

Les comparto un JSON para que se les facilite un poco m谩s en la pr谩ctica.

{
    "Playlists":[
        {
            "id" : 1,
            "Description" : "Ahora en el cine",
            "peliculas":[
                {
                   "id": 1,
                   "title": "The Secret Life of Pets",
                   "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 2,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 3,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                }                               
            ]
        },
        {
            "id" : 2,
            "Description" : "Aclamadas por la Critica",
            "peliculas":[
                {
                   "id": 1,
                   "title": "The Secret Life of Pets",
                   "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 2,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 3,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                }                               
            ]            
        },
        {
            
            "id" : 3,
            "Description" : "No te debes perder",
            "peliculas":[
                {
                    "id": 1,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 2,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                },
                {
                    "id": 3,
                    "title": "The Secret Life of Pets",
                    "description" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti non alias dignissimos corporis voluptate ducimus autem culpa ratione itaque?"     
                }                               
            ]            
                       
        }        
    ]

}

Saludos.

Bueno despu茅s de un rato al fin termin茅. Agreg贸 el css minificado para no hacer demasiado largo el comentario.

mian.js

import Vue from 'vue'
import App from './App.vue'

Vue.component('description', {
  props: ['description'],
  template: `
    <figure>
      <img src="src/assets/the-secret-life-of-pets.jpg" width="287px" height="192px">
      <figcaption>
        <h3>{{ description.title }}</h3>
        <p>{{ description.info }}</p>
      </figcaption>
    </div>
  `
})

new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue

<template lang="pug">
  #app
    .header
      .col-2-1
        img(src="https://static.platzi.com/media/user_upload/logo-d871d30b-ac23-4240-93f3-13e49084d80b.jpg")
      .col-3-1
        input(type="text" placeholder="something")
      .col-2-1.user
        i.material-icons.md-48 keyboard_arrow_down
        i.material-icons.md-48 account_circle
        p.name {{ name }}
    .sidebar
      p
        i.material-icons.md-48 home
        span Home
      p
        i.material-icons.md-48 favorite
        span Trending
      p
        i.material-icons.md-48 whatshot
        span More Likes
      p.settings
        i.material-icons.md-48 settings
        span Settings
    .container
      h3 {{ now }}
      section
        template(v-for="n in 3")
          template(v-for="description in descriptions")
            description(v-bind:description="description")
      h3 {{ claim }}
      section
        template(v-for="n in 3")
          template(v-for="description in descriptions")
            description(v-bind:description="description")
      h3 {{ miss }}
      section
        template(v-for="n in 3")
          template(v-for="description in descriptions")
            description(v-bind:description="description")
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: 'Bambi Rodr铆guez',
      now: 'Ahora en el cine',
      claim: 'Aclamadas por la critica',
      miss: 'No te debes perder',
      descriptions: [
        {
          title: 'The secret life of pets',
          info: 'The quiet life of a terrier named Max is unpendend when his owner takes in Duke a stray whom Mask instantly deslikes.'
        }
      ]
    }
  },
  methods: {
    submit () {
      console.log('se ejecuta submit')
    }
  }
}
</script>

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

main.css

@import url(~/node_modules/bulma/bulma.sass);@import url(https://fonts.googleapis.com/css?family=Lato:400,700);@import url(https://fonts.googleapis.com/icon?family=Material+Icons);body,html{margin:0 auto;padding:0;color:#fff;font-weight:700}i,p{margin:0 auto;padding:0;float:left}#app{width:100%;height:100%;margin:0 auto;padding:0;font-family:Lato}.header{width:98%;height:34px;color:#50557f;position:relative;padding:1%;-webkit-box-shadow:0 4px 4px 0 rgba(0,0,0,.5);-moz-box-shadow:0 4px 4px 0 rgba(0,0,0,.5);box-shadow:0 4px 4px 0 rgba(0,0,0,.5)}.col-2-1{width:25%;float:left}.col-3-1{width:50%;float:left}.name{font-weight:700}.user p,i{float:right}.sidebar{width:4%;height:100%;position:fixed;left:0;padding:0 1%;background:#ff535b;background:linear-gradient(90deg,rgba(255,83,91,1) 0,rgba(253,116,108,1) 100%)}.sidebar p{margin-top:40px;font-size:14px;text-align:center}.sidebar i{width:100%;float:left;font-size:28px}.sidebar span{width:100%;float:left}.settings{position:fixed;bottom:0;margin-bottom:40px}.container{width:90%;height:auto;padding:2%;position:fixed;right:0;color:#50557f}section{overflow:auto}section figure{float:left;position:relative;overflow:auto;font-size:14px}section figure img{vertical-align:bottom}section figure figcaption{position:absolute;bottom:0;left:0;right:0;background:rgba(255,83,91,.7);text-align:center;color:#fff}figcaption>p{font-weight:400}```


馃槂

Bueno, disculpen poner todo en un solo archivo, aqu铆 esta una versi贸n responsiva

<template lang="pug">
    .container.dashboard
        //Navigation
        nav.navbar(role='navigation', aria-label='main navigation')
            .navbar-brand
                a.navbar-item(href='#')
                    img(:src='movi', width='112', height='28')
                a.navbar-burger.burger(role='button', aria-label='menu', aria-expanded='false', data-target='navbarMenu')
                    span(aria-hidden='true')
                    span(aria-hidden='true')
                    span(aria-hidden='true')
            .navbar-menu(id="navbarMenu")
                .control
                    input.input(type='text', placeholder='Busca tu peli, actor, actriz o director favorito')
                .navbar-end
                    .navbar-item.has-dropdown.is-hoverable
                        a.navbar-link
                            | {{user}}
                            img.is-rounded(style='margin:5px; object-fit:cover; border-radius: 50%;' :src='userAvatar')

                        .navbar-dropdown
                            a.navbar-item
                                | About
                            a.navbar-item
                                | Jobs
                            a.navbar-item
                                | Contact
                            hr.navbar-divider
                            a.navbar-item
                                | Report an issue
        .container(style="display:flex")
            //side bar
            aside.side-nav
                ul
                    li
                        a(href="#")
                            span.icon
                                i.fas.fa-2x.fa-home
                            |Home
                    li
                        a(href="#")
                            span.icon
                                i.fas.fa-2x.fa-fire
                            |Trending
                    li
                        a(href="#")
                            span.icon
                                i.fas.fa-2x.fa-heart
                            |M谩s likes
                    li
                        a(href="#")
                            span.icon
                                i.fas.fa-2x.fa-cog
                            |Ajustes
            //main content
            .section-container
                .container.item-section
                    .title Ahora en Cine
                    .card-container
                        .card(v-for="item in items")
                            .card-image
                                img(:src='item.itemImg', alt='Placeholder image')
                            .card-content
                                .title.is-6
                                    |{{item.title}}
                                .content
                                    | {{item.description}}
                .container.item-section
                    .title Aclamadas por la cr铆tica
                    .card-container
                        .card(v-for="item in items")
                            .card-image
                                img(:src='item.itemImg', alt='Placeholder image')
                            .card-content
                                .title.is-6
                                    |{{item.title}}
                                .content
                                    | {{item.description}}
                .container.item-section
                    .title No te debes perder
                    .card-container
                        .card(v-for="item in items")
                            .card-image
                                img(:src='item.itemImg', alt='Placeholder image')
                            .card-content
                                .title.is-6
                                    |{{item.title}}
                                .content
                                    | {{item.description}}






</template>

<script>
    import movi from '../assets/movi.png';
    import userAvatar from '../assets/user.png';
    import itemImg from '../assets/item.jpg';

    export default {
        name: 'dashboard',
        data(){
            return{
                movi : movi,
                user : 'David Mogoll贸n',
                userAvatar: userAvatar,

                items: [
                    {
                        itemImg:itemImg,
                        title:'The Secret Life of Pets',
                        description:'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes',

                    },
                    {
                        itemImg:itemImg,
                        title:'The Secret Life of Pets',
                        description:'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes',

                    },
                    {
                        itemImg:itemImg,
                        title:'The Secret Life of Pets',
                        description:'The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes',

                    }
                ],
            }
        },
        mounted(){
            const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
            // Check if there are any navbar burgers
            if ($navbarBurgers.length > 0) {

                // Add a click event on each of them
                $navbarBurgers.forEach( el => {
                    el.addEventListener('click', () => {
                        // Get the target from the "data-target" attribute
                        const target = el.dataset.target;
                        const $target = document.getElementById(target);

                        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                        el.classList.toggle('is-active');
                        $target.classList.toggle('is-active');

                    });
                });
            }
        }
    }
</script >

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

    @import url('https://fonts.googleapis.com/css?family=Lato:700&display=swap');

    *{
        box-sizing: border-box;
    }
    $breakpoint: 1024px;
    // -----nav------
    $nav-font: 'Lato', sans-serif;
    $nav-background-color: #fff;
    $nav-accent-color: #ff535b;
    $nav-font-color: #50557f;
    $nav-width: 1024px;
    $nav-height: 72px;

    //------aside------
    $aside-font: 'Lato', sans-serif;
    $aside-font-color: #fff;
    $aside-gradient-1: linear-gradient(#ff535b, #fd746c);
    $aside-width: 89px;
    $aside-height: 810px;

    //------card------
    $card-font: 'Lato', sans-serif;
    $card-font-color: #fff;
    $card-overlay-color : rgba(#ff535b,0.75);
    $card-width: 287px;
    $card-height: 192px;


    .navbar{
        font-family:$nav-font ;
        box-shadow: 0 4px 9px -7px grey;
        &-menu{
            display: none;
            @media (min-width: $breakpoint) {
                display: flex;
            }
            justify-content: center;
            .control{
                margin: auto;
                max-width: 512px;
                width: 100%;
            }
        }
        &-link{
            color : $nav-font-color;
        }
    }
    .card-container{
        display: flex;
        flex-direction: column;
        @media (min-width: $breakpoint) {
            flex-wrap: nowrap;
            flex-direction: row;
        }
        justify-content: flex-start;
        overflow-x: auto;
        flex: 1;
        .card {
            font-family: $card-font;
            display: flex;
            flex-direction: column;
            max-width: $card-width;
            max-height: $card-height;
            height: 100%;
            margin: 10px;

            &-image {
                height: 100%;
                display: flex;
                img{
                    flex: 1;
                }
            }
            &-content {
                left: 0;
                bottom: 0;
                padding: 0 10px 5px;
                position: absolute;
                max-height: $card-height * 0.5;
                background: $card-overlay-color;
                color: $card-font-color;
                font-size: 12px;
                text-align: left;

                .title{
                    color: $card-font-color;
                    margin: 5px;
                }
            }
        }
    }
    .section-container {
        margin: auto;
    }
    .item-section {
        display: flex;
        flex-direction: column;
        padding: 0;
        text-align: left;
        &>.title {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 20px 10px 5px;
        }
    }
    .side-nav {
        display: none;
        @media (min-width: $breakpoint) {
            display: block;
        }
        font-family: $aside-font;
        background: $aside-gradient-1;
        max-width: $aside-width;
        width: 100%;
        max-height: $aside-height;
        ul{
            display: flex;
            flex-direction: column;
            height: 100%;
            li, li > a{
                text-decoration: none;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 20px;
                color: $aside-font-color;
                &:last-child{
                    margin-top: auto;
                    margin-bottom: 10px;
                }
            }
        }
    }

</style>

App.vue

<template lang="pug">
  #app
    Buscador
    Menu
    Carrousel( id = "carrousel1")
    Carrousel2( id = "carrousel2")
    Carrousel3( id = "carrousel3")
    #header
</template>

<script>
import Menu from "./components/Menu.vue";
import Buscador from "./components/Buscador.vue";
import Carrousel from "./components/Carrousel";
import Carrousel2 from "./components/Carrousel2";
import Carrousel3 from "./components/Carrousel3";

export default {
  name: "App",
  components: {
    Buscador, Menu, Carrousel, Carrousel2, Carrousel3
  }
};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
    margin: 0 0 0;
  }
#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;
}

#carrousel1 {
    background: rgb(171, 171, 171);
    width: 50%;
    margin-left: 27%;
    margin-top: -50%;
    text-shadow: rgb(51, 51, 51) 1px 1px 2px;
    }

#carrousel2 {
    background: rgb(171, 171, 171);
    width: 50%;
    margin-left: 27%;
    text-shadow: rgb(51, 51, 51) 1px 1px 2px;
    }

#carrousel3 {
    background: rgb(171, 171, 171);
    width: 50%;
    margin-left: 27%;
    text-shadow: rgb(51, 51, 51) 1px 1px 2px;
    }

#header {
  height: 10vh;
}
</style>

Buscador.vue

<template lang="pug">
    header(class="cabecera")
        img(src="https://static.platzi.com/media/user_upload/logo-d871d30b-ac23-4240-93f3-13e49084d80b.jpg" id="cabecera__imgLogo")
        input(type="text" class="cabecera__buscador" placeholder="Busca tu peli, actor, actriz o director favorito")
        label(style="padding: 5px; margin-right: -273px; color: #434d4f;") Bambi Rodriguez
        img(src="https://i.pinimg.com/474x/10/11/60/1011607e52a8e83ec2e17996e88a8ef1.jpg" id="cabecera__span--imgBambi")
        span(class="perfil")
        img(src="../../src/assets/arrow_drop_down-24px.svg" id="arrow")
</template>

<script>
export default {
    name: 'Buscador'
}
</script>

<style scoped>
.cabecera {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  display: flex;
  width: 100%;
  height: 57px;
  padding: 14px;
  box-shadow: -6px 3px 25px #b3b3b3;
  justify-content: space-between;
}

#cabecera__imgLogo {
  height: 32px;
  margin-left: 12px;
  margin-top: -3px;
}

.cabecera__buscador {
    border-radius: 10px;
    border: 0.5px solid #50557f;
    height: 20px;
    width: 650px;
    padding: 14px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.perfil {
  color: #434d4f;
  margin-top: 4px;
}

#cabecera__span--imgBambi {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: -8px;
  margin-right: -559px;
}
</style>

Carrusel.vue

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        img-src="https://cdn2-www.comingsoon.net/assets/uploads/2016/01/petsposter.jpg"
      >
        <p class="carousel-caption">
        <strong>THE SECRET LIFE OF PETS</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://www.thatfilmguy.net/wp-content/uploads/2011/10/Abduction-1024x576.jpg">
        <p class="carousel-caption">
        <strong>ABDUCTION</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://cdn2-www.comingsoon.net/assets/uploads/2016/01/petsposter.jpg"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://www.thatfilmguy.net/wp-content/uploads/2011/10/Abduction-1024x576.jpg"
            alt="image slot"
          >
                  <p class="carousel-caption">
        <strong>ABDUCTION</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide img-blank img-alt="Blank image">
        <p class="carousel-caption">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Ahora en el cine<br>
      Pel铆cula #: {{ slide }}<br>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'Carruosel',
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart() {
        this.sliding = true
      },
      onSlideEnd() {
        this.sliding = false
      }
    }
  }
</script>
<style scoped>
    #carousel-1 {
        background-image: linear-gradient(120deg, rgba(255, 83, 91, 0.562) 0%, rgba(253, 115, 108, 0.486) 100%);
    }

    #carrousel1 {
        background: rgb(8, 8, 8);
    }

    .carousel-caption {
        background-image: linear-gradient(rgba(255, 107, 83, 0.562) 0%, rgba(253, 242, 108, 0.486) 100%);
    }

    .mt-4 {
        background-image: linear-gradient(120deg, rgb(255, 83, 91) 0%, rgb(253, 115, 108) 100%);
        color: white;
    }
</style>

Carrusel2

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        img-src="https://picsum.photos/1024/480/?image=52"
      >
        <p class="carousel-caption">
        <strong>CATS</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <p class="carousel-caption">
        <strong>TRASCENDENT</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide img-blank img-alt="Blank image">
        <p class="carousel-caption">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      Aclamadas por la cr铆tica<br>
      Pel铆cula #: {{ slide }}<br>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'Carruosel',
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart() {
        this.sliding = true
      },
      onSlideEnd() {
        this.sliding = false
      }
    }
  }
</script>
<style scoped>
    #carousel-1 {
        background-image: linear-gradient(120deg, rgba(255, 83, 91, 0.562) 0%, rgba(253, 115, 108, 0.486) 100%);
    }

    #carrousel2 {
        background: rgb(0, 0, 0);
    }

    .carousel-caption {
        background-image: linear-gradient(rgba(83, 207, 255, 0.562) 0%, rgba(144, 108, 253, 0.59) 100%);
    }

    .mt-4 {
        background-image: linear-gradient(120deg, rgb(255, 83, 91) 0%, rgb(253, 115, 108) 100%);
        color: white;
    }
</style>

Carrusel3.vue

<template>
  <div>
    <b-carousel
      id="carousel-1"
      v-model="slide"
      :interval="4000"
      controls
      indicators
      img-width="1024"
      img-height="480"
      style="text-shadow: 1px 1px 2px #333;"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <!-- Text slides with image -->
      <b-carousel-slide
        img-src="https://picsum.photos/1024/480/?image=52"
      >
        <p class="carousel-caption">
        <strong>CATS</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with custom text -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
        <p class="carousel-caption">
        <strong>TRASCENDENT</strong>
        <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>

      <!-- Slides with image only -->
      <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>

      <!-- Slides with img slot -->
      <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
      <b-carousel-slide>
        <template v-slot:img>
          <img
            class="d-block img-fluid w-100"
            width="1024"
            height="480"
            src="https://picsum.photos/1024/480/?image=55"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>

      <!-- Slide with blank fluid image to maintain slide aspect ratio -->
      <b-carousel-slide img-blank img-alt="Blank image">
        <p class="carousel-caption">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
          a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
        </p>
      </b-carousel-slide>
    </b-carousel>

    <p class="mt-4">
      No te puedes perder<br>
      Pel铆cula #: {{ slide }}<br>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'Carruosel',
    data() {
      return {
        slide: 0,
        sliding: null
      }
    },
    methods: {
      onSlideStart() {
        this.sliding = true
      },
      onSlideEnd() {
        this.sliding = false
      }
    }
  }
</script>
<style scoped>
    #carousel-1 {
        background-image: linear-gradient(120deg, rgba(255, 83, 91, 0.562) 0%, rgba(253, 115, 108, 0.486) 100%);
    }

    #carrousel3 {
        background: rgb(0, 0, 0);
    }

    .carousel-caption {
        background-image: linear-gradient(rgba(212, 173, 87, 0.562) 0%, rgba(144, 108, 253, 0.59) 100%);
    }

    .mt-4 {
        background-image: linear-gradient(120deg, rgb(255, 83, 91) 0%, rgb(253, 115, 108) 100%);
        color: white;
    }
</style>

Men煤

<template lang="pug">
    section(class="countainerMenu")
      div(style="width: 85px; padding-top: 30px; color: white;")
        img(src="../../src/assets/home-white-18dp.svg" id="house")
        br
        label Home
      div(style="width: 85px; margin-top: 16px; padding-top: 30px; color: white;")
        img(src="../../src/assets/whatshot-white-18dp.svg" id="trending")
        br
        label Trending
      div(style="width: 85px; margin-top: 16px; padding-top: 30px; color: white;")
        img(src="../../src/assets/favorite-white-18dp.svg" id="likes")
        br
        label M谩s likes
      div(style="width: 85px; margin-top: 16px; color: white; margin-top: 395px;")
        img(src="../../src/assets/settings-white-18dp.svg" id="settings")
        br
        label Ajustes
</template>

<script>
export default {
  name: "Menu",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
.countainerMenu {
  height: 810px;
  width: 89px;
  background-image: linear-gradient(120deg, #FF535B 0%, #FD746C 100%);
}

#house, #likes, #settings {
  width: 40px;
}

#trending {
  width: 30px;
}
</style>

馃榾馃榾

Aqu铆 esta mi c贸digo 馃殌
Nota: No es responsivo (Responsive Design)
App.vue

<template lang="pug">
  #app.container.wrap
    nav.navbar
      .navbar-brand
        .navbar-item
          img(src="https://static.platzi.com/media/user_upload/logo-d871d30b-ac23-4240-93f3-13e49084d80b.jpg")
      .navbar-menu
        .navbar-start
          .navbar-item
            input(type="text" class="input is-rounded" style="width: 645px;" placeholder="Busca tu peli, actor, actriz o director favorito")
        .navbar-end
          .navbar-item
            figure.image
              img(class="is-rounded" style="width: auto;" src="https://static.platzi.com/media/avatars/avatars/jtalero_bd4dfcb7-9908-4161-ab7f-16bb13e1c16f.jpg")
            p.navbar-link Fredy Talero
    aside.menu
      .menu-text
        i.material-icons.md-48.md-light home
        p Home
      .menu-text
        i.material-icons.md-48.md-light whatshot
        p Trendign
      .menu-text
        i.material-icons.md-48.md-light favorite
        p M谩s likes
      .menu-text.settings
        i.material-icons.md-48.md-light settings
        p Ajustes
    article.main
      section.main-section
        p(style="margin: 20px 0px 0px 8px;font-weight: bold;") Ahora en el cine
          div
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
        p(style="margin: 20px 0px 0px 8px;font-weight: bold;") Aclamadas por la critica
          div
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
        p(style="margin: 20px 0px 0px 8px;font-weight: bold;") No te debes perder
          div
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
              .sobreposicion
                h4 Assassins Creed
                p The quiet life of a terrier named Max is upended when his owned takes in Duke, a stray whom Max instantly dislikes.
            .box-section
              img(src="https://geeky.com.ar/wp-content/uploads/2016/05/Nuevas-im%C3%A1genes-de-Assassins-Creed.jpg")
</template>

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

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

main.scss

@charset "utf-8";
@import '../../node_modules/bulma/bulma.sass';
@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected];700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$font: 'Lato', sans-serif;
$color-first: #FFF;
$color-second: rgba(255, 83, 91, 0.75);
$color-third: #50557F;
$width: 1024px;
$width-menu: 89px;
$width-box: 287px/*311px*/;
$height-nav: 72px;
$height-menu: 810px;
$height-box: 192px/*270px*/;

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } 
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }

.wrap{
    font-family: $font;
    margin: 0px auto;
    width: $width;
}
.navbar{    
    height: $height-nav;
    box-shadow: 1px 1px 10px #aaa;

    .navbar-brand{
        margin-left: 20px !important;
    }
    .navbar-menu{
        margin-right: 20px !important;
    }
    .navbar-link:not(.is-arrowless)::after {
        border-color: #000000;
    }
}

.menu{
    position: relative;
    float: left;
    width: $width-menu;
    height: $height-menu;
    background: linear-gradient(90deg, rgba(255,83,91,1) 35%, rgba(253,116,108,1) 100%);

    .menu-text{
        padding: 15px 0px;
        font-weight: bold;
        color: $color-first;
        text-align: center;
    }
    .settings{
        position: absolute; 
        bottom: 0;
        width: 100%;
    }
}

.main{
    float: left;
    margin: 0px auto;
    width: $width - $width-menu;
    height: $height-menu;

    .main-section{
        float: left;
        padding: 10px;
        width: $width - $width-menu;
        height: $height-menu;
    }
    .main-section > div{
        height: 220px;
    }
    .box-section{
        position: relative;
        float: left;
        width: $width-box;
        height: $height-box;
        margin: 8px;
        border: 1px solid black;   

        img{
            position: absolute;
            background-size: cover;
            max-width: 100%;
            height: 100%;
        }
    }    
    .title-section{
        float: left;
        width: $width-box;
        height: $height-box;
        border: 1px solid black;   
    }
    .sobreposicion{
        position: absolute;
        bottom: 0;
        padding: 10px;
        background-color: $color-second;
        color: $color-first;
        font-size: 12px;
        h4{
            font-weight: bold;
        }
        p{
            margin-bottom: 0;
        }
    }
}

Menu.vue

<template lang="pug">
#Menu
  div.sidebar-container
      div.sidebar-container__card
        img(src='../assets/home.svg')
        p Home
      div.sidebar-container__card
        img(src='../assets/trendings.svg')
        p Trending
      div.sidebar-container__card
        img(src='../assets/heart.svg')
        p M谩s likes
      div.sidebar-container__card#settings
        img(src='../assets/settings.svg')
        p Ajustes

</template>

<script>

export default {
  name: 'Menu'

}

</script>

<style>
@import '../scss/main.scss'
</style>

Tarjetas.vue

<template lang="pug">
  #Tarjetas
    body
      .columns
        .card
          .card-image
            figure.image.is-256x256
              img(src="../assets/vidaSecretaPets.jpg")
          .card-content
            .media
              .media-content
                p.title.is-4 La vida secreta de las mascotas
            .content
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              | Phasellus nec iaculis mauris.
        .card
          .card-image
            figure.image.is-256x256
              img(src="../assets/vidaSecretaPets.jpg")
          .card-content
            .media
              .media-content
                p.title.is-4 La vida secreta de las mascotas
            .content
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              | Phasellus nec iaculis mauris.
        .card
          .card-image
            figure.image.is-256x256
              img(src="../assets/vidaSecretaPets.jpg")
          .card-content
            .media
              .media-content
                p.title.is-4 La vida secreta de las mascotas
            .content
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              | Phasellus nec iaculis mauris.
  </template>

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

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

Encabezado.vue

<template lang="pug">
  #Encabezado
    body
      nav.navbar(role="navigation" aria-label="main navigation")
        .navbar-brand
          a.navbar-item
            img(src="../assets/movies.jpg" width="112" height="28")
          a.navbar-burger.burger(role="button" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample")
            span(aria-hidden="true")
            span(aria-hidden="true")
            span(aria-hidden="true")
        #navbarBasicExample.navbar-menu
          .navbar-start
            .field#buscar
              .control
                input.input.is-info(type="text" placeholder="Busca tu peli, actor, actriz o director favoritos")
          .navbar-end
            .navbar-item
              | Bambini Rodriguez
              figure.image.is-48x48
                img.is-rounded(src="../assets/bambi.jpg")


  </template>

<script>
export default {
  name: 'Encabezado',

}
</script>

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

Definitivamente para este reto recomiendo el curso de CSS Grid: https://platzi.com/clases/css-grid-layout/

Aqui pongo mi codigo, no es responsive, esta en vue
Este es App.vue

<template lang="pug">
  #app
    Encabezado
    Menu
    h2#titulo Ahora en cines
    Tarjetas
    h2#titulo Aclamadas por la cr铆tica
    Tarjetas
    h2#titulo No te debes perder
    Tarjetas
</template>

  <script>

  import Tarjetas from './components/Tarjetas.vue'
  import Encabezado from './components/Encabezado.vue'
  import Menu from './components/Menu.vue'


  export default {
    name: 'App',
    components: {
      Tarjetas,
      Encabezado,
      Menu
    }

  }

  </script>

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

En otro curso habiamos hecho este reto dejo mi github por si se quieren robar las imagenes aqui

Hola todos, este es mi aporte del ejercicio.

App.vue

<template lang="pug">
  #app
    .container.is-fluid.search-bar.box
      .columns
        .column.is-3
          img(src='https://static.platzi.com/media/user_upload/logo-d871d30b-ac23-4240-93f3-13e49084d80b.jpg' width='112' height='28')
        .column.is-6
          input(type="text" placeholder="Busca tu peli, actor, actriz, o director favorito").input
        .column.is-3
          <div class="dropdown is-hoverable">
            <div class="dropdown-trigger">
              <button class="button borderless" aria-haspopup="true" aria-controls="dropdown-menu4">
                <span><strong>Bambi Rodriguez</strong></span>
                figure.image.is-32x32.ml-1.mr-0
                  img.is-rounded(src='https://bulma.io/images/placeholders/128x128.png')
                <span class="icon is-small">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu4" role="menu">
              <div class="dropdown-content">
                <div class="dropdown-item">
                  <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
                </div>
              </div>
            </div>
          </div>
    .p-0.is-fluid  
      .columns
        .column.is-1.platzi-left-bar.ml-2
            div
              a.has-text-white
                <i class="fa fa-home fa-2x" aria-hidden="true"></i>
                p.title.is-6.has-text-white Home
            div.mt-5
              a.has-text-white
                <i class="fa fa-fire fa-2x" aria-hidden="true"></i>
                p.title.is-6.has-text-white Trending
            div.mt-5
              a.has-text-white
                <i class="fa fa-heart fa-2x" aria-hidden="true"></i>
                p.title.is-6.has-text-white M谩s likes

            div.settings.has-text-center
              a.has-text-white
                <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
                p.title.is-6.has-text-white Ajustes

        .column.is-11
          h4.title.is-5.has-text-left No te puedes perder
          .tile.is-ancestor(v-for="x in 3")
            .tile.is-4.is-parent.movie-box(v-for="n in 3")
              .tile.is-child.card.movie-preview
                  .card-content
                    .content
                      | 
              .movie-caption.is-4
                h4.title.is-5.mt-1.movie-caption-title.has-text-left.ml-3.mb-3
                  | The secret life of Pets
                | Ex esse dolore Lorem commodo anim cupidatat nostrud laborum incididunt incididunt commodo.
</template>

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

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


<style lang="scss">
#app {
  font-family: 'Lato', 'Lato bold', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>

main.scss

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


.container {

  padding: 0 15px;
  position: relative;
  top: 10px;
}
.search-bar{
   
    height: 72px;
  }
  .search-box{
      width: 80%;
      height: 24px;
     
  }

  .borderless{
      border: none
  }

  .platzi-left-bar{
    background-image: linear-gradient(to bottom right,#FF535B,#FD746C);
    height: 74vw;
    width: 89px;
    position: relative;
    margin-top: -1px;
    
     
  }
  .movie-box{
      height: 300px;
      position: relative;
  }

  .movie-preview{
    background-image: url('https://www.telemundo.com/sites/nbcutelemundo/files/styles/fit-2000w/public/images/promo/article/2016/07/08/the-secret-life-of-pets.jpg?ramen_itok=iqwQftIcTf');
    background-size: cover;
  }


  .movie-caption-title{
    color: #FFF;
  }
  .movie-caption{
      position:absolute;
      opacity: 0.7;
      background-color: #FF535B;
      width: 94%;
      top: 158px;
      height: 130px;
      color: #FFF;
  }

  .settings{
    position:absolute;
    top: 65vw;
    left: 20%;
  }

.