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
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
11 Días
21 Hrs
6 Min
4 Seg
Ejercicio Avanzado de Pug y SASS
11/53Lectura
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.
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 27
Preguntas 0
Ordenar por:
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>
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
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:wght@400;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%;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?