Vemos como darle estilos a la sección de nosotros primer paso que vamos a hacer es abrir el estudio
COV hacer más grande esta parte y abrir el Index voy a crear un nuevo archivo que voy a nombrar nosotros
puntua HTML puede ser que ese enlace ya lo hemos creado copió toda la parte del Führer y las pegamos
aquí.
También voy a copiar lo que viene siendo parte del Jader toda esta parte desde aquí desde el género
hasta el dock Tippi toda esta parte de aquí es necesaria si guardamos cambios y damos clic por ejemplo
aquí en nosotros nuestro diseño que estamos creando en nosotros tenemos el género y el Führer vamos
a comenzar vamos a abrir lo que viene siendo nuestro proyecto y aquí dentro de entre el Javer y el Führer
vamos a colocar un Moine con la clase contenedor para que el contenido esté centrado en H2 con la clase
central texto ya la creamos anteriormente sobre nosotros y debido a que vamos a estar utilizando puedes
ver que si vemos este diseño pequeño puede ser que se coloca la imagen arriba el texto abajo y másgrande
izquierda y derecha te voy a mostrar cómo crear un grid muy sencillo similar al de vuestra por ejemplo
se cree que una clase llamada Grid y esto Grid por ejemplo nos va a permitir que si recuerdas anteriormente
teníamos el blog y cursos habíamos creado un contenido principal y teníamos esta clase y luego esta
otra podemos hacerlo incluso un poco más dinámico por así decirlo más utilizable.
Por lo tanto nuestro contenedor va a ser el grid y vamos a colocar dos chips con la clase Columna 6
Columna 6 por 2 para que nos genere 2 que vamos a poner una imagen imagen Megía diagonal nosotros puntos
JPG.
Aquí ponemos imagen nosotros guardamos cambios si abrimos el proyecto puedes ver que aparece la imagen
que de esta forma vamos a copiar un poco del orden Ipsum porque requerimos dos párrafos después vamos
a colocar y a pegar el contenido y digamos que este sería el primer párrafo para seleccionar cualquier
parte en realidad este sería el primero digamos de aquí a aquí puede ser y ponemos el segundo Spee en
segundo iría destaca resguardamos cambios y abrimos el proyecto pues el que tenemos nuestro párrafo
queda más o menos de esta forma se me fue una s más elfinal entonces el que queda esta forma se fue
viendo bien incluso para un dispositivo móvil puede ser que es correcto no tenemos que hacer nada tenemos
que enfocarnos en la parte más grande por lo tanto vamos a abrir el estilo a usar escarola hasta arriba
y por ejemplo aquí después de utilidades vamos a crear un pequeño comentario que va a decir grid en
el dispositivo más pequeño de nuestro Grit no va a hacer nada por lo tanto MQ solamente en un dispositivo
más grande y obviamente podrías hacerlo como hace vostra vez que es decir múltiples clases para distintos
tamaños.
Esto es un poco más sencillo en ese aspecto.
Entonces Grit cuando sea que tengamos esa clase como padre vamos a tener Flex y también yo estoy contento.
Beduina es lo mismo que hemos visto anteriormente pero ahora en la clase de grit y después vamos a poner
aquí columnas 6.
Es decir cuando tengamos esta clase se va a aplicar un flex cero cero como vimos anteriormente y un
cal que va a decir 50 por ciento menos hombreee eso nos va a permitir que se posicione uno frente al
otro pues es que si guardamos cambios queda de esta forma.
Y si estuviera más pequeño no aplicaría esta medida QWERTY y se posiciona uno debajo del otro muy sencillo
agrietó obviamente estaremos agregando más clases conforme pasen los videos ahora tal vez digas bueno
y por qué columna 6.
Bueno usualmente estos Firework como Bootstrap utilizan 12 columnas y en diseño web por ejemplo 12 columnas
es como el equivalente a poder lograr cualquier diseño por así decirlo obviamente tiene sus limitaciones
pero es un número con el que la mayoría de los diseños pueden ser logrados para lograr como cierto cierto
diseño que se ve bastante bien.
Entonces tenemos 6 y 6 entre las dos sería el 100 por ciento por lo tanto cada una sería 50 y 50 por
ciento así que estaremos creando más columnas y un poco más adelante más clases aquí para hacer nuestro
grito un poco más dinámico.
Esta parte está lista si damos clic en cursos puedes ver que tenemos este diseño para los cursos así
que vamos a crearlo en el siguiente video.