Vamos a continuar con la sección de nosotros.
Por lo tanto vamos a dar click aquí.
Nosotros y vamos a abrir lo que viene siendo el índex HTML y voy a copiar este género.
Toda esta parte del Gelder y abrimos nosotros y le voy a pegar aquí dentro del body tanto el género
como la navegación y de una vez voy a crear lo que viene siendo el HTML del Führer para tenerlo y le
damos estilos también en este video o nosotros va a ser muy sencillo a diferencia de la página principal
donde vimos un poco más sobre cómo funciona agriete las otras páginas van a ser más sencillas para grappa
con copyright decir front end Stork todos los derechos reservados 2019.
Entonces guardamos este que está aquí y también me lo llevo hacia nosotros.
Entonces tenemos este punto de arranque y de hecho este mismo punto de arranque lo voy a copiar y me
lo voy a llevar a producto para tener ya de una vez esta parte entonces ya lo puedo cerrar abrimos el
proyecto y el que tenemos ya nosotros tenemos tienda y nosotros el diseño de esta parte va a ser como
éste muy sencillo puede ser que nada más tenemos el encabezado que dice sobre nosotros un poco del One
Ipsum del lado izquierdo y una imagen del lado derecho así que vamos a ver cómo se logra algo así se
quien nosotros voy a colapsar esto después de la barra de nueva cuenta va a crear otro main pero esta
vez sí va a tener una clase de contenedor.
Anteriormente le habíamos asignado el contenedor por ejemplo en este DIV lo puedes poner aquí también
no hay ningún problema no te va a cambiar nada.
Es una clase separada de los demás entonces si abres tienda puedes ver que no cambia nada no hay ningún
problema podemos seguir haciéndolo así para tener el mismo Main con la misma clase.
Después voy a copiar esta H1 y puedes ver que el texto en este dice sobre nosotros por lo tanto vamos
a poner aquí dinamos esto y ponemos sobre nosotros y después vamos a darle enter.
Puedes ver que tenemos este texto y también tenemos esta imagen y tenemos que crear un dip para lo que
viene siendo el contenido un contenedor aponer como información y después vamos a colocar un párrafo
que voy a utilizar lo haré ipsum.
Por lo tanto aquí en la página de Aurore Ipsum vamos a generar dos párrafos y logramos generar como
que nos puso muy cortos y párrafos recuperaste aquí el primer párrafo y después coloco otro que vendría
siendo este aquí.
Algo muy importante es que como tengo este contenedor de información este va a ser el grids container
por lo tanto este párrafo para poder aplicar Grit y que no sean muchos elementos tengo que poner aquí
texto nosotros
quedó de esta forma y después de este texto de nosotros que íbamos a colocar el otro elemento que vendría
siendo la imagen CMG y nosotros junto a JPG ponemos imagen nosotros si guardas cambios y abres el proyecto
pues el que queda de esta forma le falta obviamente un poco de CSS así que vamos a dárselo y por ejemplo
de hecho si abrimos saca el código pues que tenemos este contenedor información a copiarlo como nuestro
Grit container o el contenedor del gritã que íbamos a ponerle contenedor a información de nueva cuenta
va a poner un display grita y grita template Columns voy a crear dos partes de una fracción entonces
van a tomar 50 y 50 y si guardo cambios puedes ver que se colocan automáticamente lo que viene siendo
el contenido aquí como que creo que le puse mucho lo haré Ipsum no era tanto en realidad lo que quería
agregar
guardamos cambios y abrimos el proyecto lo que se ve bien.
Entonces por ejemplo digamos aquí está tomando Mitad y mitad.
Digamos que te gustaría que el texto tomara dos terceras partes de la imagen solamente una tercera parte.
Aquí puedes ponerle de la siguiente forma en vez de repeat porque repito a crearte dos de una fracción
2 Fr FR y eso los va a acomodar automáticamente.
O digamos que quieres que la imagen sea más grande puedes poner aquí un FR 2 FR y hace lo contrario.
Siéntete libre de experimentar con estos valores y ver cómo queda tu diseño.
Ahora si hago esto pequeño puedes ver que como no se ve muy bien.
Aquí vamos a poner un media Cuadri media Minuit 7 6 8 pixeles y este que está aquí lo va a llevar por
acá para que solamente se aplique display Grit cuando estemos en este media cuadra que es un poco más
grande.
Los pequeño no se aplica se aparece uno arriba arriba del otro pero más grande sí.
Se aplica ahora si quieres tener un poco de separación aquí en lugar de ponerle un padre a la derecha
de Nueva cuenta Grit GAP o Grid con un gap con un Gabelo aplicar a las columnas griegas Gabelo aplicarã
rojos y columnas como nada más tenemos Colombes va a poner Grit con GAP pero al final hacen lo mismo.
équidos un poco de separación a medias y eso nos va a agregar la separación.
Finalmente puedes ver que el texto es blanco y una fuente diferente.
Eso lo vamos a aplicar en todos los párrafos.
Por lo tanto scroll hacia arriba y después de este H1 por ejemplo pongo un selector para los párrafos
todos los párrafos es 1.8 Rubem un Font Family.
Vamos a poner Arial helvética de San Cédric y el color del texto va a ser blanco por.
Guardamos cambios y abrimos el proyecto y puedes ver que queda esta forma muy muy importante es que
por ejemplo esté Grit explicó incólumes pueden ser como 2.
También puede ser como una Fr.
Fr no hay ningún problema al final es lo mismo 50 por ciento 50 por ciento es lo mismo pero la forma
de hacerlo con es con éste un FR o manejándolo que son los Seferis.
Entonces por eso la idea también es utilizar proyectos para que sea un poco más claro bajo qué términos
podrías utilizar algo así.
Finalmente lanzar los tiros al Führer.
Después de todo esto vamos a el punto Führer y punto.
Copyright que vendría siendo el párrafo una clase del párrafo el alcohol lo vamos a utilizar el Bagram
o el primario oscuro
y oscuro
también vamos a poner un Pallín de un Rayma arriba y cero abajo no tenemos display agriete y tampoco
hay separación por lo tanto recuerda espadín se sigue utilizando y quiero tener un poco de separación
entre el Führer y el contenido digamos dos Rubem.
Si guardas cambios ese margen no se agrega separación aquí y nos hace falta el copyright que lo primero
que vamos a hacer es ponerle el FOM Family que va a ser la fuente principal y después con un color que
va a ser de nueva cuenta Blanco voy a centrar un poco más un Funsa es de 2.2 Reem poco más grande de
lo que está no tanto tampoco y el texto va a estar centrado recuerda podemos utilizar display GRID o
crear Orito lo vemos mejor puedes ver qué queda esta forma este texto al encender siempre vas a entrar
al texto pero también recuerda puedes poner y es más complicado de hecho si aquí le pones display Grid
y content Center puedes ver que el resultado es lo mismo pero es un poco más complicado.
Entonces yo.
Bueno depende de cada quien pero yo utilizaría el texto la encender para que siga centrando el contenido
lo que ya sabes sigue siendo útil incluso en Grid e incluso en Flex Box.
Finalmente tenemos un template que es para cada uno de los productos.
Puedes ver que tenemos el nombre de la camiseta la imagen del lado izquierdo aquí está un poco pequeña
porque la imagen es pequeña tenemos la descripción del producto y tenemos un Selleck para seleccionar
la talla un input para la cantidad y un botón de Agregar al carrito.
Ese template es el que tenemos aquí como producto y vamos a abrirlo de una vez algo que voy a hacer
es abrir este de nosotros también va a ser muy similar a este que está aquí este Moine vamos a copiarlo
y abrimos producto y después de la barra vamos a pegarlo va a ser muy similar a este que está aquí con
algunos detalles.
Por ejemplo si guardamos cambios y abrimos el proyecto puedes ver que en nuestro diseño que estamos
tratando de hacer tenemos la imagen de este lado y el texto del lado derecho entonces esta imagen podremos
cambiar el orden obviamente con Flex pero lo podemos poner también de esta forma que vamos a tener imagen
y vamos a ponerle aquí tres puntos JPG imagen el producto y aquí va a ser berriak J.S
J.S. eliminar un poco de este texto que está aquí porque la descripción es corta no es tan larga en
realidad si guardas cambios ya abres el proyecto aquí hace falta abrir producto
producto punto HTML el cerro ya que aparece lo que viene siendo la imagen una descripción corta y puede
ser que estamos o nos hace falta este formulario que está aquí por lo tanto vamos a abrir una nueva
cuenta estudio Cook y después de este párrafo pero dentro de este texto nosotros vamos a colocar aquí
aquí dice el texto nosotros y estiras la descripción del producto que nos oponerle.
Contenido para que sea más genérico de utilizar en ambos texto nosotros que ni siquiera creo que lo
estamos utilizando nada más la puse pero de hecho para el producto HTML sí lo vamos a requerir.
Akiba colocaron foram con una clase formulario pedido Clacso no es necesario solamente estamos trabajando
con ese grip y no se produce Lek.
Una clase que va a decir talla y también un campo porque campo puedes ver que tenemos diferentes elementos
tenemos Select tenemos este input campo va a ser una clase genérica que vamos a aplicarle estilos ambos
pero tenemos caya en caso de que sea necesario darle estilos vamos a crear tres opciones Hobson por
tres.
El primero va a ser la talla chica.
Después vamos a poner mediana
y finalmente vamos a poner G para grande fuera del Select.
Vamos a colocar otro input input que va a ser el tipo number solamente acepta números el mínimo va a
ser 1 y el Class va a ser cantidad y también campo.
Finalmente vamos a poner un input que va a ser un submit con una clase de botón botón de esta forma
y el valio va a ser agregar al carrito
guardamos cambios pues el que queda de esta forma vamos a utilizar este formulario pedido como nuestro
contenedor de grit.
Había dicho que iba a ser el contenido pero quiero mostrarte que puedes aplicarle Grit en cualquier
elemento incluso un formulario.
No no hay reglas en ese aspecto.
Vamos a ponerle punto formulario pedido y puedes ver por ejemplo si el proyecto que la cantidad de esta
parte de aquí o mejor dicho la talla toma más espacio que la cantidad de abajo se expande totalmente.
En este caso estaremos utilizando Columns como hemos visto de derecha a izquierda pero también robots
que van de abajo hacia arriba.
Si recuerdas mencioné que en Grid tenemos esas dos dimensiones cosa que no tenemos en Flex Box poner
aquí Grit primero display Grid al código más organizado después griten Plait con Homs vamos a poner
un repito 3 de una fracción y después Grid temple y robots que vamos a ponerle repeat 2 de 6 RAM y guardamos
cambios y de nueva cuenta esto lo vamos a ver mejor en Firefox.
Aquí vamos a poner la diagonal producto y lo de inspeccionar pues ver que se ve un poco desordenado
no importa.
Aún no hemos llegado a esa parte pero por ejemplo si inspeccionar Grid aquí un formulario pedido puedes
ver que el diseño queda de esta forma entonces los templates las columnas tres columnas pero también
los Rousse que son hacia abajo y puedes definir una estructura bastante compleja utilizando templete
Colom en Play Rocks.
Primero vamos a darle estilos a lo que viene siendo los campos si recuerdas o si vemos el proyecto tengo
campo aquí y campo aquí con estas clases entonces quiero darle estilos tanto al input como al select
y es que vamos a tener un background color Transparent para remover el background color que tienen por
default un border basede de 5 pixeles solid color blanco.
También poner un font family que va a ser la fuente principal un iPhone 6 de 3 Flumen para que sea bastante
grande.
La fuente también es pequeña paying de un ram y un Whites 100 por ciento se suele aplicar a los campos
si lo abrimos puede ser que queda estaforma.
Obviamente falta algo de trabajo por hacer.
Por ejemplo puedes ver que el texto debe ser blanco para que se vea mientos color por HFC abrimos el
proyecto de nueva cuenta queda más o menos así ahora va a depender mucho de los navegadores por ejemplo
incluãan puedes ver que aparecen estas flechas en Firefox aparece aquí entonces va a depender del navegador
para que pueda verse de alguna forma u otra.
Algo que sí noto es que por ejemplo en Firefox no aparecen esquinas redondeadas en el Select aquí sí
podemos hacer lo siguiente Si recuerdas.
Este se llama talla Helesponto talla y voy a poner aquí WebKit Appliance ponemos también el WebKit border
radius y lo va a poner cero píxeles para que no tenga nada que se le va a eliminar.
Obviamente también eliminar las flechas por este WebKit Perianes.
Pero puedes ver que ya lo pudimos aplicar o remover las esquinas redondeadas.
Aquí si yo escribo algo también puede ser que el texto queda en color blanco si por ejemplo aquí le
pones texto encender
eso es algo que va a funcionar únicamente quienes te imput no funcionan mucho aquí en esta parte hay
que darle estilos a los elec salvo que es un poco más tardado ahora nos hace falta agregar al carrito
si recuerdas si se tiene una clase que dice botón ponerla aquí punto BT n o tonto botón o mejor dicho
el background color va a ser el color secundario
y un Foncillas de RAM para que sea un poco más grande el font family va a ser la fuente principal de
nueva cuenta.
Entonces si guardamos cambio seguir viendo esta forma agregar al carrito puedes ver que por default
siempre los inputs tienen un borde el borde Arnon y también voy a poner un botón cuando una joven cuando
bajó a ver voy a ponerla aquí.
De hecho quiero mostrarte por qué cuando dijo ver su el carrito del puntero no cambia poner el cursor
Painter
o Interreg cuando lo dijo ver y aparecer esta forma.
También me gustaría que fuera un poco más oscuro entonces el gran color va a ser RGB dos tres tres uno
ocho siete dos.
También puedes ponerle colores de esta forma los guardamos camisilla más que cuando Joubert se ve de
esta forma.
Me gustaría que tuvieran una pequeña transición Aquí le puedes poner transición va a un color que va
a ser la transición que dure .3 segundos y es de tipo oís y cuando dijo ver puede ser que se vean las
pequeñas transiciones era mucho mejor.
Lo único que nos hace falta es posicionar los elementos si recuerdas dibujamos la tabla lo que viene
siendo el contenedor de esta forma pero me gustaría ya comenzar a ubicar los elementos y puedes ver
que por ejemplo la talla en nuestro diseño queremos que se expanda tome más espacio que la cantidad.
Por lo tanto diría su Grit Colom iría del número 1 hasta el número 3 sin abrir esto tenemos tallas poner
Grit Colom que vaya desde el número 1 hasta el número 3 y guardás cambios puedes ver que ya se posiciona
correctamente incluso posiciona correctamente la cantidad y lo único que nos hace falta es el botón
que el botón nos vamos a posicionar de nueva cuenta voy a seleccionar el Fórum aquí.
Clic en el botón quiero que se expanda que vaya desde el número 1 hasta el número 4 vamos a poner aquí
gritó Golum desde el número 1 hasta el número 4 y eso va a ser que tome todo el espacio que haya disponible.
Ahora puedes ver que quedan muy pegados si te gusta como se ve está bien pero por ejemplo aquí en formulario
apellido Cap recuerda Colunga solamente aplica las columnas la única columna que haya de aquí Grit Roca
aplícalo Rog que sería esta línea aquí abajo y Grit GAP aplica en todas las direcciones y puedes ver
que la aplica tanto en Rops como en columnas.
Ya podemos cerrar este algo que me hizo falta mostrarte y que creo que se me pasó fue que tenemos este
contenedor de información y tenemos displayed puedes ver que estamos utilizando en media Cuadri una
de las características que vas a encontrar en Grid es que puedes crear diseños responsive sin necesidad
de Midi Aquaris obviamente no te va a dar tanta flexibilidad como si tuvieran los DQX pero por ejemplo
puedes ver que este diseño que está aquí si lo hago más pequeño que de esta forma puede eliminar este
medio query del contenedor de información y por ejemplo tener el display Grit a quien desee gritan Columns
eliminar esta parte y poner repeat y si es una propiedad que se llama auto Fit Koma minimax y digamos
que le doy un mínimo de 300 píxeles y un máximo de una fracción si guardas cambios puedes ver que queda
esta forma y luego más grande el sitio web responsive sin ningún medio Cuadri en algunos casos también
esto te puede ayudar para no estar escribiendo a medida Aquaris y es algo que vas a encontrar también
en ese segurito la imagen puedes ver que no se expande totalmente eso pasa porque no es tan grande pero
por ejemplo quien tenemos esta imagen le puedes poner una clase que diga imagen producto y copiar esta
imagen de producto y por ejemplo digamos ponerla en contenido de información está bien ponerle un Willett
del 100 por ciento a eso va a forzar a que tome el 100 por ciento
y ser que se ve bastante bien.
Hay algo que me gustaría mostrarte.
Por ejemplo si hago esto al 100 por ciento puedes ver que se alcanza a ver una parte de la parte inferior
el Führer no se expande hasta abajo incluso si comentaba estas líneas puedes ver que no se expanda hasta
abajo.
Para ello puedes utilizar Flex Box Ingrid es más complicado pero Xbox como dije puedes mezclarlos por
ejemplo aquí tenemos el producto HTML puedes poner aquí una clase que va a decir Fuhrer fijo y copie
esta clase y está el Pontus ese es el guapo que arriba donde está el body Body punto Fuhrer fijo y va
a poner display Flex.
Si lo guardas de esta forma y tratas de verlo pues el que se desordena totalmente.
Eso pasa porque cuando aplicas display Flex recuerda el flex Direction por defecto va a ser rojo es
decir va a colocar los elementos de izquierda derecha pero le puedes cambiar el Franks dirección ãcono
y eso va a hacer que se vea un poco mejor pero puedes ver que si se sigue viendo igual no toma toda
la altura.
Aquí le puedes dar una altura mínima Vinjoy de 100 BH y finalmente copiar este selector y decirle al
main crece todo lo que puedas con Flex 1 y puedes ver que queda fijo en la parte inferior.
Si revisamos este código lo que viene siendo el main este que está aquí tiene este Flex 1 que lo fuerza
a que incluso si no tiene tanto contenido el creeís casi elimina por ejemplo este div.
Puedes ver que el mains se mantiene bastante grande gracias a ese Flex 1 y esta fue la introducción
a ese Grit creando un proyecto bastante complejo en algunos aspectos.
Obviamente no pretendo que todo esto quede a la primera.
Claro puedes repetir el proyecto e intentarlo hacer o tomar el ejemplo del Proyecto de Freelancer del
capítulo anterior y tratar de hacerlo ahora en grit.
Como dato la parte de los servicios.
Eso sería como un grid template collons y tendrías que ponerle repeat 3 una F.R para que sean 3 servicios
y se vea uno frente al otro.