Muy bien, en el anterior video ya habíamos creado nuestra estructura de

HTML y dejado preparado todo para que ya empezamos a estilizar. Así

que en este video vamos a empezar a utilizar nuestra aplicación para
empezar a que luzca bien y luego, una vez la terminemos de utilizar, lo
vamos a empezar a subir y vamos a comprar un dominio y el hosting y ya
terminaremos con nuestro pequeño proyecto. Así de sencillo. Entonces
vamos a empezar a estilizar nuestro en nuestro sitio web. Para eso
nosotros habíamos descrito nuestro estilo CSS, un archivo por separado
y nosotros ya lo habíamos enlazado previamente. Es allí donde nosotros
habíamos enlazado este estilo. Entonces vamos a empezar a escribirlo
de una vez para hacer eso vamos a ir empezando a escribir. Qué otros
estilos generales, tanto de los estilos que afectan a todo nuestro sitio web
como aquellos que afectan a una sección únicamente. Entonces vamos a
decir margin cero cero para quitarle el margen y espadín a todos los
elementos, el margen y el relleno, y vamos a quitarle los bordes.
También vamos a organizar y observa cómo todo se va sin ningún borde,
sin ningún PADI. Muy bien. Aparte de esto, también vamos a empezar a
utilizar el body, en donde vamos a decir body y vamos a decirle, por
ejemplo, backgrounds y vamos a colocarle un color. Ese F0 F1, por
ejemplo. Guardamos, reiniciamos y observé que ahora tiene un color,
digamos que es bastante notorio y lo vamos a empezar a combinar con
los estilos. Así que aparte del body, también tenemos una etiqueta
etiquetas P por todo nuestro sitio web. Entonces estas etiquetas de
contexto de relleno vamos a empezar a utilizarlas. Entonces vamos a
decir que de hecho vamos a ver cómo queda. P íbamos a colocarle, por
ejemplo, el color que vamos a colocar en un color. 52. Perdón 52 4C 56.
Guardamos y observa de ahora tiene un color bastante tenue, pero no
solamente vamos a cambiar el color, sino que también vamos a afectarle
otros estilos, como por ejemplo vamos a cambiarle el tamaño de fuente,
entonces vamos a decirle bonsais y vamos a colocarle 160 por ciento,
por ejemplo. También colocarle un link para que tenga un separador
entre Lina interlineado 155 por ciento y un 3 por ciento. Aparte del
porcentaje del patín, también colocarlo en Tex Indert y vamos a colocarle
de 2 por ciento para que tenga un inventado texto y un tex a la justifiques
para que el texto sea justificado. Guardamos, vamos a nuestro sitio. Y
observa que es así como luce ahora el texto muy bien, pero también
vamos a afectar una que otro estilo de los H3. Recuerda que estos son
H3, entonces vamos a escribir. H3 Y aquí vamos a escribir, por ejemplo,
el iPhone 6. Vamos a escribirle, por ejemplo, de 175 por ciento. No sólo
eso, sino que también vamos a decir en la red y vamos a decirle 155 por
ciento. Muy aparte de eso, también vamos a decir el Phong Wait. Y
aparte del fondo, ahí vamos a decirle 500. Y también, aparte del fun way,
vamos a agregar el color y el color. Le podemos colocar exactamente el
mismo que habíamos colocado para las etiquetas. También podría
cambiar. En mi caso lo voy a colocar exactamente el mismo. Entonces le
colocamos el mismo color, pero también vamos a agregarle el Texas
Encender para que el texto esté centrado, un tex transform. Para cambiar
el tipo de texto como están así en mayúscula, minúscula, mayúsculas,
minúsculas, vamos a volcar toda mayúscula con percas. Finalmente
vamos a quitarle el padre una cero y vamos a guardarlo y vamos a
reiniciar. Observa ahora cómo nuestros H3 están centrados, tienen
estilos distintos y muy bien. Vamos ahora a empezar a estilizar también
no sólo los H3, sino también vamos a afectar todos los estilos generales.
La etiqueta está por todos nuestro sitio web. Aquí tenemos, por ejemplo,
unas cuantas y de hecho en la navegación también tenemos unas
cuantas. Entonces vamos a empezar a utilizarlas para estilizar las
etiquetas. Vamos a darle, por ejemplo, un color a todas. Entonces vamos
a decirle del mismo color que habíamos colocado aquí para el texto y los
títulos. Y también vamos a darle el nombre, porque de esa manera
vamos a quitarle ese subrayado bordamos y observa como ya se han
subrayado, pero aún así aún son enlaces muy bien, no solamente en el
decorado, sino que también vamos a cambiarle el fondo Waiter a Boldt.
Guardamos y observa que ahora tiene como resaltado. Muy bien, vamos
a afectarle también su pseudo clase llamada joven. Entonces le decimos
a Jover y vamos a decirle, por ejemplo, color y vamos a empezar a
decirle un color c3 d7, d. F. Guardamos, refrescamos y observase que
ahora cambia el color. Cuando posicionamos, obviamente el huevo. Tú
puedes cambiar los colores que más te gusten. No necesariamente
tienen que utilizar todo lo que hago, pero de esta manera vamos
avanzando muy bien. De hecho, también vamos a afectar las imágenes
en las imágenes, por ejemplo, que tenemos a lo largo de todo el
documento. Tenemos muchas imágenes, así que vamos a ir afectándole.
Las vamos a describir aquí y m.g. y vamos a decir display blog, por
ejemplo, display blog. Y no solamente esto, sino que vamos a decirle
Margin Cero Auto, por ejemplo, para tener un margen centrado más un
máximo del 100 por ciento y vamos a decirle un auto para tenerlo
centrado verticalmente. También, aparte del auto, vamos a agregarle un
widget auto. Y finalmente vamos a agregarle un margin botón de menos
cuatro píxeles. Si guardamos, tenemos nuestros pequeñas imágenes
centradas. Pero aparte de esto, vamos a ir a arreglándolo. Entonces
vamos a empezar con todo. Nuestra aplicación que bueno una
aplicación. Nuestro sitio web que contiene un contenedor general,
recuerda que el contenedor general se llama Araper. Entonces, dentro de
Vora vamos a escribir, lo vamos a describir. El estilo de Brad Bird, que es
una idea en este caso es bueno. De hecho esto debería ser una idea, no
una clase, sino una idea muy bien. Sólo lo cambiamos por ahí y todo
igual. Entonces vamos a decir ahora Araper. Ojo, tienen que cambiarlo.
ANIDE muy bien. Este breve, pero vamos a escribir los estilos, vamos a
decirle un más Weta. Más de 1200 píxeles. De esta manera vamos a
tener, digamos, una manera que abarque un texto centrado, porque lo
vamos a agregar, un Martin auto observa lo que pasa, vamos a abordarlo
y como que ahora tiene un pequeño margen y todo está un poquito
centrado. Lo vamos a ir arreglando. Entonces vamos a hacer lo siguiente
aparte del Brawer, lo que vamos a hacer es también empezar a
agregarle. Hay un pequeño contenedor interno. De hecho, no es el
contenedor interno, sino que lo habíamos colocado NERV rapper. Aquí
es donde vamos a explicarlo también, que es un Heydi. De hecho,
también la coloca como una clase, pero vamos a cambiarlo. Un Heydi
muy bien, vamos a afectarlo. Van rapper y muy bien. Vamos a escribirle
un Maschwitz de 1200 píxeles también, pero el margen vamos a dejarlo a
cero auto exactamente igual como el anterior, y luego vamos a agregarle
un padre. Entonces el Fading vamos a decirle de cero arriba, cero a la
derecha, 3 por ciento hacia abajo para que, digamos, tenga un par hacia
abajo y hacia la izquierda de cero también muy bien. De esta manera
vamos a guardar, refrescamos y observa que no ha habido mucho
cambio, pero vamos arreglando algunas cosas. Específicamente vamos
a empezar con el Jaider. El GD recuerde que contiene tanto la
navegación como el slider. Entonces vamos a empezar con la etiqueta.
Jaider La etiqueta propiamente. Porque recuerda que si bajamos un poco
la etiqueta misma desde el jaider, vamos a decirlo del 100 por ciento.
También vamos a decirle un jaitt, pero no del 100 por ciento, sino de
siempre y se les por ejemplo. Y vamos a darle un top de cero y vamos a
darle también una propiedad leff de cero. De esa manera lo vamos a
tener exactamente en la parte de arriba. En otro bordamos y efectismos
observa como ahora hay un pequeño espacio de 100 píxeles
simplemente, pero vamos a arreglarlo para que los que vienen entonces,
aparte de Jaider, vamos a agregarle Jeddah y vamos a decirle el logo.
Recuerda que el logo es esta parte de aquí. Gelder Bueno, aquí está el
logo en la etiqueta, pero yo quiero afectar su imagen para quitarle,
digamos, ese tamaño tan grande que tiene LFA. Perdón la imagen.
Entonces vamos a decirle margin 20 pixeles y aparte de 20 píxeles
vamos a decirle que flote hacia la izquierda una vez flote hacia la
izquierda. Vamos a decirle un width de 500 píxeles. Bueno, no 510 en 50
píxeles para quitarle el tamaño tan grande. Entonces refrescamos,
observa como ahora tenemos nuestro nuestra imagen del icono y al lado
están las del resto de imágenes. Obviamente yo te recomiendo que
luego, cuando tengas un sitio web, utilices la imagen, específicamente el
tamaño que vas a necesitar de esa manera, pues tu sitio va a correr más
rápido. Aquí yo lo he hecho de esta manera para hacerlo más práctico y
más rápido, pero para no ir dejando tantas imágenes tampoco. Pero
luego de ello te recomiendo que minimicen la imagen específicamente 50
píxeles por 50 píxeles y le coloques exactamente igual para que no le
estés afectando con una clase CSS. Pero muy bien, vamos a continuar
donde vamos a arreglar nuestra navegación. Entonces vamos a adquirir
otro estilo y recuerda que nuestra navegación tiene un Heydi llamado Me
Nubio Maicon, entonces decimos hashtag o numeral ICOM Menú y
vamos a decirle display, no? En realidad estamos hablando en este caso
del menú y con es este icono de fangosa con la rayita y cuando nuestro
sitio web está, digamos, en un tamaño normal. Yo no quiero que parezca
este ícono. Entonces, como yo no quiero que aparezca, pues vamos a
decirle display non para que no se muestre. Entonces nosotros
guardamos, refrescamos y observa que ya no está. Pero no solamente
no quiero que se muestre, sino que también cuando se muestre, cuando
sea el tamaño de pantalla móvil. Yo quiero que el tamaño sea un fondo,
digamos un consigáis de 50 píxeles. Y si guardamos en ese caso no lo
vamos a ver. Vamos a comenzar por ahora el display para ver cómo ha
crecido y observa que ese es el tamaño que vamos a ver en íconos de
móviles. Vamos a ocultarlo de nuevo con display, no? Muy bien,
entonces vamos a afectar ya no solo el icono, sino a los de los enlaces
de la navegación que están dentro de un muelle. Entonces, como tengo
un único huele, simplemente digo huele y ahora digo que huele tiene de
un liceísta, no para quitarle esos típicos, esos típicos puntos,
refrescamos y observa que ya no los tienen muy bien, no solamente los
puntos, sino que adentro huele a etiquetas. L Y entonces, como cada
etiqueta, Leydi tiene su propio estilo, vamos a afectarlos, huele. Ley y de
hecho vamos a afectarlos todo huele Lehi y dentro del NAF hay un
muelle, un LTI y hay una etiqueta. Entonces vamos a escribir etiqueta.
Una vez hemos escrito esto o vamos a decir color y vamos a darle un
color a todos nuestros nuestros. Etiquetas a nuestra navegación,
entonces para hacer eso vamos a darle el color de 69 91 a.C.
Guardamos, refrescamos y observo que ahora tienen un color distinto.
Aparte de esto, también lo que vamos a hacer es empezar a colocarle,
por ejemplo, a una navegación que está activada por defecto. Es el inicio.
Entonces vamos a crear una clase llamada Current actual, que en
navegación o pestaña de la navegación está actualmente activa. O en
qué página de tu sitio web bestas. Entonces vamos a decirle color y para
que no todo lo vamos a colocarle un color más grande o más notorio. 13 f
f 5 76 7. Bueno, de hecho lo escrito aquí le colocó dos efes. Vamos a
guardarlo y este punto no se ve nada, pero vamos a ir a nuestro índice
HTML y esa etiqueta vamos a agregarle una clase activa. Vamos a
guardar. Reiniciamos y parece que no lo están notando el color. Y no se
ve afectado porque la clase se llama current. Entonces vamos a cambiar
este Actis por Currents, vamos a guardarlo. Vamos a reiniciar y observa
como tiene un color más notorio. De hecho, el importan ya no es
necesario. Creí que estaba siendo afectado por otras clases. Vamos a
colocarlo tan solo de esta manera. Muy bien, aún sigue funcionando.
Entonces ya tenemos nuestros estilos de nuestra navegación, pero
vamos a arreglar también que cuando digamos el nuestro es líder o
digamos, cuando nuestro navegación está de esta manera, vamos a
empezar a ordenarla un poco mejor. De hecho, nuestro VLSI, nuestro
perdón, nuestra navegación. Vamos a buscarla antes de estilizar los
colores de la etiqueta. Vamos a empezar a utilizar todos los colores de
las listas y entonces vamos a decir el siguiente Nobbs. Perdón. Huele
elegi para afectar a todos los enlaces y vamos a decirle FOM seis en
este caso. íbamos a decirle Alfonsa de 150 por ciento. Una vez le hemos
dado el tamaño, lo que vamos a darle es un display en block para que
esté uno al lado del otro, observa como ahora uno está al lado del otro.
Pero no solo eso, sino que quiero que floten hacia la izquierda bordamos.
Y observa que al menos ahora no se ve del todo bien, pero vamos a
darle, por ejemplo, un fading. Del 10 píxeles. Y ahora, como lo hace un
poco mejor, pero tan solo un poco mejor, vamos a seguir arreglándolo
poco a poco. Entonces este NAF huele L y tan solo se encarga de poder
estilizar en línea todos los elementos. De hecho nosotros, nosotros
anteriormente por aquí habíamos escrito la etiqueta con su atributo
Jover. Entonces lo que vamos a hacer luego es empezar a mejorar un
poco nuestro nuestros estilos, específicamente si ya está flotando la
izquierda, por qué no se ve aquí? Pues lo que vamos a hacer es
arreglarlo y para arreglarlo lo vamos a hacer. Es que vamos a escribir un
estilo general de la navegación. Entonces aquí arriba, antes del jaider,
digamos antes del menú ICOM, donde está el menú y como aquí lo
tenemos arriba, de ahí vamos a estilizar nuestra navegación. De hecho,
aquí podréis colocar un comentario llamado Navegación o navigation y
aquí vamos a utilizar nuestra navegación, por lo cual, por ejemplo, un
sólo Adrift vamos a abordarlo. Y observa cómo ahora se colocan hacia la
izquierda si están flotando a la derecha y luego se colocan a la izquierda.
Pero a lo que vamos a hacer es que vamos a vivir en un pequeño fading
a toda la navegación, por ejemplo, de 25 píxeles hacia arriba desde
arriba, 20 píxeles hacia la derecha, 0 hacia abajo y cero hacia la
izquierda. Vamos a abordable y vamos a ver qué obtenemos. Muy bien.
Ahora ya tenemos nuestra navegación estilizada, muy bien, nada
complicado. Hasta este punto ya tenemos nuestra navegación y si damos
un click, por ejemplo, amabilidades, me manda habilidades, voy a
servicios y me envía estos servicios. Entonces todo sigue funcionando,
de hecho, hasta la navegación, pero mostrarlo desde el líder se ha
arreglado por sí solo. Entonces vamos a continuar con la sección ya no
sólo de la navegación y si no vamos a arreglar esto de los. Esta clase
llamada Huan Third, que es para colocar tres elementos, uno al lado del
otro, recuerda que el elemento one third está ya debajo de Leslie Rapp,
con tres elementos con la clase Juan Tygart. Entonces vamos a ser aquí
debajo de todo. Vamos a colocar esas clases. Entonces vamos a hacer
punto Juan Tygart Huangdi a un Tygart. Igual vamos a darle un Wiz o un
ancho de 31 puntos 5 por ciento para que cada uno esté al lado del otro y
hasta ese monto no aparece. De esta manera, porque lo vamos a
agregar unos cuantos floods. Pero vamos a ir arreglándolo. Entonces ya
tienen ancho. Vamos a decirle float, leff, guardamos y uno está al lado
del otro. Muy bien. Vamos ahora a darle un pequeño Mac Suit. Bueno, no
más, sino vamos a agregarle el digamos espadín de 10 pixeles y texas.
la encentro. Vamos a guardarlo muy bien, como que ahora estamos
centrados en los textos, pero de hecho tenemos que mejorar este ícono
porque éste no está demasiado pequeño. Entonces vamos a decirle
punto hay Group, que es la clase que le habíamos colocado los iconos, y
lo vamos a decir Martín Cervatos para que esté centrado. Pero no solo
eso, sino que vamos a decirle un Wiz de 120 píxeles para que crezca un
poco, pero también al jaitt siendo 120 píxeles. Y vamos a darle también
un background color para que tenga un color de fondo y vamos a darle el
color. 69 91 hace este color típico que ya habíamos utilizado
anteriormente y observa que ahora es un cuadrado, pero el ícono
probablemente no ha crecido. Es porque el ícono es en realidad una
fuente. Por ahora, al menos vamos a terminar con estos cuadrados que
los contienen. De hecho, vamos a cambiar de acodados por unos
círculos. Entonces para hacer eso vamos a decirle bordes, radius, 125
píxeles y el Texas que sea center. Y no solamente eso, sino que también
vimos decirle un marchitó de 3 por ciento vamos a guardar y de que
ahora son círculos con un pequeño margen hacia arriba y vamos a
mejorar los iconos de dentro. Entonces para hacer eso vamos a decir
que dentro de Hay Group. Hay una etiqueta ahí que es para colocar,
digamos que es el icono propiamente de Ozon. Entonces vamos a decirle
tesela, encender un color blanco y también vamos a colocarle un 6 de
450 por ciento para que crezca el icono en 450 por ciento. Pero vamos a
darle un PADI. De hecho, vamos a colocarlo debajo de 20 por ciento.
Guardamos, refrescamos y observa que ahora de esta manera es como
lucen nuestros íconos. Muy bien, ahora una vez tengamos nuestros hijos,
nos vamos a mejorar también esta sección de debajo. Esta sección de
los nuestros servicios serviles y vamos a hacerlo muy similar a la
anterior, vamos a hacer que estén uno al lado del otro. Entonces vamos
a empezar agregando aquí el estilo, que en ese caso se llamaba el lez
cool para tener una columna hacia la izquierda. Entonces, como quiero
que tenga una columna hacia la izquierda, vamos a agregarle, por
ejemplo, una clase más float. leff y también vamos a agregarle un
margen cero auto. No sólo eso, sino que también un Wiz de 60 por
ciento. Y finalmente, aparte del 60 por ciento, vamos a vivir en un jaitt
del, digamos, del tipo auto. Y el PADI vamos a Dokuro con las de 1 por
ciento. Vamos a guardarlo. Y ahora algo que te has dado cuenta y es que
este estilo no lo hemos escrito. Este estilo viene desde una parte en que
en el Andilla anterior yo te había dicho que no escribí una sección
llamada Porfolio. Ese estilo va a afectar al porfolio, pero no lo hemos
escrito, así que vamos a escribirlo. Para escribirlo tenemos que tener
nuestro HTML y HTML. Vamos a buscar específicamente una sección
para agregarlo desde la sección que viene. Pròpia es un poco antes que
estos que tienen la clase Juan Tyr Fading. Entonces, antes de agregarlos
esta clase vamos a agregar una otra sección que sea para el porfolio.
Portfolio para el portafolio dentro del portfolio vamos a agregar a una
clase que se divide en dos columnas, simplemente una a la izquierda y la
otra a la derecha. Entonces, como es así de simple, vamos a agregar
una sección que sea Clas lez col y vamos a agregar el Leydi. Heydi
Porfolio para que cuando dé un clic en nuestra navegación lo envíen a
esta sección. Muy bien. No solamente eso, sino que vamos a agregar el
contenido. Entonces vamos a agregar un H3 que diga portafolio o
portafolio dentro del portafolio. Vamos a agregarle también un pequeño
texto Loreen. Un texto bastante largo, en realidad muy bien luego de
despuésdel la columna hacia la izquierda vamos a colocar otra sección
que sea Seibert. Entonces vamos hacia una clase llamada sidebar para
que esté al lado. Recuerda que esta sección aquí va a estar por dos
elementos uno hacia la izquierda, otro hacia el lado. En esa sección de
situar vamos a colocar no solo una imagen. Y la imagen que vamos a
colocar es de nuevo el icono de mi logo. Entonces vamos a buscarlo.
Tenemos que cerrarlo porque ya lo tenemos. Entonces vamos a la
carpeta pics, luego la carpeta Hoffa, su logo junto PNG. Guardamos,
refrescamos y observa que ya se coloca exactamente a la izquierda
porque ha afectado el estilo que habíamos escrito anteriormente.
Disculpa porque anteriormente te había dicho que no le había agregado,
pero sí lo vi. Recién lo recuerda que sí lo había agregado entonces. Y de
hecho, si nosotros moclín en porfolio, el MEGO ubica en esta sección.
Entonces ya estamos como que está completo nuestro sitio. Ahora muy
bien, vamos a continuar entonces ahora con los estilos. Nosotros ya
habíamos escrito los estilos para el porfolio que afecten a la columna
izquierda, específicamente esta clase llamada Les Bion Cool, pero no
solamente esto, sino que también necesitamos afectar el situan.
Entonces vamos a mejorar un poco el Zoidberg, vamos a decir puntos,
actuar. Entonces vamos a hacer lo siguiente el Zoidberg vamos a decirle
float, right. Si guardamos, observa cómo cambian de posición y de hecho
el Zoidberg yo quiero que digamos el margen sea de un centrado cero
auto cero auto. Y también el huis de 32 por ciento. No solo eso, sino que
también quiero que aparte de que tenga el ancho, también tenga un alto
en el auto que sea automático y un Padín de 1 por ciento. Vamos a
guardarlo y vamos a ver que tal se ve muy bien. Se ha quitado
directamente pegado hacia la derecha y de esta manera, pues ya
estamos escribiendo nuestro sitio web. No es un sitio web bastante,
bastante vistoso, pero al menos es para enseñar de cómo escribir la
funcionalidad. De hecho, nosotros, aparte de escribir todo esto, podemos
reducirle el tamaño del lescola o del tamaño de la imagen. Entonces
vamos a agregarle el tamaño de 20 por ciento, por ejemplo, o 30 por
ciento un poco nada más abordarlo. Es exactamente muy similar. Muy
bien. Vamos a hacer ahora afectar nuestros servicios y nosotros puedes
estar viendo aquí que estamos, digamos, empezando a utilizar o ver
cómo se están afectando los floods. Entonces, hasta este punto, por
ahora lo vamos a ignorar, pero vamos a escribir una clase que vamos a
arreglar dentro de poco. Entonces vamos a hacer lo siguiente vamos a
continuar con esta sección llamada de los servicios, llamada Cada uno
tiene su clase llamada Wan Tyr Padín. Entonces vamos a ver cómo lo
solucionamos. Vamos a decir punto Tyr, Fading Higuaãn, Tyr, PADI.
Vamos a colocarle un Wiz de 29 por ciento cada uno. Vamos a agregarle
un floteles para que uno esté al lado del otro y vamos a agregar un
margen del 2 por ciento y del 2 por ciento. Vamos a guardarlo y parece
que nos afecta, pero es que no se afectan porque de nuevo están siendo
afectados por los float de arriba. Entonces vamos a escribir una clase
llamada Punto Clear Fix y a un padrino, para no solamente agregar un
Clear Fix que solucione los floods, sino que también un Padín a cada
sección. Entonces eso lo vamos a colocar debajo de cada sección que
utilice Floods para hacer eso. Lo que vamos a hacer es que vamos a
decir Clear Boot. Y vamos a agregar también el padrón de 2 por ciento.
Muy bien, ahora que tenemos esta clase vamos a empezar a ir
arreglando los floods. Entonces lo que tenemos que hacer ahorita es ir a
nuestro HTML, a nuestro índice HTML y crear un GIF que utilice esta
clase llamada Clear Fix y On Pauling en 2D. Si nosotros vamos a nuestro
HTML y vemos qué elementos, el primero que hemos utilizado con
Floods es específicamente el portafolio, entonces vamos a seguir en esta
sección de porfolio y vamos a agregar debajo de aquí un tip que diga
bueno, de hecho no tienen que tener algo dentro, sino vamos a crear
Clear Fix y PADI. Guardamos y observa que ahora digamos que el
portafolio ahora tiene un pequeño Pauling aquí debajo y también está
arreglando los floods. Pero no solamente él es el único que está
utilizando floods. Si te pones a pensar porque nosotros ya habíamos
utilizado una que otra clase, entonces vamos a empezar a arreglar
también el segundo elemento que utilicen los floods y vamos a ir
arreglando poco a poco a medida que vayamos escribiendo el código.
Pero aparte del portafolio, nosotros habíamos descrito también esto de
los elementos de aquí de diseño web, de los iconos también, digamos,
con floods. Entonces vamos a copiar esta clase de dir. y vamos a pegarlo
aquí debajo de estos. Nosotros lo refrescamos y pues ahora ya de nuevo
podemos ver incluso una pequeña separación entre las secciones. Muy
bien. Vamos a hacer algo, vamos a empezar a mejorar de nuevo
nuestros servicios. Entonces de nuevo vamos a seguir en nuestro CSS, a
nuestro estilo de CSS y aquí en la sección de Clear Fix Fading aparte.
De hecho, nosotros, aparte de tan solo empezar a utilizar la clase, vamos
a agregar otra sección más bueno en otra sección de otra clase, más
específicamente para el futuro. Ahora, si ves nuestras clases, observa
que este Tyr PADI inglés falta una delles por eso de que no los afectan.
Vamos a colocarlo, refrescamos y ahora uno está al lado del otro. Muy
bien, vamos a ir terminando con nuestro sitio, vamos a seguir arreglando
nuestro juderías, que ya es prácticamente lo ultimo, lo último que nos
falta. Entonces vamos a lo último de todo y vamos a empezar a afectar el
futuro. Específicamente entonces el Führer vamos a darle un
backgrounds. Vamos a decirle 2e, 3e. 50. Muy aparte de esto, vamos a
hablar de 100 por ciento. Muy aparte de esto, vamos a en un overflow
llamado Auto. Y aparte de esto, vamos a empezar a afectar esta sección
llamada icontext que son iconos contextos no vamos a hacer lo siguiente,
vamos a colocar icon, perdón, hay contexto y vamos a decir wits del 100
por ciento. No solamente del ancho del 100 por ciento, sino que vamos a
darlo centrado. Cero Auto. Muy bien, entonces ya tenemos afectando los
textos, pero también hay otra sección llamada de hecho refrescamos. Y
otra sección llamada Hoy con Tex Tex, entonces de hecho esta sección
de hoy Tex. Nosotros digamos que contiene todo, pero aquí dentro de
éste hay otra sección llamada hoy Context y Honk Kong. Y aquí es donde
nosotros vamos a separar lo uno a la izquierda que tenga, por ejemplo,
un Wiz de 20 por ciento y que tenga un padrón de 4 por ciento. Y
observa cómo se colocan hacia la izquierda. Pero vamos a colocar
también el otro, la otra sección llamada Hoy con un tex tex. Y esa
sección se va a encargar de colocarlo de nuevo, también a la izquierda,
porque se coloca en uno de al lado de la otra y vamos a colocar un Wiz
de 60 por ciento. Finalmente, vamos a ver un parking 4 por ciento arriba
4 por ciento hacia la derecha, 2 por ciento hacia abajo. De hecho, el 4
por ciento citada a la derecha, 2 por ciento hacia abajo y cero cero en
último lado izquierdo. Entonces, de hecho, vamos a guardarlo. Y observo
que lo tenemos muy bien. Hasta ese punto no parece nada nuevo, pero
vamos a ir arreglándolo un poco específicamente, vamos a ir arreglando
esto de nuestro futuro. Entonces vamos a poder. Bueno, de hecho es
poder y dentro de su ternados tenemos un Texel. Vamos a decirle Riet
para que esté alineado hacia la derecha. Y muy bien, no solamente eso,
sino que cada naf, cada fulminados tiene una etiqueta. Entonces vamos
a decir Fuhrer. Naf. A La etiqueta A vamos a colocarle una clase. Perdón,
vamos a colocar una clase llamada bonsais. 160 por ciento para que el
tamaño crezca de cada elemento. Y también vamos a agregarle el color,
entonces vamos a decirle un color. C3. 3 De7 de F. Fun Way. Un Jonglei
de 300. Muy bien, engordamos, refrescamos y parece que no está siendo
afectado, pero vamos a empezar a ir arreglándolo dentro de breve,
entonces vamos a ir escribiendo todo el código. Luego lo empezamos a
mejorar. Específicamente, el Derna tiene una especie de en la ciudad,
pero también es en la ciudad. Le podemos escribir una etiqueta, digamos
sucede clase joven. Entonces vamos a decirle aquí a dos puntos Jover.
Unas veces que íbamos en la clase, joder, vamos a decirle un color.
Perdón color F5, F5, F5. Guardamos y buscamos, pues vamos a afectar
el social. El social les recuerda estas secciones de aquí. Estas secciones
tienen unos cuantos iconos, entonces para afectarlos en nosotros, vamos
a ir empezando a quitarles estos puntos. En todo caso, si no lo vemos en
los puntos, vamos a alinearlas. Son solo al centro Salud Center. Y aquí
debajo. Bueno, de hecho es social en Lehi social. Luego tenemos otro
social, Elai y el social BNI. Le podemos decir display. Display Inglis para
que uno esté al lado del otro. De hecho, vamos a ver por qué no lo está
afectando, porque el HTML. Justo cuando escribimos el Führer nosotros
habíamos escrito algunas clases, entonces es allí donde se vería
afectada. Entonces vamos allí. Y dentrodel al último. Bueno, no tan al
último, sino el poder hacia el futuro anterior, habíamos escrito una clase
llamada Banhart Rapper hoy Context, que básicamente era una clase,
hoy context hoy con que era lo que contenía todo y nos falta el NAF. Es
por eso que nos afecta Fuhrer al huelen. Entonces guardamos,
refrescamos y ahora, así como que ahora se luce un poco mejor. Pero no
solamente eso, sino que dentro del elegi cada uno tenía una etiqueta y
luego nosotros dentro del segundo contexto y un tex, el huele tenía una
clase llamada social. Bueno, de hecho no le agregué, pero aquí es por
eso que al guardarlo ahora sí se afecta. Entonces vamos a colocarlo y
uno se coloca al lado del otro, pero vamos a ir cambiando todo eso para
que sea un poco más grande. Entonces vamos a los estilos y a los
estilos, específicamente al lado de debajo de la ley. Vamos a ir a
empezar a empezar a aprender los, digamos, los iconos de las fuentes.
Vamos ahora a empezar a agrandar el texto de los iconos social y para
afectar a los iconos son solamente y vamos a decir bonsais de 420 por
ciento para que sea una fuente bastante grande. O actualizamos,
observo que existen los iconos. Pero vamos a ir cambiando los estilos
para que luzcan, de hecho un poco mejor. Entonces vamos a decidir de
nuevo un margen de 1 por ciento a todos los lados, un de 5 por ciento a
todos los lados. Y el color vamos a cambiarle a un C3 de 7 de F y
observa como ahora cada uno está uno al lado del otro y lo hacen
bastante bien, al menos para el Führer. Al lado de todo esto, sigue
funcionando entonces? Muy bien, vamos a ir a arreglar ya nuestro
prácticamente nuestro Fuhrer secundario nuestro. Dónde está nuestro
nombre? De manera bastante fácil vamos a hacer lo siguiente. Ese tenía
una clase llamada Fugger Second y dentro de joderse, cómo vamos a
decirle te sale? Bueno, de hecho vamos a empezar por el border top, un
border top y vamos a decirle un píxel sólido y vamos a colocarle un color.
Ah, bueno, a S 2. Vamos a escribirlo bien, trátese de dos muy bien,
engordamos y por ahora al menos no tenemos nada nuevo, pero vamos
a ir empezando a arreglar todo esto. Entonces vamos a decir un texanas
encender. Y vamos a ver cuál es el problema. Guianze con. Se
confunden, joder guión se contre. Vamos a ello y muy bien, aquí lo
vemos. Es allí donde a veces se confunden, pero recuerda que lo
reemplazado federighi seco y luego escrito una clase de bien seco para
afectar a esta parte de aquí debajo. Muy bien, vamos a hacer lo
siguiente, vamos a empezar a decirle que tenga un margen cero y
finalmente vamos a empezar a aceptarlo los elementos que tiene dentro.
Entonces, dentro de Fuller? Punto. Recuerda que dentro de este juego, si
vamos allí, nosotros habíamos escrito una etiqueta y una etiqueta.
Entonces nosotros podemos afectarla, entonces podemos decir joder y
once. Y dentro de guión? Guianze Cómo vamos a decirle que la etiqueta
de? Y luego una coma. Vamos a copiar eso de aquí y la etiqueta. Ah!
Vamos a decirle que tengo un tesela encenderá para que esté centrado.
Pero también vamos a cambiar el color a blanco. Color blanco FFF. Un
fonzie de 160 por ciento y finalmente un linfoide de 155 por ciento. Lo
dejamos en cero. De que ahora luce mejor nuestro sitio web? Genial.
Hemos acabado con el diseño de tamaño de pantalla normal, pero
vamos a ver cómo luce cuando nosotros estamos en un tamaño de
pantalla móvil para ver esto. Simplemente basta con otro. Orchid J. Si
estás en Crom o en todo caso vas a las herramientas de Crom y donde
dicen más herramientas, herramientas del desarrollador, se te abrirá una
consola. Probablemente sea así, pero si tú quieres verla, tan sólo hace
un clic aquí en el icono del móvil y se ve como si fuera un móvil. En todo
caso, si no quieres esto, tan sólo le colocas aquí. Hacia cualquier lado,
hacia aquí y hacia la derecha, hacia la izquierda y observo que ahora
tienes, lo vas modificando y aquí como que vas modificando el ancho de
tu sitio. Muy bien, entonces vamos a ir arreglando un poco esto y para
eso vamos a utilizar media cueles entonces. Ya luego, al final de todo
nuestro código, vamos a ir escribiendo a media cuerina uno a uno,
entonces vamos a decir media. De hecho, nosotros queríamos media y
media y es la que nos va a proporcionar hacer que el diseño sea un poco
más responsive. Entonces vamos a decidir el media media screen y
vamos a darle el ancho que queremos aplicar cuando el ancho máximo,
el más Whitby sea de 768 píxeles y eso ya lo he probado, así que en mi
caso al menos se coloca de esa manera y en la etiqueta. Vamos a
conocé un ancho mínimo cuando sea de un tamaño bastante pequeño,
de 768 768. Más o menos por aquí, pues vamos a cambiar el tamaño de
los textos, entonces vamos a decir p bonsais y vamos a reescribir el
tamaño, entonces para recibir tratamiento solo lo colocamos ahora
haciendo 30 por ciento. De esta manera, el tamaño es un poco más
pequeño de los textos, no solamente de la etiqueta, sino de la H3. Y siiii,
vamos a decirle un iPhone 6 con 6. Y en este caso vamos a colocar 150
por ciento, muy aparte del H3, vamos a decirle un Jeddah. Y el
generábamos es el enjoy del 80 por ciento, para que digamos que el
tamaño del G3 disminuye un poco, pero bueno, no de 80 por ciento, sino
de 80 pixeles. Antes estaba en 100 y vamos a decir la posición relativa
porque vamos de esta manera afectar nuestro pequeño icono que
nuestro pequeño ícono de barras, que se muestra en, digamos, el
tamaño de pantalla más pequeño. De hecho, también podemos afectar
nuestro logo. Entonces vamos a decir EGEDA y nuestro logo tiene una
idea el logo, entonces el logo vamos a decirle un margen ince pixeles
hacia arriba, cero hacia la derecha, veintenas hacia abajo y menos 25
píxeles hacia la izquierda 25. No sólo esto, sino que también vamos a
afectar el menú y Honeycomb para que ahora sí se pueda ver mi novia
Honeycomb. Entonces vamos a decirle Display Ingelheim Blog para que
se quite ese display. Y ahora sí se muestre. Entonces guardamos,
refrescamos y observa que ahora lo vemos, pero no lo hace muy bien.
Entonces vamos a arreglarlo para ir arreglando el menú y con ello vamos
a ir arreglándolo escribiendo el código de la navegación. Entonces Naf
Jover y vamos a decirle huele de esta manera cuando digamos nuestra
navegación le posicionamos el cursor encima. Pues vamos a poder ver
los iconos, entonces aquí vamos describirle display, las paradas en las
pestañas le colocamos display block. Muy bien. Entonces hasta este
punto no tenemos mucho. Tan sólo estamos afectando los estilos de la
navegación. De hecho, nosotros cuando posicionamos aquí va a
aparecer el menú, pero para hacer eso vamos a hacer lo siguiente. NAF
Y vamos a decirle la lista desordenada y tanto la navegación cuando sea
active, cuando esté activado. Vamos a decirle que íbamos a decirle lo
que tienen que mostrar específicamente el display y vamos a decirle el
CETA índex para que se posicione y vamos a decirle mil. Además, la
posición como el anterior era relativo a este le vamos a colocar posición
absoluta. Una vez le hemos colocado vamos a ver un pequeño padrillo
en 12 pointe píxeles y vamos a colocarle un background, en este caso
F5, F5, F5. A todas estas navegaciones lo vamos a ver dentro de los
segundos. El Border vamos a colocarle un píxel sólido y vamos a
agregarle un 5 al color verde. CEDE finalmente un raed de 20 píxeles. Y
luego vamos a colocarle un WIT de 30 píxeles de 30 píxeles, sino de 30
por ciento y un capacity de punto 95, pero que tenga una transparencia.
Nosotros guardamos y colocamos esto, observa que se va a la derecha,
pero cuando posicionamos aquí están nuestros ojos, nuestros estilos,
para nuestra pequeña navegación, que aquí es donde se va a ver en
tamaño de pantalla móvil y al final, pues todo esto se sigue funcionando
tal cual. Vamos a ir arreglando todo esto poco a poco. Entonces, a partir
de lo Pacini, también quiero que de la navegación su etiqueta. L Las
etiquetas Elai quiero que tengan un Texel la encender y un juez del 100
por ciento. De esa manera, cuando yo posicione a con posiciones, pues
todas están centradas y de esta manera pues todo va funcionando aquí
lo ven muy bien. Vamos a agregar a esto de los Wham! Que uno se está
yendo hacia abajo. Entonces vamos a arreglarlo, vamos a escribir aquí
debajo Juan On Third y vamos a empezar a arreglarlo primero definiendo
el alto, entonces bueno, en lo alto, sino el ancho que diga el float. Vamos
a empezar con el floteles, pero vamos a decirle el del 100 por ciento para
que ocupe cada uno el tamaño de 100 por ciento. De esta manera va a
ser un poco más referido a los móviles. No sólo eso, sino que también
vamos a empezar a definir los elementos que están debajo de ellos. Por
ejemplo, los íconos están muy grandes. Entonces vamos a decirles hay
conjurarlo. Y hoy comprovar vamos a decirle un jefe del ochenta píxeles
y vamos a decirle un Willis del 80 píxeles y también un Mardin Top de 3
por ciento. Antes tenía 5, si mal no recuerdo. Creo que es el mismo. Si es
el mismo, pues no viene al caso delegarle problema. Ahora vamos a
empezar a cambiar el tamaño también de los iconos. Entonces vamos a
decirle con grubb la etiqueta y que es el que tiene el icono de Oshún.
Entonces vamos a decirle. 6. íbamos a colocarle Alfonsa de 250 por
ciento y ya no de un tamaño tan grande como el anterior. Y allí están los
iconos, entonces ahora vamos a ver un Palito Padín top de 27 por ciento
y que hasta ese punto, pues lucen así los iconos. Pues hasta ese punto
no nos luce muy complicado actualizarlo, verdad? Pero vamos a
empezar a agregar también esto de los de un elemento al lado del otro.
Esos son dos elementos que uno es columnas a la izquierda y el otro es
Zoidberg. Si recuerdas, entonces vamos a empezar por definir primero
esto del LEF COL y col. Vamos a decirle un huir de 100 por ciento para
que abarque todo y un Padín de cero. Lo mismo vamos a hacer el Zaibat.
Bueno, han hecho tan sólo el Wiz. Entonces vamos a hacerle un Wiz del
100 por ciento. Refrescamos, observa que uno está debajo del otro. Muy
bien. Ahora vamos a afectar esto de uan Tyr Padín, que es nuestro
último, casi nuestros nuestros estilos, para que uno esté debajo del otro
igual. Entonces vamos a hacer algo similar a lo que hicimos arriba Juan,
Tyr, PADI y aquí lo que vamos a hacer es empezar a definir, por ejemplo,
el ancho de 98 por ciento para cada uno. Puedes darle cien si gustas
98%. Vamos a agregarle también un margen de cero. Vamos a agregar
también un fading de 1 por ciento y finalmente vamos a decirle bueno,
con esto es más que suficiente. bordamos refrescamos de que ahora uno
está debajo del otro. Bueno, así de sencillo. Ya estamos haciendo lo que
se luge como si fueran un móvil, pero aquí nuestro falto también arreglar
nuestros fullero entonces? De hecho, no? No hace falta agregarle
muchas clases. Vamos a agregar tan solo en las clases que afecten a los
iconos. Entonces vamos a hacer lo siguiente hoy con Tex, que es de
hecho tan sólo el icono con Tex y Honeycomb. Y vamos a hacer que
digamos que todos estos forman del 100 por ciento un ancho del 100 por
ciento y un par de ceros arriba cero la derecha, dos por ciento hacia
abajo y cero a la izquierda. Observa que ahora todo esto se va hacia la
hacia la derecha, pero vamos a ir arreglándolo para hacer eso. Vamos a
decir aquí debajo hay con. Hoy, con guión Tex guión ya no hay con sino
Tex. Entonces diría hoy con guion tex mex y vamos a hacer que aquí
también sea del 100 por ciento y el padrino sea. Del 2 por ciento del cero,
del cero y del cero y también vamos a decirle iPhone 6. Bonsais del 80
por ciento para que en este caso, digamos, el tamaño sea un poco
reducido, entonces guardamos como que ahora es igual. Móbiles, se ve
un poco más uno al lado del otro. Muy bien. Lo que tenemos hasta este
punto es tan solo afectar, digamos, los estilos muy bien. Y ahora nuestro
sitio como que ya está un poco más arreglado para funcionar en sitios
móviles. De hecho, no es un sitio bastante bonito, pero de nuevo es para
tan solo enseñarles cómo va a ser el proceso de crear un sitio web
bastante rápido y empezar a subirlo. Obviamente cuando tú ya practicas
mucho. Yo no soy diseñador como Veres, esto es lo otro, puedes mejorar
mucho mejor para agregarle mejores estilos, mejores animaciones,
mejorar el diseño, los colores, los iconos y cosas por el estilo. Entonces
al final hemos creado este sitio bastante simple. Tiene un slider, tiene
una pequeña navegación que todo funciona muy bien. En dónde vamos
ahora a empezar a subir este sitio al entorno real, empezar a subirlo a la
realidad. Recuerda que nuestro código está tan solo en una carpeta,
entonces esa carpeta ya tiene el código de nuestro sitio web. Entonces
en el siguiente video voy a enseñarte a subir esta carpeta a un hosting,
en el siguiente midiéndose vamos a comprar el hosting, vamos a comprar
el dominio, vamos a subir nuestro sitio web. Voy a enseñar con qué
programa lo vamos a subir y una vez tengamos este sitio web, de hecho
este sitio web lo puedes copiar, lo puedes guardar porque es un sitio web
que luego puedes reemplazar y mejorarlo. En el siguiente video voy a
utilizar Windows para empezar a subir nuestro sitio web a un dominio y
hosting, digamos, de que te voy a proporcionar un enlace para que
puedas comprar algo allí. Entonces nos vemos en el siguiente video.