Creación de Vistas con Mockups y Vue.js

Clase 11 de 53 • Curso Profesional de Vue.js 2

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:

Aquí encuentras a detalle las vistas que debes crear:

Juan Luis Rojas León

student•

Listo

Pug:

<template lang="pug">
  #app
    .header
      nav
        .logo
          img.logo(src='./assets/pelis.png')
        .search-bar
          input.search(type='text' placeholder='Busca tu peli, actor, actriz ó director favorito')
        .user
          div.container
            p.user-name Juan Luis Rojas
            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 Home
          i.fa.fa-heart(aria-hidden='true')
          p Trending
          i.fa.fa-fire(aria-hidden='true')
          p More likes
        .last
          i.fa.fa-cog(aria-hidden='true')
          p Settings
      .content-down
        h2 Ahora en cine
        div.container-images
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
        h2 Aclamadas por la crítica
        div.container-images
            div.over
              div.color
                h4 The Secret Life of Pets
                h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
            div.over
              div.color
                h4 The Secret Life of Pets
                h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
            div.over
              div.color
                h4 The Secret Life of Pets
                h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
        h2 No te debes  de perder
        div.container-images
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
          div.over
            div.color
              h4 The Secret Life of Pets
              h6 The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.
</template>

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

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

SCSS:

@import"~bulma/bulma.sass";

#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;
}
.logo img {
  width: 110px;
  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;
}
.content-down h2 {
  font-size: 22px;
  margin-left: 35px;
  font-weight: bold;
  margin-top: 25px;
}
.content {
  width: 100%;
  margin: 0;
  height: 91%;
}
.content-down {
  width: 90%;
}
.container-images {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.over {
  background-image: url("./assets/peli.jpg");
  background-repeat: no-repeat;
  height: 30vh;
  width: 33%;
  margin-left: 35px;
  position: relative;
}
.color {
  background: rgba(255,83,88,.8);
  width: 95.5%;
  height: 50%;
  position: absolute;
  bottom: 0;
}
.over h4, .over h6 {
  color: #fff;
  width: 90%;
  margin: 0px auto 0px auto;
}
.over h4 {
  margin-bottom: 10px;
}

Ricardo Celis

teacher•

Excelente Juan Luis Rojas!!! sigue con el curso y más adelante tendrás que, con lo que aprendes de vue utilizar esto que acabas de crear!

Cuéntame que te pareció el ejercicio? esto es nuevo y esperamos ver su feedback =)

Cristian Camilo Guevara López

Muy ¡Bueno!

Carlos Eduardo Gomez García

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

Cindy Viviana Rodriguez

Yo pensaba lo mismo, pero lo intente y me encanto es mas corto, primero lo hice con HTML y Bulma y despues lo pase a PUG, animo!!

@cinvir15 No si yo también lo intenté, de hecho se usar PUG pero no me gusta, a mi parecer es más difícil de leer el código, la práctica pasada la hice con PUG xD

Jhasmany Roque Chambi

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:wght@100;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>

