Desarrollo web en HTML y CSS para principiantes: crea sitios web con portafolio responsivo

1. Introducción: Bienvenido a esta clase donde aprenderá sobre cómo construir un sitio web de portafolio receptivo usando HTML y CSS, un diseño moderno estilo Bento Esta clase es perfecta para principiantes que quieran aprender sobre HTML y CSS o cualquiera que quiera crear el portafolio así. No usaremos JavaScript ni bibliotecas avanzadas. Al final, solo necesitaremos algunos archivos, indexar HTML, estilo CSS y assets donde guardaremos las imágenes para nuestro proyecto. Si vamos a revisar el portafolio juntos, puedes ver que tenemos la foto de perfil seguida de la introsección, donde tenemos el nombre y la breve descripción sobre nosotros. Ahí tenemos los íconos sociales debajo de nuestra foto de perfil, y en el lado derecho, tenemos algunos escaparates de nuestros proyectos. En la sección inferior, tenemos un botón para descargar nuestro CV en PDF. Tenemos escaparate de nuestras habilidades y contacto. Esperamos verte en las lecciones. 2. Creación del HTML: Necesitaremos carpeta con imágenes que usaremos en nuestra página. Entonces necesitaremos los archivos HTML de punto índice y estilo punto CSS. En index dot HTML, usaremos una plantilla HTMO y ahí enlazaremos el estilo punto CSS Primero, haremos un div con sección class min, y dentro de este div, pondremos un div con envoltorio de clase y ahí dentro de este div, comenzaremos a poner todas las cuadrículas Empecemos con la cuadrícula uno y tendrá cuadrícula de clase y otra cuadrícula de clase uno. Cada una de nuestras calificaciones, vamos a tener ahí en esta página y será alrededor de 14 grados. Cada nota contendrá algo. Por ejemplo, esta contiene la foto de perfil. El siguiente contendrá algunos de nuestros proyectos, el tercero, algunas de nuestras habilidades, cuarta sección de contacto y así sucesivamente y así sucesivamente. Cada una de estas calificaciones tendrá grado de clase y luego su propia clase CSS. Para el primer grado, será el primer grado, y eso significa que entonces puedo estilizarlo por sí solo. Y para esta clase común que voy a dar a todas mis calificaciones, voy a hacer un poco de estilo común. El primero es usar solo esta imagen. Nosotros lo importamos. Es clase también es foto de perfil, así que luego puedo configurarla. Entonces tenemos ahí la fuente y tenemos la extraña. Eso significa lo que se mostrará cuando la imagen no se pueda cargar, tal vez en algún navegador antiguo o tal vez en algún dispositivo donde esta imagen no se pueda cargar, así que mostrará este texto en su lugar, y podemos ir y poner ahí la segunda cuadrícula y voy a hacer algunos espaciamientos entre ellos y entre el código en general porque quiero que sea mejor legible y para mí para que sea más fácil explicarlo. segunda cuadrícula es la cuadrícula número dos, y tenemos la clase ahí dentro de ella, y esa clase es el contenido de segundo grado porque en realidad estoy poniendo ahí alguna introducción. Y ahí estoy poniendo el encabezado un texto con, Hey, soy Jon Doe y el texto de párrafo con diseñador gráfico y desarrollador Full Stack Pero claro, pon ahí lo que te quede bien. La cuadrícula número tres contendrá nuevamente la clase de cuadrícula, la clase Grid three y alguna imagen. Habrá el proyecto de imagen de algunos de nuestros proyectos, y ahora se puede ver en HTML no pasa mucho porque será más interesante en la fase CSS o la parte CSS. Ahora continuemos con la adición de las cuadrículas, y luego en la parte CSS, se pondrá más interesante Cuadrícula número cuatro, contendrá un formulario de contacto. Se puede ver ahí dentro de este div. Tenemos una forma. Y ese formulario tiene esta clase, formulario de contacto, y contiene también dos entradas de correo electrónico y nombre, luego área de texto donde ingresaremos o alguien que visite nuestra página ingresará el mensaje y botón de enviar que enviará el mensaje que ingresará. Cuadrícula número cinco, está conteniendo, nuevamente, alguna imagen de proyecto. Podemos cambiar el proyecto dos, y la cuadrícula número seis es casi lo mismo. Nuevamente, alguna imagen del proyecto. La cuadrícula número siete volverá a tener algún div interno con la clase de contenido grid seven. Y en este div con grid seven content class, tendremos un encabezado dos con descargar mi CV y PDF. También tendremos esto en el texto de Span. Entonces este texto, pondremos algunos estilos adicionales al span, y tendrá un botón con descargar CV, donde posteriormente podrás poner tu CV para descargar en la cuadrícula número ocho. Su inmersión interior tendrá una clase de contenido de grado ocho. Contendrá también encabezamiento dos en texto Span con mis habilidades, y luego todas las demás cosas son solo íconos Entonces tenemos ahí cuatro iconos en SVG, y ahora en el HTML, podemos ver que será Python, JavaScript, HTML y CSS. Cuadrícula número nueve volverá a tener alguna imagen con cuaderno de clase, y ahí voy a poner imagen de maqueta con algunos de nuestros proyectos También puedes poner ahí algún elemento interesante o simplemente quitar la grilla y aumentar el tamaño de otra porque más cuadrículas tienes, más contenido necesitas pensar y así algunas de las calificaciones son más como rejillas de relleno, por lo que al final se ve mejor Pero claro, el contenido no es necesario para estar en la página. La cuadrícula número diez será un ícono de correo electrónico, y ahora crearás la cuadrícula 11 con mis servicios o con los servicios que ofrecemos. Dentro de esta grilla 11, pondremos el rubro dos en Spentax con mis servicios, y luego también crearemos el div con servicios de clase, y en este div, pondremos cada uno de los servicios que ofrecemos Cada servicio puede verse así, que tendrá un dif con servicio de clase. Dentro de este div, habrá un icono SVG. Y también una etiqueta de párrafo con, por ejemplo, B o desarrollador o algo así. Vamos a mostrar un ejemplo de otros servicios. El siguiente es, por ejemplo, optimizar tu código. Entonces hemos construido una página de wordpress para ti, luego construimos una página de Shopify para ti y consulta UR o UX Y cada servicio tiene su propio icono en el grado número 12, pondremos algunos iconos de contacto. puede ver que son los vinculados en unos, y el otro creo porque son blancos. Entonces tendremos que cambiar el fondo para ello, y lo haremos en un rato. Y voy a poner este código HTML en descripción, para que luego puedas tomar estos iconos también o tal vez algunas otras cosas complicadas que son difíciles de encontrar para Grid número 13 contendrán estas dos imágenes con esta imagen móvil, y básicamente son las mismas. Pero la primera imagen se cortará la mitad y solo habrá el lado superior y en el segundo, habrá el lado inferior. Nuevamente tiramos algo de espacio entre las otras cuadrículas donde queremos tener algún contenido más importante Y por último, la cuadrícula número 14. Ese es el último. Habrá de nuevo dentro de un div con contenido de clase grado 14. Y dentro de este div de contenido de grado 14, tendremos una imagen con algunos de nuestros proyectos, pero será solo para el propósito de fondo, y habrá encabezado grado 14, y ahí tendremos tecnología de párrafo con texto de portafolio. Y básicamente, esta grilla estará en la página, y alrededor de esta grilla con encabezado de cartera, tendremos nuestros proyectos. Entonces queda claro que simplemente no son algunas fotos aleatorias que encontramos, sino que es nuestro portafolio real. Eso será para la parte HTML. Ahora pasarás a la parte CSS. 3. Estilismo en CSS: Nuestro CSS, primero importaremos la fuente que queramos usar. Después, para todos los elementos, restableceremos el margen y ropa de cama poniéndolos a cero. Entonces para un cuerpo, comenzaremos con la familia de fuentes y configurando nuestra fuente y también configurando su fuente de respaldo. En caso de que nuestra fuente no sea cargable, esa será sensorial y luego podremos continuar en nuestro elemento corporal Vamos a establecer el color de fondo en gris es uno. Después estableceremos el color del texto en blanco, y también estableceremos el peso de fuente del texto en 500. Ahora vamos a establecer el tamaño de fuente de encabezado 2.4 M, y también vamos a establecer para span este color naranja. Y se puede ver como el texto lo cambia ahí porque lo tenemos en un texto span. Primero, estableceremos el color de fondo a un gris ligeramente diferente que tenemos en nuestro fondo. Entonces estableceremos para nuestras calificaciones que queríamos tomar altura y ancho del 100%. Después pondremos radios fronterizos y sombreado de cajas. Se puede ver en las radios de borde que se muestra un poco el color del fondo que hemos establecido y la sombra de caja, será mejor que vea cuándo vamos a establecer el diseño de cuadrícula para la clase wrapper, vamos a establecer el desbordamiento oculto. Eso significa que no se quedará sin esa tarjeta de cuadrícula, sino que se ocultará en su lugar. Entonces no puede suceder cuando de alguna manera cambiemos el tamaño de la ventana que el texto o alguna imagen de una tarjeta de cuadrícula alguna manera se desbordará en otra cuadrícula, pero se ocultará en su lugar Después continuaremos con el uso del diseño Flexbox, y ahí estaremos alineando los elementos horizontal y verticalmente con contenido justificado y alinearemos los elementos al centro Ahora para la clase Verper, configuraremos display a grid Entonces usaremos el diseño de cuadrícula, y ahí estableceremos las columnas de la plantilla de cuadrícula en nueve. Y una fracción. Eso significa que tendremos las nueve columnas, y cada uno de los ítems tomará una fracción completa. Eso significa que tomarán todo el ancho de la columna. Entonces ahí se pueden ver nueve columnas y cómo está tomando todo el ancho de ellas. Ahora para esta clase de vapor, estableceremos el margen a cero y auto. Esto significa para arriba e abajo, y este auto es para izquierda y derecha. Cuando estamos usando este margen automático ahí, se está centrando. Estableceremos alguna brecha de cuadrícula fija de diez píxeles. Se puede ver la brecha entre nuestras calificaciones, y también estableceremos la altura media en 100 altura de ventana gráfica Y seguiremos con pedalear a cinco cuadros y eso significa el pedalear alrededor de la clase de vapor Entonces actualmente es esto en la parte superior e izquierda o derecha, y por supuesto, también en la parte inferior. Preparé esto para todas las rejillas para poder explicarte mejor Para cada cuadrícula, tendré columna de cuadrícula y fila de cuadrícula, y ahí estaré configurando de uno a básicamente diez porque diez será el final de la novena columna. Y de la fila de la cuadrícula, voy a usar de uno a quinto y configurándolo. Ahora te voy a mostrar ejemplo. Esta columna de cuadrícula comenzando en una y terminando en el inicio de la quinta iremos así y construiremos así cada una de nuestras calificaciones. Y claro, también nos pondremos, por ejemplo, en esta grilla. Una, la imagen, y así sucesivamente para todas las cuadrículas donde necesitaremos establecer algunas cosas adicionales Ahora puedes eliminar todos los demás estilos de cuadrícula del CSS, y los verás ahí, y nosotros le daremos estilo o seguiremos estilizándolos uno por uno Antes de ir a la cuadrícula dos, le daremos estilo también a la imagen de cuadrícula, que básicamente es estilizar que básicamente es estilizar las imágenes para todas las cuadrículas que tenemos ahí, y usaremos objeto fit para cubrir, así que obtendremos lo mejor de las imágenes realmente cubrirá la tarjeta, y también obtendremos mejor de ellas porque no se encogerán ni nada porque solo serán para cubrirlo. Entonces usaremos ancho y alto al 100%, y esta cubierta está haciendo que se centren, básicamente. Y también vamos a dejar que las radios fronterizas hereden, así van a tener 20 pixeles o lo que establecemos ahí Pero quería mostrarles ahora como estamos usando el desbordamiento oculto, aunque eliminemos este radio de borde heredar y guardarlo, seguirá siendo redondeado porque esta imagen continúa ahí en la tarjeta o junto a la tarjeta, pero está continúa ahí en la tarjeta o junto a la tarjeta, oculta ya que la tarjeta tiene el conjunto oculto de desbordamiento Entonces ahora te mostré, podemos continuar con la grilla número dos. Para el grado número dos, establecemos la columna de la cuadrícula, comenzando tres y terminando en el inicio de la séptima. Entonces puedes ver ahí comenzando en la tercera columna y terminando antes la séptima columna y comenzando en la fila uno de grado y terminando en el inicio de la fila tres de grado, ahí puedes ver primero, y ahí termina antes de la tercera. También utilizamos display flex, por lo que flexbox layout. Así que somos capaces de justificar el contenido y alinear los elementos al centro. Puedes ver ahí nuestro texto está en medio de esta grilla. Y también estamos usando columna de dirección flex porque estos elementos H uno y este párrafo están ahora uno debajo del otro. Si usas su fila, no estarán uno al lado del otro porque esta grilla es lo suficientemente apretada como para tenerlos uno debajo del otro, pero aún así podemos mantenerla ahí. Para la clase de contenido de la cuadrícula dos, estamos configurando el tamaño de fuente a 2.4 M y también estamos configurando algún relleno que puedes ver ahí. Alrededor del contenido de la cuadrícula. Ese es el color verde. La cuadrícula número tres está ahí, y está comenzando en la octava y terminando antes la décima que básicamente no está ahí, pero imaginemos también ese el final de la novena columna y comenzando en fila uno y terminando antes de la fila dos o la segunda fila. Para la cuadrícula número cuatro, tenemos que ir un poco hacia abajo. Se inicia en la séptima columna y termina o al final de la novena. Entonces otra vez, siete y nueve, está ahí, pero también está en la fila de cuadrícula 5-8 Primero, segundo, uno, tercero, uno, cuarto, y está comenzando ahí en el quinto y terminando o antes del octavo. Lo tenemos ahí en la esquina inferior derecha. cuadrícula número cinco es esta con la imagen del Proyecto dos, y está comenzando en la séptima columna, terminando antes de la novena columna, y también la tenemos en la fila número dos de la cuadrícula. Permítanme cambiar esto a tres porque está comenzando en el número dos y terminando antes que el número tres. Entonces tenemos la cuadrícula número seis con la imagen del Proyecto tres. Está ahí y se puede ver comenzando en la columna nueve, terminando antes de la columna teórica diez y comenzando en gridraw dos y terminando en la cuadrícula o antes del gridraw tres Si sabes que estará en la misma línea que la cuadrícula anterior, solo puedes copiar el gridraw que usaste antes y eso será aún más fácil entonces Sigamos con la cuadrícula número siete, eso será con la descarga de mi CV en PDF. Y ahí lo tenemos en la columna tres, terminando antes de la columna cinco, y también comenzando en una fila tres y terminando antes de la fila cinco. Para este contenido de grado número siete, agreguemos un estilo adicional. Vamos a querer usar el diseño flexbox para mostrar flex de manera que podamos alinear los elementos horizontal y verticalmente Entonces también queremos usar la dirección flex ahora, pero puedes ver ahí, tenemos las cosas en fila, entonces usaremos la columna. Y ahora el botón estará debajo del texto. Entonces también usaremos algún margen ahí. Entonces usemos margen de dos RAMs. Y podemos seguir hasta el grado número ocho, y esa es la grilla con mis habilidades. Entonces, como puede ver, comenzando en la columna cinco, terminando antes de la columna ocho, y una fila de calificaciones es 35. Lo tenemos ahí. Y como no hay nada que estilizar más, podemos seguir a la grilla nueve. Y colocaremos esta grilla ahí o columna uno slash tres y Raw tres slash cinco Y también vamos a establecer su posición relativa y por qué estamos haciendo esto. Estamos haciendo esto porque estamos usando también esta imagen de cuaderno, y esa es posición absoluta, pero queremos darle estilo dentro de esta cuadrícula nueve. Entonces cuando tenemos la disposición relativa, podemos establecer dónde debe colocarse. Se colocará a la izquierda -30%. Entonces crea que de alguna manera está en medio de la cuadrícula y también vamos a establecer algún ancho fijo a esta imagen de cuaderno. Entonces entonces siempre será así en nuestra grilla. Sigamos con el número de cuadrícula. Entonces ese es solo este ícono de correo electrónico. Lo pondremos en esta columna y esta fila. Probablemente todavía no necesito repetirlo ya que cada vez es más obvio cómo estamos estilizando estas rejillas. Pasemos a la cuadrícula 11, y volveremos a establecer su posición con columna de cuadrícula y fila de cuadrícula. Y también, estableceremos la dirección de flexión a columna. Ahora podemos pensar eso, bien, pero no queremos estar esto en una columna, queremos que esto sea en una fila de dirección flex. Pero este es en realidad otro div. Y queremos que este encabezado y este otro div que está envolviendo estos iconos esté en una columna de dirección flex. Lo que queremos estar en fila son estos servicios. Y para estos servicios, utilizaremos el diseño de Flexbox y estableceremos la dirección de la flexión a la fila Y entonces lo tendremos así. Así que en realidad está en la columna de dirección flexible, pero los servicios en sí están en fila de dirección flexible. Y también, agregaremos una brecha de tres RAMs. Entonces tenemos algunos espaciamientos entre nuestros servicios. Y ahora vamos a establecer algo de ancho a cada uno de los servicios. Voy a establecer el ancho fijo de 80 pixeles. Voy a poner la cuadrícula 12 a esta columna y fila. Se puede ver esta cuadrícula con los iconos. Pasemos a la cuadrícula 13. Y como recuerdas, te hablé de la foto que es la misma foto dos veces. Y se puede ver ahí estamos poniendo la cuadrícula 13 a esta posición, y también estamos usando su posición relativa. Y es porque estas dos imágenes estamos dispuestas a posicionar absolutas. Y en realidad están ocultos por el desbordamiento oculto que establecemos para cada grilla. Pero estamos poniendo cada uno de los cuadros en un lado diferente de la parrilla. Y uno estamos poniendo más arriba y segundo uno top cero. Y luego crea la imagen o la cuadrícula donde tenemos la mitad o la mitad inferior y la mitad superior del teléfono móvil. Puedo mover esto como me plazca, pero me quedaré ahí este -70% Establezca algún ancho fijo allí de 600 píxeles para ambos. Yo le puse a ado, y eso es básicamente todo para este grado 13. Para el grado 14, ese es el de ahí, estableceremos esta columna y fila y además estableceremos la posición a relativa porque para esta imagen o la imagen que puedas ver ahí con nuestro proyecto, haremos posición absoluta, y queremos cubrir el grado de la pared y hacer más visible este rumbo de portafolio. Es así como fijamos la imagen con posición absoluta, arriba a cero y izquierda a -60 porque queremos que esta parte sea vista Ese índice a cero porque pondremos ese índice uno a rumbo y eso significa que si vamos a tener un índice más alto que se mostrará en la parte superior de este menor ese índice. Entonces estableceremos algo de ancho y alto. En realidad no necesitamos ni siquiera usar RAMs pero podemos hacer píxeles 400, 400 píxeles Algo así tal vez aumentarlo a 500. Nuevamente, usaremos object fit para cubrir si no lo estamos usando. Nuevamente, usaremos la cubierta de ajuste a objetos, y también usaremos este filtro para tener esta borrosa porque tendremos encabezado encima de ella, y esto hará que sea mejor legible Para encabezado, estableceremos la posición relativa porque sin el relativo, no se mostrará. Vamos a establecer un tamaño de fuente, color de fondo. Por lo que nuevamente mejoramos un poco la legibilidad. Depende del fondo que pongas ahí, claro, entonces pondremos algo de ancho a este encabezamiento. Estableceremos display flex para que podamos centrar esto o alinearlo vertical y horizontalmente. Entonces pondremos ese índice en uno, eso significa que tiene un índice establecido más alto que esta imagen, y también ponemos ahí alguna sombra de texto. Nuevamente, mejoramos la legibilidad de este rubro. Ahora vamos a configurar el Suigi o grid Suchi. Eso significa que todos los iconos de Suchi que estamos usando en nuestras cuadrículas tendrán un ancho y alto fijos de 100 píxeles, y además estableceremos algún margen alrededor de ellos para la mitad de la RAM Y eso significa que tal vez si tienes diferentes tamaños del SwiGi, lo tendrás siempre 100 píxeles fijos, y hará que todos tus iconos del mismo ancho y alto Ahora terminemos con el formulario de contacto. Estableceremos ancho de 80%, luego altura máxima de 70%. Mostrar a flex, para que podamos usar un diseño flexbox y establecer la dirección de flexión a la columna Ahora puedes ver eso significa que las entradas textia y el botón están una debajo de la otra Y también usamos di gap de una RAM. Eso significa que tenemos estos espaciamientos entre ellos. Ahora vamos a estilo input y texteria. Nuevamente, lo pondremos al 100%. Estableceremos frontera y contorno a ninguno. Entonces estamos estableciendo un trasfondo diferente al que tenemos en nuestra grilla. También algunos boxeado que puedes ver ahí, ropa de cama, radio de borde, por lo que es más redondeado y color blanco Entonces el texto que ingresarás dentro estas entradas será en un color blanco y estilo del botón, nuevamente, algunas radios de borde. Algo de ancho y alto, color de fondo, básicamente el mismo que tenemos en estas entradas luego muestran flex. Este texto está centrado o alineado vertical y horizontalmente, aumenta el peso de la fuente y el color también blanco. Eso será para la versión de escritorio y ahora la móvil. Pero a lo mejor te preocupa que vuelva a tomar demasiado tiempo. Estamos bien porque esto probablemente tomará solo unos minutos. Ahí tenemos la pantalla del móvil, y solo hay algunas cosas que tenemos que hacer. Lo que tenemos que hacer es cambiar la columna de plantilla de rejilla en una clase de vapor a una fracción. Entonces también podemos opcionalmente, por supuesto, agregar algo de ropa de cama alrededor. Y luego usaremos esta cuadrícula de clase y estableceremos la columna de cuadrícula y la fila de cuadrícula en auto. Y no queremos repetirnos como 14 veces. Por supuesto, todo tomará cinco líneas. Entonces eso es como que no lo sé, 70 líneas casi. Y podemos hacer esto en cuatro filas o cuatro líneas de código. Y eso es mucho, diría yo. Cambiaremos el ancho de nuestra foto de perfil a diez carneros Cambiaremos el tamaño de fuente y la ropa de cama a un carnero en nuestra cuadrícula al contenido allí. Cambiaremos el ancho y alto para nuestros íconos. Básicamente lo bajaremos una vez, así que tendremos 50 píxeles de ancho y alto. Para los servicios, cambiaremos la dirección flex a columna, y también agregaremos allí algunas camas adicionales. Y lo último es que para encabezar dos, cambiaremos el tamaño del teléfono a 1.4 RAM. Ahora puedes ver que lo tenemos ordenado de una manera un poco rara. Entonces lo que tendremos que hacer es reordenar el HTML, así que tiene sentido, pero podemos hacerlo y todavía no se cambiará en nuestra versión de escritorio porque definimos ahí qué columna de cuadrícula y fila de cuadrícula debe conservar Entonces solo cambiarás a la versión móvil, y ahí ahora reordenas la grilla Por ejemplo, esta grilla 14, voy a tomar y ponerla por encima de esta. Pero si vamos a volver a nuestra versión de escritorio, sigue en la misma posición. Ahora lo reordenaré y lo cortaré, y ahora se ve así, y lo habrá para éste 4. Proyecto 1: portafolio básico de gris para principiantes: Te guiará a través de esta cartera línea por línea. Tenemos sus proyectos en casa y en la página. También, tenemos los algunos proyectos, algunos comentarios, un formulario de contacto en la parte inferior de la página, y ahí lo puedes ver para pantallas móviles Primero, en nuestra carpeta, crearemos la carpeta Images donde pondremos las imágenes para este proyecto, luego crearemos index dot HTML, y crearemos también style dot CSS. En índice al GML, por signo de exclamación, generaremos una Vamos a poner ahí algún título, por ejemplo, nuestro nombre. Este es un nombre de marcador de posición para mí. Y enlazaremos la hoja de estilo. Link Style Sheet y href es estilo punto css. A las imágenes, agregaré PreflPicture, Project one, Project two y Project three Primero, agregaremos un encabezado en nuestro HTML, y ahí pondremos la navegación. Para esta navegación, agregaremos una clase Navbar. Y dentro, pondremos una lista desordenada con enlaces de clase Y dentro, pondremos elementos de lista para cada elemento del menú que nos gustaría tener dentro del elemento de lista y su texto. Y ahí podemos agregar también HRF donde este enlace nos redirigirá Entonces por ejemplo, si vamos a tener su casa, y nos puede redirigir a la página principal, que es índice punto HTML. Ahora vamos a copiar esto para cada sección o elemento del menú, voy a tener los únicos tres proyectos caseros y sobre mí. Guárdalo. Agreguemos un logotipo a nuestra barra de navegación, y agregaremos el logotipo de la clase, y también podemos agregar el índice Hf HTML. Entonces, si vamos a hacer clic ahí, también nos redirigirá a una página de inicio. Ya lo tenemos en nuestra casa. A partir de ahí, lo eliminaremos porque entonces usaremos su proyecto dot HTML y un punto HTML como estas páginas en este momento. Y posteriormente copiaremos código ahí del índice de HTML y actualizaremos un poco. Ahora agreguemos la configuración del menú Hamburger para nuestro diseño responsive cuando usemos la pantalla del móvil Y te voy a explicar línea por línea. No te preocupes. Primero, agregaremos etiqueta de entrada y ahí pondremos checkbox tipo y menú ID Tuggle Estamos usando este tagle de menú ID porque a continuación en una etiqueta, estamos usando cuatro Mnutago y eso significa que está asociado con Entonces, si la casilla de verificación cambiará a valor marcado o desmarcado, esta etiqueta, más adelante en la definición CSS, estará cambiando Esto se está utilizando porque cuando vamos a hacer clic en el botón Hamburguesa, este SVG es un icono que estará mostrando los elementos del menú Empecemos bajo el encabezado, y estaremos creando secciones. Se nombrará la primera sección o tenemos clase. Bienvenida. Y eso dará la bienvenida a la sección cuando nos presentemos. Segunda sección se llamará mi obra y ahí tendremos nuestros proyectos, y perdón por los espaciamientos ahí, pero quiero mejorar la legibilidad para ti Eliminaremos los espaciamientos innecesarios más adelante. La siguiente sección será la retroalimentación. Ahí tendremos nuestros testimonios de otras personas que tal vez nos dieron una buena retroalimentación. Cuando estábamos trabajando con ellos o con algunos clientes del pasado, entonces tendremos la sección de contacto cuando tendremos nuestro teléfono, correo electrónico y formulario para enviarnos un correo electrónico, también. Último será el pie de página en la parte inferior de la página donde podremos dar click en scroll up. Empecemos con esta sección de bienvenida. Bienvenida izquierda. Habrá un div con esta clase donde tendremos nuestra introducción. Así que rumbo a Hey soy John Doe, delantero y desarrollador. Y también bajo este div, tendremos derecho de bienvenida. Y ahí vamos a tener nuestra foto. Entonces imagen de fuente, imagenes, foto de perfil, ciérrala. Allí también nos gustaría destacar nuestro nombre. Entonces pongámoslo en el texto span. Lo conseguí ahí. Pasemos a mi sección de trabajo. Ahí agregaremos algún encabezamiento de sección. En encabezado de sección, pondremos también H dos texto. Diremos que son mis proyectos y bajo encabezado de sección, pondremos proyecto principal de clase. Ese es algún proyecto que queremos representarnos, digamos, pondremos la imagen del proyecto que será proyecto fuente, imágenes, Proyecto uno, por ejemplo, vamos a sacar también. Tenemos que hacerlo también para la foto de perfil, y esta salida se usa cuando esta imagen no se puede cargar cuando tal vez se pierde este archivo o cuando el navegador simplemente no puede cargarlo, y pongámoslo también ahí Proyecta uno, en lugar de ello, foto de perfil. Ahora podemos continuar. Entonces tenemos ahí el proyecto principal. También para el proyecto principal, debemos agregar alguna descripción. Entonces el texto del párrafo y algo así como lo que hice ahí es que necesitamos averiguar alguna descripción para el proyecto. Entonces no es sólo una imagen ahí, por supuesto. Y ahora podemos continuar con Oder Div. Habrá los no dos, sino dos proyectos. En esta página principal, me gustaría mostrar tres proyectos, y por qué estoy usando su proyecto principal es por el layout, quiero que se destaque y que sea el panorama más grande, y estos dos proyectos estarán debajo de él en dos bloques. Y en dos proyectos, voy a hacer Proyecto uno y Proyecto dos. En Proyecto uno, o incluso en Proyecto dos, puedo copiar esta cosa del proyecto principal, ponerla ahí. Sólo voy a cambiar los números para el Proyecto dos y tres, y también las imágenes. Proyecto uno, dos. Eso está bien. Yo lo guardaré. Vamos a revisar nuestra página. Entonces tenemos todas las imágenes. Está tomando el ancho completo porque aún no está estilizado. Volvamos. Pasemos a la retroalimentación de la sección. Ahí agregaremos otro H dos. Vamos a establecer en g dos este encabezado de sección de clase que estilizaremos más adelante. Le pondremos el nombre de retroalimentación. Bajo este rubro, agregaremos un div de feedbacks. Entonces tendremos sus propios comentarios. Y en cada comentario, tendremos alguna imagen donde podamos poner la foto de perfil de la persona que nos dio este feedback, y pondremos ahí también algún párrafo ahí también, pondremos otro encabezado, cuatro años, y ese será el nombre de la persona que nos dio este feedback. Tomemos ahora este plato de comentarios y lo copiemos dos veces. Et ahora se mueve a la sección de contacto. Ahí agregaremos también edad dos con encabezado de sección de clase. Vamos a poner ahí vamos a conectarnos. Debajo de ella, pondremos contenedor de contacto. Y en este contenedor de contacto, volveremos a poner secciones contacto izquierda y contacto derecha. En contacto a la izquierda, solo podemos poner algunos enlaces. En el texto de párrafo, haremos el texto ancla, y ahí haremos Github. Ahora, vamos a copiarlo, pegarlo ahí, poner el enlazado en. Y en contacto escribir, pondremos la etiqueta del formulario de contacto que está asociada a la entrada, y lo haremos por nombre o por correo electrónico y para el mensaje. Pero la segunda etiqueta no se asociará con entrada, sino con área de texto, que también es una entrada, pero para un texto más largo y para un mensaje en nuestro caso. Y a continuación, lo haremos en el botón, y este botón será para enviar el mensaje. Añadiremos el tipo de envío. Ahora bien, esta etiqueta, tenemos que cablearla. Entonces para el correo electrónico, y eso significa que esta entrada será correo electrónico tipo, ID, correo electrónico y nombre de correo electrónico. Y pongamos también lo requerido. Eso significa que nadie puede enviarnos un mensaje cuando no se va a llenar el correo electrónico. Para la otra etiqueta, esto será para el mensaje. Y al área de texto, agregaremos lo mismo ID de mensaje, nombre del mensaje, y eso será todo. Ahora bien, lo último que nos falta en nuestro HTML es el pie de página, y eso es básicamente solo el logotipo, que es nuestro nombre y la función scroll up ahí en el texto de anclaje, y simplemente nos desplazaremos hacia arriba y hacia arriba Y vamos a poner la parte superior ahí al nombre de la barra de Navbar arriba Empecemos en nuestro archivo CSS de puntos de estilo, y primero, vamos a importar la fuente que elegamos de font.googlaps.com Para todos los elementos, haremos estrella ahí, y eso significa que esto se aplicará para todos los elementos en nuestro HTML. Estableceremos margen y pedaleo a cero. Eso significa que estamos restableciendo estos valores. Entonces estamos configurando modelo de caja a caja de borde porque para la caja de borde, los cálculos incluyen también el pedaleo y eso es mejor para nuestro diseño responsive Después configuraremos la familia de fuentes, y la primera aparecerá si el navegador soportará nuestra fuente, y la segunda es una fuente alternativa, que aparecerá cuando el navegador no admita la nuestra. Abriremos el bloque corporal, y estableceremos el color de fondo a este color gris. También estableceremos color blanco. Si vamos a revisar ahora nuestra página, podemos ver que tenemos este color gris en el fondo y el blanco aplica para el texto en ella. Sigamos con el estilo de nuestra barra de navegación. Vamos a establecer la altura de nuestro encabezado siete RAM y también el color de fondo rojo. Posteriormente eliminaremos este color, pero por ahora, usaremos este rojo, que podamos ver qué es exactamente lo que está sucediendo ahí en este encabezado. Continuaremos con la clase navbar que contiene nuestros elementos del menú Queremos llevarlo todo el peso al 100%. Estableceremos el diseño flexbox con display flex, y eso significa que podemos usar justify content Allí pondremos espacio alrededor, y nuestro espacio se distribuye entre estos elementos en nuestra barra de navegación. Ahí tenemos uno, y ahí arrancando el primer espacio, está el segundo , el tercero, cuarto y el quinto. Ahora bien, si vamos a ir en profundidad las herramientas a nuestra barra de Nav, podemos ver que está en la parte superior de la cabecera, cómo podemos arreglarlo y centrarlo. En nuestro encabezado, volveremos a usar display flex, y usaremos el centro de líneas de artículos. Podemos ver que el Navbar está en el centro de nuestro encabezado También aumentemos el tamaño de la fuente. Y ahora podemos pasar al logo de Navbar. Ahí le pondremos decoración de texto a Nan. Ahora no tenemos nuestro logo subrayado, y pondremos color al color de nuestro proyecto. En este caso, será éste. Eliminaremos el color de fondo rojo. Y fui por esta opción azul combinado con este gris en el fondo. De vuelta en ninguna barra, alinee los artículos al centro. Eso significa que vamos a alinear todos estos elementos verticalmente. Para los enlaces, pondremos decoración del texto en sustantivo para volver a deshacernos de los subrayados Vamos ahora hola navegación y la casilla de verificación. Lo haremos como configurar display a none y en nuestra consulta de medios para pantallas móviles, luego configuraremos display para bloquear. Para los enlaces, eso significa la clase que está conteniendo nuestros ítems en nuestra barra de navegación. Vamos a establecer el estilo a ninguno. Eso significa que nos desharemos de los puntos de votación, mostraremos la bandera para usar un diseño de flexbox, que podamos alinear los elementos al centro y también una brecha entre los elementos de nuestro menú Y también, necesitaremos establecer un color blanco para este texto de anclaje, color y también que cambiaría el nombre de esto Acerca de mí a aproximadamente solo en nuestro índice punto HTML. Llevémoslo ahí antes de que continuemos, agreguemos también la raíz. Y ahí estableceremos un color primario variable y pondremos ahí el color que queremos usar como color primario para nuestro proyecto. Estoy usando esta. Y lo que eso significa es que ahora podemos usar esta variable. En todos nuestros elementos, podemos usar Barra y color primario, y la funcionalidad seguirá siendo la misma. Pero pasemos ahora a la configuración de sobre-efecto en la tecnología Anchor y fijemos el color. Voy a usar nuevamente Barra de color primario en nuestra página, podemos ver que tenemos el logo en nuestro color ahí, y cuando lo haremos sobre nuestros elementos del menú, tenemos el color también ahí. Y más adelante cuando tendremos este color definido a aún más elementos, y tal vez nos gustaría cambiar el color de nuestro proyecto a otra cosa, tal vez a color amarillo brillante y guardarlo, la variable cambiará para todos los elementos. Vamos a retroceder el color que tenemos ahí, o si quieres cualquier otro color, ponlo. Definimos el efecto Her como ya viste, y seguiremos definiendo la clase activa. Y para active, usaremos el borde inferior, un píxel sólido y el color de nuestra variable. Este píxel significa el grosor de la parte inferior del borde. Además, olvidé agregar esta clase al archivo HTML. Pongamos a la clase activa. Lo que esta clase hace eso al elemento donde la configuramos, le agregaremos la funcionalidad CSS. En nuestro caso, es la parte inferior del borde, y debería usarse para mostrar dónde estamos actualmente en nuestra página. Después estableceremos ropa de cama para todas las secciones a tres RAM, tamaños de fuente para texto de párrafo en nuestras secciones, span que usaremos para resaltar el texto como nuestro nombre en la primera sección. Y ahora vamos a nuestra primera sección que se llama bienvenida donde tenemos nuestra introducción y nuestra imagen y primero hagamos este comando para mejorar la legibilidad del código Más adelante, cuando volvamos a este código, podremos ver fácilmente dónde está cada sección comenzando en nuestro archivo CSS. En nuestra sección de bienvenida, usaremos la bandera de exhibición para el diseño de flexbox y también centraremos los elementos vertical y horizontalmente En nuestra sección de bienvenida a la izquierda, primero estableceremos el tamaño de fuente en tres RAMs, luego máximo con 60% Usemos herramientas para sordos para verlo mejor. Ahora para nuestra imagen en la bienvenida derecha, pongámosla en 30 Ram. Y también, cambiemos la mezcla en nuestra bienvenida dejada al 40%. Ahora vamos a nuestro HTML, y debajo de esta sección, y entre esta segunda sección MW, pongamos un dith divisor Y en ese div, pondremos algo de texto como JavaScript diseñador de UIux, tus habilidades o tus logotipos y lo repetiremos algunas veces Entonces tenemos ahí al menos texto en esta línea. Y en este divisor, primero pondremos color de fondo. Tengo un color un poco diferente al color primario. Entonces pondremos color de nuestro texto a negro. Vamos a la altura de este divisor a cinco RAM, tamaño de fuente a dos RAM, diseño flexbox para alinear elementos vertical y horizontalmente Ahora desbordamiento oculto en caso de que este texto nunca salga de este divisor y también flex wrap a no wrap. En caso de que pongas ahí más texto y se redimensionará la página, no nos importa si este texto se pierde porque es solo una mezcla de palabras que al final están, no tan importantes, pero hay más para el propósito de estilismo Y ahora la parte más divertida, vamos a transformarla con menos cinco grados. Lo que va a pasar es que ahora tendremos un sesgo vertical de menos cinco grados. También pongamos ahí un comando, estilo divisor o solo divisor tal vez. Y ahí otro, mi sección de trabajo. Y en mi sección de trabajo, comenzaremos con display flex y alineando artículos vertical y horizontalmente. Necesitamos cambiar el ancho y alto de estas imágenes. Estableceremos el ancho de la imagen del proyecto principal 82 RAM y la altura en 40 ram. Entonces como queremos asegurarnos de que nuestra imagen quiera distorsionar sus proporciones y no deje espacio vacío, usaremos la cubierta de ajuste a objetos. Para las otras dos imágenes del proyecto, estableceremos el ancho en 40 RAM. También hace 40 objetos RAM aptos para cubrir, igual que en la primera imagen, y también algún poco de margen. Todavía necesitamos definir esta sección, pero ahora para las imágenes, se puede ver cuánto espacio ocuparán, y también ahí se puede ver el margen. Vamos a establecer la dirección de flexión a columna como queremos que nuestro proyecto principal y dos imágenes del proyecto estén debajo de nuestro proyecto principal. Además, no olvides que tenemos la sección que se dirige ahí que estará en la parte superior. Y con columna flex dirección, el proyecto principal y dos proyectos estarán por debajo de él. Vamos para nuestro encabezado de sección, establecer el margen en cuatro RAM. Disminuir el espaciado entre letras en menos cinco píxeles. Eso significa que las letras estarán más una encima de la otra y aumentarán el tamaño de fuente a tres RAMs que podemos ver con las herramientas de muerte, el margen, podemos mover esta sección saliendo de esta sección MW, y tal vez incluso fuera de esta sección divisora y bienvenida porque usaremos este encabezado de sección en otras secciones Eso significa que como es suma de la clase CSS más común, vamos a apagarlo. Entonces entonces lo buscaremos. No vamos a ir a la sección MW, pero sabremos que está en algún lugar de arriba allá para nuestros dos proyectos. Configuraremos display para flexionar y justificar el centro de contenido para centrarlo horizontalmente, alinear los elementos al centro para centrarlo verticalmente. Entonces usaremos dirección flex para remar. Y lo que también haremos que pondremos esta posición de texto absoluta, y a nuestras imágenes, pondremos posición relativa, y la vamos a darle estilo a ellas. Para este texto, pongamos mi palabra. Pongamos posición absoluta. Color de fondo a transparente, color de texto a negro. Y ahora en nuestra página, puedes ver aún más abajo. Necesitamos establecer una posición relativa a nuestros contenedores de proyecto. Allí haremos proyecto un proyecto dos, posición relativa, y para proyecto principal también. Pero lo que además queremos hacer por el contenedor principal del proyecto es establecer también algún margen para arriba. Usemos dos REM. Y ahora en nuestra página, todavía no vamos a ver nada. Lo que tenemos que hacer está en nuestro párrafo. También establece la posición. Usemos los diez últimos. Y se puede ver que está tomando la posición de su pariente padre. Habrá que fijar también la izquierda, no sólo abajo, vamos a hacer a la izquierda 5%. Y ahora podemos ver cómo está dentro de su contenedor padre. Quizás una mejor idea mirarlo es establecer este fondo al fondo de la página, el color del texto en blanco. A lo mejor también algunas acariciaciones. Usemos 1.2 RAM, y creo que eso se ve mejor. Pasemos ahora a la sección de comentarios. Primero estableceremos el diseño de la caja de lino y alinearemos los elementos vertical y horizontalmente Entonces para nuestros comentarios, usaremos display inline flag para tenerlos uno al lado del otro y también establecer la altura en 30 RAM Para cada retroalimentación individual ahora, pongamos el color de fondo en rojo, pero tal vez algo menos brillante porque me duele mucho los ojos de esto cuando revisaremos la página, podemos ver que probablemente hicimos algún error en nuestro HTML, y podemos verlo ahí. Hemos duplicado o dupliqué los comentarios ahí. Perdón por este error. Vamos a arreglarlo agregando su sección de comentarios. Allí actualizaremos estos comentarios a la sección de comentarios. Y lo que también podemos hacer. Y lo que me olvidé es hacer un anuncio del comando feedback. Ahora podemos ver que funciona y finalmente podemos ver nuestros feedbacks divididos Quedémonos con esta fusión de dos RAM, centremos el texto dentro de la tarjeta de comentarios con el centro de alineación de texto y agreguemos también relleno de dos Ahora podemos cambiar el tamaño de fuente y poner ahí alguna imagen en nuestro índice punto HTML, pongamos ahí algún texto marcador Vamos a establecer el ancho en 35 marco, disminuir el tamaño de fuente a 1.5 marco en nuestro párrafo de comentarios. Entonces para nuestro H four, donde tenemos el nombre de la persona que nos escribió el testimonio, pondremos margen al principio para dos RAM, y cambiaremos el estilo de fuente a itálico Eso quiere decir que el nombre será diferente al propio testimonio. Ahora voy a agregar tres imágenes para nuestra sección de comentarios, ponerla a través de feedback image index dot HTML. A la segunda retroalimentación y a la tercera retroalimentación. Ahora definamos las imágenes de retroalimentación. Primero, estableceremos ancho y alto diez RAMs y también objetaremos con cubrir ya que no queremos destruir a nuestros colegas o clientes X. Lo que también nos gustaría es hacer esta imagen en un círculo y ponerla en la parte inferior de esta retroalimentación. Podemos hacerlo con posición absoluta y fijando valores inferiores e izquierdos de la posición a 5%. Pero ahora, si vamos a revisar la página, las imágenes desaparecieron, y eso es porque no configuramos en nuestro contenedor de comentarios la posición relativa. Vayamos a la retroalimentación y establecemos la posición en relativa allí. Ahora se verá así. Agreguemos el radio del borde al 50%. Eso va a crear un círculo para nosotros. Y ahora creo que por fin podemos cambiar el color de fondo. Agreguemos este degradado lineal al fondo como color. Y también, agreguemos algunas sombras de caja, y eso creará este look para nuestras tarjetas de comentarios. Ahora agregaremos algún radio de borde. Usemos dos REMs y agreguemos este radio de borde también a las imágenes de nuestro proyecto Ir a la imagen principal del proyecto y también esto a las imágenes de proyectos. Empecemos por establecer el color de fondo de nuestra sección de contacto al color primario del proyecto que se verá así. Luego usaremos display flex para que podamos establecer la dirección del contenedor flex a columna. Y también alinear los elementos al centro donde centraremos los artículos verticalmente. Ahora fijemos los contenedores contenidos en esta sección. Empezaremos con Contenedor Contacto. Si no estás seguro de lo que estoy hablando, vamos a Index dot HTML, y ahí podemos ver que tenemos esta sección de contacto, contenedor de contactos, y contacto izquierda, contacto, ¿derecha? Para el contenedor de contacto, también usaremos diseño Flexbook y justificaremos el centro de contenido Eso significa que nuestros artículos estarán centrados horizontalmente allí. Para la entrada de etiquetas, área de texto y un botón, usaremos display flex y flex direction to column, asegurándonos de que estas etiquetas y entradas estarán una debajo de la otra. Les agregaremos algún margen de una RAM, asegurándonos de que haya algo de espaciado y también radio de borde de una RAM para ir con nuestro diseño de página. Comencemos con Contact left y ajustemos el flex de pantalla, alineemos el contenido al centro, flexionemos la dirección a la columna. También agreguemos algo de margen a la parte superior de dos RAMs, está un poco más dividido, alinee el texto al centro y un ancho establecido de 30 RAM Usaremos su color de fondo, negro, estableceremos el color del texto a nuestro color primario, estableceremos el relleno de un RM que aumentará nuestro botón, y podremos ir y darle estilo a nuestro pie de página. Vamos a establecer el color en negro. Color de fondo, quiero decir. Ahora estableceremos el tamaño de fuente en 1.2 Rams. Ahora vamos a establecer la altura de este pie de página en cuatro RAM. Y usaremos un diseño flexbox para justificar el contenido con espaciado alrededor y también alinear elementos al centro Como tenemos nuestra funcionalidad scroll up en Anchor text, estableceremos la decoración del texto en ninguno para que no la tenga subrayada y el color sea blanco. Ahora puedes ver que son nuestro pie de página, e intentemos hacer clic en la funcionalidad de desplazamiento hacia arriba. ¿Pensaste que eso es todo? No, claro, no. También tenemos el diseño responsive móvil ahora. Se ve así. Y tenemos dos opciones. Digamos que esto es un estilo futurista, y estamos muy, muy adelantados a tiempo, y esto es realmente genial O simplemente estilízala. Y vamos por la opción también. Vamos a agregarlo ahí ahora, uh Pie de página. Ahí tenemos la sección de contacto que está bien. Después agregaremos diseño de pantalla móvil o simplemente medios de pantalla móvil, pantalla y peso máximo a 1,100 píxeles Comenzaremos cambiando la altura del encabezado, y luego queremos deshacernos de los elementos de nuestro menú o al menos hasta el momento hasta que recojamos el ícono de Hamburguesa Vamos a por los enlaces establecer posición absoluta. Y moverlos a la izquierda -100%. Y después de hacer clic en el icono de Hamburguesa, cambiaremos la izquierda a cero Primero, necesitamos mostrar ese icono, así que cámbialo a bloque de visualización, y ahora podemos hacer lo que dije. Entonces, si se marca este menú ir, eso significa que revisaremos este ícono, entonces estos enlaces cambiarán. Se deja a cero en vez de -100%. Lo que va a pasar es que estará encima de nuestro ícono de Hamburguesa, así que ahora no puedo volver a darle click Sigamos con el estilo estos elementos del menú o estos enlaces. Usemos top 275. Píxeles ahora podemos volver a hacer clic en el icono y se movió. Lo que haremos también es que pondremos el color de fondo en negro. Columna de dirección flexible. Los elementos del menú estarán uno debajo del otro, y definitivamente también nos falta algo de ancho ahí. Vamos a establecer el ancho al 100%. Ahora también podemos establecer padding a dos RAMs. Se puede ver ahí. El color verde es el acolchado. Y establece la transición 0.3 segundos al este, eso significa que creará el ícono de Hamburgo, no aparecerá instantáneamente, sino que se mostrará sin problemas. También puedes elegir ahora si quieres que el menú sea así o configurarlo ahí también a altura a 100 altura de la ventana gráfica, y estoy contento de que esto con el divisor también pasó Lo que también debemos hacer es establecer ahí el índice conjunto más alto. Por ejemplo, a diez porque no estoy usando ningún índice Z en mi página, pero si habrá editar algunos elementos y vamos a usar ese índice, es mejor tener algo más alto para la barra de navegación porque de lo contrario, los elementos con índice z más alto se mostrarán encima. Por ejemplo, a esta sección de bienvenida nosotros, así que esta imagen, voy a poner ese índice a 100 y ahora si voy a dar clic en la barra de navegación, se puede ver, se oculta a continuación. Continuemos con nuestra sección de bienvenida. Para la sección de bienvenida, estableceremos el diseño de flexbox con display flex Además, estableceremos la dirección de flexión a columna para tener los discos en esta dirección y los elementos alineados al centro. Eso significa verticalmente. Ahora para el diseño móvil, redefiniremos los valores que definimos en la versión de escritorio Este texto principal, cambiamos a tres RAMs el párrafo en sección, vamos a cambiar a una RAM No tenemos ninguno ahí, pero en la parte inferior, se puede ver éste. Entonces estableceremos el ancho máximo para la bienvenida izquierda en 90%. Cambiaremos el tamaño de nuestra imagen en la sección Bienvenida derecha a ancho 20 ram. Cabeza que configuraremos en Auto, asegúrese de que tome la cabeza que necesita para estar en la calidad completa. Y también, estableceremos la fusión en la parte superior para un carnero para hacer algo de espacio entre el encabezado y la imagen. Pongamos cierto margen en el encabezamiento de la sección, como puedes ver ahí. Ahora podemos poner el encabezado como barra de navegación con el encabezado ahí. Bueno, viene sección móvil. Pongámoslo también para la barra de navegación. Ahora continuemos con la sección de proyectos. Agreguemos esta sección del proyecto. Móvil. Y comencemos con la imagen principal del proyecto. Estableceremos el ancho en 25 RAM y nos dirigiremos a 15 RAM. Y para la imagen de los dos proyectos, estableceremos el ancho en 11.5 RAM y nos dirigiremos a 18 RAM. Como definimos en la versión de escritorio, el objeto fit cover, no vamos a perder ninguna calidad de nuestras imágenes ahí, y podemos dejarla así. Luego pasaremos a la sección de comentarios. Primero, estableceremos dirección flex a columna y también odiaremos al 100%. Si no establecimos esta altura al 100%, los comentarios se desbordarán en la otra sección Y además, si no vamos a establecer esta dirección flex la columna, los feedbacks seguirán estando uno al lado del otro Ahora establecemos el ancho de cada retroalimentación en 25 RAMs, luego disminuyamos el texto del párrafo de tamaño a 1.2 RAM También disminuye el tamaño de la imagen de retroalimentación al ancho y alto de cuatro RAMs Ahora la sección de comentarios se verá así, y podemos pasar a la sección Let's connect o contact. En nuestra sección de contacto, estableceremos dirección flex a columna para nuestro contenedor de contacto. Eso significa que tendremos estos diffs a continuación para nuestra etiqueta, área de texto de entrada y un botón Estableceremos el margen a tres RAM y cambiaremos tamaño del párrafhon para nuestro contenedor de contacto a dos RAM. Ahora volvamos al principio y veamos qué nos falta. estilo de la barra de navegación y por qué se mueve es porque estamos usando ahí para el icono, también la etiqueta. Ahí lo puedes ver. Pero estamos estableciendo el margen para las etiquetas abajo en nuestra sección de contacto para tres REMs Lo que tendremos que hacer es que vayamos al índice punto HTML. Podemos usar mensaje de clase o formar un mensaje Copiarlo, entrar en nuestro CSS. En lugar de la etiqueta, pon su mensaje de forma de punto que moverá nuestra navegación hacia atrás y además destruimos este correo electrónico. Entonces pongamos la clase, mensaje de correo electrónico, ponlo también ahí. Ahora lo tenemos de vuelta, desplácese hacia arriba. Hagamos una cosa más. Si lo abrimos, podemos verlo. También con las herramientas para sordos. Digamos esta parte superior a 100 píxeles. Y eso debería ser por el diseño incluso en la versión móvil. Para otras páginas, vamos a Sutter un punto índice HTML, vamos sobre, pegarlo ahí, también en proyectos Y ahora en aproximadamente, podemos dejar esta sección de comentarios y eliminar las cosas hasta el encabezado. También, vamos a cortar esta clase activa y ponerla a aproximadamente y para proyectos, haremos algo similar. Ahí cortaremos la sección de contacto. Cortaremos la sección de comentarios. Dejaremos ahí el proyecto, y cortaremos la sección de bienvenida con el divisor, David. Ahí cortaremos la clase activa y la pondremos a proyectar. Veamos la página ahora. Ahí podemos ir a proyectos. Estamos ahí. También tenemos proyectos activos y mismos a la sección Acerca de, tenemos ahí los feedbacks Vamos a conectarnos y sobre está activo. Ahora podemos volver a casa. De igual manera, funcionará para la versión de escritorio. Y también podemos ver que en la versión de escritorio, tenemos ahí algún problema con este ancho. Vamos. Y arreglarlo. Además, podemos ver que este problema está en sección de comentarios porque en los proyectos no tenemos estos temas. Y como la sección de comentarios también está en la página de inicio, también está ahí. Simplemente cambiemos el ancho a 30 RAM en la tarjeta de comentarios, y también a la imagen de retroalimentación, establecemos el ancho y odiemos a ocho RAM Y ahora nuestra página se verá así. 5. Proyecto 3: portafolio de página del centro para principiantes: Hola a todos. Veamos cómo crear este diseño de portafolio responsive solo con HTML y CSS. En nuestro código VS, crearemos una nueva carpeta con imágenes. Después crearemos un nuevo archivo, que es index dot HTML, y también, por supuesto, estilo punto CSS. En nuestro índice punto HTML, si haces el signo de exclamación, éste generará una plantilla para Podemos preparar enlazando la hoja de estilo ahí. Así enlace hoja de estilo, y luego HRF, estilo punto CSS Vamos a cerrarlo. Podemos cambiar este título a nuestro nombre. Estoy poniendo ahí un nombre de marcador de posición, que es John Doe. Entonces puedo poner algo en esta página. Podemos verificar si está funcionando. Así que ahí para todos los elementos, podemos establecer el color de fondo en Go. Y luego abriremos con Live server. Si no sabes qué es, en extensiones, encontrarás un servidor en vivo, instálalo. Y entonces cada vez que hagas algo ahí y solo lo guardes, automáticamente se mostrará en este servidor abierto en vivo. Para que veas que funciona. El CSS está vinculado. Vamos directo a ello y comencemos con HTML y luego continuemos con CSS. Para las imágenes, voy a estar usando esta foto de perfil que descargué en pexels.com Después Proyecto uno, Proyecto dos, tres y cuatro. Por supuesto, ahí lo harás en tus propias fotos de proyecto. Comenzaremos con el texto de la sección principal. Y dentro, vamos a hacer menú de la izquierda. Y a continuación, haremos contenido. Para esta página de bienvenida, estará nuestro nombre. Dejé menú seguirá siendo el mismo. Será el menú. Y por ejemplo, para los proyectos dot HTML, estarán los proyectos, y todavía habrá el menú. En el menú de la izquierda, queremos tener el perfil ahí estará nuestra imagen, que actualmente es foto de perfil en imágenes, y ahí t foto de perfil. Esta Alt se mostrará cuando no se cargue esta imagen. Entonces pondremos ahí H tres con nuestro nombre John Doe, y ahí pondremos una baraja de párrafo, y voy a poner ahí nuestro rol, que es desarrollador front-end Ahora puedes ver que tenemos ahí nuestra imagen, nombre, y el papel. Debajo de esta foto de perfil ahí, agreguemos elementos del menú. Y en los elementos del menú, agregaremos cada elemento por separado. Elemento del menú. Ahora, en este elemento del menú, tendremos el texto nh, y en su interior, habrá una H dos. Empecemos por casa. Entonces necesitaremos Establecer también HRF, donde este enlace nos redirigirá Entonces esta nos redirigirá a la página principal, que es índice dot HTML. Y ahora podemos copiar éste. Y dependiendo de la cantidad de elementos del menú que quieras, vamos a copiarlo. Entonces el primero será en casa. Utilizaré el segundo como proyectos, tercero como habilidades, luego como algunos enlaces, y el último será Contacto. Impresionante. Ahora, vamos a revisar la página. Ahora nos gusta pasar a este div de contenido. Ahí haremos introducción. Entonces hagamos intro como div. Y vamos a poner ahí alguna rúbrica. Habrá Mi nombre es John Doe, y soy un desarrollador front-end Podemos salvar a éste. Y también, nos gustaría destacar este nombre o nuestro nombre. Entonces pongámoslo en el texto de gasto. Y luego en el estilo, vamos a darle estilo a esto un poco diferente al otro texto. Y estaba tan concentrado en explicar los elementos del menú y ítem y así sucesivamente que cometí un error ahí. Este div debería terminar ahí. Y eso significa que cada uno de estos elementos del menú debe tener cada div propio con elemento de menú. Vamos a copiar este. Podemos eliminarlos y pegarlos tantas veces como necesitemos. Proyectos, habilidades, vínculos y contacto. Y dejemos el índice al HML ahora porque vamos a crear los otros HTML más adelante, y básicamente simplemente copiaremos las cosas ahí Ahora nuestra página se ve así. Ahí está la interacción. Ahí están los elementos del menú. Y ahora vamos a codificar el archivo CSS de estilo. Primero, importemos la fuente que te gustaría. Lo puedes encontrar en pons dot google cla . Yo seleccioné éste. Ahí tomarás esta URL de importación, y después de que la tengas, solo irás a Body y en Body, harás familia de fuentes, Montserrat en nuestro caso, y además estableceremos una fuente de respaldo cuando nuestra fuente no sea cargable, y en nuestro caso, es Sans Serif Y luego apuntaremos a todos los elementos con estrella, y restableceremos margen y pedaleando a cero Entonces estableceremos el tamaño de la caja a la caja de borde, y te lo explicaré ahora. En este ejemplo, tenemos las dos cajas. Este es más grande porque se cuenta el ancho, la ropa de cama y el borde. Y la segunda, la caja fronteriza, que es más pequeña, no lo es. Vamos a hacer root ahí y establecer un color principal variable en negro. Y esto significa que en vez de fijar ahora el color a negro. Oh, perdón, negro a elementos individuales, lo pondremos en color principal variable. Y en cualquier momento que quieras cambiar el color de tu página, solo vas a poner ahí en lugar de negro, por ejemplo, rojo. Esto significa que puedes darle estilo a tu página y no necesitas sobrescribir la definición de colores, sino que solo cambiarás esta variable y todo cambiará, cual puede ser útil para las futuras actualizaciones de tu página Vamos a establecer la altura y minhed del cuerpo a 100. Altura del puerto y minhed a también 100 altura de la ventana gráfica porque necesitamos asegurarnos de que será solo una página donde no podremos desplazarnos, ya que esto será todo sobre un contenedor que contendrá todo Lo que vamos a hacer ahora es que volveremos al índice de punto HTML, y luego pondremos este menú de muro en Maine a sección, y le daremos una clase de nombre contenedor principal. Y básicamente, este código de muro, vamos a poner dentro de esta sección de contenedor principal. Ahora diseñemos el contenedor principal. Pongamos fondo a rojo para que podamos ver dónde está. Ahora está por toda nuestra página. Entonces pongámoslo ahí. Altura de 90 viewpodight. Eso significa que tomará solo 90 de cada 100 viewpodeight. Ahora agregaremos también ancho. Vamos a utilizar 60%. Ahora vamos a darle estilo al principal. No es una clase. Estos son solo un texto, tecnología principal, y haremos su flex de pantalla porque con display flex, podemos centrar los elementos vertical y horizontalmente con align items center y con justify content center. Ahora, podemos ver que nuestro contenedor está en el centro. Pondremos su altura principal a 100 vista Bardet, y también pongamos ahí un color de fondo Voy a usar este fondo con gradiente radial. Será círculo, y voy a usar también estos dos colores. Ahora bien, si voy a quitar el fondo de ahí, verás cómo se ve. Es un círculo en el medio y los colores, como lo dije, van del centro a las fronteras. Volvamos al contenedor principal. Ahí pongo la altura, ancho, y también volveré a poner el fondo, copia el que tengo en la sección principal. Guárdala y podrás ver que va de nuevo ahí, pero el color oscuro está terminando ahí y no en los bordes de la propia página. Ahora sólo voy a poner ahí alguna sombra de caja. Si configuro las radios, por ejemplo, diez RAM, puedes hacerte una idea de cómo funcionan estos valores de sombra de caja. También haremos radios fronterizas ahí, radios fronterizas a RAM. Se ve mejor. Ahora fijemos la imagen. Ahí lo haremos con 14 RAM. Nuestra página se verá así, entonces, y seguiremos después de ella con la configuración de encabezamientos y párrafos Empecemos con H uno. Vamos a establecer el color a variable y color principal. Esto es básicamente ahora igual al color negro. Estableceremos el peso de la fuente en 600. Eso significa que nuestra fuente ahora se verá más gruesa. Por supuesto, primero necesito guardarlo así ahora, y estableceremos el tamaño de fuente en tres RAMs Después estableceremos la H dos y párrafo, también a negro, peso de fuente también 500 y encabezando tres, estableceremos altura de fuente en 600, color también a negro y opacidad 2.8 Ahora vamos a establecer el span, y vamos a establecer ahí el tamaño de la fuente a diez RAM. Y eso significa que si vamos a volver a nuestro índice de HTML, ahí, nuestro nombre está en un lapso, y si revisas la página, ya puedes ver que ahí tendremos nuestro nombre resaltado. Ahora continuemos con el menú de la izquierda. Y vamos también en el divisor de comandos ahí, digamos el contenedor principal y principal. Ahí estamos definiendo el contenedor principal y principal, y ahí definiremos el menú de la izquierda. Después volverás al código más tarde, sabrás lo que está pasando. Empecemos por la izquierda Menú. Ahí, también puedo poner el color de fondo al rojo para poder mostrarte. Sí, ahora está ahí, pero lo arreglaremos en un minuto. Pondremos ahí display flex para usar el diseño Flexbox. Usaremos elementos de columna de dirección flexible irán uno debajo del otro. Alinearemos los artículos al centro. Ahora podemos ver que lo centramos. Justificaremos el espacio de contenido de manera uniforme. Ahora, compruébalo, y probablemente tengamos algún problema en nuestro HTML. Vamos a comprobar cómo se ve ahí. La sección está ahí, el contenido está ahí. A lo mejor tenemos más discos de los que deberíamos tener ahí. Así que los elementos del menú de la izquierda están bien. Cada uno de los elementos también, perfil también, y parece que tenemos el Diftex adicional eliminado Deberíamos tener tres ahí debajo de esta cubierta de ancla. Elementos del menú, perfil del menú izquierdo. Bien. Ahora arreglamos el archivo HTML. Volvamos a Dio CSS. Tenemos que comprobarlo ahí. Contenedor principal. Agreguemos display flex también ahí. Y ahora está arreglado. Abriré las herramientas para sordos y te mostraré que puedes ver los espacios entre ellos. Hagamos radios fronterizos ahí, pongámoslo en RAMs para que quede alineado con el contenedor principal Y también, cambiemos el color de fondo. Nuevamente usaré uno de gradiente lineal. Puedes tomar este color de cualquier sitio web al tipo de Google algo así como gradiente lineal, generador de color de fondo. Puedes elegir entre unos bonitos colores. Ahora podemos eliminar este fondo rojo. Ahora vamos a poner en mosaico los elementos de nuestro menú. Usaremos margen a 1.2 RAM y relleno a medio fotograma. Y podemos volver a jugar un poco con él, pero creo que esto encaja bien en esta página. Para Andhrtk, estableceremos la decoración del texto en nan. Eso significa que perderemos los subrayados de los artículos. Y ahora como sabemos que el menú de la izquierda tomará algo así como el 25% del ancho, y el contenido se llevará el resto, podemos usar flex uno y Flex tres. Así que agreguemos Flex one para nuestro menú de la izquierda y Flex tres para nuestro contenido. Ahora te voy a mostrar ejemplo donde pondré este flex, por ejemplo, a uno y uno. Eso significa que se dividirá uniformemente para el menú y para el contenido Y ahora, por ejemplo, ponemos ahí siete se puede ver cuánto de un espacio va a tomar. Entonces ahora vamos con flex one para nuestro menú de la izquierda y Flex tres para contenido, y obtendremos este resultado. Ahora mirando a nuestra página, vamos a desplazarnos un poco hacia arriba y a nuestro lapso, agreguemos un color para nuestro texto resaltado, que actualmente es nuestro nombre. Voy a usar este gradiente lineal, nuevamente, que tomé de la página que generó este color. Usaremos la sombra de texto, webkit clip de fondo para texto Eso significa que vamos a recortar este fondo al elemento text. Y también vamos a usar color transparente ahí, y eso significa que el texto en sí se hará transparente. Entonces básicamente mostrará el fondo degradado lineal ahí, y se verá así. Para que el contenido centre todo, también usaremos display flex. Entonces usaremos dirección flex a columna. Justificaremos el espacio de contenido de manera uniforme. Vamos a guardarlo y comprobarlo. Ahora puedes ver que tenemos nuestra introducción en el medio. Lo que también vamos a hacer ahí es que agregaremos margen a cinco RAM. Ahora se ve aún mejor porque no está encajado justo en este menú. Ahora agreguemos un poco más de estilo a nuestros elementos del menú. Otra vez. Agreguemos el pedaleo a cero y a la RAM Esto es básicamente establecer el pedaleo para la parte superior e inferior e izquierda y derecha. Y también estableceremos el peso de la fuente en 900. Ahora, veamos. Cambiemos la imagen a 12 RAM. Entonces podemos ver que a este div se le nombra perfil. ¿Dónde está la imagen y la H tres y el párrafo? Así que vamos al perfil de punto, luego agreguemos display flex para que podamos usar el centro de líneas de artículos y también flexionar la columna de dirección que hará que nuestro contenido sea así. Ahora para saber dónde estamos actualmente en nuestra página, agreguemos clase activa a la página actual. Entonces en index dot HTML, que es una página de inicio, básicamente, agregaremos class active. En nuestro código VS, solo copiaremos y pegaremos estas pocas veces. Cuántas veces, una, dos, tres, cuatro, así que una, dos, tres, cuatro, eso está bien. Ahora sólo vamos a renombrarlo. Entonces el primero serán los proyectos. Entonces vamos a tener sus habilidades. Entonces tendremos sus enlaces y contacto. Enlaces y Contacto. Iremos al índice de punto HTML, tomaremos esta clase activa, pondremos ahí y la eliminaremos de la sección home. Por lo que este será para el contacto. Lo vamos a poner ahí. Ahora vas a ir a proyectos, así que lo cortaremos de casa y lo pondremos a proyectos. En enlaces, lo cortaremos de enlaces desde casa y lo pondremos a enlaces. Y eso es todo. Tenemos que cambiar los HRF. Entonces en el índice, cambiemos este. El hogar es índice, por supuesto. Proyectos. Habilidades, tintas, contacto. Ahora hagámoslo para otras páginas como esta. Después por enlaces, luego por habilidades, y finalmente para proyectos. Y lo definiremos ahí esta caja sombra 0.0 RAM y 0.1 RM para las radios horizontal y vertical y desenfoque y propagación. Y si vamos a revisar nuestra página, se verá así. Lo que tenemos que hacer tenemos que ir a nuestra clase para el elemento del menú. Y ahí alinean los artículos en el centro y en el centro verticalmente. Para poder hacerlo, necesitamos también en display flex. Ahora puedes ver que nuestro subrayado para la clase activa está ahí Antes de eso, se movió porque no estaba alineado. Y como mostramos flex, y ahora somos capaces de alinear artículos al centro, estará ahí. Y usaremos esto como alguna clase activa para ver dónde estamos actualmente en nuestra página. Ahora vamos a codificar el resto de las páginas HTML. Empecemos con el proyecto. Ahí básicamente usaremos esta clase de contenido para nuestro proyecto. Podemos eliminar este div con Intro y poner ahí este div con encabezado de clase y H un texto con mi proyecto Bajo este rubro, agregaremos el propio proyecto. Y en este proyecto vamos a poner en tarjetas. Entonces haremos un div para tarjetas, y dentro de este dif, pondremos cada carta por separado. Y por cada tarjeta, queremos poner una imagen. Para este, voy a usar Images Project one. También algo de texto fuera. Se puede establecer Proyecto uno. Ahora vamos a cerrar la imagen. Y debajo de esa imagen, pondremos algún encabezamiento y descripción para este proyecto. Entonces vamos a hacer H dos. Podemos hacer Proyecto Itec uno. Por supuesto, si vas a tener nombre para tu proyecto, ponlo ahí, eso sería mejor. Y ahí algún párrafo y algún texto ahí. Puedo dar click ahí para ver a dónde está enviando mi tarjeta, copiarla. Y ahora puedo pegarlo tres veces. Ahora tengo cuatro proyectos. Cambiemos los números muy rápido, dos, tres, cuatro, guárdalo. Vamos a revisar nuestra página. Sí, necesitamos establecer el estilo para las imágenes, por supuesto, y también para las tarjetas. Hagamos una cosa más y pongamos este encabezamiento y párrafo en otro div. Esa será la información de la tarjeta. Así que vamos a cortarlo así. Bien, hagámoslo para el resto de los proyectos. Será en un DIV con tarjeta de clase. Entonces tendrá imagen ahí, y debajo de la imagen, habrá DIV con información de tarjeta, y habrá el encabezado con párrafo. Ahora también, creo que nos faltan los números para los rubros. Sí, proyecto uno, dos, tres y cuatro. Comprobemos también otros DIV. Entonces todos estos proyectos están bajo Tarjetas DIV y todo está bajo el contenido di. Imagen de tarjeta de tarjetas de contenido. Pongamos algo de ancho a diez carneros. Pongamos algunas radios fronterizas al 10%. Ahora básicamente establecemos el ancho de la imagen en diez carneros. Se puede ver cómo redimensionó. Y también colocamos las radios fronterizas en 10%, y se puede ver como redondeaba las esquinas. Ahora definamos la tarjeta. Esta es cada una de las tarjetas que tenemos en esta página. Primero, pongamos ahí algunos antecedentes. Pongamos ahí display flex para que podamos justificar el espacio de contenido entre ellos. Pongamos también unos ocho para nuestras cartas. Hagamos ocho RM, y pongamos un poco de top margino. Así que tenemos algo de espaciado alrededor de nuestras tarjetas de proyecto. Vamos a establecer radios de borde en una RAM, y probablemente si estás usando esto, configúrela ahí para la imagen. Vamos a guardarlo. Lo que nos falta ahora es agregar estilo para el encabezado y el texto del párrafo. Antes de eso, agreguemos algunas sombras de caja a nuestras tarjetas. Ya puedes ver la sombra alrededor de las cartas. Sigamos con el párrafo de la tarjeta y establecemos que hay algo de fusión al principio Tenemos cierto espacio entre el encabezado y el párrafo, y para la información de la tarjeta en sí, vamos a establecer el flex de visualización, que podamos usar la columna de dirección de flexión y justificar el espacio de contenido entre. Lo siento, en realidad, me refiero al espacio alrededor porque entre tenemos este margen. Veamos qué va a pasar, y te advierto que no va a ser agradable. Si cambiamos las dimensiones para la versión responsive móvil. Sí, esto sucede. Lo que vamos a hacer es que haremos la consulta mediática, y vamos a arreglar esto. Vamos a hacerlo. Empecemos por ahí con, quiero decir, diseño de pantalla móvil. Ahora vamos al punto índice HDML y ahí agregaremos el icono del menú Hamburguesa Si no te gusta el ícono de la hamburguesa, puedes poner allí también otros íconos, pero la hamburguesa es probablemente la mejor. Después pondremos este icono de hamburguesa entre estos textos de etiqueta. Y para este texto de etiqueta, agregaremos cuatro menús Toggle y botón ID Hamburger ¿Por qué agregaremos cuatro menús Tuggle? Es porque por encima de esto, agregaremos entrada de tipo checkbox, y tendrá ID del menú Tagle Entonces nuevamente, agregamos estas líneas, input, label, y dentro de la etiqueta, el SVG, que es el icono No podemos verlo en nuestra página porque necesitamos ir a la página principal, y ahí se puede ver que tenemos ahí el botón Hamburguesa, y ahí está la casilla de verificación Quizá primero copiemos esto y editemos a todas las páginas. Está justo debajo del contenedor principal clase sección allí. Entonces para contactar a Project Links, Ninks y habilidades. Y ahora podemos hacer a CSS y finalizar el estilo. Vamos a la pantalla de medios ad tech y ancho máximo de 1,200 píxeles. Y cuando tengamos este ancho máximo, cuando se cumpla esta condición, el código que está en este bloque sucederá. Por ejemplo, ahora, edito color de fondo rojo para todos los elementos, y puedes ver cuando lleguemos justo por debajo de 1,200, cambiará el color a rojo. Primero, tenemos que comenzar con el contenedor principal. Como estaremos en el teléfono móvil, vamos a mejorar el diseño ajustando la altura a 100 wboardhight y En nuestro móvil, porque como tenemos la pantalla más pequeña, probablemente no sea buena idea tener incluso el contenedor principal más pequeño. Eso tal vez hará que nuestro diseño sea difícil de leer. Entonces, para el diseño móvil, vamos a expandir este contenedor principal y convertirlo en un tamaño completo de la pantalla. Usemos display flex para que podamos alinear los elementos para centrar vertical y horizontalmente. Ahora haz que nuestra imagen de perfil sea más pequeña con 24 RAM. También actualicemos los tamaños de fuente de nuestra página. Entonces encabezando uno, dos RAM, encabezando dos, y párrafo solo vamos a establecer el peso de la fuente, que también es el caso ahí. Y para H tres, también peso de fuente a 600 y opacidad. Creo que ni siquiera necesitamos cambiar. También establecemos el foro de tamaño de fuente para nuestro span. En este caso, nuestro nombre. Vamos a establecer la posición en absoluto para nuestro menú de la izquierda. Eso significa que se ha sacado del flexbox de nuestro documento, y podemos establecer la posición superior y derecha, y hagámoslo ahora mismo Vamos a poner la parte superior a cero, y ya puedes ver ahora podemos decir exactamente dónde estará. También pondremos derecho a -60%, y eso significa que esto va a estar básicamente oculto ahora porque va a ir allí Y lo siguiente que vamos a hacer realmente porque si no lo vamos a hacer, todavía lo tendremos ahí es establecer display none, y ahora desapareció totalmente. Pero no te preocupes, lo recuperaremos en la siguiente cuadra. Ahí vamos a decir que para Hamburguesa botón y necesitamos hacer el hash tag ahí porque es un ID, entonces también vamos a establecer la posición absoluta Vamos a definir que lo queremos en la parte superior. Vamos a establecer allí el bloque de visualización. Y eso es porque en un diseño no responsive o en el escritorio, lo tendremos ahí con display none. Entonces botón Hamburguesa, mostrar ninguno. Lo que significa es que si vamos a expandir esta página, se ocultará porque ahora es como display none. Y cuando lo redimensionemos por debajo de los 1,200, se configurará para mostrar el bloque, así lo veremos ahí También puedes ver que si vamos a hacer clic en el icono de Hamburguesa, la casilla de verificación ahí se marca y se desmarca Hagamos que esta navegación funcione. Hagamos el menú, Tuggle, y cuando esté marcado, entonces efectúe este menú de la izquierda Y cuando esto va a suceder, así que cuando se va a comprobar así, vamos a querer poner derecho a cero. Lo estamos cambiando de -60% y tampoco exhibimos ninguno, sino display flex Eso quiere decir que ahora no será nulo. Y se puede ver que está ahí pero lo que también tenemos que hacer porque ahora no podemos dar clic en el botón Hamburguesa, vayamos ahí y fijemos un índice Z más alto que esta navegación Como no fijamos el índice Z para esta navegación, es suficiente cuando hacemos ahí algo como tal vez incluso uno. Pero para el caso de que vamos a actualizar esta página en algún futuro, vamos a establecer ahí al menos diez porque si vamos a establecer, por ejemplo, de alguna manera uno para estos elementos del menú, entonces se volverá a ocultar. Ahora, si vas a dar click y dar click, se mostrará y no se mostrará Lo que también tenemos que hacer es ocultar esta casilla de verificación, porque, claro, ¿por qué la queremos ahí Simplemente hagamos lo mismo que para el botón Hamburguesa. Podemos copiarlo. Pero ahí vamos a hacer el menú alternar, eliminar éste, guardarlo, y ya no está ahí, pero esto sigue funcionando. Ahora podemos ir a la página del proyecto. Y ahí también necesitamos actualizar el estilo. Vamos a cambiar el tamaño de fuente para el párrafo ahí. Voy a usar algo así como 0.6 RAM. Y ahora podemos ir y terminar este contacto y enlaces también, pero eso va a ser bastante rápido porque estos contactos y enlaces también están usando casi el mismo diseño que este. Vamos a Project, copia las tarjetas de ahí. Entonces esta y yo copiaremos las espero, estas tarjetas. Vamos a los enlaces. Ahí en esta clase el contenido, eliminemos esta introducción y pongamos ahí las tarjetas Por ahora pondremos ahí solo dos tarjetas para que podamos eliminarlas no habrá una imagen. Cambiemos también la página. Ya puedes ver que tenemos ahí estas dos tarjetas. Voy a poner ahí, por ejemplo, Github y Linknn vamos a ir a esta página, iconsd.com y Ahí encontraré el Github, por ejemplo, da clic en copiar SWIGE Entonces editaré ahí en la tarjeta y haré lo mismo por Lincnn Podemos agregar ahí para tarjeta display flex y justificar No olvides que esta tarjeta también se está utilizando en proyectos. Ahí lo haces, por ejemplo, algún otro estilismo. También afectará a esta página. Pasemos ahora a skills dot HTML. Podemos cambiarlo ahí. Nuevamente, copia nuestras tarjetas. Entonces, en realidad tomemos solo estas cartas, habilidades, cambiémosla para la intersección. Entonces ahí y no olvides que echamos un div adicional ahí porque lo copié sin él. JavaScript, HTML, CSS o tal vez HTML y CSS como va en la mano y ahí, no sé, DHP, tal vez Pongamos iconos de la página que usé antes en estos párrafos. Podemos describir nuestra experiencia con el idioma. Ahora no afecten a ningún otro icono. Vamos por nuestro SW está ahí para los íconos en el icono de habilidad de clase. Entonces, consigámoslo para el primero, segundo y el tercero en el ícono de habilidad ahí. Y agregaremos algún margen. Hagamos algo como un RM, y pasemos a otra sección. No necesitamos ni siquiera copiar nada. Simplemente eliminemos esta introducción nuevamente ya que copió todo de este HTML de punto índice Ahora hagamos su contacto. Hagamos el rubro, contacto. Y vamos a hacer los párrafos. El primero será el correo electrónico. Prueba de Jon. Ven. Vamos a copiarlo. Ahora vamos a ser teléfono. Añadimos el salto de línea. Así que rompe ahí, y ahí, hagamos ese contacto. Ahí usaremos display flex. Alinear el centro de elementos, justificar el centro de contenido. Añadiremos dirección flex a columna. Y vamos a hacer el centro de alineación de texto. También haremos ahí para contacto H un margen inferior a ellos, vamos a establecer algún margen de párrafo de contacto pero a un RM, podemos usar tamaño de fuente dos RM, pero para contacto, probablemente usaremos algo un valor un poco más alto, tal vez tres RM. Sí, está bien. Para nuestro correo, vamos a contactar, y hagamos una cosa más. Agrega el correo al texto nh ahí y pon su HRF y correo a john dott.com Lo que sucederá es que esta etiqueta para un enlace nos redirigirá a nuestro correo electrónico. Ponlo ahí. Lo tengo, en realidad. Se puede ver ahora cuando vamos a hacer clic en él, se iniciará la aplicación de outlook. Quizá podamos dejar ahí este subrayado, pero vamos a hacer contacto con un color blanco, así que no es azul así Y, bien, tal vez hagámoslo un poco más, gris. Bien, así no. Bien. Y creo que eso será todo. Así que vamos a revisar ahora la página del muro. Estoy atravesando. Puedo ver que contacto y enlaces todavía necesita también la configuración en la versión de escritorio. Vamos a hacerlo. Tomemos primero el contacto, llévelo ahí, vaya por encima de la consulta de medios. En realidad, también es este ícono de habilidad. Podemos cortarlo porque si lo vamos a definir en la versión de escritorio, no necesitamos volver a definirlo. Lo mismo en la pantalla del móvil. Bien. Entonces el contacto, en realidad, eso puede quedarse, creo, y tenemos que establecer los enlaces ahí. Como esto también lo utilizan los proyectos y no queremos cambiarlo, cambiemos rápidamente esta tarjeta de habilidades. Iremos a VSCode, cambiaremos esta tarjeta a enlace de tarjeta Guárdalo. Ya puedes ver cómo ha cambiado, pero es algo que no queremos para nuestro diseño responsive móvil. Tomemos este enlace de tarjeta. Vamos al archivo CSS. Pongamos ahí nuestra nueva clase. Entonces podemos simplemente copiar el valor de esta tarjeta, ponerlo ahí, y ahí tenemos que cambiarlo al centro. Eso significa que ahora estará centrado, y si cambiaremos al diseño responsive móvil, seguirá ahí así. Pero si cambiamos los proyectos, estos no se verán afectados ya que es de clase diferente, y eso será todo para nuestra página. 6. Proyecto 4: portafolio responsivo morado: Hola a todos. En este tutorial, te explicaré cómo crear una página como esta. Será receptivo. Eso significa que para la versión de escritorio y móvil, tendrá una interfaz de usuario o diseño diferente. Trato de cubrir cada paso complicado, asegurándome de que entiendas lo que está pasando, y sí, disfruta de la sesión, y créeme, puedes hacerlo fácilmente. Primero en nuestro código VS, vamos a crear una carpeta con imágenes, poner ahí suma. Pongo ahí por ahora foto de perfil y seis fotos del proyecto. Después crearemos HTML de punto índice y estilo Dot CSS file, y en index dot HTML, podremos comenzar con signo de exclamación, crear una plantilla, vincular el estilo Dot CSS file e iniciar nuestra página con el servidor en vivo Si no tienes esta extensión de servidor en vivo , solo tienes que ir allí. Escribe el servidor en vivo. Y descarga este con 44 millones de descargas. En el texto de encabezado, pondremos nuestra barra de navegación, y nuestra barra de navegación estará en texto NAF Y ahí lo haremos también en clase Navbar. Primero, en nuestra navegación estará nuestro nombre, y podemos nombrarlo como logotipo de Clase. Y además, lo mantendremos en texto Anchor y pondremos ahí el HRF de index dot HTML Entonces, cuando hagamos clic en nuestro logotipo, nos redirigirá a la página principal al índice principal punto HTML. Después continuaremos con la navegación Burger para el diseño del móvil o para la pantalla del móvil. Estamos usando ahí la entrada de tipo checkbox que está atada con esta etiqueta, y esa es la etiqueta para el botón Hamburguesa El icono de esta hamburguesa está adentro, y estamos usando ahí cuatro, lo que significa que está cableada con esta casilla de verificación de entrada Cuando hagamos clic en este icono de hamburguesa, se marcará esta casilla Y en CSS, agregaremos su función de que cuando se marque esta casilla de verificación, hará algo para nuestra siguiente etiqueta y esa es lista anidada, y que contendrá los elementos del menú Añadiremos una lista ordenada con enlaces de clase. Y en el interior, pondremos tres elementos de lista, y dentro de estos elementos de lista, también habrá la etiqueta de anclaje, y tendré el Acerca de entonces portafolio, y luego sección de contacto Nada interesante que ver en nuestra página todavía. Ahí estará nuestra primera sección y eso será con la bienvenida de clase, y tendremos su introducción de nosotros mismos. En esta sección, agregaremos div con contenido de bienvenida de clase. Y en este contenido bienvenido, lo dividiremos en la bienvenida izquierda y bienvenida derecha. En la bienvenida a la izquierda, agregaremos la imagen de perfil. Y en bienvenida derecha, agregaremos la etiqueta H one, donde pondremos Soy Jon Do y el John Doe, pondremos dentro del texto de Spen porque resaltaremos nuestro nombre Bajo nuestro nombre, pondremos un texto de párrafo, y dentro, pondremos lo que hagamos. Voy a tener su diseñador web profesional en Span text, y luego podremos hacer Bend developer and consultant Podemos actualizar esto más tarde. Entonces voy a poner estos dos divisores. Ahí está el primero y está el segundo. Y les voy a agregar divisor de clase uno y divisor dos porque un divisor estará en otra posición que la segunda. Y dentro de estos divisores, como viste en la intro, ya que habrá algunas líneas sobre nuestro portafolio, podemos poner cualquier texto que nos guste Tengo el diseñador de UIux JavaScript, y esto va a crear algún elemento interesante que podemos agregar en nuestra página para que no se sienta tan vacía Ahora pasemos a la siguiente sección. Esto será sobre sección y lo pondremos ahí a la clase sobre. interior, pondremos el div con clase sobre el contenido, y eso contendrá sobre la izquierda y sobre la derecha dis. Dentro sobre div izquierdo, pondremos Encabezado tres con información sobre mí con algún texto LorimePSum generado Ahora en aproximadamente a la derecha, agregaremos div con class about item, y dentro de este about item, agregaremos about text. Y en este div, estamos poniendo alguna información sobre nosotros. Ahí voy a poner texto grande y pequeño. En grande, pondré algún número que se resaltará, por ejemplo, hay cinco más, y en el más pequeño, pondré años de experiencia. Toma el muro sobre el artículo y cópialo tantas veces como necesites. Voy a agregar allí dos más, y en uno, tendré 100 proyectos más entregados, y en el segundo, tendré algo sobre habilidades, HDMO CSS, JavaScript, BHB Python Java Ahora es el momento de agregar la siguiente sección con clase mi trabajo, donde tendremos nuestro portafolio, nuestro trabajo que hicimos, algunos de nuestros proyectos, etcétera En el interior, pondremos dos diffs. El primero será con clase mi título de trabajo, y el segundo será con cartera de clases, y ahí tendremos nuestros proyectos. En mi título de obra, pondremos el rubro dos tech con mi cartera, y esta cartera la pondremos en el impuesto al gasto porque vamos a destacar esta palabra. Ahora vamos a div con el ítem de cartera de clase y esta imagen. Teóricamente, podemos hacerlo también solo con la imagen, pero si mantenemos este div más adelante, podemos agregar alguna descripción a nuestro proyecto, algo así Por ahora, voy a mantener ahí sólo la imagen. A la imagen, agregaremos una fuente que está en nuestra carpeta de imágenes ahí. Y viejo, vamos a llenar lo que debería mostrar si esta imagen no se carga. Puede ser por múltiples razones cuando la imagen simplemente no se encuentra, o segundo, alguien la abre en navegador donde la imagen no está abierta, soportada o cargada o cargable Por lo que este texto mostrará, en nuestro caso, la imagen del proyecto. Ahora tomaremos este ítem de portafolio DIVID, y lo copiaremos tantas veces como queramos editar En mi caso, tengo seis proyectos, así que ahora lo voy a copiar cinco veces. No lo conté, así que veamos Proyecto uno, dos, tres, cuatro, cinco, seis, y tengo uno adicional. Entonces estará ahí, elimínelo. Impresionante. En el archivo CSS, vamos a definir el ancho y alto de estas imágenes. Por supuesto. Nuestra última sección será con contacto de clase. Añadiremos div con contenido de contacto de clase. Habrá en un DIV y una forma. El DIF estará con título de sección de clase, y dentro estará encabezando dos con contactame, y me pondremos palabra en el Spensex como lo destacaremos Y luego agregaremos un formulario con formulario de contacto, y ahí guardaremos el formulario de contacto. Una cosa más haremos antes de continuar, usamos el título de la sección de clase. Y esto debería ser lo mismo que este título de sección, que se llama mi título de obra. Actualicemos esta clase en este DIF de mi título de trabajo a título de sección. Y eso significa que cuando vamos a definir esto o estilo esto en CSS, lo vamos a estilizar para estos dos títulos de sección a la vez. Y en este formulario de contacto, agregaremos cuatro DIFS El primero será con entrada de contacto de clase. Y habrá entrada de tipo texto y de tipo correo electrónico. También pondremos ahí este marcador de posición que será placeholdering el propósito de la entrada El primero será nombre y luego será correo electrónico, y también pondremos ahí requerido, solo lo suficiente para escribir ahí esta palabra. Y eso significará que sin esta entrada, nadie puede enviarnos el correo electrónico. El segundo div tendrá la misma entrada de contacto de clase y nuevamente será de tipo texto, y tendrá el marcador de posición de asunto Este campo no será requerido entonces tendremos un tercer div que también tendrá esta clase de entrada de contacto, y que contendrá un área de texto. En esta área de texto, mantendremos el nombre y el ID vacíos. Estableceremos 15 columnas y ocho filas en nuestra página se verán así. Y marcador de posición solo habrá algún mensaje. Y el último div será de submit button class, y tendremos la entrada de tipo submit y value submit. Ahora si vamos a revisar nuestra página, podemos ver ahí el formulario de contacto también. Y lo último que realmente agregaremos a este HCML por ahora será el pie de página ahí, y en este pie de página, pondremos ancho de párrafo hecho por nosotros. Y etiqueta de anclaje con funcionalidad scroll to top, vamos a poner dentro hacia arriba, y eso será todo para nuestro pie de página. Ahora también podemos eliminar algunos espaciamientos innecesarios ahí que estoy poniendo ahí para tener el código un poco mejor legible como lo estoy explicando Pero claro, no debería haber ningún espaciamiento. Solo lo estoy guardando ahí por la legibilidad del código para ti y para que yo te explique mejor Debería ser para nuestra parte HTML, y ahora podemos ir a la parte CSS. Comenzarás importando la fuente. Luego, para todos los elementos, restableceremos el margen y el pedaleo a cero, y agregaremos el tamaño de la caja a la caja del borde Eso significa que incluirá también el pedaleo y el borde a nuestros elementos cuando estemos estableciendo el ancho y la altura Para body, estableceremos el color de fondo y también la fuente a esta la importamos y la fuente de respaldo en caso de que esta no sea cargable a Sensi Veo que ahí tenemos error. Deberían ser imágenes. Imagen. Ahora podemos ver también la imagen en nuestra página web. En el contenido de bienvenida, usaremos cuadrícula de visualización para usar el diseño de la cuadrícula, y estableceremos las columnas de la plantilla de cuadrícula para que repitan dos y un asunto. Eso significa que usaremos un diseño de cuadrícula con dos columnas de igual ancho, y cada columna tomará la misma fracción del espacio disponible. Además, agregaremos la altura determinada de 60 altura de ventana gráfica, y podremos ver si vamos a agregar color de fondo a, por ejemplo, no sé, azul, podemos ver las 60 H ahí Ahora bien, si vamos a establecer ahí, por ejemplo, 90, se puede ver cómo aumenta, y casi toma la altura completa de la página. Para el propósito de estilismo de nuestra sección de bienvenida, podemos mantener este color de fondo. Blanco por ahora, para la sección de bienvenida a la izquierda, estableceremos display a flags para que podamos alinear los elementos vertical y horizontalmente con align items center y justificar el centro de contenido. Y también para la imagen de bienvenida a la izquierda, estableceremos el ancho al 50% y la altura a auto. Ahora vamos a hacer estilo para el derecho de bienvenida, y comenzaremos con la primera bienvenida a derecha y ahí volveremos a configurar display a flags y en layout flexbox, justificaremos el contenido al centro Pero queremos alinear los elementos al centro. Allí usaremos el atributo start, y eso significa que nuestra tecnología estará al inicio del dipth Utilizaremos también la columna de dirección flex. Eso quiere decir que nuestro H dos y el párrafo estarán uno debajo del otro. Vamos a establecer algún tamaño de fuente allí. Vamos a establecer el peso de la fuente. Y posición relativa, es decir por los divisores que editamos, el elemento style, digamos, y haremos el styling para ello después de esta sección de bienvenida, y además estableceremos con 100% Y luego para encabezado uno y párrafo, vamos a establecer el tamaño de fuente dos formulario para tener nuestro nombre en una fuente más grande, y para el párrafo, solo vamos a agregar algo de margen y la altura de línea. Eso significa el espaciado entre líneas si esto va a llegar en la línea de abajo o en la segunda línea. Ahora vamos a nuestra bienvenida a la izquierda. Y en bienvenida a la izquierda, vamos a justificar el contenido para terminar. Y haremos esto porque entonces nuestra imagen estará más cerca de nuestro texto de introducción en nuestro HTML, podemos ir allí, y agregaremos una etiqueta break. Eso quiere decir que esto va a estar en otra línea. Y en vez de final, podemos agregar símbolo. Ahora, lo guardaremos y podremos comprobar cómo se verá esto. Toma esta etiqueta de descanso y ponla ahí. Y esto podría ser aún mejor. Vamos a estos divisores ahora mismo. Para los divisores, pondremos su fondo de gradiente lineal Puedes tomar este de la descripción, luego color negro. Eso significa el color del texto, luego la altura del divisor que serán cuatro RAM, tamaño de fuente en el texto del divisor, que serán dos RM. Y entonces como esta posición absoluta, pondremos el valor superior e izquierdo donde debería estar. Y tenemos su posición relativa a nuestra derecha de bienvenida, por lo que estará contando los atributos superior e izquierdo de ese elemento. También establecemos ancho 100%, por lo que toma el ancho completo de la página. Entonces usaremos display flex para que podamos justificar y alinear elementos vertical y horizontalmente. Usaremos desbordamiento oculto, por lo que no va a suceder en el diseño responsive o en algunos casos no deseados que el texto salga de este divisor, y también usaremos flex wrap. Sin envoltorio. Eso significa que si esto se recita, no se envolverá Y la parte principal probablemente es transformar, y vamos a utilizar el sesgo ahí, y vamos a utilizar allí dos grados. Eso quiere decir que bajará así. Ahora sólo vamos a copiar esta, ponerla ahí. Por supuesto, también podemos guardar algún código tal vez haciendo ahí algún divisor de clases, poniéndolo ahí. Pero entonces nuevamente necesitaremos hacer algún divisor uno o divisor dos clases porque necesitamos usar ahí el otro sesgo, luego los dos grados Y será algo así como menos dos. Echemos un vistazo a nuestra página cómo va a funcionar esto. No lo hará porque necesitamos cambiar esta clase a divisor dos, y veamos ahora. Se puede ver cómo se ve. También necesitamos un índice Z porque esto debería estar detrás de la imagen. Vaya a nuestra imagen izquierda y ponga el índice Z uno. Esto hará que nuestra imagen esté encima de estas cosas. Ahora podemos eliminar el color de fondo blanco de nuestro contenido de bienvenida. Y en su lugar estableceremos el color en blanco, y eso aplicará este color blanco al texto que está en nuestro contenido de bienvenida. Ahora vamos a darle estilo a la barra de navegación. Haremos el menú de Navbar tagle y el botón Navbar Hamburger y configuraremos allí mostrar dos ninguno porque queremos que esto sea visible en la versión de diseño de escritorio, pero lo haremos visible más adelante en Ahora vamos a establecer el encabezado a la altura cinco RAM y para mostrar la bandera para que podamos alinear los elementos al centro. También aumentaremos el tamaño de la fuente a RAM. Vamos a establecer ahí fondo. Volveré a usar este ingrediente lineal y estableceré el peso de la fuente en 600. Voy a continuar con clase Navbar. Ahí voy a definir ancho al 100%. Y nuevamente, usaré display flex, así puedo hacer espacio de contenido justificado alrededor y alinear elementos al centro. Eso significa que nuestro contenido, quiero decir, estos dos elementos en él tendrán espacio a su alrededor. Entonces está el primer espacio, está el segundo, y está el tercero. Si quieres que esto sea al inicio y al final de la página, simplemente harás espacio entre. Eso significa que estará en la esquina de la página y tendrá un espacio entre ellos. Ahora para el logo y el texto de anclaje, que son los elementos de nuestro menú, estableceremos la decoración del texto a monja y el color al blanco Y para los enlaces, pondremos el estilo list a none, definiremos su layout flexbox con display flex, y además pondremos un hueco de tres RAM Eso significa que nuestro artículo tendrá estos espacios entre ellos, y se verá así Para nuestra sección acerca, definiremos el color de fondo rojo. Entonces, cuando lo vamos a estar estilizando, todos sabemos dónde está exactamente. Estableceremos el ancho en 90%, y estableceremos el margen en cero para la parte superior e inferior y auto para izquierda y derecha. Y también por cierto, con este color al blanco. Por lo que nuestro texto en esta sección será de color blanco. Pero ahora, si vas a echar un vistazo a la página, puedes ver que está centrada debido a este auto de margen. Y también nuestra sección es roja, así que podemos ver exactamente si está bien centrada, y así sucesivamente y así sucesivamente. Ahora continuaremos con acerca del contenido, y usaremos el diseño de cuadrícula con cuadrícula de visualización y estableceremos la plantilla de cuadrícula en dos columnas y una fracción. Eso significa que estas dos columnas lo tomarán como peso completo para llenar el espacio. Además, les agregaremos algo de ropa de cama. Ahora vamos a revisar la página, puede ver que hay una primera columna con el texto y segunda columna con las escalas que tenemos ahí ahora para aproximadamente a la izquierda, ahí vamos a establecer el ancho de 70%. Estableceremos el tamaño de fuente en 1.4 RAM y volveremos a usar el margen a cero para arriba e abajo y auto para izquierda y derecha. Ahora puedes ver como ahí está centrado el lado izquierdo. Para verlo mejor, también podemos adare color de fondo blanco o tenemos texto en blanco, así que color de fondo amarillo Y se puede ver como ha estado ahí centrado en la columna de la izquierda. También agregaremos ahí para el rubro tres o para este texto. El tamaño de fuente para 2.4 y el margen en la parte inferior a un RM, por lo que el texto del párrafo tiene algún espaciado entre él. Ahora quitemos los colores brillantes para ver el estilismo. Así. Y continuaremos con aproximadamente justo donde volveremos a usar la cuadrícula de visualización para el diseño de la cuadrícula, y volveremos a usar la columna de cuadrícula y placa a dos columnas con una fracción, así que se está llenando. Y brecha de cuadrícula a dos RAMs, eso significa que por cada artículo sobre el que tendremos ahí, habrá una brecha de cuadrícula entre ellos de dos RAMs Se verá así, y ahora se puede ver que realmente nos faltan ahí las tarjetas en sí, y las vamos a darle estilo ahora. Esto es lo que necesitamos para el artículo sobre. Empecemos con sobre el artículo en sí. Vamos a utilizar este color de fondo. Lo puedes encontrar en descripción. Entonces usaremos el sombreado de cajas para cada uno de nuestros artículos sobre, y también usaremos radios fronterizos para RAM, por lo que nuestras tarjetas están un poco redondeadas Después vamos a darle estilo al texto A. Utilizaremos el pedaleo de dos RAM, y usaremos display flex debido a la dirección flex a columna, y eso significará que estos dos elementos están uno debajo del otro También puedes ver cómo colocamos la ropa de cama ahí. Eso significa que este texto, ya puedes ver que el pedaleo está configurado en T RM Está un poco más lejos de las esquinas. Y luego le damos estilo al texto grande y pequeño. Para el texto grande, usamos el tamaño de fuente de T RAM y aumentamos el peso de la fuente, y para el texto pequeño, lo transformamos a mayúsculas, usamos ahí algún relleno a la izquierda Entonces este espacio ahí, continuemos ahora con la cartera o mi sección de trabajo. Primero, necesitaremos establecer el peso de la imagen porque de lo contrario, no veremos nuestra sección porque la imagen tomará el espacio de pared de nuestro visor. Lo pondremos en 10%. Posteriormente lo cambiaremos a 100. Altura hasta 18 RAMs y ajuste de objetos para cubrir. Eso significa que obtendremos lo mejor de nuestra imagen en buena calidad porque no se encogerá y así sucesivamente Esto podemos consultar nuestra página y puedes ver nuestras imágenes ahí. Ahora vamos a definir la sección Mb o la propia clase. Vamos a establecer ahí el ancho al 80% y otra vez, la cosa del margen, así se centra. Y nuevamente, para ver mejor dónde está exactamente nuestra sección, podemos establecer el color de fondo en blanco, y podemos verlo centrado ahí. Y ahora podemos continuar podemos eliminar el color de fondo cuando vimos cómo se centra nuestra sección, y vamos a darle estilo al título de la sección y al portafolio. El título de la sección, pongamos el tamaño de fuente de 1.6 RAM y el color a blanco. Y para el portafolio, usaremos el diseño de cuadrícula, y estableceremos la plantilla de cuadrícula en tres columnas, y nuevamente, una fracción, por lo que tomará todo el ancho de la columna. Volver a la imagen y ponerla realmente a ese 100%, y veremos que está tomando todo el ancho y está estilizado así También tenemos la brecha de calificaciones de dos RAMs. Eso significa el espaciado o la brecha entre los proyectos. Luego usamos margen superior a tres RAMs. Eso significa que ahí tenemos cierto margen de nuestro título. Y para cada artículo individual, establecemos body reduce a dos RAMs Le colocamos algunas sombras de caja, y también configuramos desbordamiento oculto Eso significa que la imagen no saldrá de nuestra tarjeta de proyecto o del artículo sobre. Lo que también vamos a hacer ahora es que para tenerlo alineado en esta línea ahí, eliminaremos el margen de esta información sobre mí. Vamos a desplazarnos un poco hacia arriba, y ahí en aproximadamente leve eliminaremos este margen. Ahora puedes ver que lo tenemos alineado y se ve mejor. Y parece que solo nos falta la sección de contacto y el estilo de pie de página. Ahora vamos al formulario de contacto. En index dot HTML para nuestra área de texto, eliminaremos estas columnas a 15 porque estableceremos las nuestras propias con ya no necesitamos el dis, así que mantengamos en nuestro formulario las entradas y esta clase de botón de enviar, lo pondremos ahí a la última entrada de tipo submit. Entonces nuestra forma ahora se verá así. Para la primera clase de contacto, estableceremos cuál al 80% y marcaremos cuatro RAMs a arriba e abajo, y auto a izquierda y derecha Por lo que nuestra sección estará centrada. Además, usarás el centro de alineación de texto, por lo que nuestro título estará en el medio. También podemos agregar el color de fondo rojo, y podemos consultar nuestra página. Para que lo veas centrado. El rubro está en el medio, y ahora continuaremos con estos insumos. El formulario de contacto en sí, usaremos diseño flexbox, display flex, y estableceremos dirección flex a columna, por lo que todas las entradas estarán una debajo de la otra Estableceremos margen para este formulario de contacto a una RAM en la parte superior e inferior y haremos a izquierda y derecha. También estableceremos el ancho en 50%, así que queremos tomar el peso completo de nuestra sección de contacto, y también usaremos un hueco de una RAM, por lo que las entradas en tendrán algún espaciado alrededor de ellas. Ahora si vamos a revisar la página, puedes ver cómo se ve. Ahí está la brecha. Ahí está el conjunto de 50% de ancho. Y claro, no se vería así si no estableciéramos también para esta entrada y área de texto, el ancho 100%, no nos deshicimos de los bordes. Luego establecemos el color de fondo a un gris un poco diferente que estamos usando también establecemos algunas sombras de cajas, ropa de cama alrededor de las entradas, radio del borde, así que lo tenemos redondeado un poco, luego el color blanco y redimensionamos a ninguno Eso significa que no podemos cambiar el tamaño de esta ventana para el mensaje. Una última cosa que agregaremos para nuestra sección de contacto es el estilo del botón enviar. Ahora se ve así. Nosotros ahí, y bajo radio de borde, establecemos ancho y alto a 12 y tres RMS. Aumentamos el tamaño de la fuente. Volvemos a establecer, el color de fondo al gradiente lineal que estamos usando en esta cartera. Será en la descripción, y configuramos ahí la pantalla para flexionar porque centramos vertical y horizontalmente el texto de envío. También cambiamos su tamaño de fuente y actualizamos al color a un gris ligeramente diferente. Ahora podemos eliminar el fondo de nuestra sección porque ya sabemos cómo lo diseñamos, y se verá así Ahora nos falta el pie de página para el diseño de escritorio, y luego pasaremos al diseño responsive móvil. Para la sección de pie de página, vamos a establecer el tamaño de fuente a 1.2 RAM altura del pie de página en sí, vamos a establecer en cuatro M. Vamos a utilizar flexbox layout y display flex podemos justificar contenido al espacio entre y con este margen para el 30% en el lado izquierdo y derecho, significa que tenemos ahí el pie de página y tenemos el espacio entre, pero también con el margen de 30% a la izquierda y a la derecha. Lo tenemos ahí en el medio, pero aún manteniendo el espacio entre ellos. También, por supuesto, estamos alineando artículos al centro. Eso quiere decir que lo estamos centrando verticalmente. Entonces estamos usando el color gris. Y para el pie de página y la corteza, estamos usando el color blanco y configurando la decoración del texto también. Ninguno. Por lo que no hay subrayado debajo de él. Y ahora tendremos que ir al diseño móvil. Para Max ingenio de 800 píxeles, definiremos el resto del diseño para las pantallas móviles. Empecemos por definir los enlaces Botón Hamburguesa y la casilla de verificación Con este botón Hamburguesa, nuevamente lo mostraremos para bloquear, establecer su color en blanco, y también pondremos el cursor en puntero No necesitamos cursor a puntero porque en el teléfono móvil, no hay cursor, pero quizá lo usaremos en computadora a veces, podemos configurarlo ahí. Entonces llegaré a este bloque, pero primero necesitamos definir estos vínculos y lo que ahí está pasando. Estamos estableciendo posición a Absoluto porque no queremos que estos enlaces estén actualmente en nuestra pantalla, ya que ahí está el botón Hamburguesa principalmente Establecemos left a -100%, y eso significa que actualmente están en algún lugar detrás de mi código VS No realmente, sino teóricamente. También establecemos la parte superior a 80 píxeles. Eso significa que existe el espacio para la barra de navegación. Configuramos el color de fondo en negro, dirección flexible a columna, por lo que nuestros elementos del menú están uno debajo del otro. Establecemos el ancho al 100%, por lo que está tomando el fluido, la ropa de cama a dos RAM. Así que ahora puedes ver el espaciado alrededor de los elementos del menú. Transición 0.3 segundos. Eso significa que se desliza así. Después altura 100% altura de la vista. Si nos desplazaremos hacia abajo, puedes ver ahora ahí veo mis otras secciones e índice a diez porque queremos que este sea el índice más alto. Si tenemos ahí algún elemento, por ejemplo, esta imagen con ese índice 11, entonces esta navegación o la barra de nag estarán detrás de ella Eso significa que por ahora tenemos que establecerlo como el índice más alto en nuestro CSS o la página del muro. Y lo que está pasando ahí con la casilla marcada. Eso significa que si se comprueba este tagle de menú, entonces aplica esto para estos enlaces Y lo que estoy aplicando ahí queda cero. Eso quiere decir que estamos cambiando esta izquierda -100% a la izquierda cero. Y con esta transición 0.3 segundos, se desliza así. Y eso es para la barra de navegación. Sigamos y hagamos el estilo para las otras secciones. Para la parte divisora, cambiaremos la parte superior a 80% para el primer divisor. Y el segundo, no vamos a hacer nada. Para ambos, cambiaremos el tamaño del teléfono a 1.8 Ram. Y también cambiaremos los grados del sesgo a nueve y menos ocho También puedes jugar con él y ver cuál se ajusta a ti y a tu foto de perfil o imagen. Y ahora para móvil sobre sección, ahí estableceremos el ancho de esta sección al 100%, y la mayor magia sucederá ahí donde vamos a poner en lugar de tres columnas, establecer solo una columna, y también ropa de cama, restablecerla para arriba e abajo, y para izquierda y derecha, pondremos tres RAMs Para aproximadamente a la izquierda, que es esta sección de texto, estableceremos con 100%. Disminuiremos un poco el tamaño de la fuente a 1.2 carneros. Y pondremos ahí algún margen al fondo de tres carneros Y para la derecha anterior, básicamente para estas tarjetas, también estableceremos columnas de plantilla de cuadrícula en una sola columna, y vamos a usar ahí de nuevo, algún margen a fondo. Volvamos a hacer tres RMS. Ahora pasemos a la cartera o a mi sección de trabajo. Hay realmente, muy simple. Simplemente cambiaremos nuevo esta columna de plantilla de cuadrícula a una columna, y eso hará todo el trabajo por nosotros. Lo último que dejó ahí es el contacto y el pie de página. Para el formulario de contacto, estableceremos el ancho 90%, y eso es todo. Para footer, cambiaremos el tamaño de fuente a una RAM y también el margen de izquierda y derecha a solo 20%. Y eso será todo. Ahí tenemos nuestra página en versión de escritorio. Y ahí en una versión móvil, Muchas gracias por ver. Espero que hayas tenido una gran sesión y nos veamos en la siguiente. Salud.