Vamos a continuar trabajando con el proyecto y puedes ver que por ejemplo una característica de este
diseño es que tiene un degradado de fondo y crear este tipo de degradados no es así como es muy complicado
pero si tienes un degradado con muchos colores muchas combinaciones sí puede llegar a ser un poco complicado
y estar escribiendo el código y ver cómo queda.
También puede ser algo un poco complicado por lo tanto existen herramientas por ejemplo color si es
una de ellas en la que puedes generar este tipo de degradados de forma visual y verlos después para
utilizarlos en tu sitio web.
De este lado el botón derecho de escribir aquí puedes ver que aparecen distintos como prices es decir
ya algunos creados desde aquí puedes por ejemplo dar clic aquí y probarlos ver cómo se ven los diferentes
colores y en qué posición se encuentran.
Entonces vamos a utilizar esta herramienta no vamos a utilizar este color aquí voy a ponerle dar click
aquí y aquí va a ser más difícil de ver si así haciendo más grande creo que si se va a poder ver bien
voy a utilizar un color que es cinco siete cero siete seis kilos de hockey y que a medias damos clic
aquí también doble clic y aquí voy a utilizar un color que es C8 0 8 5 he 6 Ce7 y Okkhoy y finalmente
doy doble click aquí y vamos a utilizar a 8 4 9 a 3.
Otro color que yo ya he elegido para este diseño.
Después ver qué queda como De esta forma y aquí te aparece el código que puedes utilizar lo puedes copiar
todo este código o doble clic en esta parte y lo copia es todo y vamos a utilizarlo en el estilo CSS
que vamos a ponerle un body body y pegamos ese código.
Después de guardar cambios y abrir el proyecto y lo que queda de esta forma ahora un detalle que tiene
esto es que conforme vas dando de scroll puedes ver que se ve como muy claro y se va haciendo más y
más oscuro hasta que llegas hasta abajo en el diseño final puedes ver que eso no pasa se queda como
fijo el color de fondo y para ello vamos a utilizar lo siguiente para tener ese efecto que no tengamos
que tener como que vas cambiando de intensidad conforme Dorys scroll.
No me gusta es un detalle menor la verdad no es así como que tan importante se suponer el HTML un Jaitt
del 100 por ciento y en el body también del 100 por ciento eso va a eliminar esa parte del escalope
que por ejemplo quiere darle un poco de scroll y se corta en esta parte pero queda fijo lo que viene
siendo el degradado.
Aquí nada más vamos a poner que era una Tatsumi en una propiedad de CSS attachment y le pones speaks
para que quede como fijo por así decirlo que quedaría como fijo el degradado y ya no se mueve.
Ya no se ve así como que vaya siendo más claro y cada vez más y más oscuro igual.
Algo no tan así como tan fácil de ver pero ya que lo ves por ejemplo en tu computadora creo que en el
video va a ser más complicado que en la computadora ya se va a ver mucho mejor.
Después vamos a crear puedes ver qué hice yo o creé un jede y luego una imagen que vas a poner Gelder
Sever y vamos a poner texto online sea enterrara texto encender usualmente es una propiedad diseñada
para centrar elementos pero por default las imágenes utilizan algo que se conoce como display inline.
Si tu pones por ejemplo Gelder y M.G. y usualmente hemos centrado con margen cero auto no va a servir
no va a servir porque este es un display inline no funcionaría correctamente después se utilizar texto
online y aunque sea una propiedad para alinear texto te va a permitir centrar una imagen dentro de un
contenedor padre que en este caso surge después del Kroeger es el padre de esta imagen y esta propiedad
va a permitir centrarlo si bien el diseño final puede tener una separación de hecho arriba abajo eso
lo vamos a lograr con un par de espadín 40 píxeles y 0 40 píxeles arriba y abajo cero izquierda y derecha
y lo que queda de esta forma para el siguiente contenido todos los que viene siendo la imagen de giro
en esta parte.
Todo esto va a ir dentro de un elemento que se llama contenedor porque puedes ver esta parte está centrada
y también aquí abajo para crear un contenedor y voy a centrar todo lo que viene siendo el Giro y el
main coloco a quien cierre del Dib y aquí ponemos el contenedor
no va a cambiar nada porque no he escrito nada de CSS pero si hablo estilos puntos CSS aquí pongo punto
contenedor podemos ponerle un Max tuit de 1200 píxeles y un margen cero auto para que lo centre.
Eso lo va a centrar en la pantalla entonces se va viendo bastante bien.
Ahora si continuamos un poco con el diseño puede ser que las fuentes que no son estas fuentes son un
poco diferentes estas fuentes se ven diferentes es Arial la otra no sé cuál sea pero es la de por default.
Por lo tanto también voy a cambiar la fuente aunque en el body voy a ponerle un family Arial helvéticas
Ancer y también el color de todos los textos va a ser color blanco y vamos a poner por HFC en hexadecimal
lo que viene siendo el valor si abrimos un poco esta parte de nuestros productos.
Si abrimos el código veremos se quiere índex puede ver que tenemos este H2 podrías escribir un selector
que diganme y lo Guache dos pero usualmente los jardines.
Yo por ejemplo nada más pongo H2 y de esa forma si tengo múltiples H2 lo voy a aplicar los mismos estilos
a todos entonces es ver que si abrimos de nueva cuenta el código el proyecto que dice nuestros productos
está centrado y está en mayúsculas.
Tenemos que agregar esas propiedades las reponerlos centrado en Center y mayúsculas context Transform
o cais si abrimos el proyecto desde el que se coloca esta forma aquí hay cierta separación aquí abajo
también.
Entonces vamos a abrir el código.
Puede ser que aquí tenemos este Main y podemos seleccionar el main con el Giro por ejemplo no quiero
le puedo poner un margen hacia abajo margin Boron digamos 40 píxeles eso va a agregar un poco de separación
entre lo que viene siendo eligieron y este texto y después si vemos el proyecto que tenemos este H2
si lo tenemos esta lista no ordenada.
Puedo copiar esta clase.
Creo que es mejor utilizar.
Yo siempre recomiendo que es mejor utilizar las clases y de hecho es recomendable y quiere poner un
margen Top 40 pitcheres elegirlo agrega márgen hacia abajo y lo que viene siendo la lista agregan Marien
hacia arriba.
Eso nos permite separar un poco como tenemos en esta parte un poco de separación aquí se va viendo bastante
bien.
Antes de continuar con los productos puedes ver que por ejemplo si hago esto pequeño este giro no es
responsivo más adelante hay un capítulo donde explicó a detalle bien lo que es responsivo Design pero
para ser una imagen responsive nada más pones aquí.
MG Max 100 por ciento y eso va a ser todas las imágenes de tu sitio web responsive es más pequeño desde
el que se va adaptando correctamente ahora puedes ser que cuando algo pequeño aparece como este pequeño
borde.
Si recuerdas en el proyecto anterior importábamos normalismo y vimos que por ejemplo si inspecciones
aquí por default que viene siendo el Bay agrega ese pequeño margen entre Starship.
Entonces tenemos que removerlo.
Hay dos formas unas que le pongas como vimos anteriormente un asterisco margin 0 y la otra es que utilices
normalismo las buenas prácticas dicen que debemos utilizar normalitas.
Por lo tanto abrimos normalizarla hace una búsqueda en Google aparecerá en el sitio de da eléctrica
quien don.
De nueva cuenta la versión puede ser diferente no hay ningún problema copia todo el contenido.
Abre tu proyecto quiense SS Dale Nova archivo Norman avispón CSS y pegás tu contenido igualmente hay
que enlazarlo por lo tanto tiene que ser antes de este estilos duplica esta línea aquí pongo normal
es si guardamos cambios y abrimos el proyecto puede ser que sea removido.
Que era ese margen y la parte de arriba se va viendo bastante bien.
Aquí creo que le falta un poco de mal y no hay ningún problema.
Lo que nos hace falta es comenzar a trabajar con los productos que tenemos un listado veremos cómo lograr
todo esto en el próximo video.