Miguel Angel Reyes Moreno

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">
            <h4> Metal Gear Solid </h4>
            <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>```

Jesús Miguel Quinto Teran

Resultado:

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

Francisco Sanchez Mora

<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>

Leonardo Campo Romero

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'
  }
})

<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>

Victor Roberto López Marroquín

mi proyecto: https://github.com/SilverMaster-GT/movies-project

Fernando David Soto Betin

Excelente el ejercicio, para adquirir destreza en pug, scss y bulma. me falto la parte responsive pero allí vamos…

Repositorio:

se está viendo muy bien fersot7! avisa cuando lo tengas responsive y le damos otra revisada!

Jeffer Barragan

Listo !! para el que lo necesite

aqui esta el codigo

<template lang="pug">
  #app
    header
        section
            .columns.is-gapless.topbar
                .column.is-2
                    .logo
                        img(src="./assets/Logo_TV_2015.png" class="image" draggable="false")
                .column.is-8
                        .search
                            .control
                                input(class="input" type="text" placeholder="¿Qué buscas?")
                .column.is-2
                    .profile
                        .prof-name
                            span User Name
                        .prof-img
                            img(src="./assets/defaultIcon.png" class="image" draggable="false") 
    section
        .left-menu
            .columns.s-gapless.left-menu-cont
                .item
                    img(src="./assets/ic_home_white_48dp_2x.png" draggable="false")
                    span Home
                .item
                    img(src="./assets/ic_whatshot_white_48dp_2x.png" draggable="false")
                    span Trending
                .item
                    img(src="./assets/ic_favorite_white_48dp_2x.png" draggable="false")
                    span Más Likes
                .item
                    img(src="./assets/ic_add_circle_white_48dp_2x.png" draggable="false")
                    span Ajustes
    section  
        .content-web.view-wraps
            .tile.is-ancestor
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            .tile.is-ancestor
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
            .tile.is-ancestor
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                .tile.is-parent
                    .item-cont.tile.is-child.box
                        .data
                            h1 Title
                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                      
         
</template>

Y estilos

  $purple:#50557f;
  $rose:#FF535B;


header{
    .topbar{
        background:#FFF;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100%;
        z-index:5;
        top:0;
        box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);         
        .search {
	        margin: 0;
	    	padding: 0 5pc;
            input{
                border:1px solid $purple;
                transition:border 0.5s ease-out;
            &:focus{
                border-color: $rose;
                }
            }
        }
        .logo{
        	max-width:4.5pc;
        	margin: 0 auto;		
            img{

            }
        }
        .profile{
            display: flex;
            align-items: center;
            justify-content: center;
            .prof-name{
                span{
                    font-weight: bold;
                    color:$purple;
                }             
            }
            .prof-img {
                 align-self: flex-end;
                 margin: 0 15px;
                img{
                    border-radius:50%;
                    max-width:45px;
                }
            }
        }
    }
}
.left-menu{
    position:fixed;
    top:0;
    left:0;
    width:90px;
    height:100%;
    background-color:$rose;
    z-index:4;
    .left-menu-cont{
        position: absolute;
        flex-direction:column;
        width: 100%;
        height: 100%;
        padding-top: 75px;
        margin:0;
        top:0;
        left:0;
        justify-content: flex-start ;
        
        .item{
            text-align: center;
            padding:10px;
            align-self:flex-start;
            &:last-child{
                position: absolute;
                bottom: 0;
                left: 0;
            }
            img{
                max-width:45px;
            }
            span{
                color:#FFF;
                font-size:15px;
                font-weight:bold;
            }
        }
    }
}
.content-web{
    .item-cont{
        position:relative;
        width:287px;
        height: 192px;
        background-image:url("./assets/backgroun-item.png");
        overflow:hidden;
        &:hover{
            .data{
                bottom:0;
            }
        }
        .data {
            position: absolute;
            bottom: -200px;
            width: 100%;
            left: 0;
            padding: 20px 15px;
            color:#FFF;
            background:rgba(255, 83, 91, 0.75);
            transition: bottom 0.5s ease-in-out;
            h1{
                font-size:22px;
                font-weight:300;
            }
            p{
                font-size:14px;
            }
        }
    }
}
.view-wraps{
    margin-top: 70px;
    padding-top: 20px;
    margin-left: 75px;
    padding-left: 40px;
    padding-right:20px;
    padding-bottom:35px;
    overflow:hidden;
}

Excelente trabajo Lesh! qué tal vas con el curso?

Luis Donaldo Lopez Gil

Despues de mucho tiempo, solo falta que sea responsive jaja

Omar Flores Grimontt

Listo! 😄

Aquí está la app y el código

Manuel Ojeda

Resultado

<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>

@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;
                            }
                        }
                    }
                }
            }
        }
    }
}

Jhojany Jose Uzategui Araujo

Listo mi codigo

<template lang="pug">
  #app
    section(id="panel-H" class="panel-H")
      header(id="header" class="header contenedor")
        img(src="../images/movi.jpg" class="logo-img")
        input(type="text" name="buscardor" placeholder="Busca tu peli, actor, actriz o director favorito" class="buscador")
        div(class="user")
          h2 {{ msg }}
          img(src="../images/user.png" width="50px" class="user-img")
          a(href="#" class="btnUser") ▼
    div(class="contenedor")
      section(id="panel-V" class="panel-V")
        li
          img(src="./assets/home.png")
          a Home 
        li
          img(src="./assets/trend.png")
          a Trending
        li
          img(src="./assets/fav.png")
          a Más likes
        li
          img(src="./assets/settings.png")
          a Ajustes 
      section(id="contenido" class="contenido")
        li
          h2 Ahora en el cine
          div(class="cajaCaja")
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
        li
          h2 Aclamadas por la critica
          div(class="cajaCaja")
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
        li
          h2 No te debes perder
          div(class="cajaCaja")
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula
            div(class="cajaImg")
              img(src="./assets/peli.jpg")
              div(class="encima")
                h3 Monsters INK
                p Monsters se trata de una pelicula para niños y jovenes muy divertida, todos los amigos compartiran muchas aventuras y desafios durante toda la pelicula        
</template>

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

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

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

#app {
	position: relative;
	font-family: 'Lato', sans-serif;
	background: #ff535b;
}

#panel-H {
	height: 70px;
	padding: 20px;
	background: #ffffff;
}

#panel-V {
	background-image: linear-gradient(to right, #ff535b , #fd746c);
	list-style: none;
	width: 120px;
	height: 590px;
	padding: 20px;
	color: white;
}

#panel-V img {
	display: block;
  margin-left: auto;
	margin-right: auto;
	cursor: pointer;
}

#panel-V li {
	text-align: center;
	padding: 3px 0;
}

#panel-V li a {
	color: white;
	text-decoration: none;
}

#panel-V li:last-child {
	margin-top: 300px;
}

#contenido {
	background: #ffffff;
	width: 100%;
	height: 590px;
	-webkit-box-shadow: inset 0px 10px 13px -3px rgba(224,224,224,0.8);
	-moz-box-shadow: inset 0px 10px 13px -3px rgba(224,224,224,0.8);
	box-shadow: inset 0px 10px 13px -3px rgba(224,224,224,0.8);
}

#contenido li {
	list-style: none;
	margin-left: 40px;
	text-align: left;
}

.cajaCaja {
	display: flex;
}

#contenido li:first-child {
	margin-top: 20px;
}

#contenido .cajaImg {
	width: 300px;
	height: 150px;
	margin: 5px 40px;
  margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
	display: inline-block;
  text-align: center;
}

.encima {
	width: 100%;
	height: 50%;
	padding: 0 5px;
	background: rgba(255, 83, 91, .75);
	position: absolute;
  top: 75%;
  left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: justify;
	cursor: pointer;
}

#contenido .cajaImg img {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	cursor: pointer;
}

.encima p {
	font-size: 11px;
}

h2 {
	margin-right: 20px;
	font-weight: bold;
}

h3 {
	font-weight: bold;
	font-size: 17px;
}

.header {
	position: relative;
}

.contenedor {
	max-width: 1350px;
	margin: auto;
	position: relative;
	display: flex;
  align-items: center;
}

.user {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	color: #50557f;
}

.user-img {
	border-radius: 50%;
	margin-right: 20px;
}

.btnUser {
	color: #50557f;
}

.buscador {
	padding: 7px 5px;
	display: flex;
	align-items: center;
	position: absolute;
	left: 30%;
	width: 400px;
	border-radius: 5px;
	border: 1px solid lightgray;
}

#panel-H .logo-img {
	display: inline-block;
	margin-left: 0;
}

#panel-H .user-img {
	display: block;
}

Listo!

Main.scss

Listo!!!

Dahiana Benitez

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!!!

Ariel Garcia Serna

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>

Arturo Azael Martínez Carmona

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.

Debido a que la información estaba repetida, pudiste usar la expresión v-for y te habrías ahorrado mucho texto en tu archivo.

Creación de Vistas con Mockups y Vue.js

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack

Diseño de Mockups: Práctica y Colaboración en Comunidad

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

Expresiones en Vue: sintaxis doble llave

Diferencia entre v-show y v-if en el DOM

Qué es data binding en Vue.js

Computed properties en Vue.js: cómo crearlas

Qué son los watchers de Vue

Eventos Vue: directiva v-on y métodos format

Cómo construir una interfaz de búsqueda completa en Vue

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

Creando servicios HTTP con Fetch API

Configurar Trae con Fetch para peticiones HTTP

Cómo conectar servicios a componentes Vue

Sistema de Componentes

Cómo crear componentes en Vue

Componentes Layout en Vue con Bulma

Reactividad en Vue: $set y Object.assign

Hooks del ciclo de vida en Vue.js

Comunicación padre-hijo con props en Vue

Eventos en Vue: comunicar hijo a padre

Slots: HTML dinámico en componentes Vue

Plugin Event Bus: comunicar componentes sin relación en Vue

Vue Router

Vue Router para single page applications

Instalación de View Router paso a paso

<target-language> Spanish </target-language> Navegación programática con Vue Router

Extendiendo VueJS

Vue modifiers: cómo simplificar eventos

Filtros en Vue: conversión milisegundos a minutos

Directivas personalizadas en Vue: v-blur

Mixins Vue: compartir lógica entre componentes

Clases, Animaciones y Transiciones36

Animaciones CSS3 con transiciones en Vue

Vuex

Cómo Vuex centraliza estados en Vue

Instalación de Vuex con estado único

Cómo usar mutations y commit en Vuex

Getters de Vuex: mapGetters y store sincronizado

Cómo dispatch ejecuta actions asincrónicas en ViewX

Instalación de Viewex en Platzi Music

Nuxt.js

Server Side Rendering: ventajas y limitaciones

Instalación y configuración de Next.js en View

Copiar componentes Vue.js a Nuxt con SSR

Deploy a Producción con Now

Instalación y login de Now para Vue.js

Deploy de aplicación React con Now

Conclusiones

Cómo hacer deploy de tu app Vue.js

Bonus

Internacionalización con Vue I18n: configurar multiidioma

Configuración de unit tests en Vue con webpack

JWT con Vue Router: autenticación completa