En este video vamos a comenzar a escribir un poco de CSS para el encabezado de nuestro proyecto vamos
a abrir lo que viene siendo la hoja de estilos CSS y luego Main puntos CSS y lo va a poner al lado derecho
para que sea más fácil para ti identificar los electores que estoy escribiendo o hacer un poco más grande
aquí.
Para que sea más fácil verlo en la pantalla y mostrar un poco de scroll y aquí vamos a encontrar qué
hice autor custom estaís en esta parte es donde tenemos que escribir nuestros estilos.
Voy a agregar algo aquí voy a poner algunos estilos que son globales.
Por ejemplo vas a poner el HTML y lanza Penner Book 6 sin Border Box.
Qué fue lo que estuvimos viendo para el modelo caja.
Cuando le agregamos un padrino nos afecte poner un iPhone 6 pero no macro que ya viene declarado que
aquí se pagan 6 1 en un Leyde 1.4 así que creo que podemos dejarlo entonces así.
Y por último vamos a ponerlo aquí abajo asterisco como asterisco CIFOR coma asterisco lospuntos after
le ponemos bolsade Zinni Gerrit
y vamos a ver nuestro diseño y vamos a ver que en la parte inferior tenemos un background y es un poco
un color un poco más gris más totalmente blanco F12 F12 veloz Body background color y tenemos un color
un poco más gris para nuestro proyecto.
Vamos a agregar algo de lo que viene siendo el encabezado así que hay que ponerle Feber y guardar un
poco de scroll porque sea más fácil verlo y vamos a ponerlo aquí Gyro vamos a agregar la imagen como
fondo así que vamos de una vez un Mackinnon y Match o R.L y les diga qué imagen le vamos a poner en
las que hemos copiado a quien el día M.G. vas a encontrar se llama encabezado puedes aquí esto va a
ser la imagen así que vamos a si recuerdas estamos aquí en Maine tenemos que salir de ahí dos puntos
diagonal y M.G. y luego el encabezado punto JPG guardo cambios recargo vemos que se va a ver como un
poco corto.
Si recuerdo que había una propiedad de que te tomaba el 100 por ciento de la ventana.
Hay 100 por height lo va a hacer de esta forma y tenemos nuestra imagen de fondo tomando el 100 por
ciento de alto puedes ser que sin embargo la imagen no está así como muy centrada se ve como cortada
no centrada se ve así un lado le vamos a poner aquí Bagram posición Top Center el cargo de esta forma
se ver un poco centrada.
Sin embargo me gustaría que se viera más de la imagen puede utilizar un background 6 cover recargó y
vemos que hace de la imagen un poco más más ajustada en mi documento e incluso lo puedo hacer más grande
y se va a ver bien.
O más pequeño y también se va a ver bien.
Y sólo un poco más grande y así y por último le vamos a poner un con eso creo que es suficiente.
Después de todo tenemos el contenido Jaider que tienen las redes sociales no hemos del contenido Gelber
y vamos a ponerle Badín top de 40 píxeles.
Esto para que no esté tan pegado el contenido hacia arriba vemos que con un top de 40 pixeles se separa
y queda un poco más separados de lo ideal pero en un dispositivo móvil yo quiero que esté de esa forma
así que creo que se muy bien.
De momento vamos a continuar y vamos a ponerlo aquí.
Nab.
Punto redes sociales que vendría siendo nuestro menú que hemos creado aquí le ponemos Tex Center y guardamos
cambios y recargamos se va a centrar el menú.
Igual se sigue viendo difícil están como Nazgûl redes sociales.
Para cada uno de los enlaces color blanco por hacerles cambio si recargo a los que se vean un poco mejor.
Sin embargo no se ve muy grande los iconos de iPhone 6 3 en recargo tal vez menos 2 recargo y creo que
se ve un poco mejor.
Y me gustaría tener un poco de separación entre cada uno de ellos con un margen right de 20 píxeles
a cargo y esto nos dará un poco de separación entre cada uno de los enlaces decide inspección aquí la
consola yo doy clic en el último elemento vamos a ver que también el último le aplica un margen a pesar
de que ya no hay nada.
Vamos a seleccionar éste y ponerlo aquí en las Jail y le ponemos margin right 0 para que le remueva
al margen y ahora sí quede bien centrado todo el contenido se va viendo bien vamos a ponerle continuar
tenemos este de información evento así que ponemos información evento y vamos a ponerle un texanas encender
Mardo cambios y recargo.
Y esto va a centrar lo que va diciendo la fecha y los dos párrafos de la fecha del nombre del sitio
están por fuera igual podremos poner dentro vamos a hacer la prueba para ver cómo se ve tenemos información
evento y vamos a poner aquí color blanco el que sea más fácil de ver lo que tenemos aquí
vamos a poner la información evento estamos en esta parte y tenemos información evento p y le vamos
a poner un margen cero porque le va a ir le agrega un poco de margen.
Ya se removerse no nos ponemos un display inline se van uno frente al otro y en iPhone 6 de 20 píxeles.
Cuarto cambio sobrecargo.
Y por último llenaban de falta ponerle un tex Transform percas para que todo sea mayuscula mas o menos.
Qué equipo es el que está un poco más de separador y lo vamos a corregir.
Vamos a copiar el nombre del selector para el icono pero esto pego y pongo el y y el color para este
icono a ser de naranja.
Así que selecciono.
F 49 18.
Por si no tienes Photoshop un color F.
49 18.
Recargo ya tengo mis iconos en color naranja.
Vamos a darle los últimos toques a esto vamos a acomodar los nuestros párrafos para el siguiente vídeo
agregar o acomodar la parte inferior y vamos a poner aquí.
P slogan no era Albanese
P fecha es el que tenemos aquí.
Y la ponemos
Battlefield y Ciudad float Right y Text Line Right se va a ver.
Lo va a separar totalmente.
Aquí tenemos estas pesonas a poner un CLEAR Fix habíamos dicho que a HTML5 Weyler Poitier Clear Fix.
No necesitamos hacer nada más.
Además cortamos y pegamos y se tendrá que ver así de esta forma
y guardamos cambios si recargamos y esto va a dar de esta forma al diseño igual vemos que se queda como
muy ancho no se lo hace muy a la orilla este de información evento lo podremos poner en un media query
así que podríamos poner arroba media only screen.
Ya se usará el tamaño de una tableta estándar 768 píxeles y podremos Dib información evento y ponemos
un UIT-T del 70 por ciento y margin cero auto para que se centre en ese contenedor recargo y vemos que
ya quedan poco más junto.
Igual situación muy grande se seguiría separando pero igual para un tamaño estándar creo que se ve bien
así que se va viendo bien en este diseño.
Les falta un poco de separación aquí sería más bien también agregarle un margen top de 50 píxeles tal
vez
y en nuestro menú de redes sociales ponerle un poco de contenido Jaider ponerle tal vez también un media
query
y ponerle un palín top tal vez de 10 nada más.
No tan grande que de esta forma y cuando este chico sea de 40 píxeles sí que vemos que se va viendo
un poco mejor en el siguiente vídeo vamos a trabajar con la parte del GDL webcam el eslogan el nombre
del sitio pero para eso tendremos que agregar una fuente de Google Fonts o algunas fuentes.