Hola! He seguido el curso hasta aquí, la verdad me desespera porque tengo muchos errores, sin embrago, aqui sigo. El problema que tengo esque; el vídeo y los estilos no se aplican en Chrome pero, en Firefox, si ¿Qué puedo hacer?
-
check_circle_outlineMódulo 1 | 8 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 11 clases
Sección portada
expand_more-
done_all
Clase 1
9.- Mostrar vídeo
-
done_all
Clase 2
10.- Centrar vídeo
-
done_all
Clase 3
11.- Poster y límites de tamaño
-
done_all
Clase 4
12.- Centrar contenido verticalmente
-
done_all
Clase 5
13.- Trabajando con z-index
-
done_all
Clase 6
14.- Google Fonts
-
done_all
Clase 7
15.- Colocar logo y menú
-
done_all
Clase 8
16.- Bootstrap
-
done_all
Clase 9
17.- Programación en HAML
-
done_all
Clase 10
18.- Terminando navegación, transiciones y hover
-
done_all
Clase 11
19.- Trabajando con Position
-
-
check_circle_outlineMódulo 3 | 7 clases
Sticky Navigation
expand_more -
check_circle_outlineMódulo 4 | 5 clases
Menú con imágenes
expand_more -
check_circle_outlineMódulo 5 | 5 clases
Slider
expand_more -
check_circle_outlineMódulo 6 | 12 clases
Formulario de contacto
expand_more -
check_circle_outlineMódulo 7 | 6 clases
Mapa
expand_more -
check_circle_outlineMódulo 8 | 9 clases
Offline
expand_more -
check_circle_outlineMódulo 9 | 9 clases
Responsive Design
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Deploy
expand_more -
check_circle_outlineMódulo 11 | 1 clases
Retroalimentación de proyecto
expand_more -
check_circle_outlineMódulo 12.-
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-
9 comentario(s)
Para el manejo de las tipografías yo prefiero definirlas globalmente, es decir:
En el CSS:
En el CSS:
h1,h2,h3,h4,h5,h6{ font-family: 'Roboto Slab', serif; }
Y si quiero que los párrafos tengan otra tipografía:
p{ font-family: 'Roboto', sans-serif; }
También si quiero cambiar alguna de las etiquetas lo hago así:
h1{ font-size: 2.7em; }
Espero les sirva :)
Saludos ¿Alguien sabe por que todo lo que agrego en mi pagina (Textos, imagenes) me sale sumamente pequeño?
Hola muy buen curso, viendo la lista en mi página me surge una pregunta: ¿hay alguna forma de sombrear un poco el video? ya que en algunas partes del mismo no resaltan tanto las letras del menú.
Saludos!
Saludos!
Hola!
A mí la lista se me posiciona al lado izquierdo: http://easycaptures.com/fs/uploaded/1017/4290658670.jpg
Te muestro mi código por si hubiese algo que no esté bien:
index.haml:
!!!5
%html{class:"no-js", lang:"es-es"}
%head
%meta{charset:"utf-8"}
%title La mejor comida en Restaurante Facilito
%meta{name:"description", content:"Come rico en el mejor restaurante de la ciudad, servicio de primera."}
%link{href:'https://fonts.googleapis.com/css?family=Dancing+Script', rel:'stylesheet', type:'text/css'}
%link{rel:"stylesheet", href:"css/normalize.css"}
%link{rel:"stylesheet",href:"https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css"}
%link{rel:"stylesheet", href:"css/style.css"}
%meta{name:"viewport", content:"width=device-width, initial-scale=1"}
%script{src:"js/vendor/modernizr-2.8.3.min.js"}
%body
="<!--[if lt IE 9]>"
%p{class:"browserupgrade"}
Estás usando un navegadoe
%strong desactualizado.
Por favor
%a{href:"http://browsehappy.com/"}
actualiza tu navegador
para una mejor experiencia
="<![endif]-->"
.video-container
%video{autoplay:true,loop:true,width:"1280",height:"720",poster:"/videos/images/bbq.jpg"}
%source{src:"/videos/mp4/bbq.mp4",typ:"video/mp4"}
%source{src:"/videos/webm/bbq.webm",typ:"video/webm"}
.row.full-height.middle-xs.center-xs.relative.up
.col-xs-12
.box.white-text
%img{src:"/imgs/logo.png", width:200}
%h1.dancing-script.title.no-margin Restaurante Facilito
%p#is-open Abierto ahora
%nav.fixed#navigation
%ul
%li Inicio
%li Menú
%li Galería
%li Contacto
%li Cómo llegar
CSS:
/* ==========================================================================
Helper classes
========================================================================== */
.white-text{
color:white;
}
.dancing-script{
font-family: 'Dancing Script', cursive;
}
.title{
font-size: 4em;
}
.fixed{
position: fixed;
}
.relative{
position:relative;
}
.up{
z-index: 5;
}
.full-height{
height:100%;
}
.row{
margin:0;
}
.no-margin{
margin:0px;
}
A mí la lista se me posiciona al lado izquierdo: http://easycaptures.com/fs/uploaded/1017/4290658670.jpg
Te muestro mi código por si hubiese algo que no esté bien:
index.haml:
!!!5
%html{class:"no-js", lang:"es-es"}
%head
%meta{charset:"utf-8"}
%title La mejor comida en Restaurante Facilito
%meta{name:"description", content:"Come rico en el mejor restaurante de la ciudad, servicio de primera."}
%link{href:'https://fonts.googleapis.com/css?family=Dancing+Script', rel:'stylesheet', type:'text/css'}
%link{rel:"stylesheet", href:"css/normalize.css"}
%link{rel:"stylesheet",href:"https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css"}
%link{rel:"stylesheet", href:"css/style.css"}
%meta{name:"viewport", content:"width=device-width, initial-scale=1"}
%script{src:"js/vendor/modernizr-2.8.3.min.js"}
%body
="<!--[if lt IE 9]>"
%p{class:"browserupgrade"}
Estás usando un navegadoe
%strong desactualizado.
Por favor
%a{href:"http://browsehappy.com/"}
actualiza tu navegador
para una mejor experiencia
="<![endif]-->"
.video-container
%video{autoplay:true,loop:true,width:"1280",height:"720",poster:"/videos/images/bbq.jpg"}
%source{src:"/videos/mp4/bbq.mp4",typ:"video/mp4"}
%source{src:"/videos/webm/bbq.webm",typ:"video/webm"}
.row.full-height.middle-xs.center-xs.relative.up
.col-xs-12
.box.white-text
%img{src:"/imgs/logo.png", width:200}
%h1.dancing-script.title.no-margin Restaurante Facilito
%p#is-open Abierto ahora
%nav.fixed#navigation
%ul
%li Inicio
%li Menú
%li Galería
%li Contacto
%li Cómo llegar
CSS:
/* ==========================================================================
Helper classes
========================================================================== */
.white-text{
color:white;
}
.dancing-script{
font-family: 'Dancing Script', cursive;
}
.title{
font-size: 4em;
}
.fixed{
position: fixed;
}
.relative{
position:relative;
}
.up{
z-index: 5;
}
.full-height{
height:100%;
}
.row{
margin:0;
}
.no-margin{
margin:0px;
}
Como se peude poner el logo de manera responsiva? ya que cuando se ve en distintos dispositivos mi imagen se ve mal y sobrepasa la pantalla creando el scroll horizontal como en los anteriores videos, de ante mano muchas gracias
Al agregar la lista si se me centra el texto pero aparece atras y por lo tanto no se ve en el navegador alguna idea de porqué me pasa esto? cabe destacar que ya revisé mis indentaciones y el código es identico a la lección.
Gracias.
Gracias.
Clase 15