Transcripciones
1. Introducción: Hola y bienvenidos a
nuestro curso práctico Construye un sitio web
receptivo multipágina con HTML, CSS y Javascript. Quiero agradecerles por elegir inscribirse
en este curso. Si te entusiasma
sumergirte directamente en la creación de un sitio web de varias páginas
del mundo real, has venido al
lugar correcto a lo largo de este curso. Seré tu guía mientras
construimos un
sitio web completo, moderno y adaptable desde cero usando HTML,
CSS y Javascript. Aquí no encontrarás ninguna discusión
teórica larga. En su lugar, recibirás instrucciones
prácticas
paso para equiparte con las habilidades necesarias para
desarrollar sitios web impresionantes. En este video introductorio, proporcionaré una visión general de nuestro proyecto y detallaré lo que
vamos a lograr. Nuestro proyecto está diseñado para ser un sitio web de varias páginas y se
adaptará a diferentes
tamaños de pantalla y dispositivos. Comenzaremos creando un encabezado de sitio web
seguido de la navegación, que puede abrir haciendo clic el icono de menú en la esquina superior
derecha de la página. La navegación
consta de dos partes. Tenemos la imagen en
el lado izquierdo con
unos bonitos y geniales
efectos de hover para el lado derecho También puedes ver aquí los elementos de
navegación con efectos de libración. A continuación, pasaremos
a la sección Acerca de, que luego será seguida
por la sección de libros. futuro,
desarrollaremos una sección testimonial, y luego puedes encontrar aquí un pie de página que incluye
la sección de contacto Al hacer clic en el enlace
back to top, navegaremos hasta el borde
superior del sitio web. Como se mencionó anteriormente, nuestro
sitio web es de varias páginas y puede navegar
a diferentes páginas haciendo clic en los enlaces
en la navegación. Descubrirás sobre
nosotros Página donde tenemos las características de
encabezado también
sección de equipo seguido por el pie de página. A continuación podemos navegar por
la sección de libros, donde se pueden encontrar
los diferentes libros con nombres y autores. La siguiente página va a
ser sobre los testimonios. Puedes encontrar aquí el deslizador
testimonial. Al hacer clic en las flechas, puedes reproducir el control deslizante. También abajo,
puedes encontrar los puntos. Y también puedes jugar el control deslizante
usando esos puntos. Bien, así que una vez que hagamos clic el enlace de inicio en la navegación, entonces aparecerá el
cargador del sitio web. Después de un par de segundos, la página web se carga Cada vez que
recargues la página, entonces el cargador se reproducirá y se mostrará
la página Tenga la seguridad de que nuestro sitio web responde a
varios tamaños de pantalla. Si inspecciona la página, cambia al
modo de respuesta y la
previsualiza en diferentes
tamaños de pantalla y dispositivos, encontrarás que
es adaptable. Bien, me gustaría señalar que este proyecto está diseñado
para pantallas extra grandes con una resolución de 1920 píxeles con y
1080 píxeles de altura. Si estás usando una pantalla
más pequeña. Recomiendo cambiar al modo
responsivo durante las conferencias y especificar la altura interna en consecuencia. Esto asegurará que
los proyectos sean lo mejor posible en pantallas
más pequeñas hasta que lo
hagamos totalmente receptivo. Bien, espero que
disfrutes trabajando en este proyecto
tanto como yo sin más
preámbulos. Empecemos.
2. Configuración: Hola y bienvenidos al curso. Estamos encantados de
tenerte aquí, y estamos seguros de que
encontrarás este curso agradable. Antes de comenzar a
sumergirnos en nuestro proyecto, primero
preparemos nuestro entorno
de trabajo. Si ya estás configurado
y listo para escribir código, puedes saltarte este video y
saltar directamente al proyecto. No obstante, si
aún no estás preparado , eso está perfectamente bien. Te guiaremos
a través de la configuración algunas herramientas esenciales a
lo largo de este curso. Hay dos
herramientas principales que necesitarás. Un navegador web moderno
y un editor de texto. Nuestro navegador web,
estaré usando Google Chrome, pero también recomiendo
Mozilla, Firefox. Probablemente ya
tengas estos navegadores, pero repasemos rápidamente
cómo descargarlos, si acaso para
obtener Google Chrome, simplemente visita esta URL y
descarga el navegador. El proceso de instalación
es sencillo, por lo que no
dedicaremos mucho tiempo a ello. Para Mozilla, Firefox,
puedes obtenerlo desde esta URL. Ambos enlaces serán incluidos con esta conferencia para
su conveniencia. Bien, ahora
hablemos del editor de texto. Utilizaremos el código de
Visual Studio que es uno de los mejores
editores de texto disponibles en la actualidad. Sin embargo, puedes usar tu
editor de texto preferido si tienes uno. Aún depende totalmente de ti. Te recomiendo probar el código
de
Visual Studio para descargar el código de
Visual Studio, visitar este sitio web y seleccionar la versión para
tu sistema operativo, Windows, Mac o Linux. El proceso de instalación para el código de
Visual Studio
también es sencillo. No deberías
encontrar ningún problema. Una vez que hayas instalado
ambas herramientas, estarás listo Para
comenzar con el curso, vamos a sumergirnos directamente en.
3. Da tus primeros pasos: Bien, finalmente estamos listos para comenzar a
construir nuestro proyecto. En esta conferencia,
voy a preparar nuestro ambiente de trabajo y luego comenzaremos a escribir el código. He creado una nueva carpeta en el escritorio llamada web
responsive, en la que tengo una
carpeta para las imágenes. Esta carpeta incluye
todas las imágenes que necesitamos para nuestro proyecto. Voy a abrir esta
carpeta en código VS. Lo primero
que tenemos que hacer es crear nuestras carpetas de
trabajo, necesitamos tres diferentes, en realidad, no carpetas sino archivos. Necesitamos tres expedientes. El primero va
a ser el índice HTML. Entonces tendremos estilo CSS. Por último, voy
a crear guiones. Ahora voy a abrir el archivo Html
indexado, y tenemos que crear la estructura
básica H tmall Para eso, voy a usar met. Tenemos que colocar aquí un signo de exclamación y
ese hit top o Enter Aquí vamos. Tenemos aquí
el documento básico de HTMel Me refiero a los elementos básicos de HTMel. Lo primero
que voy a hacer es cambiar el título. Vamos aquí, sitio web receptivo. Después tenemos que vincular los archivos
CSS y Javascript. Voy a abrir enlace Tac. Y tenemos que especificar
aquí la ruta del archivo. En este caso, tenemos que
especificar aquí el nombre
del archivo porque no
tenemos aquí ninguna otra carpeta. Necesitamos tu estilo CSS. Entonces voy a enlazar
el archivo Javascript, Tenemos que abrir script. Entonces en el atributo source, voy a especificar el archivo, me refiero al nombre del
archivo Java que necesitamos aquí, script JS. ¿Bien? Una vez conectados los archivos CSS y
Javesby, ahora voy a abrir el
proyecto en el navegador Para eso, voy
a usar uno de los paquetes llamados Live Server. Puede hacer clic
aquí, Ir a vivir, o puede presionar
el botón derecho del mouse y luego seleccionar
Abrir con Live Server. Ahora como puedes ver, el proyecto
está en vivo en el navegador. Voy a colocar
el navegador y
el editor uno al lado del otro. Entonces para que nuestro
proceso de trabajo sea más conveniente, si no tienes un servidor en vivo, puedes buscar los paquetes aquí y puedes instalar
este paquete aquí. Bien, además de esos enlaces, también
necesitamos traer un par
de enlaces diferentes. Porque a lo largo del
proyecto vamos a usar algunos
teléfonos e íconos diferentes. Voy a traer enlace
para los teléfonos de Google, vamos a usar un par
de teléfonos Google diferentes. Sigamos adelante y
busquemos teléfonos de Google. Voy a visitar
este enlace aquí. El primer teléfono que necesitamos
es algo así como oh u oh, no
sé cómo
pronunciar esta palabra. El teléfono se llama Kohen
script. Aquí está. Hagamos clic en Obtener teléfono, luego regresemos y
busquemos el teléfono llamado Molly. Volvamos a hacer clic Obtener fuente. La tercera fuente que necesitamos
se llama marcador permanente. Necesitamos aquí marcador permanente. Aquí está. Haga clic en obtener fuente. Entonces necesitamos obtener el código Ambit. Y voy a copiar
esos enlaces desde aquí. Vamos a pegarlo en
el elemento cabeza. Además de eso, estoy
buscando telefono increible CDN JS. Tenemos que agarrar este
enlace desde aquí. Vamos a hacer clic en este icono, copiar URL. Entonces necesitamos abrir la
etiqueta de enlace en Head Elements, y voy a pegar
aquí la CDN copiada Bien, creo que ya está. Todo está listo para comenzar
a escribir el código para eso. Pasemos a
la siguiente conferencia.
4. Crea marcado HTML para el encabezado de un sitio web: En la conferencia anterior, hemos creado nuestro ambiente de trabajo. Hemos preparado todo
para comenzar a escribir el código. Tenemos tres archivos
diferentes aquí, Archivos para HTML, CSS
y script Ile. En el índice del archivo HTML, creamos la
estructura HTML básica con algunos enlaces,
enlaces para archivos CSS e
ilescopt Y también trajimos algunos enlaces diferentes para
teléfonos y los íconos. Ahora tenemos que empezar a crear el marcado HTML para nuestra primera
sección del proyecto Si echamos un vistazo
al proyecto terminado, verá aquí
el encabezado del sitio web. En esta conferencia,
voy a crear el marcado H til para el encabezado del
sitio web Consta de
diferentes elementos. Tenemos aquí logo y también el banner con
algunos elementos textuales En esta conferencia, como dije, voy a crear
el marcado H tel Volvamos al código VS y voy a instituir
comentarios para el contenedor. Voy a abrir etiqueta con
un contenedor de nombre de clase. Dentro del contenedor,
voy a crear el encabezado. Pero antes de eso voy a insertar comentarios para el encabezado. Vamos a abrir la etiqueta H five header. El primer elemento
que voy a crear dentro de la cabecera
va a ser logo. Voy a insertar
tus comentarios para logo, luego abrir etiqueta de enlace. Voy a insertar aquí índice HTML porque una vez
que hacemos clic en el logotipo, tenemos que navegar
a la página principal. Por eso inserté
aquí índice HTML. Entonces voy a agregar aquí nombre de la
clase y
va a ser logo. Dentro de los elementos de enlace, voy a insertar Span
con el lector de texto. Bien, entonces aquí tenemos el
elemento link con el lector de texto. Eso es todo sobre el logo. A continuación voy a
crear el banner. Entonces abramos
comentario para banner, necesitamos abrir etiqueta con el banner de nombre de clase
dentro del banner. Voy a crear tres elementos de encabezado
diferentes. El primero será H tres encabezado con la lectura del texto. Entonces voy a abrir H uno encabezando elementos en los
que habremos girado. Voy a insertar
su letra O. Entonces voy a interferir
línea que tenemos aquí en línea. Pero la O se coloca dentro de
este panelemento porque necesitamos algunos estilos diferentes para la primera letra
de esta palabra Por último, voy
a interferir H, cuatro elementos de encabezado con
la biblioteca de libros libres de texto. Bien, entonces creo que ya está. Se crean todos los elementos. Para el encabezado del sitio web, necesitamos darle estilo a esos elementos. Y para eso, pasemos
a la siguiente conferencia.
5. Encabezado del sitio web en Stylilng: En la conferencia anterior
hemos creado el marcado HTML para el encabezado
del sitio web Tenemos aquí todos los elementos
diferentes. Ahora como dije, tenemos que darle
estilo a esos elementos y tenemos que hacer que se vea el encabezado del
sitio web. Así que volvamos
al código VS y al
estilo abierto del archivo CSS. Voy a mover este archivo y colocarlo del lado derecho. Lo primero que
voy a hacer es crear algunos estilos predeterminados. Voy a insertar tus nuevos
comentarios para estilos predeterminados, después voy a
seleccionar cada elemento, y para eso tenemos que
usar un asterisco Vamos a establecer el margen predeterminado y relleno de ambos a cero. Necesitamos margen para ser cero
y también relleno para ser cero. A continuación tenemos que establecer la caja de tamaño
de la caja de borde de la caja. Esta es una propiedad CSS
que afecta cómo se
calcula el tamaño de un elemento por defecto. Cuando establece el ancho o
alto de un elemento en CSS, se aplica al
área de contenido del elemento. Sin embargo, con el cuadro de
tamaño de
la caja border box, el ancho y alto que
establezca incluyen el relleno y también
el borde del elemento en
lugar de solo el contenido. Es por eso que usamos el cuadro de
borde de tamaño de caja como estilo predeterminado. A continuación, voy a usar decoración de
texto
con el valor non. No necesitamos ninguna decoración de texto
para los elementos de enlace. También, voy a
establecer línea a non. Por último, configuremos la familia
telefónica a cada elemento al teléfono
llamado mull cursive Bien, vamos a revisar el navegador. Como puede ver, todos
los iles predeterminados se aplican a los elementos. No tenemos aquí ningún margen. Y también se
cambia la fuente para cada elemento. A continuación, voy a cambiar el tamaño
de fuente del elemento HTML. este momento, la fuente
del elemento HML es
igual a 16 píxeles A lo largo de este
proyecto voy a usar Ram como unidad de medida. Por defecto, una Ram es
igual a 16 píxeles, porque como dije,
el tamaño de fuente del elemento HTML es
igual a 16 píxeles. Quiero convertir una Ram y hacerla igual a diez pixeles. Para ello, tenemos que disminuir el tamaño
de fuente del elemento HTML. Seleccionemos HTML y
establecemos su tamaño
de fuente 62.5% En este momento, una Ram es igual a diez píxeles Si revisamos el navegador, encontrarás que todos los
elementos se hicieron más pequeños. Bien, creo que eso es todo sobre
los estilos predeterminados por ahora. A continuación, voy a
personalizar el contenedor. Voy a insertar tu nuevo
comentario para el contenedor. Entonces voy a
seleccionar contenedor. En primer lugar, voy
a definir dentro de la altura. Vamos a establecer con 100%
En cuanto a la altura, voy a hacerla
100 de altura de ventana gráfica Significa que el
contenedor
ocupará el 100% del mirador
como la altura. A continuación, voy a
cambiar el color del patrón. Usemos el color 212121. Como pueden ver, tenemos aquí contenedor con color de
fondo oscuro. A continuación voy a
encargarme de la cabecera. Insertemos aquí nuevos
comentarios para el encabezado. Después selecciono elementos de cabecera, voy a establecer con
al 100% Entonces voy a establecer la altura de la cabecera,
100 altura de ventana gráfica Voy a cambiar la
altura del contenedor, hagámoslo al 100% así como pueden ver, aquí
no se cambia nada. Siguiente Voy a seleccionar logo,
vamos a comentarios inseguros para
logo y seleccionar elemento
de enlace para el logo del nombre de la clase Voy a definir la posición para el
logo como recuerdas. Se coloca en la parte superior
izquierda de la cabecera. Voy a definir la
posición del logo. En primer lugar, necesitamos
aquí la posición absoluta. Entonces para colocar los elementos de
acuerdo con el encabezado, necesitamos posición
relativa para el encabezado. Ahora podemos definir propiedades de
extremo superior izquierdo. Entonces la primera posición
va a ser tres Ram. En cuanto a la posición izquierda, voy a ponerle 225 Ram. Como puedes ver, el logo
se posiciona correctamente. A continuación, voy a
personalizar este elemento. Voy a seleccionar
Span Elements. Como recordemos tenemos span
dentro del elemento link. Sigamos adelante y seleccionemos logo, seguido del elemento span. Cambiemos la familia de teléfonos. En este caso,
voy a usar el teléfono llamado marcador permanente cursivo, luego aumentar el tamaño de la fuente Va a ser siete carnero. Además, voy a
hacer la fuente en cursiva. Usemos el estilo de fuente y lo hagamos cursiva y también
cambiemos el color. El color será 32 B0cE. Es de color azul. Aquí tenemos el logo. Se ve bastante bien. Lo último que
voy a hacer respecto a este elemento es agregar
un poco de efecto de sombra. Voy a usar sombra de
texto con los valores 0.5 Ram, uno Ram. Entonces el color de la sombra
va a ser negro. Necesitamos aquí 000. Y también voy a establecer
opacidad del color negro 2.2 Ahora el logo tiene efectos de sombra y
creo que se ve mucho mejor Bien, así que eso es todo
sobre el logo. A continuación tenemos que
encargarnos de la pancarta. Tenemos que darle estilo a los
elementos para que se vean. Entonces voy a insertar tus
nuevos comentarios para el banner. Entonces voy a
seleccionar Desarrollo, que tiene banner de nombre de clase. Me refiero a este desarrollo aquí. En primer lugar,
definamos la posición. Voy a poner
posición a absoluta. Entonces voy a
definir la posición correcta. Va a ser 20 Ram. Y también necesitamos la posición
inferior. Voy a ponerla en 30 Ram. Como puedes ver, el banner se posiciona y se
coloca en el lado derecho. Voy a colocar los elementos de texto en
el
centro usando el centro de línea de texto. Como puede ver,
los elementos de texto se colocan en el centro. Ahora voy a personalizar
los elementos de encabezado H one. Me refiero a este elemento aquí. Sigamos adelante y
seleccionemos la pancarta H uno. Cambiemos el tamaño del teléfono. Va a ser 15 Ram. Entonces voy a crear algún
espacio entre las letras. Entonces, sigamos adelante y
usemos el espaciado entre letras con el valor uno Ram.
Vamos a revisar el navegador. Aquí tenemos el elemento de encabezado H
one. Como recuerdas de
la versión terminada, vamos a agregar una
imagen de fondo al encabezado. Sigamos adelante y hagamos eso. Para eso, voy a usar un par de propiedades de
fondo diferentes. El primero va
a ser imagen de fondo. Vamos a definir la URL
de la imagen como ya sabéis, tenemos carpeta llamada images, luego tenemos que
seleccionar el texto G one, la primera imagen de aquí. A continuación necesitamos otra propiedad de
fondo y se llama background size. Voy a fijarlo para cubrir. Como pueden ver, tenemos
aquí una imagen de fondo, pero eso no es
lo que necesitamos aquí. Necesitamos agregar la
imagen como fondo para el texto y no todo
el encabezado. Para hacer eso,
necesitamos usar propiedad llamada
clip de fondo con el valor text. Además de eso, necesitamos la
misma propiedad con Webkit, lo contrario no se aplicará Por último, necesitamos
hacer que el color sea transparente. Ahora debería funcionar.
Como puedes ver, tenemos aquí la imagen como
fondo del texto. Bien, voy a agregar efecto de
sombra al texto. Vamos a corrab la
sombra del texto desde aquí. Ahora tenemos que encargarnos
de la primera letra, ya que, recuerden que hemos envuelto la primera letra
con elemento span. Voy a seleccionar el banner H, uno, seguido
del elemento span. Voy a aumentar
el tamaño del teléfono. Digámoslo, 225. Bien. Vamos a revisar el navegador. Como puedes ver,
el tamaño del teléfono de la primera letra es más grande, pero eso no es lo que necesitamos. Vamos a revisar la versión
terminada. Aquí tenemos diferentes resultados. Creo que aquí necesitamos
la mayúscula y no la pequeña. Usemos aquí el capital y
luego verifiquemos el resultado. Bien, ahora parece que
ya terminaron la versión. Bien, así que sentémonos sobre
el elemento de encabezado H one. Sigamos adelante y nos ocupemos
del resto de los encabezamientos. Voy a personalizar los
tres elementos de encabezado. Seleccionemos Banner, seguido del elemento H
three heading. Voy a cambiar
la familia telefónica. En este caso, usemos el
teléfono llamado script cursive, luego aumentemos el tamaño del teléfono Va a ser siete Ram. Tenemos que cambiar
el peso del teléfono. Vamos a establecerlo en 300. Aquí tenemos los H
tres elementos de encabezamiento. Voy a cambiar
el color del texto. Y también voy a moverlo hacia abajo cerca del H
uno encabezando elementos. Vamos a darle color. Entonces para mover
el elemento hacia abajo, voy a transformar
con función translate. Voy a traducir
x a tres Ram. En cuanto a la traducción y, necesitamos fijarla en 11 Ram. Estamos moviendo el elemento
horizontalmente por tres. En cuanto a la dirección vertical, movemos el elemento por 11 Ram. Como puede ver,
se coloca correctamente. Lo último que
tengo que hacer en esta conferencia es
personalizar el encabezado,
me refiero al elemento de cuatro encabezamientos. Sigamos adelante y seleccionemos el banner seguido del elemento
H four heading. Establezca el tamaño del teléfono en 1.8 entonces el
peso del teléfono será de 300. Además, voy a transformar
texto a mayúsculas, luego voy a aumentar el
espacio entre las letras. Vamos a establecer el
espaciado entre letras 2.7 Ram, y finalmente cambiar el color
del encabezado. Vamos a usar aquí. Color azul, quiero decir,
este color aquí. Bien, eso es. El encabezado del sitio web está personalizado y creo que
se ve bastante bien. A continuación, tenemos que
encargarnos de la navegación. Tenemos que crear la
navegación, quiero decir, el icono del menú, y también crear esta navegación agradable y
genial aquí. Para eso, pasemos
a la siguiente conferencia.
6. Crea marcado HTML para la navegación: Bien, en la conferencia
anterior
hemos personalizado el encabezado del
sitio web. Como pueden ver, se
ve bastante bien. Ahora, como dije, tenemos que
encargarnos de la navegación. Vamos a estar creando el icono del menú y también
los elementos de navegación. En esta conferencia,
vamos a estar creando el marcado HTML Y luego personalizaremos
los elementos y también haremos que la navegación funcione
usando Javascript. Bien, volvamos
al código VS. Y en el archivo HTML justo
después del contenedor, voy a insertar nuevos
comentarios para la navegación. Y luego dentro de los comunes, voy a abrir la etiqueta div, que será icono de menú. El icono del menú constará
de tres líneas distintas. Por lo tanto, te voy a
insertar tres etiquetas P. Necesitamos nombres de clase, línea y línea uno. La primera clase se
utilizará para el estilo común. En cuanto a la segunda clase, usaremos para el estilismo
individual. Como dije, necesitamos tres líneas. Por lo tanto, voy a
duplicar esta línea de código y luego cambiar
los nombres de las clases. Necesitamos la línea dos y la línea tres. Bien, después de eso, voy a crear
los elementos de navegación. En primer lugar, voy
a añadir aquí comentarios para el icono del menú. Entonces necesitamos aquí del ícono de menú. Entonces voy a insertar de nuevo, nuevos comentarios para los elementos
de navegación. Vamos a abrir HTML cinco. Ahora, etiqueta con el nombre de la
clase de navegación. Entonces voy a insertar etiqueta
con el nombre de la clase a la izquierda. Este elemento
incluirá la imagen que se coloca en el
lado izquierdo de la navegación. Me refiero a esta imagen aquí que tiene un bonito
y genial efecto hover Sigamos adelante e
insertemos aquí imagen. Voy a seleccionar imagen
de la carpeta de imágenes. En este caso, necesitamos libro JPG. Sentémonos sobre el lado izquierdo. Sigamos adelante y
creamos el lado derecho. Necesitamos escuchar justo dentro
del desarrollo no correcto. Voy a insertar
otra profunda, que va a ser sin artículos. Entonces tendremos cinco elementos de navegación
diferentes. Necesitamos abrir etiqueta de enlace, voy a insertar tu casa. El primer elemento link será diferente del resto
de los elementos link. Vamos a abrir un elemento, luego dentro del elemento link, voy a insertar
span con el número 01. Entonces necesitamos sobre, vamos a duplicar esta
línea de código cuatro veces. En realidad, tres veces,
porque en general necesitamos cuatro elementos con elementos span. El segundo
elemento de enlace serán los libros. Entonces tendremos un tercer ítem, y van a
ser testimonios. Por último, necesitamos contacto. ¿Bien? Así que eso se asienta
sobre el marcado HTML Creo que todo está creado. Vamos a revisar el navegador. Aquí tenemos la imagen
y los elementos de navegación. Ahora mismo,
solo tenemos el marcado HTML. Por eso los
elementos se ven mal. Para arreglarlo,
pasemos a la siguiente conferencia.
7. Icono de menú de estilo: En la conferencia anterior, hemos creado la
marca HTML de la navegación. Ahora mismo, tenemos aquí solo los elementos
sin ningún estilo, y se ven bastante feos. Tenemos que encargarnos de
eso en esta conferencia. Voy a personalizar el icono del
menú. Vamos a darle estilo. Quiero decir, vamos a
crear esas líneas. Y también crearemos este
bonito y genial efecto hover. Bien, volvamos
al código VS
y encontremos el contenedor
justo después del contenedor, voy a insertar
nuevos comentarios para la navegación de navegación. Entonces necesitamos commons para el ícono
del menú antes de comenzar
a darle estilo al ícono del menú. En primer lugar, voy a esconder por un tiempo la imagen y
los elementos de navegación. Voy a insertar a
sus nuevos comentarios para los elementos de navegación que necesitamos aquí de elementos de navegación. Vamos a seleccionar elementos con el nombre de la clase de navegación
y asignado a ella mostrar. No. Bien, entonces la imagen y los
elementos de navegación están ocultos. Ahora podemos comenzar a darle
estilo al icono del menú. Voy a seleccionar el icono de menú. Entonces definamos con en Hyde, voy a establecer con 24 Ram. En cuanto al Hyde,
van a ser dos Ram. Para que el
elemento sea visible, voy a agregar aquí solo color de fondo
temporal. Hagámoslo, no
sé, digamos rojo. Aquí tenemos el icono del menú. A continuación tenemos que
cuidar su posición. Tenemos que colocarlo del
lado derecho. Es decir, en la
esquina superior derecha de la página, voy a fijar
la posición a fija. Entonces la primera posición
va a ser siete Ram. En cuanto a la posición correcta, voy a ponerle 215 Ram. Como puedes ver, el
icono del menú está muy bien posicionado. Siguiente Voy a deshacerme del color de
fondo temporal de aquí. Entonces voy a
seleccionar la línea. Quiero decir, estamos seleccionando líneas con línea de nombre de clase común. Definamos la altura. Va a ser 0.2 m. luego
cambia el color de fondo. Voy a usar aquí,
este color azul. Aquí tenemos las líneas, como saben por la versión
terminada, la primera y la tercera líneas tienen con 100% En
cuanto a la segunda línea, es menor en relación con
el resto de las líneas. Voy a seleccionar la línea
uno y la línea tres, definida con ello
como 100% En cuanto a la línea dos, voy a establecer en 70% Como ven, en realidad esta es la versión
terminada. Como puede ver, la segunda
línea se hizo más pequeña. Separemos las líneas unas
de otras. Para eso, voy
a usar libros flex. Voy a agregar
aquí Display Flex. Entonces tenemos que
cambiar la dirección porque las líneas deben
estar alineadas verticalmente. La dirección de flexión
va a ser columna, entonces necesitamos
separar los elementos flexibles. Y para eso, usemos
justificar el espacio de contenido entre. Como puedes ver, las líneas están
separadas y en realidad con el estilo del
ícono del menú ya casi terminamos. Voy a añadir puntero de cursor. Como puede ver,
el puntero del cursor no
se aplica al icono del menú. Necesitamos solucionar ese problema
usando la propiedad index. Vamos a establecer el índice
al valor máximo, que es 1,000 Ahora
el problema está arreglado. Bien, con el
estilo, ya terminamos. A continuación, tenemos que crear
el efecto hover en hover. Tenemos que hacer que la primera
y la tercera línea sean más pequeñas. En cuanto a la segunda línea, tenemos que moverla
hacia el lado derecho. Voy a seleccionar icono de
menú con hover. Después seguido de la línea uno. También necesitamos inconformes para
la línea tres. Al flotar, tenemos que disminuir
el ancho de las líneas. Hagámoslo 70% En
cuanto a la línea dos, copiemos este código, cambiemos el nombre de la clase. Necesitamos la línea dos. En el
caso de la línea dos, necesitamos usar margen izquierdo. El valor va
a ser del 30% Tenemos que
mover la línea hacia el lado derecho. Si comprobamos el resultado, como ves, todo
funciona bien. Lo único que
necesitamos aquí es
usar la transición para que el efecto sea más suave. Voy a agregar
aquí transición con el valor y la duración
va a ser 0.3 segundos. Entonces como pueden ver, tenemos aquí un hecho
agradable y genial hover con el elemento del menú
que estamos hechos por ahora A continuación tenemos que encargarnos
de los elementos de navegación. Para eso, pasemos
a la siguiente conferencia.
8. Artículos de navegación para peinar: En la conferencia anterior
hemos estilizado el icono del menú. Hemos creado este bonito
y genial efecto hover. Ahora en esta conferencia,
voy a encargarme de los elementos de
navegación. Vamos a darle estilo a
la navegación. En esta conferencia, voy
a hacer que se vea la
navegación. Entonces entonces a continuación lo haremos
del script Java. Es decir, agregaremos
funcionalidad a nuestra navegación. Vamos a hacer que funcione. Bien, vamos al código VS. En este momento la
navegación está oculta. Me voy a deshacer de
mostrar ninguno de aquí. Vamos a establecer dentro de
la altura de la navegación. Voy a establecer con
100% En cuanto a la altura, voy a hacerla
100 altura de viewport, I 100% de la viewport Y también voy a cambiar
el color de fondo. En este caso, voy
a usar el color 191919. Es de color gris oscuro. Aquí tenemos la navegación. En realidad, voy a cubrir
el encabezado con navegación. Para ello, tenemos que usar la propiedad
index con algún valor
mayor que cero. Voy a 30 a 100. En este momento no está cubierto porque tenemos que definir la
posición para el elemento. En este caso, voy
a fijar la posición fija. Además, voy a definir propiedades
superiores e izquierdas. Ambos deberían
ser cero, ¿de acuerdo? Ahora el encabezado está cubierto y vemos aquí
solo la navegación. Lo siguiente que voy a hacer es usar Flex box para
alinear los elementos flex horizontalmente. Entonces necesitamos mostrar flex. Después de eso, voy
a encargarme de los lados izquierdo y derecho
de la navegación. Como recuerdas,
tenemos dos partes, la izquierda y la parte derecha. Voy a
empezar por la parte izquierda. Seleccionemos no izquierda. Voy a definir
dentro de la altura. El ancho va a ser
del 50% En cuanto a la altura, voy a
hacerla 100% Ahora mismo, aquí
no se cambia nada. Tenemos que
cuidar la imagen. Se debe tomar con en
altura del elemento padre, que no queda. Tenemos que seleccionar
ninguna izquierda seguido la imagen que necesitamos aquí. Con 100% también altura 100%
entonces debemos alimentar la imagen. Para eso, voy a usar pies de
objeto col.
Ahora como puedes ver, la imagen ocupa la
mitad de la navegación. A continuación, voy a
crear el efecto hover. Me refiero a este efecto hover aquí. Por defecto, deberíamos
hacer la imagen en blanco
y negro y luego
querer pasar el cursor sobre la imagen Debe recuperar su color original
con el fin de hacer la
imagen en blanco y negro. Voy a usar filtro con función de escala de grises
y voy a configurarlo al 100% Ahora como puede ver, la imagen se volvió en blanco y
negro. Además de eso, voy
a disminuir la opacidad. Hagámoslo 0.5 ¿Bien? Entonces ahora necesitamos crear
el efecto hover. Voy a seleccionar
suficiente izquierda con hover. Y luego debemos seleccionar la imagen para poder
recuperar el color original. Deberíamos usar de nuevo
filtro escala de grises y deberíamos hacerlo cero. También necesitamos
aumentar la opacidad. Hagamos que sea una
transición de uso para un efecto más suave. Necesitamos a todos como la duración. Voy a usar 1 segundo. Ahora, una vez que pase el
cursor sobre la imagen, entonces obtendremos este bonito
y genial efecto hover En realidad, voy a hacer del puntero el puntero del cursor. Agreguemos aquí el puntero del cursor. Bien, así que eso
se sienta sobre la imagen. Sigamos adelante y
cuidemos el lado derecho
de la navegación. Voy a seleccionar a la derecha, voy a definir
dentro de la altura. El ancho va a ser
50% como el lado izquierdo. La altura sería del 100% A continuación, voy a cambiar el color
de fondo del lado derecho. Voy a hacerlo 171717. Entonces tenemos que encargarnos
de los elementos de navegación. Voy a colocarlos en
el centro del lado derecho. Usemos libros flex. Necesitamos Display Flex. Para colocar el
contenido en el centro, tenemos que justificar el centro de
contenido y
también un centro de líneas de artículos. Bien, ahora sigamos
adelante y nos
ocupemos de los propios
elementos de navegación. Voy a seleccionar ningún elemento, que son los elementos padre, el envoltorio de los elementos. Tenemos que colocar los artículos
verticalmente en la columna. Voy a usar flex book. Tenemos que exhibir flan. Necesitamos cambiar la
dirección de la caja flexible. Va a ser columna. Ahora se colocan
verticalmente en una columna. Ahora voy a personalizar
los elementos de enlace. Sigamos adelante y seleccionemos otros elementos
seguidos del elemento link. El tamaño de la fuente
va a ser 1.8 Ram. Entonces necesitamos margen para crear algo de espacio
entre los elementos flex. El margen será de dos
Ram en la parte superior e inferior y luego cero en
los lados izquierdo y derecho. Además, voy
a transformar texto a mayúsculas necesitamos aquí
texto transformar mayúsculas. Entonces voy a cambiar de color. Hagámoslo blanco. Bien, ahora nuestros
elementos de enlace se ven mucho mejor. A continuación, voy a crear
el efecto hover en hover. Quiero cambiar el color
de los elementos de enlace. Sigamos adelante y
seleccionemos ahora los elementos A con hover y
cambiar el color Hacerlo necesitamos color. Vamos a usar aquí este color
azul también. Voy a usar la transición
para un efecto más suave. Digamos transición al color. Y entonces la duración
va a ser de 0.3 segundos. Bien, así que una vez que pasamos el
cursor sobre los elementos del enlace, como puedes ver,
cambiaron su color Bien, ahora vamos a
encargarnos de esos números aquí. Como recuerdas, creamos elementos
span dentro de los enlaces. Entonces voy a personalizar
esos elementos span. Sigamos adelante y
no seleccionemos ningún elemento seguido del elemento A. Y
entonces necesitamos span. En realidad, cuando seleccionamos
los teléfonos de Google, olvidé seleccionar
un teléfono adicional. Entonces volvamos al sitio web de
Google phone y busquemos el teléfono llamado pecado. Seleccionemos el primero. Entonces tenemos que dar clic en Obtener pont. Entonces consigue el código M y copia
este código desde aquí. Vamos a pegarlo aquí. Quiero decir, tenemos que
reemplazar esos enlaces. Ahora podemos usar la fuente
recién agregada. Voy a cambiar
la familia telefónica. Usemos Sz Sansorif. Entonces voy a
aumentar el tamaño del teléfono. Va a ser tres carreras. Voy a hacer el teléfono
boulder usando el peso del teléfono. Hagámoslo 900. Entonces voy a
crear un espacio en el, quiero decir, del lado derecho. Necesitamos margen, ¿verdad? Digamos a uno. Por último, aumentemos el espacio entre
las letras, hazlo 0.2 Bien, ahora como puedes ver, los números en el lado izquierdo de los elementos de enlace se ven
bastante bonitos y geniales. A continuación voy a crear las
líneas debajo de los números. O sea, si echamos un
vistazo al proyecto terminado
y colocamos el cursor sobre los elementos del enlace, verás que aquí tenemos efecto
agradable y genial debajo los números, la línea que aparece Voy a crear esas
líneas usando elemento de fuerza. Sigamos adelante y no
seleccionemos artículos, un lapso. Y entonces necesitamos antes. Entonces elementos, antes que nada, necesitamos definir contenido
que va a estar vacío. Entonces necesitamos dentro de la altura, la W va a ser del 100% Entonces voy a establecer la
altura a 0.5 Ram. También cambia el color
de fondo. El color va a ser el mismo, me refiero a este color azul aquí. Entonces tenemos que cuidar
la posición del elemento. Fijemos la posición a absoluta. Voy a posicionar elemento acuerdo con el elemento padre, que es el span que necesitamos
aquí, posición relativa. Ahora bien, si echamos un
vistazo al proyecto, verás que las
líneas se están mostrando. Pero tenemos que
ajustar la posición. Deben
colocarse abajo. Vamos a establecer la
posición inferior a cero. Y voy a poner la
posición izquierda a cero también. Bien, eso es lo de las líneas. Ahora debemos ocultarlos
y mostrarlos de nuevo. Una vez que pasemos
el cursor sobre los elementos del enlace, voy a establecer el ancho en cero Entonces voy a seleccionar
antes elementos con hover, necesitamos agregar aquí hover
deberíamos hacer con 100% Y además voy
a usar transición Vamos a insertar aquí con, con la duración 0.3 segundos. Ahora, una vez que pasemos el
cursor sobre los elementos del enlace, entonces esas líneas
se mostrarán muy bien Lo único que
tengo que hacer es encargarme del
primer elemento del enlace. Como puedes ver, tenemos
aquí la línea que voy a crear esta línea usando de
nuevo antes do elemento, vamos a seleccionar los
primeros elementos de enlace. Para eso necesitamos nov items seguido del primer child select es un pseudo elemento, en realidad es una pseudo clase,
no el pseudo En primer lugar, voy
a crear un espacio usando padding left.
Pongámoslo a seis. Entonces voy a
agarrar el selector y voy a añadir aquí
antes de los elementos, en realidad, vamos a
corregir este código desde aquí y hacer algunos cambios. El contenido debería
estar vacío entonces. El ancho va
a ser 4.8 Ram. La altura será 0.2 Ram. Entonces voy a hacer que el
fondo sea de color blanco. Necesitamos posición absoluta. Entonces necesitamos posición relativa. Para el elemento padre,
necesitamos relativo. Además de eso, voy a establecer la posición
superior al 50% Necesitamos colocarla en
el centro verticalmente. Entonces la posición izquierda será cero. Y también necesitamos usar
transform translate Y con -50% porque necesitamos centrar el
elemento perfectamente En este momento no es visible. Vamos a revisar el código. En realidad, necesitamos a su Ram. Volvamos al navegador. Y como pueden ver ahora,
antes del elemento, la línea es visible, lo
único que tengo que
hacer es cambiar el color. Una vez que pasemos el cursor sobre el
primer elemento link, voy a seleccionar
este selector aquí, luego voy a agregar hover Después del primer hijo, necesitamos cambiar el color
de fondo. Vamos a usar aquí este color. Y luego usar transición. Todos los 0.3 segundos, ¿de acuerdo? Ahora todo se ve bien, la navegación es personalizada. Y ahora tenemos que
hacer la obra. Es decir, tenemos que hacer que
el menú de hamburguesas funcione. Una vez que hacemos clic en el icono del menú, entonces se
debe mostrar la navegación. Para eso, pasemos
a la siguiente conferencia.
9. Haz que la navegación funcione: Bien, en la conferencia
anterior, hemos terminado de
diseñar la navegación. Creo que se
ve bastante bien. Ahora, como dije,
tenemos que hacerlo funcionar. Echemos un vistazo
al proyecto terminado. Como puedes ver, por defecto, la
navegación está oculta. Una vez que hagamos clic en el icono del menú, entonces aparecerá con
bonitos y geniales efectos de desvanecimiento. Además, como notas, los elementos de navegación están ocultos. Y aparecen con efectos de
desvanecimiento y
con algunos intervalos. Además de eso, el
icono del menú se está transformando, esas líneas se están
transformando en una flecha. Todas esas cosas que vamos a
hacer en esta conferencia. Bien, lo primero
que tenemos que
hacer es ocultar la
navegación por defecto. Para eso tenemos que encontrar
navegación y
agregarle capacidad cero
y visibilidad él. Como puedes ver ahora la
navegación está oculta. Lo siguiente que
voy a hacer es abrir el archivo
script JS y
escribir algún código de gas. Vamos a
seleccionar dos elementos. El primero será icono de menú. En cuanto al segundo,
debemos seleccionar el contenedor, me refiero al envoltorio
del contenido. Me refiero a este elemento aquí. Sigamos adelante y
creamos nueva variable. Voy a llamarlo menú. Voy a seleccionar este elemento
usando el método selector de consultas. Tenemos que especificar el
nombre de clase del icono de menú. Duplicemos
esta línea de código. Cambiar el nombre multi variable. Va a ser contenedor. Y también tenemos que
cambiar el nombre de la clase. Vamos a insertar aquí, Contenedor. Bien, después de eso, voy a agregar un oyente de eventos al icono del menú
con un evento click, porque deberíamos mostrar la navegación una vez que hagamos
clic en el icono de menú Entonces voy a agregar un
oyente de eventos al ícono del menú. Tenemos que especificar
aquí el evento click. Tenemos que especificar
aquí el evento click. Y también tenemos que
pasar la función back. Va a ser
una función de flecha. Esta línea agrega un oyente de eventos al elemento de icono de menú Escucha un evento click, y cuando ocurre el evento click, ejecuta la función de error Ahora voy a agregar una nueva clase al
contenedor con un método total, y luego usaremos este nombre de
clase en el archivo CSS. Soy lista de clase de
contenedor insegura. Entonces necesitamos método total. Soy inseguro nuevo nombre de clase. Vamos a llamarlo navegar
Dentro de la función de flecha. Esta línea cambia la clase CSS que navega en el elemento
contenedor Si la clase navigate
no está presente, la agrega. Y si la clase navigate ya
está presente, entonces la elimina. Así es como funciona el método
toggle. Ahora tenemos que ir al
archivo CSS y seleccionar Navegación. Con esta clase recién creada, Navigate, tenemos que mostrar
el paquete de navegación. Entonces voy a agarrar esas dos
líneas y colocarlas aquí. Necesitamos opacidad para
ser iguales a uno. En cuanto a la visibilidad,
debe ser visible. Bien, entonces ahora si hago
clic en el icono de menú, entonces
se mostrará la navegación. Y si hago clic de nuevo en el icono
del menú, se ocultará. Todo funciona bien por ahora. Ahora voy a añadir poco efecto suave
a la navegación. Agreguemos aquí transición con a y con el punto de
duración a segundo. Ahora la navegación
se está mostrando y ocultando con algún efecto suave. Bien, ahora tenemos que encargarnos de los lados izquierdo
y derecho. Tenemos que esconder el lado izquierdo. Voy a encontrar
ninguna izquierda y
agregarle opacidad cero y visibilidad. Entonces voy a seleccionar no izquierda con la
clase. Navegar. Entonces vamos a agarrar esas dos líneas. Cambiar los valores. capacidad uno y
visibilidad visible. Voy a agregar
transición aquí. Entonces necesitamos a todos. La duración de la transición
va a ser de 1 segundo. Pero además de eso, voy
a agregar poco tiempo de retraso. Vamos a configurarlo 2.7 segundos
y verificar el resultado. Si mostramos la navegación, entonces la imagen
del lado izquierdo aparecerá
con un poco de retraso. Necesitamos la misma
transición por defecto. Voy a agarrar
esta línea de código. Vamos a agregarlo aquí y
deshacernos del tiempo de retraso. Bien, así que todo funciona bien. A continuación tenemos que
cuidar el lado derecho. Echemos un vistazo
al proyecto terminado. Como ve el lado derecho, quiero decir que esta parte
viene del lado izquierdo. Sigamos adelante y nos
ocupemos de eso. Voy a encontrar suficiente, justo entonces
lo voy a mover hacia el lado izquierdo usando transform translate x como el valor que voy a pasar
aquí -200% Además de eso, voy a aumentar el ancho
de los suficientes elementos correctos Por defecto debería ser 100% Hará que
nuestro efecto sea más agradable. Ahora necesitamos usar la clase
Navegar con suficiente, ¿verdad? Una vez que hacemos clic en el icono del menú, entonces debemos mover el
elemento hacia el lado derecho. Necesitamos transformar, traducir x y el
valor se convertirá en cero. También, voy a hacer
el ancho de los elementos 50% Entonces necesitamos
transición 1 segundo. Bien, sigamos adelante
y verifiquemos los resultados. Entonces como puedes ver,
todo funciona a la perfección. Ahora tenemos que encargarnos de los elementos de navegación por defecto, los
voy a ocultar. Agreguemos aquí capacidad
cero y visibilidad. Entonces necesitamos usar, de
nuevo, la navegación de clase. Seleccionemos suficientes artículos
y tomemos esas dos líneas. Tenemos que hacer visibles los elementos de
enlace. Necesitamos opacidad uno y
visibilidad visible. Pero en caso de transición, necesitamos diferentes tiempos de
retraso para los elementos del enlace como
lo tenemos en el proyecto terminado. Como puede ver, aparecen
con algunos intervalos. Por lo tanto, necesitamos
diferentes tiempos de retardo para cada elemento de navegación. Voy a seleccionar elementos nub. Con class navigate, necesitamos seleccionar
el primer elemento nob Por lo tanto, voy a
usar y selector hijo. Primero no necesitamos
ítem y tenemos que hacer la transición con
opacidad 0.5 segundos Va a ser la duración. Y también necesitamos el tiempo de
retardo de 1 segundo. Además de eso, tenemos
que añadir aquí color. Porque como sabes por defecto, ningún artículo tiene
transición con el color. Voy a agregar color
aquí y voy a deshacerme de esta línea
de código de aquí. La duración del color
será de 0.3 segundos. Ahora voy a duplicar
este código cuatro veces. Entonces voy a cambiar los selectores de
chat que necesitamos aquí, el segundo ítem y el tiempo de retraso va
a ser de 1.2 segundos. Entonces necesitamos un tercer ítem con
el tiempo de retardo 1.4 segundos. Entonces tendremos aquí
cuarto ítem, 1.6 segundos, y finalmente quinto
ítem, 1.8 segundos. Bien, sigamos adelante y verifiquemos los resultados. Navegación abierta. Entonces como puedes ver,
todo funciona a la perfección. Bien, así que
lo único que tengo que
hacer es cuidar el ícono
del menú. Tenemos que transformar esas
líneas en una flecha, como la tenemos en
el proyecto terminado. Sigamos adelante y hagamos eso. Voy a encontrar las líneas, después voy a seleccionar la línea
uno con clase navegar. Entonces en caso de la línea uno, tenemos que disminuir el
ancho y hacerla 50% Además, tenemos que mover y
rotar la línea uno. Necesitamos transformar
luego traducir la función. El valor de traducir x
va a ser 103% Además, necesitamos mover los
elementos
según el eje y con 0.5 gram Además de eso, tenemos que rotar el elemento de acuerdo
a la z x El valor va
a ser de 25 grados. Bien, vamos a comprobar el resultado. Como puedes ver, la primera línea está rotando y también
cambió su posición. Hagamos lo mismo
para la línea tres. Voy a
duplicar este código. Necesitamos aquí la línea tres. Tenemos que agregar aquí el signo menos. Y también hay que agregar el
signo menos aquí. También. Como puedes ver, las primeras
terceras líneas se mueven a la perfección. Ahora tenemos que aumentar el
ancho de la segunda línea. Voy a seleccionar
segunda línea con clase. Navegar y configurar con 100% Si hago clic en el icono del menú, entonces obtendremos aquí una flecha. Tenemos aquí un pequeño problema, una vez que el icono se
transforma en una flecha. Y luego pasamos el cursor sobre el icono. Las líneas
seguirán teniendo el efecto hover, y no necesitamos eso
para solucionar ese problema Voy a usar la navega de tela. Entonces voy a usar
hover con icono de menú, seguido de la línea uno Necesitamos
lo mismo para la línea tres. Al hover, voy a establecer con dos 50% En cuanto a la línea dos, vamos a duplicar este código Deshazte de esta línea de código y cambia la
línea de clase. Necesitamos la línea dos. En caso de la línea dos, necesitamos aquí margen
izquierdo para ser cero. Como puede ver, ya no
tenemos aquí todo el efecto. ¿Todo bien? Entonces
en realidad eso es todo. Todo funciona bien. Y con la
navegación, ya terminamos. Ahora tenemos que seguir
adelante y comenzar a crear la siguiente sección
de nuestro proyecto. Y para eso, pasemos
a la siguiente conferencia.
10. Sección acerca de nosotros: En la conferencia anterior, hemos terminado de trabajar
en la navegación. Todo se ve bastante
bien y funciona perfectamente. Ahora tenemos que seguir adelante
y comenzar a crear la siguiente sección de
nuestra landing page, que es la sección Acerca de. Aquí tenemos sobre la sección. Se ve bastante bien
y es sencillo. Como recuerdas, cada sección de la landing page tiene
su página adecuada. O sea, si hago clic aquí, entonces iremos a la página At. este momento voy a crear la sección about en
la landing page. En cuanto a las páginas, las
cuidaremos un poco más tarde. La sección acerca
consta de dos partes. Tenemos lado izquierdo donde
podemos ver el número de
la sección y también el botón con bonito y genial efecto hover En cuanto al lado derecho, tenemos aquí algunos elementos
textuales Bien, eso es todo sobre
la sección sobre. En esta conferencia, voy
a crear el marcado HTML. Sigamos adelante y
justo después de encabezado, inserte nuevos comentarios
para sobre nosotros sección, voy a llamarlo sobre. Entonces sigamos adelante y abramos etiqueta de
sección con el nombre de la clase. A continuación voy a
insertar tu desarrollo que va a
ser sobre contenido. Como dije, vamos a
tener dos partes, lado
izquierdo y lado derecho. Voy a abrir etiqueta con un nombre de clase sobre el contenido que queda. Vamos a crear el lado derecho. Voy a cambiar el nombre de la
clase que necesitamos aquí. Justo dentro del lado izquierdo
tendremos el número de la
sección y también el botón. Voy a abrir etiqueta con
la sección de nombre de clase en que voy a insertar spannelement con el número 01 Entonces voy a abrir la etiqueta de
botón con el nombre de la
clase principal BTN Insertemos tus
elementos de enlace ahora mismo. Voy a colocar
tu signo de hash. En cuanto al texto, voy a insertar
aquí, Explora. Veamos sobre el lado izquierdo. Sigamos adelante y
cuidemos el lado derecho. Dentro del lado derecho, voy a insertar un par
de elementos diferentes. Voy a insertar aquí, H cuatro encabezamiento con el nombre rápido sección
encabezamiento M, significa pequeño. Vamos a insertar aquí sobre nosotros. Voy a duplicar
esta línea de código. Necesitamos uno elementos de encabezado, entonces el nombre será encabezado de
sección LG grande. En cuanto al texto, voy
a interferir ¿quiénes somos? Entonces tendremos sección bordear este elemento aquí. Después de eso, voy a
crear párrafo con algún texto ficticio que
necesitamos aquí. Lorem 30 Entonces voy a crear otro párrafo
con el texto ficticio En este caso,
voy al inter lum 40. Bien, creo que ya está. Todo está creado. Vamos a revisar el navegador. Aquí tenemos todos los elementos. Ahora tenemos que seguir adelante y darle estilo a una sección para eso. Sigamos adelante y pasemos
a la siguiente conferencia.
11. Sección de estilo sobre nosotros: Bien, en la
conferencia anterior hemos creado el marcado
HTML para nuestra sección
anterior nosotros, me refiero a esta sección aquí Ahora, como dije, tenemos que seguir
adelante y darle estilo a esos elementos. Volvamos al
código VS en el archivo CSS. Justo después del encabezado, voy a insertar nuevos
comentarios para aproximadamente. Después voy a seleccionar el elemento section con
el nombre de clase About. Lo primero
que voy a hacer es definir el ancho. Va a ser 100% Además, voy a cambiar
el color de fondo. Va a ser de 20
a cero a cero. Entonces voy a poner el relleno
a diez en la parte superior. El cero en el lado derecho, 15 Ram en el lado inferior y cero en el lado izquierdo. Como puedes ver, el espacio se crea dentro de la
sección usando relleno. A continuación, voy a colocar el contenido en el
centro usando libros Flex. Necesitamos Display Flex. Entonces voy a justificar el
contenido al centro. Y también necesitamos un centro de
líneas de artículos, el contenido se coloca
en el centro. A continuación, voy a
encargarme de los contenidos sobre. Me refiero a este elemento aquí. Sigamos adelante y
seleccionemos sobre los contenidos. Voy a definir
dentro de las alturas. El ancho va a ser
100% En cuanto a la altura, voy a establecer
al 100% también. Además, voy a colocar
los lados izquierdo y derecho
uno al lado del otro horizontalmente. Para eso, voy
a usar libros flex. Necesitamos display flex. Bien, así como puedes ver, los lados izquierdo y derecho se colocan horizontalmente,
lado a lado. A continuación, voy a
encargarme del lado izquierdo. Así que sigamos adelante y
seleccionemos sobre el contenido que queda. Cada lado, I, lado izquierdo y
derecho ocuparán hasta 50% del ancho de la sección. Voy a poner el ancho al 50% Entonces voy a colocar el
texto en el lado derecho. Sigamos adelante y pongamos el
texto de línea a la derecha. Además, voy a crear padding en el lado derecho
usando padding, ¿verdad? Y el valor va
a ser de seis rondas. Bien, eso es. Acerca del desarrollo del envoltorio, me refiero al contenido que queda. A continuación, voy a encargarme
del número de la sección. Sigamos adelante y
seleccionemos la sección seguida del elemento span. En primer lugar, voy a
cambiar la paily de teléfono. En este caso, voy
a usar el teléfono llamado sori. Entonces voy a
aumentar el tamaño del teléfono. Va a ser 25 fram, voy a hacer que el teléfono sea
más audaz usando el peso del teléfono El valor va a ser 900. Ahora voy a establecer la
imagen como fondo
del texto como lo tenemos
en la versión terminada. Voy a usar la
misma técnica que
usamos en caso del encabezado
en el encabezado del sitio web. Necesitamos aquí las
siguientes propiedades. El primero va
a ser imagen de fondo. Tenemos que definir la
URL de la imagen. Tenemos imágenes de carpeta y
voy a seleccionar G dos. Entonces necesitamos usar el tamaño de
fondo, va a ser de cobertura. También necesitamos clip de fondo, el valor será texto. Entonces necesitamos la misma
propiedad con clave web. Por último, voy a establecer el
color a transparente. Bien, así como pueden ver, tenemos aquí imagen como fondo
del número de sección. Lo último que
tenemos que hacer respecto a este elemento es crear
un pequeño efecto de sombra. Voy a usar sombra fiscal con los valores 0.5 Ram, uno Ram. Y el color
va a ser RTP, un color negro con la opacidad 0.2 que se asienta por encima
del número de sección Creo que se ve bastante bien. A continuación tenemos que tomar
aquí de la parte inferior, voy a seleccionar Main BTN Definamos dentro de la altura. El ancho va a ser 28 Ram, entonces la altura
va a ser seis Ram. Voy a cambiar
el color de fondo. Vamos a usar aquí color azul. Entonces me voy a
deshacer de la frontera por defecto. Vamos a ponerla en ninguna. Voy a hacer redondear
el botón. Para eso necesitamos radio de borde, pero el valor de tres Carneros, voy a poner
cursor a punto Bien, veamos sobre
el elemento botón. A continuación tenemos que
encargarnos del enlace, que se coloca
dentro del botón. Así que sigamos adelante y seleccionemos el BTM principal
seguido de los elementos Voy a establecer
dentro de la altura al 100% para que el
elemento link ocupe la totalidad dentro de la
altura del butttom Vamos a establecer al 100% Siguiente Voy a
cambiar el tamaño del teléfono. Va a ser 1.4 Como
voy a hacer el perno del teléfono, necesitamos transformar el
texto a mayúsculas. Además, vamos a crear algo de
espacio entre las letras. Vamos a establecerlo en 0.3 Ram. Y por último, voy
a hacer que el texto sea blanco. El botón se ve bastante bien. Siguiente Voy a crear
el efecto click. Para ello, necesitamos usar
pseudoclase llamada active. Y tenemos que transpore para traducir por qué el valor va a ser 0.2 Ejecutar como puedes ver, tenemos aquí bonito y
genial efecto click Bien, coloquemos
este código después del BTN principal. Ahora voy a crear
el efecto hover. Me refiero a este bonito y
genial efecto hover. Para ello, necesitaremos
ante pseudo elementos. Sigamos adelante y
seleccionemos el BTN principal seguido
del pseudo elemento antes En primer lugar, necesitamos
definir el contenido. Va a estar vacío. Entonces voy a
establecer dentro de alturas, ambas al 100% Entonces necesitamos
cambiar el fondo. Voy a usar gradiente
lineal. Voy a cambiar la
dirección del color. La transición va
a ser de dos derechos, luego el primer color
será transparente, luego tendremos color blanco. Entonces voy a hacerlo
en tercer color, que va a
ser transparente. Ahora mismo, el elemento
no es visible porque tenemos
que definir la posición. Va a ser absoluto. Además, necesitamos
posición relativa para el BTN principal porque
es un elemento padre Y vamos a
posicionar ante elemento de acuerdo con
el elemento padre. Voy a añadir aquí posición absoluta
elementos relativos deben ser visibles. Aquí tenemos los
pseudo elementos antes. Sigamos adelante y
cambiemos la posición. Voy a poner la
posición a cero. En cuanto a la
posición izquierda va a ser -100% Además de eso, voy a sesgar los elementos Necesitamos transformar la función de
sesgo x. Necesitamos sesgar el
elemento a lo largo del eje x. Vamos a establecer el valor
a -30 grados. Aquí tenemos el
antes del elemento. Una vez que colocamos el cursor sobre el botón, entonces debemos mover el
elemento hacia el lado derecho Voy a seleccionar
el BTN principal, seguido de la clase hover, y luego necesitamos los elementos Voy a mover el
elemento hacia el lado derecho. Voy a establecer la posición
izquierda al 100% Ahora bien, si pongo el cursor
sobre el botón, entonces antes elemento se
moverá hacia el lado derecho En realidad necesitamos hacer que
el efecto sea más suave. Necesitamos transición. Voy a agregar transición
antes de elementos de traje. Necesitamos que se haya ido 0.3 segundos. Como puedes ver ahora
el efecto se volvió más suave y lo único
que tenemos que
hacer es ocultar el elemento antes de
hacer. Para eso, voy a
usar desbordamiento calentado. Bien, eso se sienta
por encima de la parte inferior. Tenemos aquí, agradable y genial. No obstante, de hecho, a
continuación voy a encargarme del lado derecho. Sigamos adelante y
seleccionemos sobre el contenido. ¿Correcto? Voy a definir con, va a ser
50% entonces necesitamos, voy a poner relleno a
ocho Ram en el lado superior, luego cero en el lado derecho, cero en el lado inferior, y seis Ram en el lado derecho. Después de eso, voy a
personalizar los encabezamientos. Sigamos adelante y comencemos
con el pequeño. Voy a seleccionar el encabezamiento de
sección SM. Vamos a establecer el tamaño del teléfono en 1.2 Ram. Entonces necesitamos el peso del teléfono
, van a ser 300. Voy a transformar
texto a mayúsculas. Entonces necesitamos espaciado entre letras para crear algo de espacio
entre las letras. Va a ser 0.5 Ram. Por último, voy a cambiar
el color del encabezado. Usemos el color azul. ¿Bien? El primer rumbo, el pequeño, se ve bien. A continuación, tenemos que tomar aquí
del segundo rubro. En realidad, voy a
duplicar este código. Cambiemos el
nombre de la clase. Necesitamos aquí LG. Entonces el tamaño del teléfono
será de tres Ram. Entonces necesitamos el peso de la fuente 300. Además, voy a dejar aquí
texto transformar mayúsculas. Entonces el espaciado entre letras
va a ser 0.3 Ram. En cuanto al color,
voy a hacerlo blanco. Voy a agregar aquí,
margen tres Ram en los
lados superior e inferior y cero en los lados izquierdo y derecho
de la segunda cabecera. Se ve bastante bien.
A continuación tenemos que tomar aquí del tramo frontera. Me refiero a este disco de aquí. Sigamos adelante y
seleccionemos borde de sección. Voy a definir con altura. El ancho va a ser 50 Ram, entonces la altura será 0.1 Ram. Cambiemos el color
de fondo. Voy a usar el color
gris, 333. Por último, necesitamos margen
en la parte inferior, pongámoslo en tres Ram. Bien, entonces aquí
tenemos la frontera. Si echamos un vistazo
al proyecto de acabado, verás los elementos azules al inicio del borde de
la sección. Voy a crear este elemento usando después de los elementos. Sigamos adelante y
seleccionemos
borde de sección . En realidad necesitamos aquí. Después del elemento, voy
a definir el contenido. Va a estar vacío. Entonces voy a
definir dentro de la altura. El ancho va
a ser siete Ram. Entonces necesitamos altura, va a ser 0.7 Ram. También cambia el color
de fondo. Vamos a usar aquí color azul. Entonces necesitamos definir la
posición de los elementos. Fijemos la posición a absoluta. Como ya adivinaste, necesitamos posición relativa para el elemento padre
porque vamos a posicionar después del elemento de
acuerdo con el borde de sección, que es un elemento padre Necesitamos aquí propiedades superiores e
izquierdas, ambas para ser cero. ¿Bien? Eso es. Tenemos aquí sección frontera
Con esta agradable adición. Lo único
que tenemos que hacer es personalizar los párrafos. Tenemos dos párrafos, voy a seleccionar sobre, fijemos con 250. Entonces voy a
definir el tamaño del teléfono. Va a ser 1.4 así que cambiemos el
color, hazlo blanco. Entonces voy a
cambiar la altura de la línea. Necesitamos algo de espacio
entre líneas. Sigamos adelante y
seleccionemos la altura de la línea. El valor va
a ser 3.5 Ram. Y también necesitamos algo de espacio
entre los dos párrafos. Vamos a establecer el margen inferior a otra vez para que se sienta sobre la sección se ve bastante bien y ya
terminamos con la sección. A continuación tenemos que encargarnos
de la siguiente sección, que va a
ser una sección de libros. Para eso, pasemos
a la siguiente conferencia.
12. Sección Creación de marcado HTML para libros: En la conferencia anterior
hemos estilizado la sección Acerca de. Ahora, como dije, vamos a crear la siguiente sección
de nuestra landing page. Echemos un vistazo
al proyecto terminado. La siguiente sección va
a ser la sección de libros. Como puedes ver,
consiste en encabezado. Entonces tenemos tres libros
diferentes y esas portadas bonitas
y frescas sobre efecto. Por defecto son en blanco y
negro. Y una vez que pasamos el
cursor sobre las portadas, entonces obtienen su color
original Abajo, se puede
ver el nombre
del libro y también el
autor del libro. Abajo puedes
ver el botón Ver todo. Este botón es
similar al botón que creamos en
la última sección. Si hacemos clic en el botón, entonces navegaremos
a la página de libros. Ahora mismo vamos
a crear la sección, y luego tomaremos
de la página más adelante. Bien, en esta conferencia voy a crear el
marcado HTML para la sección de libros Instre nuevos
comentarios para libros. Después voy a abrir elementos de
sección con
los libros de nombres de clase
en los que voy a
insertar elementos profundos con el contenido de los
libros de nombres de clase. Este elemento incluirá todo
el contenido
de la sección del libro. Dentro del elemento de
contenido de libros, tendremos tres partes
distintas. Tendremos Bookstop, que
incluirá el encabezado
de la sección Entonces tendremos la
lista de los libros. Y después de eso,
crearemos el botón. El primer elemento
que voy a crear va a ser bookstop Incluirá la cabecera
de los libros. Voy a agarrar el encabezado
de la sección anterior. O sea, necesitamos esos dos elementos de rumbo
y también la frontera de sección. Vamos a agarrar esos tres
elementos y pegarlos aquí. Voy a cambiar el
contenido que necesitamos aquí. Libros, Los elementos de
encabezado H one serán nuestros best sellers. Necesitamos a sus best sellers. A continuación, voy a agarrar el número
de sección de la sección anterior. Agarremos este elemento y lo peguemos justo
después del encabezado. Tenemos que cambiar
este panelemento. Va a ser el 02. Como puedes ver el encabezado, esos encabezados y borde de
sección y también el número de sección ya
están estilizados Debido a que creamos estilos para los elementos en
la sección anterior, solo
necesitamos alinearlos
correctamente en esta sección. A continuación, voy a insertar tu lista de libros en que voy a abrir etiqueta
con el libro de nombres de clase. Cada libro
incluirá la imagen, me refiero a la imagen de portada y tres elementos span para
el nombre del libro. También, vamos a tener
aquí esta frontera. Y abajo puedes ver
al autor del libro. Como dije, necesitamos tres elementos
diferentes. El primero
va a ser Imagen. Voy a seleccionar imagen
de la carpeta de imágenes. La primera imagen
va a ser libro uno. Entonces voy a instituir elementos de
pan con el nombre de la
clase, nombre del libro. Te voy a instituir
el nombre del primer libro. Va a ser la
Aventura de Tom Sawyer. Entonces tendremos aquí otros elementos span con
la línea del libro de nombres de clase. Por último, necesitamos elementos de
tercer span con el libro de nombres de clase otro. El autor de este
libro es Mark Twain. Voy a ins Mark Twain. Bien. En esta sección
contaremos con tres libros diferentes. Por lo tanto, voy
a duplicar este código dos veces y cambiar los
detalles que necesitamos aquí. Libro dos. Va a
ser, vamos a insertar aquí. Idiota. Y el autor es Fody Entonces tenemos aquí el
libro número tres. El nombre del libro es El
conde de Monte Cristal. El autor del
libro es Alexander. Entonces, sentémonos sobre los libros. A continuación tenemos que
crear el botón, en realidad voy a agarrar el botón de
la sección anterior. Vamos a agarrar este código. Pace aquí. Voy a cambiar el texto de los elementos
del enlace. Va a ser la vista A, así que creo que eso se asienta sobre el marcado HTML de
la sección de libros Nuevamente, el encabezado y el número de sección ya
están estilizados, así
como la parte inferior A continuación, tenemos que estilizar
el resto de los elementos, y también tenemos que
encargarnos de las alineaciones,
los elementos en la sección Para eso, pasemos
a la siguiente conferencia.
13. Sección de libros de estilo: Bien, entonces en la
conferencia anterior hemos creado el marcado HTML de
la sección de libros Ahora como dije, tenemos que darle estilo
a esta sección. Algunos de los elementos
ya están estilizados el encabezado, el número de sección, y también
el botón principal abajo abajo Necesitamos alinear esos elementos correctamente y también tenemos que darle
estilo a los elementos restantes. Vayamos al código VS y
justo después de sobre la sección, insertemos nuevos comunes
para la sección de libros. Después voy a seleccionar elementos de
sección con
los libros de clase nueve.
Definamos el ancho. Va a ser
100% Entonces voy
a colocar el contenido en el
centro usando libros Flex. Necesitamos mostrar Flex, luego justificar el centro de contenido
y Alinear el centro de elementos. Además, voy a crear algo de espacio dentro de la
sección usando putting. Va a ser diez
Ram en el lado superior, luego cero en el lado derecho, 15 Ram en el lado inferior y cero en el lado izquierdo. Bien, entonces se crea
el espacio dentro de la sección y también el contenido desplazado
en el centro. A continuación voy a encargarme
del lado superior de esta sección. Así que sigamos adelante
y seleccionemos libros. Arriba. Voy a
colocar los elementos, me refiero a los elementos flex uno
al lado del otro horizontalmente. Para eso, necesitamos Display Flex. Entonces voy a
centrar el contenido usando Justify Content center
y Alinear items center. Además, voy a crear espacio en la parte inferior
usando margen. Los diez niños de abajo pueden ver el encabezado y el número de la sección se colocan
horizontalmente, uno al lado del otro. A continuación, voy a tomar
aquí de la cabecera. Sigamos adelante y
seleccionemos la cabecera de libros. Voy a alinear texto
en el lado derecho. Necesitamos que el texto se alinee a la derecha. Además, voy a
crear algo de espacio en el lado derecho usando
margen, ¿verdad? El valor va a ser diez. ¿Bien? Como puedes ver, los encabezamientos se colocan
en el lado derecho y
tenemos espacio entre la
cabecera y el número En realidad, necesitamos mover estos elementos azules del
lado derecho. Para eso, sigamos adelante
y seleccionemos después del elemento. Pero antes que nada tenemos que seleccionar
la cabecera de los libros. Entonces necesitamos borde de sección seguido del elemento after. Voy a poner la
posición correcta a cero. Si echamos un vistazo a los estilos predeterminados para
el borde de la sección, me refiero al elemento after, aquí
encontrarás
la posición izquierda. Si aquí mismo, justo posición derecha
sin posición izquierda, entonces la alineación
no será. Corrígeme. Si lo guardamos y
vamos al navegador, se
puede ver que
el elemento after sigue en el lado izquierdo. Necesitamos que quede aquí para ser auto. Como puedes ver, el acceso al elemento ahora se
coloca en el lado derecho. Bien, después de eso, voy a
encargarme del número. En realidad necesitamos diferente imagen de
fondo para el número. Voy a seleccionar
elemento span, pero antes que nada, necesitamos libros a la sección seguidos
por el elemento span. Cambiemos la imagen de fondo. Voy a seleccionar imagen
de la carpeta de imágenes. Va a ser el texto BG tres. Echemos un
vistazo al proyecto. Aquí tenemos la imagen de
fondo y es diferente de la imagen de fondo
anterior. Creo que
podemos mover ligeramente la imagen de fondo para que el resultado sea un
poco más agradable Voy a cambiar la posición
de la imagen de fondo. Necesitamos una
posición de fondo como los valores. Voy a intere
50% y 75% ahora. La
imagen de fondo se posiciona al 50% del ancho de
los contenedores desde el borde izquierdo horizontalmente y al 75% de la altura de los contenedores desde el borde superior verticalmente. Si imaginas un contenedor
rectangular, la imagen de fondo se
colocará de tal manera que su centro se alinee horizontalmente con el centro
del contenedor, y su borde inferior se alinee con 75% de la
altura de los contenedores desde la Ojalá, te quedó claro. A continuación, tenemos que
encargarnos de los libros. Sigamos adelante y
seleccionamos, Necesitamos tu lista. Voy a usar flex box. Vamos a configurar la pantalla para flexionar. Entonces voy a cambiar
el ancho del libro. Seleccionemos libro
y pongamos en 35 fram, en realidad necesitamos
cambiar el ancho de las imágenes porque
son demasiado grandes en este momento Sigamos adelante y seleccionemos libro. Seguido por el elemento imagen. Voy a poner con 30 Ram para la altura.
Vamos a ponerla en A. Ahora como puedes ver, las
imágenes se hicieron más pequeñas. En realidad, solíamos escuchar banderas de
exhibición y por lo tanto, los libros debían colocarse
horizontalmente en fila. Bueno, tenemos aquí
tal vez un error. Bueno, necesitamos aquí
lista de libros y no lista de libros. Ahora bien, el problema
debería ser arreglado. Como ves, los libros se
colocan horizontalmente en fila. A continuación, voy a
personalizar el libro. Voy a añadir aquí display. Vamos a alinear elementos
verticalmente en la columna. Voy a usar libros flex. Vamos a configurar la pantalla Flex. Entonces necesitamos cambiar
la dirección que va
a ser columna también, voy a colocar
elementos en el centro. Quiero decir horizontalmente
en el centro. Y vamos a comprobar el resultado. Como puede ver,
los elementos span se colocan en el centro. Quiero decir que los elementos de texto se
colocan en el centro. A continuación, voy a
establecer margen a seis Ram con
el fin de crear espacio alrededor del libro para que se sientan sobre
los libros en este momento. A continuación voy a
encargarme de las imágenes de portada. Vamos a
hacerlos en blanco y negro. Para ello,
como recuerdas,
tenemos que usar filtro con
la función de escala de grises. Voy a interferir al 100% ahora las imágenes son en blanco y negro. Después de eso, voy a
hacerlos un poco redondeados, importante radio uno Ram. Y también voy a
crear el efecto sombra. Usemos sombra de libro
con el valor de 01 Ram, luego tres Ram, el color. Vamos a usar color negro
con la opacidad 0.4 voy a cambiar el
cursor, hacerlo puntero Bien, Los libros se ven bien. A continuación, tenemos que crear
el efecto hover. Una vez que pasemos
el cursor sobre las imágenes de portada, entonces deberíamos volver
aquí el color original Voy a seleccionar la imagen del libro. En realidad, dejemos
aquí libro con hover. A continuación, seleccione la imagen. Necesitamos usar filtro con
la función de escala de grises. Tenemos que ponerla a
cero, como pueden ver. Ahora estamos consiguiendo aquí
el color original. Hagamos que el efecto sea más suave. Filtro de transición, la duración
va a ser de 1 segundo,
bien, así que todo
se ve perfectamente. A continuación tenemos que encargarnos de
esos elementos span aquí. Sigamos adelante y comencemos
con el nombre del libro. Voy a cambiar
la familia telefónica. Va a ser
co-guión cursivo. Entonces voy a
cambiar el lado del teléfono. Va a ser 1.4 Ram. Voy a transformar
texto en mayúsculas. Entonces necesitamos que el color sea azul. Crea algo de espacio
entre las letras, digamos 2.1 Y crea algo de espacio en los lados
superior e inferior. Hagamos margen 3.0 Bien, entonces los nombres de los libros
se ven bastante bien en realidad. Una vez que pasamos el cursor sobre
esos paneles, entonces la imagen está
cambiando el color En realidad, creo que no
es del todo bueno. Tenía razón cuando
iba a agregar el efecto hover a la
imagen y no al libro Agreguemos hover a la imagen. Creo que
sería más correcto. Bien, entonces ahora, ahora creo que
tenemos mejores resultados. Una vez que pasamos el cursor sobre
esos elementos espinosos, las imágenes mantienen
su color blanco y negro Bien, sigamos adelante y nos
ocupemos de la línea del libro. Voy a poner
ancho a diez Ram, entonces la altura
va a ser 0.1 Ram. Cambiemos el color
de fondo. Va a ser color RGBA. Voy a usar el color blanco. Necesitamos 25053 veces, entonces voy a
cambiar la opacidad Hagámoslo 0.1. Finalmente crea un espacio en
la parte inferior usando margen. Fondo con valor tres Ram. Bien, entonces aquí tenemos las
líneas, se ven bastante bonitas. A continuación tenemos que cuidar a
los autores de los libros. Así que sigamos adelante y
seleccionemos al autor del libro. En realidad, voy a
agarrar este código aquí. Obtén gratis la familia telefónica. No cambies el
tamaño del teléfono. Van a ser dos. Necesitamos transformación por caso. También el color
va a ser blanco. Entonces voy a
hacer espaciado 0.5 Ram. En cuanto al margen, me
voy a deshacer de él. ¿Bien? Entonces, como puedes ver, los autores se ven bien. Pero tenemos aquí un pequeño tema. Tenemos que alinear el texto
en el centro para eso. Voy a agregar aquí el centro de línea de
texto. Debería solucionar el problema. Bien, Todo se ve bien. A continuación, voy a
encargarme del fondo principal. Deberíamos colocarlo en el
centro de la sección. Y también necesitamos
algo de espacio entre los libros y el fondo. Voy a seleccionar libros, contenido
seguido del BTN principal Vamos a crear espacio usando
margen, top ten Ram. Con el fin de colocar
el centro inferior. Voy a seleccionar el contenido de
los libros y usar solo
texto el centro de la línea. Bien, eso se sienta, hemos
estilizado la sección de libros. Todo se ve bastante bien. A continuación tenemos que tomar
de nuestra siguiente sección, que va a ser la sección
testimonial. Para eso, pasemos
a la siguiente conferencia.
14. Sección Creación de marcado HTML para testimonios: En la última conferencia, hemos terminado de trabajar
en la sección de libros. Como puedes ver, está alicatado
y se ve bastante bien. Ahora, como dije,
vamos a seguir adelante y comenzar a crear la siguiente
sección de nuestra página de préstamos. La siguiente sección va
a ser la sección testimonial. Aquí tenemos la sección
testimonial. Consta de un par
de elementos diferentes. Tenemos aquí el lado superior, me refiero al encabezado y
el número de sección con imagen de fondo. Entonces puedes ver los comentarios. Uno de los clientes,
tenemos aquí, blanco y
negro, una
foto del cliente. Y una vez que pasemos el
cursor sobre la imagen, entonces obtendrá
su color original Hemos utilizado este efecto un par de veces
en este proyecto. Abajo,
puedes ver las cotizaciones de los comentarios del cliente. Y abajo, se puede ver
la parte inferior, Más información. Si hago clic en este botón, entonces navegaremos a
la página de testimonios, donde podrá encontrar el
control deslizante de los testimonios. Funciona. aquí un par de
testimonios diferentes del cliente. Bien, entonces en esta conferencia
vamos a crear el marcado HTML de la sección
testimonial, luego lo vamos a darle estilo como
para la página testimonial, nos encargaremos de Bien, sigamos adelante y
para crear el marcado HTML, voy a insertar
tus nuevos comentarios para la sección testimonial. Entonces voy a
abrir etiqueta de sección con el testimonio del nombre de la clase. La sección testimonial
constará de tres partes
distintas Tendremos testimonio en
la parte superior de la parte superior que incluirá el número de sección
y el encabezado. Entonces tendremos comentarios. Y también vamos a tener el fondo, voy a abrir etiqueta con el nombre de la clase testimonial
en el que estoy insertar sección Cambiemos el número
que necesitamos aquí, tres. Y también voy a
insertar aquí encabezado. Vamos a insertar encabezado
después del número de sección. Voy a cambiar
libros por testimonios. También necesitamos clientes
en lugar de libros. Y luego voy a
insertar aquí testimonios. Bien, eso es todo sobre
testimonial top. Entonces voy a crear una etiqueta con la retroalimentación del
nombre de la clase. Dentro de la retroalimentación, voy
a abrir otra etiqueta div. Va a ser feedback top en el que voy a
insertar imagen del cliente. Seleccionemos Imagen en
la carpeta de imágenes. Necesitamos el nombre de los clientes. Entonces voy a abrir la etiqueta
con el
encabezado de retroalimentación del nombre de la clase en el que
voy a insertar H uno elementos de
encabezado, necesitamos a sus clientes. Entonces voy a insertar
aquí los elementos Girar de nuevo con la retroalimentación de texto. Después de eso, voy a abrir otro
tirón profundo y va
a ser retroalimentación de fondo Dentro del elemento
inferior de retroalimentación, voy a insertar el cual
va a ser fondo BG. Estos elementos estarán vacíos. A continuación necesitamos en el que voy a abrir
tu profundo con el nombre de la clase él. Entonces tenemos que asegurar para el icono. Vamos a usar elementos con las
clases una comillas sólidas a la izquierda. Después después de I elementos, voy a insertar H
uno elementos de encabezado. Este encabezamiento será para
el nombre del cliente. Interferamos Robert Smith. Entonces después de H uno elementos de
encabezado, necesitamos segundo icono para. Vamos a copiar esta. Pégalo aquí. Y en lugar
de interferir a la izquierda, ¿verdad? Todo bien. Lo siguiente que
voy a hacer es crear un nuevo desarrollo con
el
cuerpo del código de nombre de clase dentro de ese elemento. Voy a abrir
elementos con algunos, um, nos envía mensajes de texto cuando oigas Lorem, vamos a insertar 30 palabras Y luego después del cuerpo
voy a insertar estrellas. Necesitamos divot con
el nombre de la clase estrellas. Entonces voy a insudar
sus elementos E con la clase estrella sólida Tendremos cinco estrellas, por lo tanto voy a
duplicar este código cuatro veces. Por último, estoy seguro de fondo, me refiero al fondo principal Vamos a agregar aquí nombre de clase, PTN, asegurar elementos A como el texto Voy a insepe, aprende más. Muy bien, entonces creo que se
asienta en esta sección. Tenemos muchos elementos HTML
diferentes. Espero que todo
sea correcto. Eso ya lo veremos más adelante. Vamos a revisar el navegador. Como puedes ver, tenemos aquí todos los elementos como
la sección anterior, el encabezado y el
número de sección ya están estilizados Así como el botón principal. Necesitamos alinear esos
elementos y también tenemos que personalizar los elementos
restantes. Para eso, pasemos
a la siguiente conferencia.
15. Sección de testimonios de estilo: En la conferencia anterior,
hemos creado el marcado HDML para nuestra sección
testimonial Tenemos aquí todos los elementos, algunos de ellos ya están
estilizados porque tenemos los elementos similares en
las secciones anteriores, Pero ahora tenemos que encargarnos de
la alineación de esos elementos
estilizados cuanto a los elementos restantes que creamos en
la última conferencia, tenemos que
cuidarlos y estilizarlos. Bien, vamos al código VS y en el archivo CSS justo
después de la sección del libro, voy a insertar nuevos
comentarios para los testimonios. Después voy a seleccionar el elemento de sección con los testimonios del nombre de la
clase. En primer lugar, voy a definir la altura
de la sección. Va a ser 160 de altura de la
ventanilla. Además, vamos a adherirnos con hacerlo al 100% Entonces voy a
comprobar el color de fondo. Va a ser el 202020. Aquí tenemos el elemento sección con un color de
fondo diferente. A continuación voy a alinear los
elementos usando libros flex. Voy a configurar
display a flex. Entonces necesitamos alinear los elementos
verticalmente en la columna. Por lo tanto, tenemos que usar dirección
flex con
la columna de valor. Además, voy
a alinear elementos en el centro usando
alinear elementos en el centro. Por último, vamos a crear algo de espacio dentro de la sección
es en poner, voy a decir palmaditas a
diez carnero en el lado superior, luego cero en el lado derecho, 15 ram en el lado inferior, y cero en el lado izquierdo Bien, Como puedes ver el contenido
se coloca en el centro. A continuación voy a encargarme
de la parte superior de la sección, me refiero al encabezado y
al número de sección. Sigamos adelante y
seleccionemos Testimonial Top. Vamos a usar de nuevo flex
box porque
vamos a colocar el encabezado y
el número de sección uno
al lado del otro horizontalmente. Necesitamos Display flex. Entonces voy a
colocar el contenido
en el centro usando
un centro de líneas de artículos. Y también necesitamos aquí
justificar el centro de contenido. Por último, vamos a crear algo de espacio en la parte inferior usando el margen, cinco
inferiores, ¿de acuerdo? Entonces como puedes ver, el número de
sección y el encabezado se
colocan uno al lado del otro. A continuación tenemos que cambiar la imagen de fondo
para el número de sección, y también necesitamos algo de espacio
entre esos dos elementos. Sigamos adelante y cambiemos la imagen
de fondo del número de sección. Sigamos adelante y
seleccionemos parada testimonial, seguida del número de sección Entonces necesitamos elemento span, necesitamos aquí imagen de fondo. Vamos a definir la URL. Necesitamos carpeta de imágenes. Y voy a seleccionar imagen
llamada texto G33, pero cuatro. Entonces voy a crear algo de espacio en el lado
derecho del número. Voy a agarrar este selector
de aquí y ritmo aquí, pongamos margen derecho a diez. Bien, sentémonos sobre el lado
superior de la sección. A continuación tenemos que
encargarnos de los comentarios. Me refiero a este elemento aquí. Sigamos adelante y
seleccionemos comentarios. Voy a definir con altura. El ancho va a ser
del 50% En cuanto a la altura, voy a poner en 60% Entonces usemos de
nuevo, flex books. Necesitamos alinear elementos,
los elementos flex verticalmente
en la columna. Necesitamos dirección flex
para ser columna. Además, necesitamos alinear los elementos en el centro para que los
elementos estén alineados. A continuación, voy a
encargarme de la parte superior de comentarios. Me refiero a este elemento aquí. Incluye la imagen del
cliente y también el rubro. Sigamos adelante y
seleccionemos la parte superior de comentarios. Use nuevamente la caja flexible, necesitamos alinear
los elementos en el centro. Entonces voy a crear algo de espacio en el
lado izquierdo usando padding left, digamos que es un siete Ram. Y también necesitamos algo de
espacio en la parte inferior usando margen, abajo cinco Ram. Bien, después de eso
voy a cuidar
la imagen porque
ahora mismo es demasiado grande. Así que sigamos adelante y seleccionemos parte superior de
retroalimentación
seguida del elemento image. Vamos a establecer dentro de
la altura a 30 Ram. Entonces tenemos que encajar la imagen. Voy a usar el
ajuste de objetos con la cobertura de valor. Como puedes ver, la
imagen se hizo más pequeña. A continuación, voy a hacerlo
redondeado usando radio de borde. Vamos a ponerla en dos Ram. También necesitamos, voy
a hacer que sea 0.8 Ram sólido. El color va a ser
el mismo color que usamos para el
color de fondo de la sección. Quiero decir 202020. También necesitamos algo de espacio en el lado derecho usando
margen, derecho, tres ram. Echemos un
vistazo a los resultados. Bien, la imagen se ve bien. A continuación tenemos que
hacerlo en blanco y negro. Y también voy a crear el mismo efecto hover que
usamos un par de veces
en este proyecto Vamos a usar de nuevo filtro con
la función de escala de grises, hacerla 100% Entonces también
necesitamos cursor para apuntar, bien. Entonces, como se puede ver, la imagen
se volvió en blanco y negro. Vamos a agregarle un efecto hover. Voy a seleccionar feedback, imagen
superior para los pols hover, necesitamos filtro con una función de escala de grises y
va a ser cero Además, voy a agregar aquí transición para un efecto
más suave. Necesitamos filtrar con
la duración 1 segundo. Bien, eso es lo de la imagen. Se ve bastante
bien. Y tenemos aquí bonito y fresco efecto hover A continuación, voy a
encargarme del rumbo. Sigamos adelante y
seleccionemos Título de comentarios. Voy a
volver a usar, flex books. Vamos a configurar display a
entonces voy a establecer con 50% Entonces necesitamos
colocar el centro de texto. Necesitamos centro Textline. Bien, ahora mismo aquí no
se cambia nada. Tenemos que aumentar el
tamaño de los encabezamientos. Por lo tanto, voy a seguir adelante y seleccionar el primer rumbo. En realidad, tenemos aquí
solo un encabezado, pero dentro del encabezado, he insertado
los elementos span para la segunda parte
del encabezado, por
eso estoy
diciendo los encabezados. Voy a seleccionar el encabezado de
retroalimentación
seguido de los elementos de encabezado H. Vamos a aumentar el
tamaño del teléfono, que sea siete Ram. Entonces necesitamos color.
Va a ser blanco. Aquí tenemos el
encabezado, se ve bien, pero necesitamos agregar algunos estilos a la segunda
parte del encabezado, este elemento pan, necesitamos
que se vea así. Así que sigamos adelante y agarremos este selector de aquí y
agreguemos a su elemento Pan. En primer lugar, voy a
cambiar la familia telefónica. El teléfono va a
ser guión cursivo, Entonces voy a
aumentar el tamaño del teléfono Hagámoslo ocho Ram. A continuación, voy a crear algo de espacio entre las
letras usando espaciado Lexi El valor va
a ser 0.2 Ram. Y también cambiar el color,
Usa el color azul. Bien, así que eso
es todo sobre el rumbo. Ambas partes de la partida se ven ambas partes de la
partida se ven bastante bien. A continuación tenemos que
encargarnos de las cotizaciones. En primer lugar, voy a
cuidar los antecedentes. Es decir, esta parte azul de aquí. Sigamos adelante y
seleccionemos G. Definamos dentro de la altura. El ancho va a ser 35 Ram. Entonces necesitamos la altura.
Voy a hacer 40 Ram. También cambia el color
de fondo. Vamos a usar este color azul aquí. Entonces necesitamos cambiar la
posición del elemento. Voy a poner
posición a absoluta. Entonces necesitamos posición
relativa para la retroalimentación. Debido a que es un elemento padre, voy a alinear el elemento BG de acuerdo con la retroalimentación que necesitamos.
Posición relativa. A continuación voy a definir propiedades
superiores e izquierdas. La posición superior
va a ser 26 Ram. En cuanto a la posición izquierda, voy a hacerla 4.5 Ram. Echemos un vistazo al
resultado que tenemos aquí, El fondo para el código. Voy a hacerlo redondeado. Vamos a usar
radio de borde tres Ram. Como se ha dado cuenta, tenemos
aquí un pequeño tema. Este elemento cubre parcialmente
la imagen. Voy a colocar la imagen
encima de este elemento aquí. Para hacer eso, voy
a usar la propiedad índice z. Y hagámoslo uno. Ahora el problema está arreglado
y todo se ve bien. Lo siguiente que
voy a hacer es
crear este triángulo aquí. Voy a hacer eso
usando after elements. Sigamos adelante y seleccionemos BG seguido de los elementos
after. En primer lugar, necesitamos
definir el contenido, que va a estar vacío. Entonces voy a
establecer cuando la altura, ambas a cero. A continuación, tenemos que
cambiar la posición. Fijemos la posición a absoluta. Ahora voy a crear el
triángulo usando bordes, por
eso me senté ahí con y la altura
de ambos a cero. Necesitamos usar un par de propiedades fronterizas
diferentes. El primero va
a ser frontera izquierda. Los valores
serán para Ram solid, el color va
a ser transparente. A continuación, voy a
usar border right. En realidad, vamos a
duplicar esta línea. Cambiar la propiedad que
necesitamos aquí, frontera, derecha. Entonces necesitamos otra propiedad
llamada border bottom. Pero en este caso,
voy a cambiar el color que ya no
necesitamos aquí transparente. Usemos el color azul. Ahora el elemento no es visible. Cambiemos el
color, hazlo rojo. Aquí tenemos el triángulo. Y ahora tenemos que cambiar la
posición de este elemento. Volvamos aquí
el color azul. Necesitamos que la posición inferior
sea menos tres. Además, voy a decir posición, vamos a convertirlo en uno Ram. Lo último que tengo que hacer es rotar este elemento. Voy a usar transform. Con la función de rotación, el valor va
a ser -45 grados. Ahora todo se ve bien
con el fondo. Ya terminamos. A continuación, tenemos que encargarnos de
la propia cotización. Me refiero a este elemento aquí. Vamos al
código VS y
seleccionemos, definamos dentro de la altura. El ancho va a ser un Ram, entonces la altura será 28 Ram. Voy a cambiar
el color de fondo. Vamos a usar aquí color
28 a ocho, a ocho. Aquí tenemos la cotización. Voy a hacerlo redondeado
usando radio de borde. Hagámoslo tres Ram. También, voy a cambiar
la posición del elemento. Vamos a tener posición
a unidad absoluta a posición
va a ser 33 Ram. En cuanto a la posición izquierda, voy a hacer que sea ocho Ram. Vamos a ver los resultados aquí. Tenemos el, ahora
voy a alinear los elementos dentro de la cita
usando flex book. Sigamos adelante y
usemos display flex. Entonces necesitamos alinear los elementos
verticalmente en la columna. Tenemos que cambiar la dirección, va a ser
dirección flex, columna. Además, necesitamos alinear
los elementos en el centro. Como se puede ver, los elementos
están alineados duraderos. Respecto a la cita va a ser para crear el espacio
dentro del elemento, voy a usar pudín. Necesitamos aquí pudín. Va a ser tres carnero en los lados superior e inferior y cero en los lados izquierdo
y derecho. Bien, vamos a lo del siguiente. Voy a crear
el triángulo para el, así que necesitamos
después de los elementos. En realidad, tomemos este código. Y luego cambiar el nombre
de clase que necesitamos aquí. Voy a cambiar el color. Va a ser de 28
a ocho a ocho. Entonces voy a ir en realidad, vamos a comprobar los resultados. Voy a mover
este triangul
al lado izquierdo como
lo tenemos en la versión terminada Voy a poner la
propiedad izquierda a cero. Ok, así que eso es todo
sobre el triángulo. A continuación voy a
encargarme del encabezado de,
sigamos adelante y
seleccionamos Encabezado. Utilice de nuevo libro de lino que
necesitamos aquí, exhiba Lino. Entonces voy a alinear elementos en el centro y crear algo de espacio en la parte inferior
usando Margot two ram Bien, después de eso voy
a personalizar esas cotizaciones. Me refiero al teléfono, entonces íconos. Así que sigamos adelante y seleccionemos encabezado
seguido de los elementos del ojo. Vamos a sincronizar el tamaño del teléfono, convertirlo en una rampa, y también cambiar el color Va a ser de color azul. Bien, después de eso, voy
a personalizar el encabezado, me refiero al nombre del cliente. Sigamos adelante y
seleccionemos Encabezado, seguido del elemento H
un encabezado. El tamaño de fuente
va a ser de dos m. Entonces necesitamos
transformar texto en mayúsculas. Vamos a cambiar el color del
texto va a ser blanco. También, voy a crear algún
espacio entre las letras, Hagámoslo 0.2 Y finalmente, necesitamos espacio dentro los elementos en los lados
izquierdo y derecho. Hagámoslo usando relleno. Los valores serán cero en el tamaño superior e inferior y diez m en los lados izquierdo
y derecho. Nuevamente, el encabezado de
la cita se ve bien. A continuación tenemos que
cuidar el párrafo. Sigamos adelante y
seleccionemos Encabezado. Seguido por el PL. En realidad cabecera, pero
cuerpo con el elemento. Es la parte de la, vamos a establecer con 250 Ram. Entonces el tamaño del teléfono
va a ser 1.2 Rams. Voy a cambiar la llamada, hagámosla, quiero decir, es de un color gris claro. Entonces voy a crear algo de espacio en la
parte inferior usando margen. Fondo 2.5 Rm. Echemos un
vistazo al párrafo. Tenemos que colocar el
texto en el centro. Y también voy a aumentar ligeramente
la altura de la línea
como la tenemos aquí. Sigamos adelante y
usemos el centro de línea de texto. Y voy a establecer la altura de
línea a 2.5 Rm la leva que se sienta
sobre el párrafo. A continuación tenemos que
cuidar a las estrellas. Voy a seleccionar
esos elementos del ojo aquí. Sigamos adelante y seleccionemos Estrellas, seguidas de los elementos del ojo. Aumentemos el tamaño del teléfono. Voy a hacer 1.8
entonces el color
va a ser azul. Necesitamos aquí este color. Y luego crea espacio en el
lado izquierdo y derecho usando margen, pongámoslo a
cero y 0.5 Ram. Bien, así que vamos a
hablar de la cita. El último elemento que
tengo que personalizar en esta conferencia es el fondo. Voy a definir
su posición. Sigamos adelante y seleccionemos
testimonios principales BTN. Voy a posicionar absoluta. Entonces necesitamos posicionar elementos de sección
relativa. Para posicionar el fondo de acuerdo con
los elementos de sección, necesitamos posición relativa. Volvamos al BTN
principal y agreguemos aquí posición
izquierda 50% Entonces
necesitamos que el fondo sea de 15 gramos Para centrar
perfectamente el elemento, necesitamos usar la función transform
translate x con el valor -50% cam que se asienta La sección testimonial es personalizada, se
ve bastante bien A continuación tenemos que seguir adelante y
cuidar el pie de página. Me refiero a esta sección aquí. El pie de página también incluye la sección de
contacto. Sigamos adelante y creamos esta sección
en la próxima conferencia.
16. Crea marcado HTML para pie de página: Bien, en la última conferencia terminamos de trabajar en
la sección testimonial, hemos estilizado,
y como pueden ver, se ve bastante bonita y genial En esta conferencia,
vamos a empezar a crear la última parte de la landing page
principal. Es decir, tenemos que crear el pie de página que incluye
la sección de contacto. He integrado
esas dos partes. Estoy en la
sección de contacto y el pie de página. En esta conferencia,
voy a crear la marca HTM para el pie de página. Como puedes ver, aquí tenemos
muchos elementos diferentes. Después en la próxima conferencia
vamos a darle estilo a esta sección. Bien,
volvamos al código VS
y en el archivo HTML justo
después de la sección testimonial, voy a emitir nuevos
comentarios para el pie Después abre HTML cinco elementos de
pie de página. El pie de página constará de un
par de partes diferentes. La primera parte va
a ser encabezado de pie de página, en el que voy a insertar los encabezados y
también el borde de sección Utilizamos esos elementos un par
de veces en nuestro proyecto. Voy a copiar
estas tres líneas de aquí y pegarlas abajo. Cambiemos el contenido de
los encabezamientos que necesitamos
aquí para ponernos en contacto En cuanto al segundo elemento de
encabezamiento, voy a insertar
aquí, Contáctenos. Echemos un
vistazo al proyecto. Como pueden ver, tenemos aquí dos encabezamientos y
el tablero de sección Bien,
lo siguiente que voy a hacer es insertar aquí
Nuevos Desarrollos, que va a
ser contenido de pie de página. Este elemento incluirá
el resto del contenido. Voy a abrir desarrollos y
va a ser focial Incluirá los íconos de
las redes sociales y también la dirección. Sigamos adelante y
aseguremos Desarrollos, que va a ser dirección. Voy a asegurar desarrollos que incluirán
la fonémica y
también este panelista
aquí y también estos paneles Vamos a abrir elementos con los nombres de clase
regular A sobre. Entonces después del elemento
I, voy a insertar span con la dirección de texto. Todo bien. Después de eso, voy a abrir párrafo y voy a agregar aquí nombre de clase, párrafo PAR. El párrafo incluirá
cinco elementos de span diferentes. Vamos a abrir span y biblioteca de libros
insegura. Entonces voy a duplicar elemento
span cuatro veces. Sigamos adelante y
cambiemos el contenido. El segundo lapso va
a ser Main Street 123. Esta es una dirección ficticio. Entonces tendremos séptimo piso. El siguiente va
a ser Nueva York, Y finalmente necesitamos al
estado, Nueva York, Estados Unidos. Bien, a continuación
voy a crear los íconos de
las redes sociales. Vamos a abrir la etiqueta con el nombre
de la clase social media. Voy a insertar aquí cuatro iconos de redes
sociales diferentes. El primero va a
ser marcas FA, FA, Facebook. Duplicémoslo tres veces
y cambiemos los nombres rápidos. El segundo ícono de las redes sociales
va a ser para Instagram. Entonces tendremos
aquí vinculados en en. Por último, voy a
insertar aquí X Twitter. Sigamos adelante y
comprobemos los íconos si se muestran todos ellos. Como puedes ver,
tenemos aquí cuatro para iconos, todo
funciona bien. A continuación voy a insertar la segunda parte del contenido
del pie de página, que va a ser de forma. Interferamos formar elementos. Deshazte del atributo action,
no lo necesitamos. Dentro del elemento form, voy a abrir
la etiqueta que
va a ser grupo de entrada. Voy a insertar aquí cuatro elementos de entrada
diferentes. Vamos a abrir la etiqueta de entrada
con el texto de tipo. Y también necesitamos el atributo
placeholder. Vamos a insertar aquí nombre. Duplicemos esta línea
de código tres veces. El segundo elemento de entrada
va a ser para el correo electrónico. Cambiemos los
atributos de marcador de posición intere email. Entonces tendremos
entrada con texto, y el marcador de posición
va a ser teléfono En cuanto al último elemento de entrada, va a ser address. Bien, después de eso, voy a introducir área de texto Vamos a añadir aquí el atributo de
marcador de posición. Va a ser mensaje
tras área de texto. Necesitamos fondo con el fondo apretado como el valor del botón
que voy a insertar aquí. Hazlo bien, así que vamos a sentarnos sobre los elementos del formulario Siguiente
voy a crear desarrollo, que va a ser fo abajo la parte inferior del pie de página. Incluirá párrafo, insertemos aquí
el signo de copyright. Va a ser H T cinco entidad necesitamos porcentaje de copia
y columna sammy seguido de algún texto
tres libros biblioteca Entonces todos los derechos reservados. Después del párrafo
voy a insertar botón con el
botón tipo dentro del botón. Voy a insertar elementos de
enlace con el texto volver al principio y
voy a insertar tus
elementos de ojo con los nombres de clase, un chevron sólido hacia arriba Todo bien. Entonces creo que eso se sienta. Sigamos adelante y
revisemos el navegador. Como pueden ver, tenemos
aquí todos los elementos. Espero que aquí todo
sea correcto porque tenemos muchos elementos HTM
diferentes. Todo bien. Así que sigamos adelante
y pasemos a la siguiente conferencia, en la que
vamos a darle estilo al
17. Pie de página de estilo: En la conferencia anterior,
hemos creado la marca HTML para el pie de página, y ahora vamos a darle
estilo a esos elementos. Como puedes ver, el
encabezado ya está estilizado. Tenemos que posicionar
esos elementos también. Tenemos que darle estilo a los elementos
restantes. Tenemos que hacer que se vea el
pie de página. Volvamos al código VS y
justo después de los testimonios
en el archivo CSS, insertemos nuevos comentarios
para el pie de página. Después voy a
seleccionar elemento pie de página. Vamos a definir con que
va a ser 100% Entonces
voy a usar Flex box para alinear el contenido
dentro del pie de página. Necesitamos display flex. Entonces voy a
cambiar la dirección. Vamos a alinear elementos
verticalmente en la columna. Necesitamos flex dirección
para ser columna, Entonces voy a alinear
elementos en el centro. Por último, vamos a crear espacio dentro del pie de página.
Necesitamos pudín. Va a ser 15
ram en el lado superior, cero en el lado derecho, tres ram en el lado inferior y cero en el lado izquierdo. Bien, sentémonos sobre
los elementos del pie de página. Como puedes ver, el contenido
se coloca en el centro. A continuación, voy a
encargarme de la cabecera. Sigamos adelante y
seleccionemos encabezado de pie de página. Alineemos el texto en el centro. Además, voy a crear espacio en la parte inferior
usando margen. Abajo con el valor 15 de los grandes. Como puede ver, los encabezamientos
se colocan en el centro. Tenemos que tomar
aquí de la frontera. Voy a colocar
este elemento azul en el centro de la frontera. adelante y seleccionemos
encabezado de pie de página seguido del borde de sección que necesitamos después del elemento
para centrar el elemento. Voy a establecer la posición
izquierda 50% Entonces para el centrado
perfecto, necesitamos transformar la función
translate x con el valor -50% Bien, después de que el elemento se coloque
en el centro del borde, a
continuación tenemos que
cuidar el contenido Me refiero al contenido del pie de página,
este elemento aquí. Sigamos adelante y
seleccionemos el contenido del pie de página. Voy a definir el ancho, va a ser 60% Entonces
voy a colocar el contenido, los elementos flex uno
al lado del otro horizontalmente. Por lo tanto, tenemos
que usar Display Flex. Además, voy a crear
algo de espacio en la parte inferior. Vamos a usar margin, Bottom
ten m. Como puedes ver, la dirección y
esos campos de entrada se colocan uno al
lado del otro horizontalmente. A continuación, voy a
encargarme de la parte social. Quiero decir para elemento social, sigamos adelante y seleccionemos
social y definamos con ello va a ser 30% Bien. Después de eso,
voy a encargarme del desarrollo
dentro de la dirección. Me refiero a este desarrollo aquí, sigamos adelante y
seleccionemos Dirección, Seguido por el desarrollo voy a usar de
nuevo, caja de lino, necesitamos bandera de visualización, luego tenemos que una línea de artículos en el centro y además crear
algo de espacio en la parte inferior Hagámoslo dos. Bien,
así como pueden ver, los elementos están alineados
y tenemos algo de espacio entre la dirección y
esos elementos aquí. A continuación, voy a
encargarme del fonosomico,
quiero decir, este fonosomico quiero decir Sigamos adelante y seleccionemos el vestido, seguido de los elementos. Voy a aumentar
el tamaño del teléfono. Va a ser 3.5 Entonces
voy a cambiar el color. Hagámoslo blanco. Y también crear algo de espacio en el
lado derecho usando margen, ¿verdad? El valor va
a ser 2.3 Ram, por lo que el icono se ve bien. A continuación tenemos que encargarnos
de estos elementos de la sartén. Esta palabra aquí, dirección. Sigamos adelante y
seleccionemos Dirección, seguido del desarrollo. Y entonces necesitamos span. Vamos a establecer el tamaño del teléfono en 1.8 Ram. Entonces voy a cambiar
el peso del teléfono. Hagamos que el teléfono sea más audaz. Vamos a ponerla en negrita. Voy a transformar
texto a mayúsculas. Además, necesitamos que el
espaciado entre letras sea 0.2 Ram. Por último, hagamos que el texto sea
blanco usando el color blanco. Bien, así que eso se asienta
sobre el elemento span. A continuación, voy a encargarme
del párrafo como recuerden. Tenemos aquí el párrafo que incluye cinco elementos de
span diferentes. Sigamos adelante y
seleccionemos Poder de dirección. En realidad, tenemos
aquí poco tipo. Necesitamos doble D. Ahora
vamos a seleccionar párrafo. Voy a usar flex book. Usemos display flex. Entonces necesitamos alinear los elementos
verticalmente en la columna. Dirección de flexión, columna. Entonces voy a
crear algo de espacio en la parte inferior usando fondo de
marcha Además de eso, voy a
crear algo de espacio dentro del párrafo del lado
izquierdo usando padding. Izquierda seis Ram. Bien. Entonces como puedes ver, los elementos span se colocan
verticalmente en la columna. A continuación tenemos que personalizar
esos elementos span. Sigamos adelante y
seleccionemos la dirección par, seguida del elemento span. Vamos a establecer con 210 Ram. Entonces el tamaño del teléfono
va a ser 1.4 Además, voy a cambiar el color. Hagámoslo blanco.
Por último, voy a crear un espacio en la
parte inferior usando margen. Abajo 0.5 Ram. Bien, los
elementos pin se ven bien. A continuación tenemos que
encargarnos de los iconos del teléfono. Me refiero a los íconos de las redes sociales. Tenemos cuatro iconos de
redes sociales diferentes. Entonces, sigamos adelante y
personalicemos esos elementos. Necesitamos seleccionar las redes sociales seguidas de los elementos del ojo. Aumentemos el tamaño del teléfono. Van a ser tres. Entonces
necesitamos que el color sea blanco. Además, necesitamos algo de espacio
en el lado derecho. Vamos a establecer el margen
derecho a los Rams. Voy a cambiar el
cursor, vamos a hacer que apunte. Bien, entonces la forma,
algunos íconos se ven bien. A continuación tenemos que
encargarnos de la forma. Sigamos adelante y
seleccionemos envoltorio, que es forma de pie. Seleccionemos fo formulario. Voy a definir ancho, va a ser 70%
como recuerdas, el lado izquierdo retomó 30%
del ancho de la sección. En cuanto al lado derecho, la forma, debe ocupar el 70%
de todo el ancho. A continuación, voy a seleccionar
los elementos del formulario. Usemos flex box. Necesitamos display flex. Y luego voy a colocar los elementos flex verticalmente en la columna usando columna
flex direction. Bien, después de eso
voy a seleccionar grupo de entrada. Me refiero a este elemento aquí. Incluye cuatro campos de entrada
diferentes. Así que sigamos adelante y
seleccionemos Grupo de entrada. Vamos a usar de nuevo, flex books. Necesitamos display flex. Entonces voy a crear espacio entre los elementos flex usando justify content, espacio entre. Bien, después de eso
voy a personalizar
la entrada en sí. Así que vamos a seguir adelante y seleccionar grupo
de entrada seguido
por el elemento de entrada. Vamos a poner W 273, entonces voy a establecer la
altura a seis Ram. También vamos a crear espacio en la parte inferior usando el margen, los tres
inferiores Ram. Bien, si echamos un
vistazo a la versión terminada, verás que los elementos de entrada
se colocan en dos líneas. Para ello,
voy a agregar aquí una de
las propiedades de flex box llamada
flex wrap con el valor de p. Ahora como puedes ver, se
colocan, los cascos de entrada se
colocan en dos líneas
distintas. A continuación voy a seleccionar entradas y también el
área de texto simultáneamente. Debido a que necesitamos algunos estilos
similares, voy a agarrar el
selector de aquí. Agreguemos aquí área de texto. Voy a cambiar
el color de fondo. Va a ser el 111, entonces me voy a deshacer del borde
del pliegue.
Vamos a establecerlo en non. Además, voy a
crear algo de espacio dentro los campos de Empa
usando pudín un m. Entonces pongamos tamaño
del teléfono a 1.4 y
también cambiemos el color Va a ser de color gris
claro. Bien, así como pueden ver, los campos de entrada
se ven bastante bien. Hagámoslos ligeramente
redondeados usando el radio del borde. Vamos a configurarlo 2.5 Bien, así que eso es sobre
los campos de entrada. A continuación tenemos que
encargarnos del área de texto. Necesitamos agregar algunos
estilos individuales al área de texto. Sigamos adelante y
seleccionemos el área de texto. Voy a establecer la altura 215 Ram. Además, vamos a crear algo de espacio en la parte inferior usando margin,
bottom three Ram. Además de eso, voy a
desactivar la función de cambio de tamaño. Ahora mismo podemos cambiar
el tamaño del área de texto y como puedes
ver puede romper el layout Voy a desactivar
esta función. Tenemos que cambiar el tamaño para no
ser ninguno, ¿de acuerdo? Ahora ya no podemos cambiar el
tamaño del área de texto. A continuación voy a
encargarme del botón. Sigamos adelante y
seleccionemos Footer Form, seguido del elemento button. Necesitamos Ancho,
van a ser 20. Entonces voy a
establecer la altura a cinco. También cambia el color
de fondo. Vamos a usar aquí color azul. A continuación, voy a colocar el
botón en el lado derecho. Y podemos hacerlo simplemente usando margin left
property con el valor, ahora se coloca
en el lado derecho. Bien. A continuación vamos a deshacernos
del borde predeterminado. Voy a fijarlo en non. También necesitamos radio fronterizo. Vamos a establecerlo en 0.5 fram,
cambiar el peso de la grasa. Vamos a ponerla en negrita y
cambiemos el color del texto. Voy a hacerlo blanco para
que el botón quede bien. Voy a agregarle un par
de propiedades diferentes. El siguiente es el espaciado entre letras. Necesitamos algo de espacio
entre las letras. Hagámoslo 0.1 ram. Además, voy a poner
cursor a puntero. Lo último que
voy a hacer es
crear algún efecto de sombra. Pongamos la sombra de caja
a 0.5 Ram, un Ram. Y el color
va a ser R B A. La opacidad
será 0.1 Muy bien, así que creo que el
fondo se ve un poco bonito A continuación voy a
agregarle un efecto click. Para eso necesitamos
seleccionar bottom seguido de la pseudo clase
activa Y entonces tenemos que usar
transform translate y con el valor 0.21 Si hago clic, entonces vamos a llegar aquí
este bonito efecto click Bien, ahora tenemos que
encargarnos de esta parte
aquí me pie de página abajo. Necesitamos personalizar los
elementos y alinearlos
así que sigamos adelante
y seleccionemos abajo. Voy a definir el ancho, va a ser 60% Entonces
necesitamos flex box para alinear los
elementos para usar Display Flex. Voy a crear
espacio entre los elementos flex usando
justify content. Espacio entre. Y también tenemos que alinearlos verticalmente
en el centro. Usando alinear elementos en el centro. Bien, están muy bien alineados. A continuación tenemos que personalizar
cada uno de los elementos. Me refiero al párrafo
y también al fondo. Sigamos adelante y comencemos
con el párrafo. Seleccione pie de página, p. inferior Entonces voy a establecer
el tamaño de falla 1.4 Ram y también
cambiar el color, hacerlo gris claro usando CCC. Nuevamente, eso es todo,
sobre el lado izquierdo, ahora tenemos que
cuidar el fondo. Voy a seleccionar pie Bottom, seguido del elemento botón. Voy a establecer
ancho y alto. El ancho va a ser de 15 Ram. Entonces necesitamos altura,
voy a ponerla en cinco Ram. Voy a conseguir
rou default border. Vamos a configurarlo en none y
también obtener fondo predeterminado. Pongámoslo a ninguno también. Bien, a continuación voy
a seleccionar Elementos de Enlace. Recuerda que creamos
elemento link dentro del botón. Incluye la flecha, me refiero al elemento. Sigamos adelante y
seleccionemos F abajo. Entonces necesitamos botón
seguido de los elementos. Vamos a establecer dentro de la altura al 100% voy a usar la caja Flex. Vamos a configurar la pantalla para flexionar. Entonces voy a
crear algún espacio entre el texto
y los elementos. Necesitamos justificar el espacio de
contenido de manera uniforme. Entonces necesitamos
colocar los artículos en
el centro verticalmente
usando un centro de líneas de artículos. Como pueden ver,
tenemos algo de espacio entre esas dos partes. A continuación, voy a
cambiar el tamaño del teléfono, digamos a 1.4 Ram. También, cambia el color. Utilice de nuevo, CCC. Entonces necesitamos hacer que
el texto sea mayúscula usando texto transformar mayúsculas Por último, crear algo de espacio
entre las patas usando espaciado entre
letras 0.1 Ram Bien, todo se ve bien, y en realidad con el
pie de página ya terminamos. A continuación, tenemos que
encargarnos de la barra de desplazamiento. Es decir, tenemos que
personalizar la barra de desplazamiento. Además, voy a tomar
del enlace abajo. Una vez que hagamos clic en este botón aquí, volver al principio, entonces
deberíamos desplazarnos hacia arriba sin problemas. En la próxima conferencia, nos
encargaremos de esas cosas. Pasemos al siguiente video.
18. Barra de desplazamiento personalizada y desplazamiento suave: Bien, entonces en la
última conferencia terminamos trabajar en la landing
page principal de nuestro proyecto. Hemos personalizado el
pie de página de la página. Ahora como dije,
tenemos que seguir adelante y personalizar la barra de
desplazamiento predeterminada de la página. Como puedes ver en el proyecto
terminado, tenemos esta barra de desplazamiento es agradable
y genial, que es
diferente a la predeterminada. En esta conferencia, voy
a personalizar la barra de desplazamiento. Y además de eso, voy a crear este efecto de
desplazamiento suave. Quiero decir, una vez que hacemos clic aquí, este botón vuelve al principio, entonces tenemos que
desplazarnos hacia arriba sin problemas. Sigamos adelante y vayamos
al código VS y antes que nada nos
ocupemos de la barra de desplazamiento. Voy a instituir nuevos
comentarios, barra de desplazamiento personalizada. Después voy a
seleccionar la barra de desplazamiento. Y de la siguiente manera
necesitamos elementos del cuerpo. Después seguido de
kit web, barra de desplazamiento. Esa es la forma en que
puedes seleccionar la barra de desplazamiento. Se trata de un pseudo elemento. En primer lugar, voy
a definir el ancho
de la barra de desplazamiento. Vamos a establecer en 1.2 m. Ahora mismo definimos el
ancho de la barra de desplazamiento. Si lo hago digamos diez Ram, me refiero a 100 pixeles, entonces verás que
el ancho será 100 pixeles de la barra de desplazamiento. Volvamos aquí, 1.2 Ram. Una vez definido el ancho de la barra de
desplazamiento. A continuación tenemos que tomar aquí de la barra de desplazamiento, pulgar
esta parte aquí. Sigamos adelante y
dupliquemos este código. Como dije, necesitamos
kit web, barra de desplazamiento pulgar. Voy a cambiar
el color de fondo. Va a ser el color azul que estamos usando a lo largo este proyecto, como este color. Además de eso, voy a agregar radio de borde
al pulgar. Quiero decir, quiero
hacer las esquinas
de la barra de desplazamiento redondeadas como, agreguemos aquí el
radio del borde y que sea cinco. Bien, entonces aquí tenemos barra de desplazamiento
azul con un radio de borde agradable
y fresco. Lo siguiente que
voy a hacer es cambiar el color. Me refiero al
color de fondo de la pista. Como pueden ver, tenemos aquí pista con color de
fondo gris oscuro. Vamos a seguir adelante y duplicar este código necesitamos agregar
aquí pista en lugar de pulgar. Vamos a deshacernos del radio del
borde entonces como el color de fondo y
continuemos a 121 a uno. Bien, eso es. Tenemos aquí una barra de desplazamiento agradable
y genial, que es diferente de
la barra de desplazamiento predeterminada. Para ser honesto, no me gusta en absoluto la barra de desplazamiento
predeterminada. Creo que esta
es mucho mejor. Bien, eso es sentarse
encima de la barra de desplazamiento. A continuación, tenemos que
encargarnos del desplazamiento
suave para poder desplazarnos hacia arriba sin problemas. Una vez que hacemos clic en este botón aquí, solo necesitamos usar una propiedad y tenemos que agregarla
al elemento HTML. Voy a usar el comportamiento
scroll, voy a hacerlo suave. Ahora, una vez que hagamos clic en los elementos del
enlace abajo, entonces podremos desplazarnos
hacia arriba sin problemas. Bien. Entonces, eso es todo. Hemos terminado de trabajar
en la landing page principal. A continuación tenemos que
encargarnos de las páginas. La primera página que
vamos a construir será sobre esta página aquí. Para eso, pasemos
a la siguiente conferencia.
19. Página sobre nosotros: En la última conferencia,
hemos terminado trabajar en la landing page
principal. Es decir, hemos creado
todas estas secciones. Ahora, como dije, vamos a construir las diferentes páginas
porque como saben, nuestro sitio web es un sitio web de
varias páginas. En esta conferencia,
vamos a comenzar a crear la página Acerca de. Podemos navegar a la página Acerca de un
par de formas diferentes. Podemos hacer clic en cualquiera de los
botones llamados Explorar. También, podemos navegar a la página acerca de S
desde la navegación. Si hacemos clic en el enlace acerca de, entonces navegaremos
a la página acerca de. Bien, en esta conferencia, vamos a crear
el marcado HTML En primer lugar, necesitamos crear nuevos archivos para la página acerca de. Vamos, el primero
va a ser sobre HTML. Además, necesitamos archivo para CSS. Voy a hacer frente a este
archivo sobre el CSS. Bien, vamos a mover el archivo
Html al lado izquierdo. Entonces voy a
ir al índice del archivo
de correo HT y
copiar toda la página. Entonces voy a pegarlo en, el archivo de correo acerca de HT. Sigamos adelante y
eliminemos todas las secciones. Voy a eliminar esas secciones excepto el
pie de página porque necesitamos pie de página. Entonces voy a eliminar
banner del encabezado. En cuanto a la navegación, voy a insertar
aquí los nombres de
los archivos HTMul que ya hemos
creado sobre el En realidad, necesitamos
corregir el nombre
del archivo porque
debería ser sobre. Voy a insertar aquí
los nombres de los archivos. Vamos al archivo Html índice e insertemos aquí los nombres
de los archivos en lugar
de los signos de libra. El primer enlace
será el índice HTML. Entonces tendremos
aquí sobre el HTML, la página siguiente, que en este
momento aún no se ha creado, va a ser libros HTML. Entonces tendremos
testimonios HTML. cuanto a la sección de contacto, voy a insertar aquí, solo contacto, porque no
tendremos la página separada para
la sección de contacto. Voy a insertar aquí signo de
libra
seguido del contacto. Muy bien,
vamos a copiar
esos cinco enlaces y esos cinco enlaces y pegarlos aquí en lugar
de esos enlaces. Muy bien, ahora necesitamos
vincular el archivo CSS, que acabamos de crear. Quiero decir, el archivo acerca de CSS. Duplicemos esta línea y cambiemos el nombre
del archivo CSS. Va a ser sobre CSS. Bien, sigamos adelante
y revisemos el navegador. Si abrimos la navegación
y hacemos clic en el enlace acerca de, entonces navegaremos
a la página about S. Ahora mismo, tenemos
aquí solo un logo, también el ícono del menú,
y el pie. Ahora tenemos que crear el
contenido de la página abouts. Antes de eso, voy
a hacer una cosa. Vayamos al archivo de correo índice d, h, t, y busquemos
el botón Explorar. Voy a definir el atributo de referencia
H. Va a ser sobre Html, porque una vez que hagamos
clic en este botón, tenemos que navegar
hasta la página de Bods Vamos al navegador. Haga clic en el botón. Como puedes ver, no funciona. Si hacemos clic en el enlace, entonces navegaremos
a la página de moradas Hay algo mal con
el fondo y el enlace. Pasemos al estilo del
archivo CSS y busquemos el botón. Voy a cambiar el color de
fondo
del elemento link para ver cuál es el problema real. Hagamos el color rojo. Como puedes ver, el elemento link no cubre todo el fondo. Por eso no pudimos
navegar a la página de modus. Para arreglarlo,
voy a configurar display a flex. Ahora como puedes ver, el elemento link cubre todo
el botón. Pero tenemos que centrar el texto. Por lo tanto, tenemos que
usar aquí justify, content center, y
un centro de líneas de pedido. Ahora el problema está arreglado. El fondo, quiero decir, el elemento link funciona bien. Deshagámonos de este color de
fondo desde aquí y verifiquemos una vez más. Ahora todo se ve
y funciona bien. Bien,
volvamos al archivo HTML en negrita. Dentro del elemento header, voy a insertar
dos encabezados,
quiero decir H, cuatro elementos de
encabezado con el nombre de clase
sección encabezado SM El texto va
a ser sobre nosotros. Duplicemos este código. Necesitamos H un elemento de encabezado. Además, voy a
cambiar el nombre de la clase. Va a ser el encabezamiento de
sección LG. En cuanto al texto que
voy a insertar aquí, explora nuestros valores. Vamos a revisar el navegador. Voy a navegar
a la página acerca de. Aquí tenemos dos encabezamientos. Ya están
estilizados porque usamos aquí la sección de clase encabezamiento
SM y sección encabezado LG Esas clases se utilizaron en
el índice de HTMilopile. Esos elementos
ya tienen algunos estilos. A continuación, voy a insertar
los comentarios justo después del encabezado que necesitamos
aquí sobre el acerca. Voy a abrir elementos de
sección con el nombre de clase Acerca de la sección. Dentro del elemento de sección, tendremos un par
de partes diferentes. El primero será el
encabezado de la sección about. Voy a abrir elementos con el nombre de clase sobre encabezado de
sección. Dentro de la cabecera, voy
a abrir H un elemento de encabezado. Van a ser nuestras características. Voy a agregar
aquí nombre de clase, encabezado de
sección LG
porque necesitamos los estilos similares en realidad
necesitamos aquí clase, vamos a agarrar el valor y
pegarlo dentro de la clase. Además de eso, voy a usar el borde de
sección que
usamos en la página principal. Necesitamos aquí sección frontera. Vamos a revisar el navegador. Aquí tenemos el rubro
y la frontera de sección. A continuación voy a
crear las características. Quiero decir, esta parte de aquí, me refiero a esas características. Sigamos adelante y justo después del encabezado de sección voy a abrir
nuevo desarrollo. Y va a estar por encima las características de la
página en la que voy a abrir
la función en sí. En esta sección, voy
a usar Google Material Symbols. Por lo tanto, sigamos
adelante y visitemos el sitio web Símbolos de material. El primer icono que
voy a
buscar va a estar
en puerto Contactos. Necesito este icono aquí. Vamos a copiar el código y
pegarlo en el elemento head. Entonces voy a agarrar el elemento span
e insertarlo aquí. Además de los elementos span, tendremos H tres
elementos de encabezado y va a ser selección blanca de libros. En general, tendremos
ocho características. Entonces voy a duplicar
este código siete veces. Entonces deberíamos cambiar los
íconos y también los encabezamientos. En primer lugar,
revisemos el navegador si se muestra el icono. Como puede ver, se muestra el
icono. Vayamos al sitio web de
Google phones y busquemos el icono
llamado Vista de cuadrícula. Agarremos estos elementos span
y reemplacemos este. En cuanto al rubro,
va a ser fácil de usar. Interfaz. A continuación, tenemos que buscar libros de biblioteca. Agarremos los elementos del panel
y reemplacemos este Olmo aquí. El rubro será de formatos
accesibles. Entonces voy a
buscar el formulario de llamada icono. Vamos a copiar este
elemento pan y pegarlo aquí. El rubro va a
ser la participación comunitaria. Vamos a revisar el navegador, se muestran
todos los iconos. A continuación, voy a
buscar escuela. Agarremos estos paneles
y peguémoslos aquí. Entonces voy a quitar
este contenido de aquí e insertar
recursos educativos. A continuación, voy a buscar el idioma que necesitamos aquí, Idioma. Agarremos este
elemento span y reemplacemos, en realidad este de aquí. En cuanto al rubro, voy a insertar soporte multi lingual. El siguiente icono va
a ser wi fi off. Vamos a copiar este
elemento span y pegarlo aquí. En cuanto al elemento heading, vamos a insertar aquí, lectura
fuera de línea. Ahora voy a
buscar el último símbolo. Va a ser firma. Necesitamos firma.
Necesitamos aquí a. Vamos a agarrar el elemento span
y también cambiar el rumbo. Van a ser
otras promociones. Se muestra una leva que sienta todos los
iconos. A continuación, tenemos que encargarnos de la segunda parte de
la sección sobre. Me refiero a la parte del equipo. Tenemos aquí la imagen de
fondo seguida del encabezado y también tres imágenes diferentes
de las cosas del sitio web. Sigamos adelante y abramos el desarrollo con el equipo de nombre de la
clase. Voy a inasegurar
H un elemento encabezado, va a ser equipo Entonces después de H uno encabezando
elementos necesitamos abrir remolcador y
va a ser miembros, va a envolver la sección de
miembros Después de eso voy a abrir remolcador y va a
ser el propio miembro Cada miembro
constará de imagen y dos elementos giratorios para el
nombre y para el puesto. Vamos a abrir la etiqueta de imagen. Voy a eliminar el atributo out para
el atributo source. Seleccionemos la carpeta de imágenes, y luego tenemos que
seleccionar miembro uno. Entonces voy a abrir la etiqueta span con el nombre de la clase,
nombre del miembro. Va a ser John Roberts. Duplicemos dos veces al miembro porque en general tenemos
tres miembros del equipo. Voy a cambiar
el nombre de la imagen. Va a ser
imagen miembro dos. En realidad, nos olvidamos aquí de
agregar la posición. Agreguemos aquí la posición de miembro. Es archivero digital. Voy a agarrar
este elemento fan y agregarlo para ambos elementos span, me refiero a ambos miembros. El segundo miembro
va a ser de color marrón. En cuanto al puesto, voy
a insertar aquí, Curadora. Por último, necesitamos
aquí el miembro tres. Va a ser
un contrato de arrendamiento inviernos. En cuanto al puesto, insertemos aquí,
community manager. ¿Todo bien? que eso es que todos los elementos
se crean ahora mismo. La página de abouts
se ve bastante fea, pero nosotros nos encargaremos de eso Lo único que
voy a hacer es
agregar un nuevo
nombre de clase para el pie. Va a ser foo. Necesitamos este
nombre de clase para poder agregar algunos
estilos individuales al pie. En la página acerca de, crea
toda la marca H de la página
abouts A continuación, tenemos que darle
estilo a esos elementos. Y para eso, pasemos
a la siguiente conferencia.
20. Página sobre nosotros: Bien, en la
conferencia anterior creamos el marcado HTML para
la página about S. Ahora como dije, tenemos que darle
estilo a esta página ahora mismo. Como puedes ver, la
página se ve bastante fea. Sigamos adelante y
empecemos a personalizarlo. Lo primero que
voy a hacer es agregar un par de clases diferentes
al elemento header. Voy a sumar dos clases, la primera va
a ser sobre cabecera. Voy a usar esta clase
para estilismo individual. Además, voy a agregar aquí nombre de
segunda clase, encabezado de página. Voy a usar esta
clase en otras páginas
también para el elemento header que vamos a crear
en las próximas conferencias. Nuevamente, el nombre de esta clase
será para estilismo individual. En cuanto al encabezado de la página, va a ser para
algún estilo común. A Siguiente Voy a insertar aquí un par
de comentarios diferentes. Voy a agregar comentario
aquí para sobre encabezado. Entonces necesitamos fin
de sobre cabecera. Yo en realidad necesitamos
fin de sobre cabecera. Vamos a bajar esta línea. A continuación, necesitamos comentarios
para las características. Voy a agarrar esta línea
y pegarla aquí abajo. Además, voy a agregar
comentarios para equipo. Cortemos esta línea de código
y la peguemos abajo. En realidad, sí, eso es correcto.
Muy bien, eso es todo. Voy a ir al archivo CSS, me refiero a acerca de
archivo CSS y voy a ocultar un par de elementos. Sigamos adelante y comencemos
con sobre la sección. Vamos a agregar aquí mostrar
N. Entonces voy
a ocultar equipo también, voy a ocultar pie de página. Estoy haciendo esto para que
nuestro proceso de estilismo sea más
cómodo y sencillo. Vamos a poner la pantalla a ninguna. Estoy escondiendo esos
elementos por un tiempo. Vamos al navegador. Entonces como puedes ver, tenemos
aquí solo el elemento header. Lo siguiente que
voy a hacer es ir al estilo de archivo CSS. Y en el elemento header, voy a personalizar
el encabezado de página. Me refiero a este elemento aquí. Seleccionemos el encabezado de página. En primer lugar, voy
a, en tus comentarios, para encabezado de página, estoy escribiendo este código en
el archivo Css con estilo porque usaremos este código
para otras páginas también Necesitamos aquí fin de cabecera de página. Seleccionemos el encabezado de página. En primer lugar, definir
con en altura. El con va a ser 100%
En cuanto a la voy 32, 40, entonces voy a usar flex box
para alinear el contenido. Vamos a usar Display
Flex entonces necesitamos flex direction para ser
columna porque
voy a alinear elementos
verticalmente en una columna. Después de eso, coloquemos
el centro de contenido usando justify content center
y un centro de líneas de artículos. Vamos al navegador. Aquí tenemos el encabezado. Voy a mover el
rumbo un poco hacia abajo. Sigamos adelante y
seleccionemos encabezado de página. Seguido de la
sección encabezada SM. Voy a poner la parte superior de
marcha en rampa 15. Bien, así que eso es todo,
sobre la alineación. A continuación voy a
cambiar el fondo. Voy a establecer imagen
de fondo. Vamos a ir al
acerca de ese archivo CSS y voy a insprew
comentarios para sobre Acerca de. En realidad, voy a colocar aquí el final común. Voy a seleccionar
Acerca de encabezado. Entonces voy a
definir antecedentes. Vamos a usar la función de
gradiente lineal. El primer color va
a ser RGBA 3033 veces, y la opacidad 0.9 En
cuanto al segundo color, voy a usar el mismo color, pero la opacidad va a ser 0.7 Entonces voy
a Seleccionemos la imagen
llamada acerca de PG. Entonces necesitamos que la
posición sea centro. Además, no necesitamos repetir. Además de eso,
voy a agregar aquí tamaño de
fondo para la cobertura de valor aquí. Tenemos la imagen como
fondo de la cabecera. A continuación voy a
encargarme de la sección sobre. En este momento está oculto. Voy a deshacerme
de esta línea de código. Voy a usar
Flex box
para alinear los elementos
display flex. Entonces necesitamos cambiar
la dirección que va
a ser columna Además, voy a alinear
elementos en el centro. Aquí tenemos las características. A continuación voy a crear
algo de espacio usando, voy a establecer
padding a 15 Ram en el lado superior e inferior y cero en los lados izquierdo
y derecho. Ahora tenemos algo de espacio
dentro de la sección. A continuación, voy a encargarme del encabezado de la sección. Agrega aquí nuevos comentarios
para el encabezado about. Sigamos adelante y seleccionemos
Acerca del encabezado de sección. Voy a una línea de
texto en el centro. A continuación, voy a crear algo de espacio en la
parte inferior usando relleno. Abajo, van
a ser diez Ram. Además de eso, voy
a mover el encabezado hacia el lado derecho como
lo tenemos en el proyecto terminado. Me refiero a este encabezado aquí. Para ello, voy
a usar para traducir con los valores 7% y luego
50% Movemos
los elementos a
lo largo del eje x y
también a lo largo del eje y. Bien, Como puedes ver, el encabezado se coloca
en el lado derecho. En realidad, lo necesitamos aquí. Línea de texto a la derecha,
y no al centro, porque necesitamos que el texto
se coloque en el lado derecho. Bien, lo siguiente que
voy a hacer es cuidar el
después del elemento. Voy a colocarlo aquí. adelante y seleccionemos sobre encabezado de sección seguido del borde de sección con después del elemento voy a
establecer posición izquierda en auto. Entonces necesitamos la
posición correcta para ser cero. Y también voy a
usar transform translate x con valor cero para colocar en el
lado derecho el elemento. Ahora todo se ve bien. Bien, veamos lo anterior
el encabezado. A continuación voy a
encargarme de las características. Sigamos adelante e insertemos sus nuevos comentarios
para las funciones. Entonces voy a seleccionar
acerca de las características de la página. En primer lugar, voy
a poner esta placa a flex porque vamos a alinear elementos usando flex book. Entonces necesito justificar centro
de conferencias. También en realidad
necesitamos aquí centro. Y luego voy
a definir el ancho. Vamos a establecerlo en 60%
Echemos un vistazo al navegador. Bien, después de eso,
voy a definir el ancho y alto
para la característica. Así que sigamos adelante y
seleccionemos la característica en sí misma. Voy a establecer el ancho a 20 m, entonces la altura también
será de 20. Y también voy a cambiar
el color de fondo. Vamos a establecer en 18183 veces. A continuación, voy a crear
algo de espacio entre esas entidades usando margen, digamos 23 rampa. este momento voy a
colocar las características en dos líneas distintas como las que
tenemos en el proyecto terminado. Para eso voy a agregar aquí, voy a agregar al elemento padre,
la propiedad llamada flex
wrap con el valor p. Ahora como puedes ver, las entidades se
colocan en dos líneas
distintas. Después de eso, voy a
personalizar las características. Voy a agregar aquí un par
de propiedades diferentes. El siguiente va
a ser radio de borde porque vamos a hacer
los elementos a su alrededor, el valor va
a ser tres Ram. Entonces voy a crear algún efecto de sombra
usando sombra de caja. Los valores serán 0.5 1 gramo
y el color será RBA. Necesitamos aquí color negro con
la opacidad 0.2 Bien, entonces voy a alinear
los elementos dentro de las características Para eso, voy a
usar, de nuevo, libros flex. Voy a cambiar
la dirección porque los elementos deben
colocarse verticalmente. La dirección
va a ser columna. Entonces voy a alinear
elementos en el centro. Y entonces necesitamos
algún espacio entre los elementos usando justificar el espacio de
contenido incluso. Vamos a revisar los resultados. Bien, como puedes ver los
elementos están muy bien alineados. Voy a hacer
el puntero del cursor. Bien, antes de darle
estilo a esos dos elementos, me refiero a los íconos
y los encabezados, voy a cambiar
las posiciones para algunas de las características Voy a alinear las
características de esta manera aquí. adelante y seleccionemos
Característica con selector de gráfico, necesitamos la función número dos y luego la característica número seis. Necesitamos las mismas posiciones
para dos características. Quiero decir en la misma posición
que tenemos que mover esas dos entidades con
la misma distancia. Sigamos adelante y utilicemos
transform translate. El valor va a ser
seis d. Como puede ver, el segundo y los seis
ítems se colocan hacia abajo. Hagamos lo mismo para
el resto de los artículos. Voy a duplicar
este código que necesitamos aquí, hijo número tres y
luego número siete, necesitamos moverlos por 12 Ram. Por último, también tenemos que encargarnos
de esos dos artículos. Duplicemos este código. Cambia los números que necesitamos aquí. 4.8 En cuanto al valor de la función traducida y
va a ser 18 Ram. Bien, entonces como puedes ver, las características están perfectamente
alineadas. Ahora tenemos que crear
esta parte aquí, me refiero a este círculo. Voy a hacer eso usando
cuatro pseudo elementos. Seleccionemos la característica seguida los pseudo elementos antes Vamos a configurar el contenido en vacío. Entonces voy a
definir w y altura. Voy a ponerlos a
los dos a 15 Ram. A continuación, voy a cambiar
el color de fondo. El color será 111. Además, necesitamos
hacer que el elemento redondeado usando
radio de borde con el valor de 50% Entonces voy a establecer la posición
para que el elemento sea visible. Entonces necesitamos posición relativa. Para los elementos padre, el padre es característica, necesitamos posición relativa. Vamos a revisar los
resultados que tenemos aquí. Círculo siguiente como supongo que
tenemos que mover el círculo hacia arriba. Voy a establecer la
posición superior a -40% En
cuanto a la posición izquierda
va a ser del 50% Entonces tenemos que centrar
el elemento perfectamente Necesitamos transformar
traducir x con el valor -50% Bien, aquí tenemos el círculo Tenemos que disminuir la
opacidad como la tenemos aquí. Voy a poner opacidad 2.7 entonces voy a ocultar
la parte exterior del círculo Para eso tenemos que
agregar aquí desbordamiento. Bien, eso es sobre
el antes del elemento. A continuación tenemos que encargarnos de
los íconos y los encabezamientos. Voy a seleccionar Feature
seguido del elemento span. En este momento como pueden ver, el círculo cubre
el elemento span y tenemos que solucionar ese problema. Vamos a establecer el índice en uno. Ahora como puedes
ver, los iconos se colocan encima de los círculos. El problema es hablar a continuación. Aumentemos el tamaño
del teléfono del icono.
Va a ser seis. Además, voy a
cambiar el color. Vamos a usar aquí color 320b. Así que los íconos se ven bastante bien. A continuación tenemos que
encargarnos de los rubros. Voy a seleccionar Feature seguido del elemento H
three heading. Vamos a establecer el tamaño de la fuente en 1.8 tranvía. Entonces necesitamos que el peso sea de 300. Además, voy a cambiar
el color del texto. Vamos a ponerla en blanco. Entonces voy a
definir el ancho. Vamos a establecerlo en 70% Por último, voy a usar el texto, el centro de la línea, bien, Entonces como pueden ver, los
encabezados se ven bastante bien Y en realidad con las
características ya terminamos. A continuación voy a
encargarme de la sección del equipo. Me refiero a esta sección aquí
ahora mismo, está oculta. En primer lugar, voy a
añadir aquí comentarios para equipo. Entonces me voy a
deshacer de mostrar ninguno. Y voy a hacer esas imágenes más pequeñas
porque son demasiado grandes. Así que vamos a seguir adelante y seleccionar miembro IMG y establecer con la altura
de la imagen a 27 Ram Además, los voy a alimentar
usando el color de ajuste a objetos. Bien, entonces ahora tenemos resultados
mucho mejores. A continuación, voy a
encargarme del equipo. Estoy en el elemento wrapper. Sigamos adelante y agarra
este código, agrégalo aquí. Definamos el peso y la estatura. El ancho va a ser
200% entonces voy a establecer la altura a 200 m. Además, necesitamos establecer la imagen como
fondo de la sección Vamos a usar fondo. Voy a usar la función de
gradiente lineal. En primer lugar, necesitamos definir la dirección de la transición de
color. Va a ser al fondo. Entonces voy a usar
tres colores diferentes. El primero va
a ser 3033 veces, y la opacidad 0.7
Entonces tendremos RGBA con los valores 1927 La opacidad va a ser
0.9 En cuanto al tercer color, voy a usar de nuevo
RGBA 3033 veces, y la opacidad 0.9 Bien, Siguiente necesitamos definir URL Voy a seleccionar
imagen llamada equipo BG. Y entonces necesitamos
centro, no repita. Bien, después de eso voy
a usar la
propiedad de tamaño de fondo con la cobertura de valor. Y luego vamos a comprobar el resultado. Aquí tenemos la imagen
de fondo. En realidad, si echamos un
vistazo al proyecto terminado, verás que el
fondo tiene forma diferente. Y voy a
agregar esta forma al elemento usando
la propiedad Ruta de
Clip. Voy a visitar
uno de los sitios web. Busquemos la propiedad de ruta de
clip y luego visitemos este sitio web. Aquí está, llamado
Bennett Filly. Aquí puedes seleccionar cualquiera
de las formas que quieras. En nuestro caso, necesitamos triángulo. Voy a mover esos puntos
para conseguir el triángulo. Necesitamos triángulo perfecto. Necesitamos aquí 100%
y 50% y 100% Ahora tenemos el triángulo
perfecto. Tomemos este código
de aquí y pasemos aquí. Si comprobamos el resultado, verás que
tenemos aquí el triángulo. ¿Bien? A continuación, voy a
ocultar las partes exteriores, y para eso necesitamos agregar encabezado de desbordamiento a
los elementos de sección. Vamos a agregar aquí desbordamiento él. Ahora ya no tenemos
aquí la barra de desplazamiento. Después de eso, voy a agregar un par de
propiedades diferentes al equipo. Necesitamos alinear el contenido. Voy a usar Display Flex. Entonces necesitamos
cambiar la dirección porque tenemos que alinear los elementos, particularmente necesitamos la dirección de
flexión de la columna. Entonces voy a colocar el
contenido en el centro usando justify content center
y align items center. Comprobemos el
resultado que tenemos aquí, las imágenes y también
el rumbo siguiente. Voy a añadir poco efecto de
sombra a la. Triángulo usando sombra de caja. Los valores serán 01, rampa tres Ram y como el color, usemos color negro con
la opacidad 0.9 Bien, continuación tenemos que
cuidar a los integrantes Voy a seleccionar Desarrollo de
Wrapper,
que es Miembros. Coloquemos la fila de líneas
horizontales de artículos usando display flex. Ahora como puedes ver,
las imágenes se colocan horizontalmente, una
al lado de la otra. A continuación, voy a
encargarme del rumbo. Sigamos adelante y seleccionemos Equipo luego seguido por el elemento de encabezado
H one. Voy a cambiar
la familia telefónica. Vamos a usar aquí el teléfono
llamado script cursive. Entonces voy a
aumentar el tamaño del teléfono. Van a ser diez,
luego cambia el color. Usemos el color azul. Además, voy a crear algún efecto de sombra usando sombra. Los valores serán 01m2
y el color RGBA, va a ser color
negro con la capacidad 0.5 Finalmente, necesitamos algo de espacio entre
las imágenes y el encabezado Usemos margen
con los valores. -15 Ram en el
lado superior, luego cero, luego 15 Ram en el lado inferior, y nuevamente cero en el lado izquierdo. Bien, sentémonos
por encima de la cabecera. Sigamos adelante y
cuidemos a los miembros. Voy a seleccionar miembro, después voy a alinear elementos
usando de nuevo, libro de lino Necesitamos exhibición de lino. Entonces tenemos que alinear
los elementos verticalmente. Tenemos que cambiar la dirección, va a ser la columna siguiente, necesitamos alinear los elementos al centro. Y por último, voy a
crear algo de espacio usando margen. Los valores serán cero en la parte superior e inferior y seis m en los lados izquierdo
y derecho. Sigamos adelante y
verifiquemos los resultados que tenemos aquí las imágenes y
abajo abajo se puede ver
el nombre del miembro y también
el puesto derecho. A continuación tenemos que
encargarnos de las imágenes. Voy a añadir aquí un
par de estilos diferentes. Vamos a hacerlos redondeados usando radio de
borde 50% Entonces
voy a hacerlos blanco y
negro usando
filtro escala de grises 100% También cambia el puntero
coursormkeico Voy a agregar a
las imágenes el
hecho hover que usamos un par de veces a lo largo de
este proyecto Voy a seleccionar la
imagen de miembro seguida de la libración. Entonces necesitamos filtrar la escala de grises
con el valor cero también. Voy a agregar aquí
transición para un efecto más suave, necesitamos filtrar 1 segundo. Bien, entonces ahora tenemos aquí este
bonito y genial que efecto. Bien, sigamos
adelante y personalicemos los nombres y las
posiciones de los integrantes. Voy a seleccionar el nombre del miembro. Aumentemos el tamaño de la fuente. Va a ser 1.8 Ram. Entonces necesitamos transformar el
texto a mayúsculas. En realidad necesitamos aquí mayúscula
mayúscula, pero transformamos. Y luego mayúsculas. Cambiemos el
color, hazlo blanco. Además, voy a agregar
algo de espacio entre el espaciado de celosía de celosía 0.1
Ram Y finalmente crear algo de
espacio en el margen superior. Top dos Ram se convirtió en los
nombres se ven bastante bien. A continuación tenemos que
encargarnos de las posiciones. Sigamos adelante y
dupliquemos este código. Voy a cambiar
el nombre de la clase, va a ser posición. Entonces el tamaño del teléfono
será uno Ram. Necesitamos
transformar texto en mayúsculas, el color va a ser
el color azul, éste. Entonces necesitamos espaciado 0.1 Ram. Y vamos a deshacernos del margen superior. Vamos a revisar los resultados. Las posiciones se ven bastante bien. Bien, con la
parte del equipo, terminamos. Todo se ve bastante bien. A continuación tenemos que
encargarnos del pie de página, que ahora mismo está oculto. Entonces voy a agregar aquí
comentarios para pie de página. Vamos a bajar esta línea. Voy a deshacerme
de esta línea de código. Entonces voy a mover los elementos usando
margin, Top -50 Ram Se moverá los elementos hacia arriba. A continuación voy a
colocar el encabezado hacia el lado derecho
como lo tenemos aquí. adelante y
seleccionemos el pie de página sobre
seguido del encabezado del pie de página. Voy a usar texto alinear
con el valor derecho. Y luego necesitamos
transformar traducir x con el valor
8% Como puedes ver, el encabezado se coloca
en el lado derecho. Ahora lo único que
tengo que hacer es mover también
el elemento after
al lado derecho. Para eso tenemos que
agarrar este sector. Vamos a agregarlo aquí También. Voy a agregar aquí el borde de
sección con después del elemento que necesitamos
definir la posición correcta
va a ser cero en este momento
el después de que Pdmon haya liderado posición por defecto y la
voy a configurar para que funcione
automáticamente para que
la posición correcta funcione Además, necesitamos aquí transformar traducir x con un valor cero. Bien, eso se sienta
con la página acerca de. Ya terminamos, Todo
se ve bastante bien. Ojalá te guste. A continuación, tenemos que encargarnos de la siguiente página de nuestro proyecto, que va a ser la página de libros. Me refiero a esta página aquí. Para eso, pasemos
a la siguiente conferencia.
21. Página de creación de marcado HTML para libros: En la conferencia anterior, terminamos de trabajar
en acerca de la página hemos estilizado esta página y se
ve bastante bonita y genial A continuación tenemos que seguir adelante y
encargarnos de la siguiente
página de nuestro proyecto, que va a ser la página de libros. Aquí tenemos la página del libro. Como pueden ver,
consiste en encabezado, me refiero a este encabezado aquí
con imagen de fondo. Entonces tenemos nueve libros
diferentes. Abajo, puedes
ver el pie de página. Bien, entonces en esta
conferencia voy a crear el
marcado HTML para esta página Volvamos al código VS. En primer lugar, voy
a crear dos nuevos archivos. El primero
va a ser libros, Hacer HTML, y luego necesitamos libros. Bien, abramos sobre el archivo HTML y
tomemos todo el contenido. A partir de aquí, voy a
copiar todo el código. Vamos a insertar el código dentro de
los libros hacer archivo HTML. Lo primero que
voy a hacer es
cambiar el nombre del archivo CSS. Van a ser libros, SS. Entonces voy a
cambiar los rubros. Necesitamos libros. Entonces el segundo rubro
va a ser nuestros best sellers. A continuación, voy a eliminar los contenidos
de la página acerca de. Voy a irme de aquí, solo cambiemos el
nombre rápido que necesitamos aquí. Libros. ¿Todo bien? Entonces creo que eso es todo en realidad. Voy a hacer una cosa más. Pasemos al archivo HTML del punto
índice y busquemos la sección de libros. Como. Recuerda que tenemos aquí botón
principal ver todo. Y voy a cambiar el valor del atributo de
referencia H. Una vez que hagamos clic en este botón principal, debemos navegar
a la página de libros. Voy a
Instituto libros, HTM. Bien, vamos a revisar el navegador. Vamos a la página principal. Después haga clic en este botón aquí. Entonces como pueden ver, se nos
navega a la página de libros. Ahora mismo, tenemos aquí el logotipo, el icono del menú, también los
encabezados, y el pie Bien, vayamos al
archivo HTM industrial y tomemos la lista de libros. Voy a agarrar este elemento, luego voy a
volver a los libros en archivo
HDML y justo
después de la navegación, realidad no
soy la
navegación sino la cabecera Voy a insertar nuevos
comentarios para libros. Entonces voy a abrir elementos de
sección con la sección del libro de nombres de
clase. Voy a insertar aquí el código copiado del
índice del equipo H de archivo. Quiero decir lista de libros. Echemos un
vistazo al proyecto. Tenemos aquí tres libros
diferentes. Como recuerdas en esta sección, también
necesitamos otros seis libros. Voy a duplicar
libro seis veces. Entonces voy a cambiar los nombres de los libros
y también de los autores. Hagámoslo rápido. siguiente libro va a ser Guerra y Paz de Leo Tolstoi Entonces tendremos a Jane Eyre de Charlotte Entonces el siguiente libro
va a ser, en realidad, me olvidé de cambiar los nombres de las imágenes
que necesitamos aquí. Libro cuatro. Entonces va a ser el libro cinco. Entonces necesitamos el libro seis. El nombre va a ser 1984. El autor es George Orwell. Entonces tenemos libro siete. El nombre va
a ser Don Quijote. En cuanto al autor, va a ser Nosotros
matamos a los sirvientes. Entonces tenemos el libro número ocho. Va a ser el
Señor de los Anillos. En cuanto al autor,
voy a insertar aquí, J R R Tolkien En cuanto al último
libro de la lista, va a ser el
libro número nueve. El nombre es el Gran Tsp. En cuanto al autor, va
a ser Scott Feral. Bien, así que sentémonos
sobre el marcado HTML. Ojalá todo sea correcto. Vamos al navegador
y revisemos los libros. Creo que
todo es correcto. Sentémonos sobre el marcado H L. Pasemos a
la siguiente conferencia, donde vamos a darle estilo
a esta página.
22. Página de libros de estilo: En la conferencia anterior, hemos creado una nueva página
para nuestro proyecto I página de libros. Y hemos creado
el marcado HTML. Ahora es el momento de darle
estilo a esta página. En realidad, si
miras la página de libros, verás que la mayoría de los
elementos ya están estilizados Solo necesitamos agregar
imagen de fondo al encabezado y además tenemos que encargarnos de la alineación de esos libros. Vamos al código VS. Lo primero que
voy a hacer es cambiar el
nombre de clase del encabezado. Necesitamos aquí el encabezado de libros
y no el encabezado sobre. Entonces voy a abrir
libros de archivo CSS. En primer lugar, insertemos
sus nuevos comentarios para encabezado. Entonces voy a
seleccionar la cabecera de libros. Voy a cambiar la imagen de fondo para
la cabecera de los libros. Seleccionemos fondo. Entonces voy a usar gradientes
lineales. Usa aquí RGBA valor 3033 veces y la opacidad 0.9
Entonces necesitamos usar de nuevo, RGBA del mismo color
pero con la opacidad 0.7 Siguiente Voy a seleccionar imagen Van a ser libros BG. Entonces tenemos que definir la posición de la imagen de
fondo. Va a ser centro y
además necesitamos aquí no repetir. Bien, echemos
un vistazo al proyecto. Entonces como pueden ver, el encabezado tiene el fondo, me refiero a la imagen de fondo. A continuación voy a tomar de la
alineación de los elementos. Voy a añadir aquí nuevos
comentarios para la sección de libros. Después voy a seleccionar elementos de
sección. Para alinear los elementos, voy a usar CSS, libro de
lino, necesitamos mostrar Lino Entonces tenemos que
centrar los elementos. Me refiero a los contenidos. Para ello, necesitamos justificar el
centro de contenido y alinear los elementos. En realidad, necesitamos
unas líneas de pedido Además, voy a crear el
espacio dentro de la sección. Vamos a colocar el relleno a 15 m en los lados superior e inferior y cero en los lados izquierdo
y derecho. Bien, después de eso, voy
a alinear los libros para eso. Sigamos adelante y seleccionemos la
sección del libro seguido de la lista de libros. Voy a establecer el ancho al 80% entonces voy a
usar de nuevo flex book. Necesitamos display Flex. Entonces voy a colocar el conflicto en el centro
utilizando centro conf justificado Para colocar los
libros en diferentes líneas, necesitamos usar una de
las propiedades de Flexbox
llamada flex wrap con valor p. Muy bien,
así como puedes ver, así como puedes ver, los nueve libros se colocan muy bien en realidad con la página de
libros, ya terminamos El pie de página se ve bien. Ahora tenemos que seguir
adelante y crear la siguiente página de nuestro proyecto. La siguiente página va
a ser página testimonial, donde crearemos este deslizador agradable
y genial para eso Pasemos a
la siguiente conferencia.
23. Página de creación de marcado HTML para testimonios: Bien, en la
última conferencia
terminamos de trabajar
en la página de libros. Como dije, ahora
tenemos que seguir adelante y comenzar a crear la siguiente
página de nuestro proyecto. Esta página va a ser
la página de testimonios. Aquí tenemos la página de
testimonios. Tenemos aquí el
encabezado estándar con imagen de fondo, y luego puedes
ver aquí el control deslizante de los testimonios del cliente. Tenemos aquí dos controles, flechas
izquierda y derecha. Si hacemos clic en ellos, entonces el control deslizante funcionará. Además de eso, tenemos
abajo los puntos de los controles, podemos gestionar jugando
el slider desde aquí. En esta sección vamos
a crear todas esas cosas. En primer lugar, tenemos que crear la página y luego
encargarnos del marcado HTML Vamos al código VS y creamos nuevos archivos para la página
testimonial, necesitamos testimonial Html, y luego voy a
crear testimonios CSS Voy a mover
el archivo HTM
al lado izquierdo. Vamos a abrirlo. ¿Bien? Voy a agarrar las cosas del archivo HTML del punto de
libros. Voy a copiar todo el
contenido y pegarlo aquí. Voy a hacer
aquí algunos cambios. Cerremos este panel. Voy a cambiar el nombre del archivo CSS
en el elemento link. Va a ser
testimonios CSS. Entonces voy a cambiar el nombre
de clase del elemento header. Va a ser encabezado de
testimonios. Entonces necesitamos cambiar el contenido de los elementos del
encabezado. Aquí necesitamos clientes. Entonces el segundo
rubro va a ser lo que digan los clientes. Entonces me voy a
deshacer de esta sección de aquí y dejar el pie. Cambiemos el nombre
de clase del elemento footer. Van a ser testimonios de
pies. Además de eso, voy a ir
al archivo HTML índice y encontrar aquí la sección
testimonial. Como recuerdas, tenemos botones
principales en la sección
testimonial Y debemos insertar
aquí testimonios HTML, porque una vez que hacemos clic en el
botón en la página principal, quiero decir en la sección
testimonial, entonces deberíamos navegar
hasta la página testimonial. Bien, aquí tenemos el
encabezado y el pie de página. Ahora tenemos que crear una nueva sección en el
archivo HTML de testimonios justo después del encabezado. Voy a entrar en nuevos
comentarios para testimonios. Entonces voy a
abrir elementos de sección con la sección
testimonial de nombre de clase Dentro de ese elemento, voy a crear desarrollos con el nombre de clase ttmonials top incluirá dos encabezados
y también Voy a abrir H
tres elementos de encabezado con el texto de nuestros clientes. Entonces voy a crear H uno elementos de encabezado y el texto va
a ser testimonial. Entonces necesitamos estrellas. Voy a abrir etiqueta con
el nombre de la clase estrellas. Entonces voy a insertar aquí cinco fonoíconos con los que
necesitamos elementos La clase es un sólido una estrella, tendremos cinco estrellas. Entonces voy a duplicar
esta línea de código cuatro veces. Entonces sigamos adelante
y revisemos el navegador. Como pueden ver, tenemos aquí los encabezamientos seguidos
por las estrellas A continuación, voy a crear desarrollos y va
a ser envoltorio testyules Dentro del envoltorio,
voy a crear el slider en el que voy
a crear la diapositiva misma. En general, vamos a
tener cinco diapositivas, pero por ahora voy a
crear una diapositiva porque tenemos que darle estilo a la diapositiva y luego tenemos que hacer que
el slider funcione. Agregaremos las
diapositivas restantes un poco más tarde. Voy a insertar aquí, fondo de
diapositivas,
quiero decir, diapositiva BG. Va a ser
un elemento vacío. Después después de un ligero trasfondo, voy a crear un nuevo
desarrollo con el nombre de la clase, contenido de
diapositivas en el que
voy a insertar dos elementos. Me refiero a la ómica telefónica
que necesitamos yo elemento con las clases FA sólido a la izquierda. Entonces voy a duplicar
esta línea de código y cambiar el nombre de clase
que necesitamos aquí, ¿verdad? Vamos a revisar el navegador. Como pueden ver,
tenemos aquí dos citas. A continuación, voy a
encargarme de la imagen de la diapositiva. Voy a insertar
tu desarrollo con el nombre
de la clase dentro
del desarrollo. Vamos a abrir imagen.
Voy a seleccionar la imagen de la carpeta de imágenes y va a ser cliente uno. Después de eso, voy a crear
otro desarrollo con el nombre de la clase slide text en el que necesitamos H
tres elemento de encabezado. Va a ser la mejor biblioteca. Entonces después de H tres elemento
encabezado, voy a abrir el párrafo
en el que voy a
insertar algún texto ficticio Usemos Lorum 20. Aquí tenemos algún texto ficticio. Después del párrafo, necesitamos
crear otro párrafo. Y debería tener el nombre
de clase cliente. Voy a insertar tu
nombre del cliente. Digamos Bob Smith y
luego los 20 años. Bien. Después del párrafo, voy a
encargarme de los controles. Quiero decir, las flechas en los
lados izquierdo y derecho del deslizador. Me refiero a esas flechas. Sigamos adelante y
abramos desarrollos con
los controles de nombre de clase
dentro del desarrollo. Voy a abrir elemento
con la clase A sólido
Una flecha a la izquierda y luego
necesitamos flecha derecha. Vamos a ver los resultados aquí. Tenemos las flechas
izquierda y derecha. Después de eso, voy
a crear desarrollo. Va a ser
envoltorio para los puntos. Vamos a agregarle puntos de nombre de clase. Dentro de los puntos, voy
a crear spanlments, que va a ser
un elemento vacío Vamos a duplicarlo cuatro veces, porque en general
tendremos cinco puntos. Bien, eso es todo sobre
el marcado HTML por ahora. Como dije, agregaremos las diapositivas
restantes un poco
más tarde una vez que nos encarguemos
de trabajar el deslizador. O sea, cuando añadimos el
Javascript a esta parte aquí, tenemos todos los elementos.
Deberíamos estilizarlos. En realidad, los puntos no
son visibles porque tenemos aquí solo
los elementos span vacíos. Nos encargaremos de
eso un poco más tarde. Bien, como dije, tenemos que darle estilo a esos elementos. Y para eso, pasemos
a la siguiente conferencia.
24. Página de testimonios de estilo: Bien, en la
conferencia anterior creamos el marcado HTML para
la página de testimonios Y ahora tenemos que darle
estilo al deslizador. Y también tenemos que
encargarnos del encabezado. Entonces después de eso
haremos que el deslizador funcione. Bien,
vamos al código VS, y en los testimonios
del archivo CSS, voy a insertar nuevos
comentarios para encabezado. Después voy a seleccionar encabezado
testimonial y
cambiar de fondo Voy a usar la función de
gradiente lineal. Con valor RGBA
necesitamos 3033 veces y la opacidad 0.9 A continuación necesitamos otro valor RGBA
con los mismos números, pero la opacidad va
a ser 0.7 Después de eso, voy a seleccionar imagen Va a ser PG testimonial. Entonces voy a definir la
posición del fondo. Establezcamos la posición en 50% para el eje
x y 40% para el eje Y. Entonces no necesitamos repetir. Bien, entonces aquí tenemos la imagen de fondo
para el encabezado. A continuación tenemos que encargarnos de la sección testimonial,
me refiero al deslizador Entonces sigamos adelante e insertemos aquí, comentarios para testimonios. Entonces voy a seleccionar la sección
testimonial. Y definido dentro de las alturas, el ancho va a ser del
100% En cuanto a la altura, voy a hacer que sea
140 altura de viewport Me refiero a un 40% de la ventanilla. Y luego voy a cambiar
el color de fondo. Va a ser 191919. Todo bien. Las alturas
internas se aplican al elemento y también se cambia el
color de fondo. A continuación, voy a encargarme
del top testimonial. Me refiero a este elemento aquí, incluye los encabezamientos
y también las estrellas Así que sigamos adelante y
seleccionemos la parte superior testimonial. En primer lugar,
voy a definir la posición va
a ser absoluta. Entonces voy a agregar
aquí posición relativa. Porque vamos a posicionar el elemento de
acuerdo con los elementos padre. Necesitamos aquí posición relativa. Entonces voy a definir propiedades
superiores e izquierdas. La posición superior va a ser 10% En cuanto a la posición izquierda, voy al 30 50% Entonces
necesitamos transformar traducir la función x con valor -50% porque vamos
a centrar los elementos Echemos un
vistazo al proyecto. Aquí tenemos el encabezado, los encabezamientos y las estrellas A continuación tenemos que colocar esos elementos verticalmente
en la columna. Para eso voy
a usar flex box. Usemos display flex. La voy a usar la columna de dirección
flex y luego vamos a alinear los elementos en el centro. Echemos un
vistazo al proyecto. Entonces como se puede ver, los encabezamientos y las estrellas se colocan verticalmente en la columna A continuación voy a tomar aquí
del primer encabezamiento que es
H tres elemento de encabezamiento. Sigamos adelante y seleccionemos
Testimonial top tres. Vamos a establecer el
tamaño del teléfono en dos Ram. Entonces el peso del teléfono
va a ser de 300. Y también voy a
cambiar el color a 72 C C. El primer encabezamiento está alicatado. A continuación, voy a
encargarme del segundo rubro. Sigamos adelante y
dupliquemos este código. Voy a cambiar el
selector que necesitamos aquí,
H, un elemento de encabezado. El tamaño de la fuente
va a ser cinco Ram. Entonces voy a establecer el peso de la
fuente a 300. A continuación necesitamos color, va a ser blanco. Entonces voy a transformar
texto a mayúsculas. También crea algo de espacio
entre las letras usando espaciado entre letras, 0.4 Ram. Entonces voy a crear
algo de espacio usando margen. Voy a establecer
margen a dos m en los lados superior e inferior y cero en los lados izquierdo
y derecho. Bien, el segundo
encabezado está personalizado. A continuación voy a
cuidar de las estrellas. Estoy en los iconos del teléfono. Así que sigamos adelante y
seleccionemos Testimonial Top, seguido del elemento Voy a establecer el
tamaño del teléfono en 1.6 Ram. Entonces el color va a
ser color azul, quiero decir 320e. Entonces necesitamos margen
para crear algo de espacio en los
lados izquierdo y derecho de las estrellas. Voy a poner margen
a cero y 0.5 Ram. Eso es. Los rubros
y también los fonomicanos Las estrellas están personalizadas. Siguiente Voy a cuidar
la imagen porque ahora es
demasiado grande. Sigamos adelante y seleccionemos diapositiva G. Voy a
establecer dentro de la altura. El ancho va a ser 15. Entonces voy a cambiar
la altura establecida a 16. Entonces necesitamos aplicar la
altura dentro al
elemento de imagen en sí. Necesitamos una imagen de diapositiva
seguida del elemento image. Vamos a establecer con la altura, ambas al 100% Entonces necesitamos ajustar la imagen
usando la cubierta de ajuste a objetos. Podemos ver que la imagen
se hizo más pequeña. A continuación, voy a
encargarme de los controles. Estoy en flechas izquierda y derecha. Estoy en esas flechas. Sigamos adelante y
seleccionemos los controles. I. voy a definir
con y alturas. Vamos a ponerlos a cinco. Entonces voy a cambiar
el color de fondo. Va a ser 78584. Hagamos los elementos
a su alrededor usando radio de
borde 50%
Echemos un vistazo al proyecto. Aquí tenemos los círculos. Voy a disminuir
la opacidad, va a ser 0.6
Entonces voy a colocar las flechas en
el centro
de esos círculos Para eso necesitamos mostrar con centro de contenido justificado
y un centro de líneas de artículos. Ahora como vemos, las flechas se colocan en el
centro de los círculos. A continuación, sigamos adelante y
cambiemos el tamaño de la fuente. Voy a
hacerlo tres m. entonces necesitamos color con
el valor de 444. Como puedes ver, las
flechas son más grandes. A continuación, voy a cambiar la
posición de los controles. Fijemos la posición a absoluta. Entonces los voy a colocar
en el centro verticalmente. Para eso necesitamos que la posición
superior sea 50% Y luego voy a usar transform translate y con el
valor -50% Como puedes ver, se
colocan en el
centro de la sección, en el centro verticalmente Ahora tenemos que definir las posiciones por separado
para cada flecha. Sigamos adelante y seleccionemos
controles con selector infantil. Necesitamos aquí
selector hijo con valor uno. Vamos a establecer la posición izquierda en 15% Entonces voy a duplicar
este código que necesitamos aquí, hijo dos en lugar
de posición izquierda, voy a usar la posición derecha. Bien, así como pueden ver, las flechas se colocan
y posicionan a continuación, voy a encargarme de los
puntos, esos elementos de aquí. Como recuerdas, creamos elementos span
vacíos. Sigamos adelante y seleccionemos puntos, los elementos padre,
me refiero al envoltorio. Fijemos la posición a absoluta. Entonces necesitamos que la
posición inferior sea 15% entonces necesitamos
centrar los puntos para eso, voy a usar la
posición izquierda 50% y luego necesitamos
transformar traducir x -50% En este momento los
elementos no son visibles, pero nos encargaremos
de eso en un minuto Vamos a seleccionar puntos span. Vamos a establecer dentro de
la altura a un Rm. Entonces voy a cambiar
el color de fondo. Va a ser C. Echemos un
vistazo al proyecto. Como puede ver, los
elementos span no son visibles. Voy a solucionar ese
problema usando flex books. Vamos a configurar la pantalla para flexionar. Una vez que defina la propiedad de
visualización, entonces los elementos
serán visibles. Vamos a alinearlos en el centro. Ahora deberíamos ver
los elementos span. Tenemos aquí cinco elementos span. Hagámoslos redondeados
usando radio de borde 50% Y también creamos
algo de espacio entre ellos usando margen 0.5 Ram. Ahora como pueden ver,
tenemos aquí cinco puntos. A continuación voy a
cambiar el cursor. Hagámoslo puntero. Por último, voy a
hacer activo uno de ellos. O sea, si le echas un
vistazo al proyecto terminado, como puedes ver el punto
único está activo. Voy a agregar clase activa
al primer elemento fino. Después voy a seleccionar puntos, elementos de
giro
seguidos de la clase activa. Vamos a establecer dentro de la altura a 1.5 Ram y cambiar el
color, hacerlo blanco. Bien, entonces el
primer elemento spin pensamiento está activo. Siguiente Voy a
encargarme del slider, me refiero al envoltorio testimonial. Así que sigamos adelante y
seleccionemos el envoltorio testimonial
justo después de testimonial top. En realidad, vamos a comprobar
el elemento HTML. Eso es correcto, tenemos que
seleccionarlo después de la cima, me refiero al top testimonial, definamos con y alturas El ancho va a ser 55% entonces voy a
establecer la altura a 50 Ram. También cambia la posición, pongámosla a absoluta. Entonces necesitamos colocar el envoltorio testimonial en
el centro de la sección Entonces necesitamos definir las propiedades superior
e izquierda. Ambos van a ser del 50% Entonces necesitamos transformarnos
con función de traducir. Y los valores serán -50%
y otra vez -50% Bien, echemos un
vistazo al proyecto El
envoltorio testimonial está centrado, pero se cambian las posiciones de
esas flechas Significa que tenemos un
error en el archivo HTML. Vamos a revisar los controles. Como puede ver, los controles se colocan dentro del envoltorio
testimonioso, y deben colocarse fuera del envoltorio testimonial Agarremos los controles desde aquí e insértelos afuera. Bien, creo que ahora el
problema debería ser arreglado. Como puede ver, los controles
se colocan en sus lugares. A continuación, voy a crear
las diapositivas restantes. En este momento
sólo tenemos una diapositiva. Vamos a duplicarlo cuatro veces porque vamos a
tener cinco diapositivas en general. Voy a cambiar
los detalles rápidamente. La segunda diapositiva es en realidad la imagen para la segunda diapositiva
va a ser clim dos Entonces tenemos aquí a Mary Brown. Dejemos la misma edad. Entonces tenemos aquí clin tres. Va a ser Nick Jones. Cambiemos la H, que sea 27. Entonces tenemos clin cuatro, va a ser Brown Cambiemos la
edad, que sea 22. Y finalmente tenemos aquí clin cinco con el nombre de John Smith 25 Así que tienes las cinco diapositivas. A continuación voy a seleccionar deslizador
y definir dentro de la altura. Voy a establecer con 500%
Eso es por la altura, va a ser 100%
Entonces voy a colocar los toboganes
uno al lado del otro horizontalmente Para eso, voy
a usar Display Flex. Como puede ver, las diapositivas
se colocan una al lado de la otra. Voy a añadir borde al envoltorio
testimonial para
poder ver claramente
lo que está pasando aquí Necesitamos aquí 0.1 Ram sólido, y el color va a ser blanco. Aquí tenemos el
envoltorio de testimonios, y cada diapositiva debe
colocarse dentro de la envoltura. Para hacer eso,
voy a definir el ancho de
la diapositiva como 20% Como ves, definimos ancho para el
deslizador y lo hicimos 500% Una vez el ancho de la
diapositiva es 20% entonces ocupará una
quinta parte del deslizador Ahora como puedes ver
dentro de la caja, solo
tenemos una diapositiva. A continuación voy a seleccionar ligero fondo
y personalizarlo. Necesitamos ancho, va a ser 70% entonces voy
a definir altura. Hagámoslo 65% Siguiente Voy a cambiar
el color de fondo. Usemos el color RGBA. El primer valor
va a ser 50. Entonces tendremos 176. Entonces el siguiente
va a ser el 206. Y necesitamos aquí de nuevo la
opacidad 0.5. Entonces aquí tenemos el
fondo de la diapositiva. Definamos su posición. Voy a poner
posición a absoluta. Entonces necesitamos posición
relativa para la diapositiva. Me refiero al elemento padre. Voy a colocar
el fondo en el centro de la diapositiva. Por lo tanto, necesitamos
aquí posicionar
50% luego a la izquierda
posición 50% y también transformar con función de
traducir -50% nuevamente -50% Como puedes ver, el fondo se coloca en
el centro de la diapositiva En realidad, como ves, el fondo está
ligeramente girado. Por lo tanto voy a agregar
aquí rotar la función Z, y el valor va
a ser menos seis grados. Ahora se gira
el fondo de la diapositiva. Voy a hacer
las esquinas redondeadas. Necesitamos aquí radio de borde
con el valor dos Ram. Además, voy a
disminuir la opacidad. Vamos a configurarlo 2.7 Bien, veamos sobre el
ligero fondo. A continuación voy a encargarme
del ligero contenido, decir, este elemento blanco de aquí. Así que sigamos adelante y
seleccionemos contenidos leves. En realidad, voy a
agarrar los estilos de aquí. Necesitamos algunos estilos similares
para el contenido de la diapositiva. La altura de la madera
será similar. A continuación, voy a cambiar
el color de fondo. Usemos EE. Entonces necesitamos posición absoluta. Y necesitamos
censurar el elemento, pero sin la rotación Así que vamos a deshacernos de la función
rotar Z. Vamos a revisar el navegador
tenemos aquí el contenido de la diapositiva. No necesitamos opacidad
para el contenido de las diapositivas. Además, voy a alinear
elementos usando la caja Flex. Voy a agregar
aquí Display Flex. Entonces necesitamos crear
algún espacio entre los elementos flex usando justify
content, espacio entre. Y luego voy a
alinear elementos en el centro. Como puede ver, los elementos
flexibles están alineados. A continuación, voy a
crear algo de espacio dentro del contenido de
la diapositiva usando relleno. Va a ser cero en los lados superior e inferior y cinco carnero en los lados izquierdo
y derecho. Bien, eso se sienta sobre
el contenido de la diapositiva. A continuación voy a
encargarme de esos. Voy a seleccionar diapositiva
seguida de los elementos. Voy a aumentar
el tamaño del teléfono
, van a ser 12 Ram. Después cambia el color
usado aquí. Color azul. También, necesitamos definir
la posición para la, digamos posición a absoluta. Voy a definir posiciones
para cada uno por separado. Voy a seleccionar la diapositiva
I con selector infantil. Necesitamos el primer icono. Vamos a establecer la posición superior a -20% Entonces necesitamos la posición izquierda Va a ser 10%
voy a duplicar este código. Necesitamos lo mismo para
el segundo icono también. Vamos
a poner la posición inferior en -30% y en lugar
de la posición izquierda, voy a usar
la posición correcta El valor será el mismo, 10% Bien, las cotizaciones se colocan muy bien y luego voy
a cuidar la imagen. La imagen ya
tiene algunos estilos. Quiero decir, el
desarrollo de envolturas, cambiemos. Voy a establecer el
ancho en 35% entonces voy a crear algo de espacio en el
lado derecho de la diapositiva. Mg, pongamos margen
derecho a tres Ram. Bien, después de eso
voy a cuidar
la propia imagen. Agreguemos aquí un par
de estilos diferentes. Voy a hacer imagen redondeada. Usemos radio de borde. Tenemos que hacer la imagen redondeada
pero no en los cuatro lados. Voy a establecer el radio
del borde a tres en la esquina superior izquierda. Entonces necesitamos cero en
la esquina superior derecha, necesitamos tres en la esquina
inferior derecha y cero en la esquina inferior
izquierda. Bien, así que toda la imagen
se ve bastante bien. A continuación voy a
hacerlo en blanco y negro. Usando la misma técnica cuando filtra la función de gran escala con el valor 100% Vamos a
poner el cursor a puntero. Ahora vamos a crear el hecho hover. Voy a seleccionar la imagen de la
diapositiva seguida de los elementos de
imagen con hover Vamos a establecer el filtro a
escala de grises con el valor de cero. Y también necesitamos aquí transición con filtro
con una duración de 1 segundo. Bien, sentémonos
sobre la imagen siguiente. Tenemos que crear los
bordes alrededor de la imagen. Para eso, voy a usar elementos
después y antes. Seleccionemos la diapositiva IMG, seguida de los elementos Entonces necesitamos antes
elemento también, porque esos elementos
tendrán algunos archivos comunes. En primer lugar, voy
a definir el contenido. Va a estar vacío. Entonces necesitamos dentro de altura, ambos iguales al 100% Entonces voy a
establecer posición a absoluta. Necesitamos posición relativa
para los elementos padres. A continuación voy a poner
borde 2.2 Ram sólido, y el color
va a ser RGBA Necesitamos color negro
con la opacidad 0.4 Aquí tenemos los bordes A continuación voy a
hacer el redondeado. Necesitamos el mismo radio fronterizo, que usamos para las imágenes. Ahora tenemos que
definir las posiciones para esos elementos por separado. Sigamos adelante y corp
tras elemento de aquí la posición dos
va a ser menos uno Ram. Pero entonces necesitamos la
posición izquierda -0.5 Ram. Duplicemos este código, cambiemos el selector que necesitamos
aquí antes de los pseudo elementos, necesitamos aquí la
posición inferior con el mismo valor y luego necesitamos volver
a colocar correctamente
con el mismo valor Bien, eso se sienta las imágenes se
ven bastante bien. Como puede ver, los bordes se colocan en la parte superior de la imagen. Tenemos que colocarlos
detrás de la imagen. Arreglemos ese problema usando propiedad
index con
valor menos uno. Ahora el problema está arreglado y
con las imágenes ya terminamos. A continuación, tenemos que encargarnos
del lado derecho del tobogán. Sigamos adelante y seleccionamos texto de la
diapositiva y definamos ancho como 65% A continuación, voy a seleccionar H
tres elementos de encabezado. Sigamos adelante y seleccionemos texto
ligero seguido de
los tres elementos H. Necesitamos que el tamaño de fuente sea 2.5 Entonces voy a
definir el peso de la fuente. Hagámoslo 300,
cambiemos el color. Voy a hacer el
color uno a uno. Y también crear algo de espacio
en la parte inferior usando margen. Abajo uno Ram. Bien, entonces el rumbo se ve bien. A continuación voy a
encargarme del párrafo. Sigamos adelante y seleccionemos un ligero texto
seguido del elemento. Voy a establecer el tamaño de
fuente en 1.4 Ram. Entonces necesitamos el peso de la fuente. Van a ser 300. Cambiemos el
color del texto. Voy a usar 020 D14. Entonces tenemos que cambiar la altura de
línea del texto. Necesitamos aquí la altura de la línea, vamos a hacerla 1.6 Ram. También crea algo de espacio en
la parte inferior usando margen. Tres inferiores Ram. Y entonces voy a cambiar
el ancho del párrafo. Vamos a ponerlo a 35 de,
bien, entonces el
párrafo se ve bien. A continuación voy a personalizar
el nombre del cliente. Así que sigamos adelante y seleccionemos el texto de la diapositiva
seguido por el cliente. Voy a establecer el tamaño del teléfono a 1.8 y después voy
a cambiar el color. Va a ser 07235. Bien que las diapositivas
sean personalizadas, se ven bastante bonitas. A continuación, tenemos que hacer que el
slider funcione usando Javascript. Antes de pasar a
la siguiente conferencia, voy a sacarla de
esta frontera de aquí, eliminemos esta línea de código. Bien, pasemos
a la siguiente conferencia y
hagamos que el control deslizante funcione.
25. Haz que el deslizador funcione: Bien, en la conferencia
anterior
hemos personalizado el deslizador
testimonial. Hemos estilizado las diapositivas también las flechas y esos
puntos aquí, los controles Ahora tenemos que hacer que
el deslizador funcione. Este deslizador a veces
se llama Rosal. También te puedes encontrar con
este nombre. Echemos un vistazo
al proyecto terminado. Una vez que hagamos clic en las flechas, entonces el deslizador también lo hará, los
puntos correspondientes estarán activos. Y podemos manejar jugando
slider desde aquí también. Bien, entonces vamos a hacer
esas cosas usando Javascript. Pasemos al código VS y
abramos script o archivo JS. Lo primero que
voy a hacer es
agregar aquí los comentarios
para este código. Voy a agregar
aquí navegación. Utilizamos Javascript
para la navegación. Vamos a mover esta línea hacia abajo. Y después voy a añadir nuevos comentarios para
los testimonios. Lo primero que
voy a hacer es seleccionar un par de
variables distintas, me refiero a los elementos. Vamos a crear variable
y llamarlo slider. Voy a seleccionar este
elemento usando document query select from method
y tenemos que especificar el deslizador de nombre de clase. Voy a duplicar esta
línea de código tres veces. La segunda variable
va a ser diapositivas. Voy a seleccionar todas las diapositivas usando
selector de consultas, todo método. Y tenemos que especificar
aquí la diapositiva de nombre de clase. A continuación, tenemos que
seleccionar las flechas. Me refiero a flechas izquierda y derecha. Llamemos a la
variable flecha izquierda. Entonces voy a especificar
aquí los controles de nombre de clase. Entonces necesitamos seleccionar elementos. Necesitamos aquí el selector de chat. La flecha izquierda es
el primer elemento. Especificemos aquí
el número uno. Si echamos un vistazo
al archivo HTML índice, entonces realmente necesitamos aquí archivo HTML
testimonial Aquí tenemos controles. La flecha izquierda es el primer
elemento dentro de los controles. Deshagámonos de esta línea de código y
dupliquemos esta. Necesitamos flecha derecha. Voy a cambiar el número
del selector nésimo hijo. En este caso,
necesitamos el número dos. Bien, se crean las variables. A continuación, voy a seleccionar
una de las flechas, digamos flecha derecha. Y voy a
agregar un oyente de Emt a la flecha con evento click Además, voy a pasar
aquí la función callback se ejecutará una vez
que
hagamos clic en la flecha derecha Una vez que hagamos clic en la flecha derecha, voy a mover el
deslizador que necesitamos aquí, slider seguido de
esta propiedad de estilo. Entonces voy a usar transform. Entonces necesitamos
traducir la función x. Voy a mover el deslizador
un -20% Vamos
al navegador ahora Una vez que haga clic en la flecha derecha, entonces el control deslizante se
moverá hacia el lado izquierdo En realidad, para poder ver mejor
este movimiento, voy a agregar
transición al deslizador. Vamos a adherir todo
entonces 0.8 segundos. También voy a usar la función
Sir cúbica donde los valores 100.1 Esto hará que el efecto de
movimiento sea mucho más agradable Vamos a hacer clic en la flecha derecha. Como puedes ver, este
deslizador se mueve muy bien. Bien, después de eso voy a crear nueva variable y
va a ser índice de deslizamiento. Vamos a ponerla a cero.
En realidad, esta variable se
utilizará para realizar un seguimiento de la diapositiva actual
que se está mostrando. Comienza en cero e
indica la primera diapositiva. Bien, ahora voy a
duplicar este código. Cambiemos la variable
cuando escuches a la izquierda. Entonces voy a agregar aquí diapositiva igual a índice de
deslizamiento menos uno. En este caso, decrementamos la variable de índice de diapositivas en
uno
la variable de índice de diapositivas para mover
la diapositiva anterior A continuación, tenemos que actualizar el
estilo del elemento slider, traducirlo horizontalmente
Para mostrar la diapositiva anterior, la cantidad de
traducción se debe determinar multiplicando
el índice de diapositiva
por -20% porque cada diapositiva
ocupa 20% del ancho de los
contenedores, necesitamos aquí
cadenas de plantilla luego traducir x función en la que
voy a insertar diapositiva multiplicado por -20
% En realidad, necesitamos por ciento
fuera del corsé. Vamos a copiar esas dos
líneas, Pégalas aquí. En el caso de la flecha derecha
necesitamos aquí más seno. Vamos al navegador
y hagamos clic en las flechas. Como puedes ver, las diapositivas
mueven todas las diapositivas. Si hacemos clic en ambas flechas, una vez que lleguemos a la última diapositiva y volvamos a
hacer clic en la flecha, el deslizador se moverá. En realidad, no necesitamos
eso. Tenemos que detener el control deslizante una vez que
lleguemos al último ítem, decir, la última
diapositiva en el deslizador. Volvamos al código VS ahora Necesitamos usar declaraciones
condicionales. Voy a definir aquí la condición si el
índice de deslizamiento es mayor que cero, entonces necesitamos operador de curtiduría Ahora tenemos que
interferir índice de deslizamiento menos uno y luego cero otra vez, este es un
operador tenory en Javascript. Evalúa la condición, índice de
deslizamiento es
mayor que cero Si la condición es verdadera, evalúa el
índice de deslizamiento menos uno De lo contrario, se evalúa a cero. Lo mismo que necesitamos para
la flecha derecha también. Si el índice de deslizamiento es menor que la longitud de las
diapositivas menos uno, entonces necesitamos el
índice de deslizamiento más uno. En el segundo caso, necesitamos aquí diapositivas longitud de punto menos uno. Aquí, la longitud de las diapositivas representa el número total de diapositivas. La longitud del punto de la diapositiva menos uno da el índice de
la última diapositiva. Dado que la indexación comienza desde cero, esta línea asegura
que el índice de deslizamiento sea menor que el índice de la última diapositiva antes de
incrementarlo. Si el índice de la diapositiva es menor que
el índice de la última diapositiva, incrementa el índice de la diapositiva una con esta expresión aquí De lo contrario, establece el índice de la diapositiva al índice de la última diapositiva. Bien, vamos al navegador
y verifiquemos los resultados. Vamos a hacer clic en la flecha derecha. Como pueden ver, llegamos
a la última diapositiva, y estoy dando clic en la flecha,
pero el control deslizante no se está reproduciendo. Lo mismo sucederá
para la flecha izquierda. Ahora estoy dando clic en la flecha izquierda, pero las diapositivas no se mueven. Bien, voy a ocultar las
diapositivas fuera del envoltorio. Hagámoslo usando calefacción por
desbordamiento. Ahora están escondidos y
todo funciona bien. Bien, a continuación tenemos que
encargarnos de los puntos. Una vez que hacemos clic en los puntos, debemos mover el deslizador. Además, una vez que hacemos clic en las flechas, necesitamos activar el punto
correspondiente. Vamos al código VS y voy a agregar aquí
dos variables más. El primero va
a ser envoltorio de puntos. Seleccionemos este elemento usando documentos, haga selector de consultas. Y voy a especificar
aquí los puntos de nombre de clase. Duplicemos este código. La segunda variable
va a ser puntos. En este caso,
necesitamos selector de consultas. Todo método voy a
especificar aquí este panelement. Bien, ahora
tenemos que iterar sobre cada elemento de punto en la colección de puntos
usando el método de forraje Voy a agregar aquí hacer forraje. Tenemos que insertar
aquí la función de Calbeck con dos parámetros El primero va a ser punto y luego necesitamos también índice. Ahora tenemos que agregar el evento
click al punto. Voy a adjuntar un oyente par al
punto con el evento click Además, tenemos que insertar su función de devolución de llamada que se
ejecutará una vez que
hagamos clic en el punto Ahora voy a
definir el índice de diapositivas. Y debería ser igual al índice, que usamos aquí
como parámetro. Cuando se hace clic en un punto, esta línea actualiza esta diapositiva en esta variable al
índice del punto en el que se hace clic Esto cambia efectivamente
la diapositiva actual a la correspondiente
al punto en el que se hace clic Entonces tenemos que eliminar
la clase activa del punto que
anteriormente estaba activa. Tenemos que seleccionar el punto
con la clase activa. Voy a usar el selector de consultas de
documentos. Tenemos que especificar aquí puntos
seguidos del activo. En realidad necesitamos aquí
punto, luego clase activa. Tenemos que eliminar la
clase activa de su lista de clases. Necesitamos aquí lista de clases
seguida del método remove. Y tenemos que especificar aquí
el nombre de la clase activa. ¿Bien? Después de eso, voy
a mover el deslizador, así que tenemos que adherir esta línea. Bien, vamos al
navegador. Haga clic en los puntos. En realidad, necesitamos
agregar aquí una línea más. Una vez que eliminamos la clase activa
de los puntos activos, entonces debemos agregar la clase
activa al clicked ¿Necesitamos aquí agregar método? Voy a especificar aquí
el nombre de la clase activa. Bien, entonces ahora el
punto debería funcionar. Como puedes ver, una vez que hagamos clic, el deslizador se moverá y también el
punto correspondiente estará activo. Bien, así que
todo funciona bien. A continuación, tenemos que encargarnos de la una vez que hacemos clic en las flechas. Una vez que hacemos clic en las flechas
y movemos el deslizador, entonces el
punto correspondiente debería estar activo. Volvamos al código VS. Voy a agregar aquí para
ambas flechas lo siguiente. Necesitamos envoltura de puntos,
luego propiedad de niños. Y tenemos que especificar aquí
el índice como índice de diapositivas. Y tenemos que agregar
a la lista de clases. En realidad necesitamos aquí puntos, luego agregamos método y
tenemos que especificar aquí
el nombre de la clase activa. Entonces, en este caso, children
es propiedad de dot wrapper y
representa una colección de todos los elementos hijos
dentro de la envoltura de puntos. Entonces tenemos aquí el
índice de diapositivas y se usa para
acceder a un
elemento hijo específico dentro de la envoltura de puntos. Cada punto de navegación debe corresponder a una
diapositiva en el control deslizante, y el índice de diapositiva
representa el índice de la diapositiva actualmente activa. Entonces estamos agregando clase
activa a la activa, me refiero al punto correspondiente. ¿Bien? Ahora voy a agregar
esta línea para ambas flechas. Vamos al navegador
y comprobemos el resultado. En realidad, tenemos que hacer
clic en las flechas. Como puede ver, una vez que hacemos clic en las flechas
y movemos el deslizador, entonces los
puntos correspondientes se vuelven activos. Todo funciona a la perfección. Bien. Antes de
terminar esta conferencia, voy a
reorganizar el código Voy a crear función, llamémoslo set index. Entonces voy a
agarrar esas dos líneas, porque estamos usando esas
dos líneas por todas partes. Voy a agregar
esas dos líneas aquí. En lugar de ellos, voy a llamar
a la función index. Vamos a eliminar agregar aquí establecer índice, y hacer lo mismo para la flecha
derecha también. Elimine esas dos líneas y
llame al índice del conjunto de funciones. Bien, ahora nuestro código está más limpio con solo
agregar una función. Y tenemos aquí lo mismo. Algo anda mal. En realidad, deberíamos agarrar solo dos líneas, esas dos líneas aquí, y agarramos esta línea también. Entonces ahora todo debería funcionar. Como puedes ver, este
deslizador funciona perfectamente. Bien, así que sentémonos
con la página testimonial. En realidad, podemos decir que
el proyecto está casi terminado. Hemos creado todas las
secciones, todas las páginas, y ahora tenemos que hacer que el proyecto sea sensible
a diferentes crisis Para eso, pasemos
a la siguiente conferencia.
26. Haz que el proyecto sea receptivo - Parte 1: Bien, en la conferencia
anterior terminamos de construir
nuestros proyectos. Es decir, hemos creado todas las secciones de la
página principal. Y además hemos creado, instalado todas las páginas
de nuestro proyecto web. En esta conferencia, como dije, voy a empezar a hacer que
nuestro proyecto sea sensible a diferentes tamaños de pantalla
y dispositivos receptivos. El diseño web es súper importante
en el desarrollo web
porque asegura que los sitios web funcionen bien en todo tipo de dispositivos
y tamaños de pantalla. Tantos gadgets diferentes
como teléfonos inteligentes y tabletas, diseño web
receptivo ayuda a sitios web se vean bien y sean
fáciles de usar en todas partes. Ahorra tiempo y esfuerzo
al evitar la necesidad diseños separados
para cada dispositivo. Además, los motores de búsqueda como Google prefieren sitios web que
sean compatibles con dispositivos móviles. El diseño web responsivo puede
aumentar la visibilidad de un sitio. En términos simples, el diseño web
responsive es imprescindible en el
desarrollo web para
garantizar que los sitios web se mantengan
fáciles de usar y efectivos en la amplia gama
de dispositivos que las personas usan hoy en día. En mis proyectos web, he hecho que sea una prioridad
hacer que el sitio web se vea
increíble en varios dispositivos. Estamos hablando de grandes pantallas de
escritorio, como 1920 píxeles de
ancho y 1080 píxeles de alto y 1,600 píxeles de ancho y 900
píxeles de alto Así como los ligeramente
más pequeños como 14, 40 píxeles de ancho y
900 píxeles de alto, 13 66 píxeles de ancho, 768 píxeles de alto, y 12 80 píxeles y 780 píxeles. Para tabletas, tengo 82000
píxeles y 11 80 píxeles, y también 768 píxeles
y 1024 píxeles Y claro, para los
amantes de navegar
en sus teléfonos, he optimizado esos tres puntos de
quiebre aquí. Todo bien. Entonces he agregado esos
puntos de quiebre a mi modo responsive. Como pueden ver, aquí
tenemos pantallas,
que es para pantallas de escritorio, me refiero a los seis puntos de interrupción Entonces tenemos dos
puntos de interrupción para tabletas y tres puntos de interrupción
para teléfonos móviles Al hacer esto, me estoy
asegurando de que no importa cómo alguien
acceda al sitio, ya sea en una
computadora, tableta o teléfono móvil, la experiencia es fluida y se ve genial. Este enfoque es esencial hoy en día porque la gente usa
todo tipo de dispositivos, y quiero que todos tengan un
tiempo positivo y fácil de usar en mi sitio web. El diseño web responsivo
no es solo un término elegante. Se trata de hacer las cosas fáciles y agradables para todos, sin importar qué gadget
estén usando. Bien, voy
a inspeccionar la página. Seleccione el primer punto de ruptura, que es la pantalla 21600 píxeles de ancho y
900 píxeles de alto Entonces voy a
revisar el proyecto. Casi todo se ve bien excepto el pie de página en
la landing page principal. Ahora voy a
abrir el archivo CSS de estilo, y luego voy a desplazarme hacia abajo e insertar nuevos comentarios
para el diseño web responsive. A continuación, voy a
crear media query CSS, donde voy a definir el ancho
máximo y
va a ser de 1,600 píxeles Voy a cambiar el ancho de la entrada
en el grupo de entrada en, sigamos adelante y
seleccionemos
grupo de entrada seguido de
los elementos de entrada. Voy a poner
ancho a 31, rampa. Volvamos al navegador. Entonces como puedes ver, el
pie de página se ve bien. En realidad con la landing page
principal, terminamos aquí porque
todo se ve bien. Sigamos adelante y
revisemos otras páginas que tenemos aquí sobre la página. En realidad, las características sobre la
página no se ven del todo bien. Voy a personalizarlos. En cuanto al resto de los
elementos, se ven bien. Voy a abrir sobre el archivo CSS que está
cerrado este archivo por ahora. Entonces voy a insertar tus nuevos comentarios
para el modo responsive. Entonces voy a
crear media query con ancho máximo de 1,600 pixeles Entonces voy a seleccionar
acerca de las características de la página. Vamos a establecer con al 70%
Ahora se ven bien. En realidad, con una página de bonificación, terminamos. Todo
se ve bien. A continuación, sigamos adelante
y revisemos la página de libros. Se ve bien, pero quiero cambiar aquí una cosita. Sigamos adelante y abramos libros. Archivo css y crear nuevos
comentarios para el modo responsive. Después vuelve a crear
media query con maxwith de 1,600 pixeles Sigamos adelante y seleccionemos
libro y cambiemos el margen. Ahora mismo tenemos margen igual a seis Ram
en los cuatro lados. Voy a hacer el margen seis en los lados superior e inferior y tres en los lados izquierdo
y derecho. Ahora creo que tenemos resultados
ligeramente mejores. La página de libros se ve bien. Sigamos adelante y revisemos
la página de testimonios. Creo que en el
testimonio en la página, todo se ve genial con este punto de quiebre, ya terminamos. A continuación, tenemos que
hacer que nuestro proyecto receptivo sobre el
siguiente punto de interrupción, que en este caso es de 14, 40 pis de ancho y 900
piss de altura Pasemos a
la siguiente conferencia.
27. Parte 2: En la última conferencia,
comenzamos a hacer que nuestro proyecto respondiera en diferentes
tamaños de pantalla y dispositivos. Hemos realizado algunos cambios
en el primer punto de interrupción, que fue de 1,600 píxeles de ancho
y 900 píxeles de alto A continuación, tenemos que hacer que nuestro proyecto sea receptivo
en ese punto de interrupción Me refiero a 14, 40 pixeles de ancho
y 900 pixeles de alto. Sigamos adelante y
cambiemos el punto de interrupción. Voy a seleccionar esta. Sigamos adelante y
revisemos la página. Como puedes ver, tenemos que
hacer algunos cambios en las diapositivas. Sigamos adelante y abramos
el estilo del archivo CSS y luego
creamos una nueva consulta de medios CSS. Voy a especificar el
ancho máximo como 14, 40 píxeles. Lo primero que
voy a hacer es disminuir el tamaño del teléfono
del elemento HTML. Nos permitirá disminuir
el tamaño de todos los
elementos de la página. Así que sigamos adelante y seleccionemos HTML y luego disminuyamos
el tamaño de fuente. Voy a hacerlo 58% Bien,
Sigamos adelante y
comprobemos los resultados. Todo se ve bien. En realidad, voy
a encargarme de la sección de libros porque
no quiero este hecho aquí. Es decir, no quiero que el libro esté cubierto
por el icono principal. En realidad, vamos a comprobar
el punto de interrupción anterior. Tenemos aquí el mismo problema. Por lo tanto, voy a añadir aquí en el
punto de ruptura anterior lo siguiente. Necesitamos libro. Voy a
cambiar el margen. Pongamos el margen a seis
Ram en la parte superior e inferior y tres M en los lados
izquierdo y derecho. Vamos a revisar los resultados ahora. Se ve bien. Vamos
al siguiente punto de quiebre. Ya no tenemos
aquí este problema. Bien, creo que
podemos personalizar los
comentarios del cliente. Voy a cambiar
el estilo por defecto. adelante y seleccionemos pero busquemos comentarios
como recuerdes, definimos dentro de la
altura por defecto. En realidad, creo que
podríamos omitir las dos propiedades. O sea, podemos comentarlos y
revisar los resultados. Ahora, como pueden
ver, tenemos aquí un ligero cambio y creo que
se ve mucho mejor. Fue un pequeño
error de mi parte, así que me voy a deshacer de
esas dos líneas de aquí. Ya no los necesitamos. Todo bien. Creo que
la página principal se ve bien. Sigamos adelante y
revisemos otras páginas. Voy a ir a
la página acerca de. Como pueden ver, tenemos
aquí el mismo problema. El icono de menú cubre el encabezado. Tenemos el mismo problema
aquí para el pie de página, el encabezado del pie de página. Vamos al archivo acerca de SS y creamos
nueva consulta de medios CSS. Voy a poner marcas
con 14 40 vehículos. Después voy a seleccionar
sobre encabezado de sección y mover el encabezado usando
transform translate. Voy a traducir al 60% esto
va
a ser para el eje x
y 50% para el eje Y. Me refiero a las direcciones horizontal y
vertical, ¿de acuerdo? Entonces el problema está arreglado. En realidad, voy a revisar la página acerca de y el punto de interrupción
anterior Como pueden ver, tenemos
aquí el mismo problema. Voy a añadir
aquí lo siguiente. Seleccionemos el pie de página sobre
seguido del encabezado del pie de página. Entonces voy a
mover el encabezado hacia
el lado izquierdo usando
transform translate x, voy a fijarlo a 60% Ahora el problema está arreglado en ese punto de interrupción si verificamos el proyecto
en el siguiente punto de interrupción Entonces como pueden ver, se
ve bastante bien. Bien, creo que con
la página acerca de estamos abajo. Sigamos adelante y
revisemos la página siguiente, que es la página de libros. Todo se ve bien. Vamos a
revisar la página testimonial. Como puedes ver, también se
ve bien. Bien, entonces creo que con este
punto de ruptura ya terminamos Voy a comprobar
este punto de ruptura. El siguiente es de 13, 66 píxeles de ancho y
768 píxeles de alto. Voy a seleccionar la pantalla
cuatro con esas dimensiones. Sigamos adelante y
revisemos la página. Entonces tenemos que hacer
aquí algunos cambios. Vamos a seguir adelante y abrir el archivo CSS
estilo y crear nueva consulta de medios CSS. Voy a definir el ancho máximo, va a ser de 13 68 pixeles. Lo primero que
voy a hacer es volver
a disminuir HTML, el tamaño del teléfono
del elemento HTML. Voy a seleccionar HTML, y vamos a establecer el tamaño del teléfono 55% Y luego verificar los resultados. Ahora tenemos resultados mucho mejores. Lo único que
voy a hacer es bajar
un poco la pancarta. Sigamos adelante y seleccionemos Banner Y ajuste la
posición inferior a 25 Ram. Bien, entonces voy
a aumentar la altura de la
página de testimonios. Un poquito. Sigamos adelante y
seleccionemos testimonios. Es decir, la
sección testimonial y la sección de página. Vamos a establecer la altura a
170, ver la altura. Bien. Entonces creo que eso es todo. Todo se ve bien. Sigamos adelante y revisemos otras páginas. Voy a comprobar que
todo se ve bien. A continuación tenemos página de libros. También se ve bien. Vamos a revisar la página de no contacto,
sino testimonios. Creo que
aquí no necesitamos ningún cambio. Podemos decir que con este punto de
quiebre ya terminamos. Sigamos adelante y verifíquelo. A continuación tenemos este break, 0.12 80 pixeles y 780 pixeles Voy a seleccionar la pantalla cinco. Sigamos adelante y verifiquemos. Bien, necesitamos algunos cambios. Voy a crear nueva consulta de medios
CSS con Maxwidth de 12, 80 píxeles Voy a personalizar
la sección acerca de. Voy a cambiar el
ancho de ambas partes. Es decir, la parte izquierda
y la parte derecha. Sigamos adelante y seleccionemos
sobre el contenido que queda. El ancho va a ser 45% Entonces voy a
duplicar este código. Cambiemos el nombre de clase que necesitamos aquí sobre el contenido, ¿verdad? El valor de la
propiedad width va a ser 55% ¿bien? Eso es. Siguiente Voy a encargarme de la lista de libros porque aquí
tenemos el mismo problema. El icono del menú cubre los libros. Sigamos adelante y
seleccionemos libros Lista. Cambiar el ancho. Voy a decir 80% Una vez que
cambiemos el ancho, entonces los libros
ya no se colocan en el
centro de la sección. Sigamos adelante y arreglemos
eso usando el margen a. entonces también necesitamos usar Flex box para alinear el
contenido en el centro. Necesitamos Display Flex, luego Justify content center
y Alinear items center. Ahora como puede ver,
el problema está arreglado. En realidad, creo que
podemos envolver los artículos flex. Podemos colocar los libros
en dos líneas para eso. Voy a agregar aquí flex
wrap con el valor p. ahora creo que tenemos mejores resultados con
la sección de libros. Ya terminamos. Pasemos
a la siguiente sección. La
sección testimonial se ve bien. Ahora tenemos que
cuidar el pie. adelante y seleccionemos contenido
del pie con el que
voy a establecer
al 70% Ahora el
contenido del pie de página se ve bien. Y también tenemos que cambiar el ancho del lado
inferior. Voy a seleccionar abajo. Vamos
a establecer el ancho en 70% Bien, así que sentémonos sobre
la página principal. Sigamos adelante y
revisemos la página. Como puede ver, las
características están en mal estado. Tenemos que encargarnos de eso. Sigamos adelante y abramos sobre el archivo CSS y creemos una
nueva consulta de medios C. Necesitamos aquí con igual
a 12, 80 píxeles. Voy a seleccionar
sobre encabezado de sección, voy a moverlo ligeramente hacia el lado izquierdo usando
transform translate. Necesitamos aquí 50% y otra vez 50% A continuación tenemos que llevar
equipo de las características. adelante y seleccionemos sobre Características de la
página y establecer
con dos 80% Bien, entonces creo que todo
se ve bien. En realidad, necesitamos
mover el encabezado del pie de página
hacia el lado izquierdo. Corregamos este
código y agregémoslo aquí. Voy a cambiar el valor
de la expansión de traducir. Vamos a establecerlo en 55% Bien, ahora el problema está arreglado. Sigamos adelante y
revisemos la siguiente sección. O sea, la siguiente página es página de
libros, se ve bien. Entonces tenemos página de testimonios. Bueno, se puede ver que tenemos que
hacer aquí algunos cambios. Sigamos adelante y necesitamos
abrir aquí testimonios.
Veamos este archivo. No escribimos aquí ningún
código para el modo responsive. Vamos a insertar comentarios
responsivos y de responsive. Y luego crear
media query CSS con ancho
máximo igual
a 12, 80 píxeles. Voy a seleccionar el
fondo de la diapositiva y establecer su ancho 80% También necesitamos lo mismo
para el contenido de la diapositiva. Duplicemos este código y agreguemos aquí contenido
en lugar de PG. ¿Bien? Entonces, como puedes ver,
la diapositiva se ve bien, y en realidad todo responde y
está bien. Sentémonos sobre este punto de ruptura. Podemos comprobar este
punto de interrupción aquí, y luego tenemos que seguir adelante y hacer que el
proyecto sea sensible sobre ese punto de interrupción I 1024 píxeles de ancho y 768
píxeles de alto Sigamos adelante y
seleccionemos la pantalla seis. Bueno, podemos ver que necesitamos hacer los
cambios en el punto de interrupción Voy a ir al archivo Style Do CS y crear
nueva consulta de medios CS. Va a ser 1024 pixeles. En primer lugar, voy a disminuir de nuevo el
tamaño de fuente del elemento HDML Sigamos adelante y seleccionamos
HDML y establecemos su tamaño de fuente 52% Siguiente Voy a mover el icono de menú
hacia el lado derecho Así que sigamos adelante y
seleccionemos el icono de menú. Y ponerla en
posición correcta a cinco Ram. Bien, creo que la mayor parte
de la página se ve bien. Voy a bajar un poco la
pancarta. Sigamos adelante y seleccionamos Banner y configurarlo Spots y
posicionar a 20 Ram. Entonces voy a encargarme del pie
de página porque
todo lo demás se ve bien. Sigamos adelante y hecho voy a
agarrar este código de aquí. Voy a cambiar el ancho del contenido del pie de página
y
el pie de página inferior. Vamos a hacerlo 80% Ahora el pie de página se ve bien en realidad con la página
principal. Ya terminamos. Sigamos adelante y
revisemos sobre la página, bueno, necesitamos aquí algunos cambios. Vamos a abrir sobre el archivo CSS
y crear nuevos medios CSS. Especificemos el
ancho máximo como 1024 píxeles. Voy a seleccionar
sobre encabezado de sección. Tenemos que mover el
cabezazo hacia el lado izquierdo. Voy a traducir la función
al 30% y luego al 50% también. adelante y seleccionemos
sobre las características de la página y fijemos su ancho en 90% Bueno, creo que es demasiado. Vamos a hacerlo 40% Bueno, creo que si nos
deshacemos de esta comprobación de código, no
necesitamos cambiar
nada respecto al encabezado. Vamos a deshacernos de
este código en absoluto. Se ve bastante bien. Lo siguiente que
voy a hacer es cuidar
las imágenes
en la sección de equipo. Sigamos adelante y seleccionemos miembro con elementos de imagen voy a disminuir
dentro de la altura. Vamos a
ponerlos a ambos en rampa 23. Bien, entonces se ven bien. En realidad todo se ve bien. Podemos mover un
poco el cabezazo hacia el lado izquierdo. El icono del menú no lo cubre, pero está demasiado
cerca del encabezado. Entonces voy a cor este código, vamos a agregarlo aquí. Y disminuir el valor de
la expansión de traducir al 50% Se ve mucho mejor. Sigamos adelante y
revisemos la página de libros. Bueno, todo se ve bien. Entonces tenemos aquí testimonios. Tenemos que encargarnos
de estas diapositivas. Vamos a seguir adelante y abrir archivos CSS
testimonios y
crear nuevos medios de CS. El xw va a
ser 1024 pixeles. Vamos a seleccionar deslizado BG y establecer su ancho en 90% Necesitamos aquí con 90% Luego duplique este código y cambie el nombre de la
clase que necesitamos aquí Contenido, va a ser 90% me refiero al ancho
del contenido. Entonces voy a cambiar las
posiciones para los controles. Me refiero a las flechas
izquierdas a la derecha. Seleccionemos controles. Y entonces necesitamos elementos
con selector hijo. Seleccionemos el
primero que necesitamos para establecer posición
izquierda en 10% Luego
dupliquemos este código, cambiemos el número
del selector nésimo hijo Necesitamos dos y necesitamos
aquí la posición correcta. Entonces ahora todo se ve bien. Y el slider testimonial, en realidad creo que
podemos mover el logo hacia el lado izquierdo porque
tenemos aquí un espacio bastante grande Voy a abrir
iniciar el archivo CSS. Seleccionemos el logotipo y
cambiemos la posición izquierda. Voy a hacer 15 Ram. Bien, en realidad,
pongámoslo a diez m. Bueno, creo que ahora es mejor. Echemos un vistazo a las páginas. Bien, eso se sienta con
las pantallas de escritorio. Ya terminamos. A continuación,
tenemos que hacer que nuestro proyecto sea sensible
a esos puntos de quiebre. Quiero decir, esos dos puntos de interrupción
son los puntos de interrupción para las tabletas Para eso, pasemos
a la siguiente conferencia.
28. Parte 3: Bien, sigamos adelante
y sigamos haciendo que nuestro proyecto sea receptivo a diferentes
tamaños de pantalla y dispositivos. En la última conferencia, terminamos de trabajar en
las pantallas de escritorio. Ahora tenemos que seguir
adelante y comenzar a hacer que el proyecto sea receptivo
para tablets. Es decir, tenemos que hacer que el proyecto sea receptivo para
esos dos puntos de interrupción Empecemos por el primero. Va a ser 820
pixeles y 11 80 pixeles. Bien, vamos a cambiar aquí el tamaño
de pantalla que necesitamos mesa. Como pueden ver, tenemos que hacer los cambios porque muchas
cosas están desordenadas. Volvamos al
código VS en el archivo CSS de estilo. Voy a crear
nuevos medios CSS con ancho máximo de 820 píxeles. Lo primero
que voy a hacer es volver a disminuir, el tamaño de fuente
del elemento HTML. Seleccionemos HTML y
luego definamos el tamaño de fuente como 48% Se disminuirá el tamaño de todos los
elementos de la página. Siguiente Voy a colocar el banner en el
centro de la página. Entonces voy a seleccionar banner. Entonces voy a definir
la propiedad correcta. Va a ser 50%
También necesitamos fondo. También va a ser el 50%. Para centrar el
elemento perfectamente, en este caso estamos utilizando propiedades
derecha e inferior. Necesitamos usar
transform translate con los valores 50% y
nuevamente 50% Cuando
usas propiedades left y top
en lugar de right e bottom, entonces deberías
transformar translate con -50% y -50% Entonces como puedes ver, el banner
se coloca en el centro. A continuación voy a
encargarme de la sección sobre. Sigamos adelante y
seleccionemos la parte izquierda. Va a ser
sobre el contenido que queda. Voy a definir el ancho. Va a ser 40% Entonces
voy a duplicar este código porque tenemos que definir el ancho del lado
derecho también. Entonces necesitamos aquí a la derecha
en vez de a la izquierda. Y el ancho va
a ser del 60% Bien, después de eso, voy a cambiar el tamaño del teléfono
de la cabecera pequeña. Voy a seleccionar el encabezamiento de
sección SM y establecer el tamaño del teléfono 1.4 Entonces voy a
encargarme del párrafo. Sigamos adelante y seleccionemos
sobre P. En primer lugar, voy a cambiar
el tamaño del teléfono. Va a ser 1.6 Ram. Y luego voy a
disminuir el ancho. Va a ser 45 Ram. Sigamos adelante y
revisemos el navegador. Bien, entonces el icono del menú no cubre el texto
del párrafo. A continuación, voy a tomar
de la sección de libros. Como puede ver, el icono del menú
cubre el número de sección. Yo voy a
encargarme de la cabecera. Sigamos adelante y seleccionemos Libros, seguido del encabezado de libros. Voy a definir el ancho. Va a ser 35 Ram. Como puede ver, se cambia el ancho
del encabezado, pero necesitamos ajustar el
tamaño del borde de la sección. Sigamos adelante y seleccionemos encabezado
Libros
seguido del borde de la sección. Voy a establecer
el ancho, 235 Ram. Bien, ahora el
problema está solucionado y el icono del menú no
cubre el número de sección. La sección de libros se ve bien. A continuación tenemos que encargarnos
de los testimonios. Voy a ajustar
la altura de la sección porque en estos
momentos es demasiado larga. Me refiero a la longitud de la sección. Sigamos adelante y seleccionemos
testimonios y fijemos la
altura a la altura de 100 poo. Derecho que se sienta sobre
la sección testimonial. A continuación tenemos que tomar aquí del pie
de página, los campos de entrada. adelante y seleccionemos
grupo de entrada seguido de
los elementos de entrada, y es ancho a 28 Rm. Vamos a revisar el navegador. Como se puede ver, el
pie se ve bien. En realidad, con la página
principal, ya terminamos. Todas las secciones y todos los
elementos se ven bastante bien. Sigamos adelante y
revisemos otras páginas. Voy a empezar
con las páginas acerca de. Se puede ver que todo
está mal aquí. Sigamos adelante y abramos sobre el archivo CSS y
creemos nuevos medios de CS. Las marcas con van
a ser de 820 pixeles. Voy a comenzar con
el encabezado de sección. Quiero colocarlo en
el centro de la página. Sigamos adelante y seleccionemos
sobre el encabezado de sección. Vamos a establecer el texto de la
línea al centro. Y entonces voy a usar la función
transform translate. Y voy a
establecer los valores 0.0 El encabezado se
coloca en el centro. A continuación, tenemos que encargarnos
de este elemento azul aquí. También tenemos que colocarlo en
el centro. Sigamos adelante y seleccionemos
sobre el encabezado de sección
seguido del borde de la sección. Entonces necesitamos después de
ver el elemento, pongamos la
posición correcta al 50% Y luego para poder colocar el
elemento en el centro, necesitamos transformar traducir
x con el valor 50% Bien,
así que vamos a sentarnos por encima del encabezado. A continuación tenemos que
encargarnos de las características. Vamos a cambiar la
alineación de las características. Sigamos adelante y seleccionemos
acerca de las características de la página. En primer lugar, voy a cambiar el relleno
en la parte inferior. Vamos a ponerla en 25. Entonces voy a cambiar la
alineación de las imágenes. Sigamos adelante y busquemos
los estilos predeterminados. Voy a agarrar
este código de aquí. Vamos a pegarlo aquí
y hacer los cambios. En realidad, necesitamos insertar
aquí cero en todas partes. Vamos a revisar el navegador. Ahora, como puedes
ver, las características se colocan de una manera diferente. Creo que se ven bastante bien. A continuación, voy a
encargarme de la sección del equipo. Voy a cambiar la forma
del fondo y hacerlo
rectángulo en lugar de triángulo. Sigamos adelante y seleccionemos equipo. Como recuerdas, utilizamos la
propiedad llamada ruta de clip. Voy a ponerla en ninguna, entonces voy a ajustar
el tamaño del elemento. Vamos a establecer con 100%
En cuanto a la altura, voy a
hacerla 70 epo de altura Se cambia la forma del
elemento. En realidad me voy a
deshacer de esta sombra de caja. Vamos a poner sombra de caja a ninguna. Bien, entonces creo que la sección del equipo
se ve bastante bien. A continuación tenemos que cambiar
el tamaño de las imágenes. Voy a seleccionar miembro, seguido de los elementos de imagen. Vamos a establecer w y altura, ambas a 20 m. Entonces voy a cambiar el tamaño de fuente de la posición del
miembro. Vamos a establecerlo en 1.2 m. Como puedes ver, el encabezado
del pie de página
terminó en el fondo
de la sección del equipo. Vamos a arreglar ese
problema en un minuto. adelante y seleccionemos el pie de página sobre y fijemos
el margen superior a cero. Ahora el problema está arreglado. A continuación, voy a encargarme
del encabezado del pie de página. Vamos a colocarlo en
el centro de la página. Voy a seleccionar
pie de página sobre, seguido del encabezado de pie de página. Vamos a establecer el texto de la
línea al centro. Entonces necesitamos transformar
traducir x con valor cero. Bien, ahora necesitamos
lo mismo con este elemento after. Me refiero a este
elemento toro. Tenemos que colocarlo en el centro. Voy a seleccionar el página sobre
seguido del encabezado del pie de página. Entonces voy a
seleccionar el borde de sección con después del elemento
necesitamos la posición correcta para ser 50% y luego
transformar traducir x 50% Bien, entonces eso es todo. El encabezado se coloca en el centro y
todo se ve bastante bien con la
página acerca de. Ya terminamos. Sigamos adelante y
revisemos otras páginas. El siguiente es la página de libros, y creo que
debería quedar bien. No tenemos que hacer
aquí y cambios. A continuación tenemos sección
testimonial. Como pueden ver tenemos que
hacer algunos cambios. Sigamos adelante y abramos el archivo CSS de
testimonios y creemos una nueva consulta de medios CSS con un ancho
máximo de 820 píxeles. Voy a seleccionar
el elemento de sección, me refiero a la sección de testimonios. Voy a definir la altura. Va a ser de 100 palmaditas de altura. Vamos a revisar los resultados. Se disminuye la altura. A continuación voy a
encargarme del ligero. Empecemos por el
ligero fondo. Voy a establecer width a 95%
Vamos a duplicar este código, porque necesitamos lo mismo
con el ligero contenido. Vamos a revisar el navegador, se incrementa el ancho. A continuación, voy a
encargarme del párrafo. Sigamos adelante y
seleccionemos el texto de la diapositiva, seguido de los elementos. Y voy a establecer con 232 m. Ahora tenemos resultados mucho
mejores. A continuación, voy a cambiar ligeramente las posiciones
de las flechas. Sigamos adelante y
seleccionemos controles, seguidos de los elementos. Entonces necesitamos el
enésimo selector hijo. Necesitamos el primero. Vamos
a establecer la posición izquierda en 5% Entonces voy a duplicar este código y cambiar el número
del selector nésimo hijo Necesitamos aquí dos. En cuanto a la posición,
va a estar bien. Bien, entonces todo se ve bien en realidad con este punto de
quiebre, ya terminamos. Vayamos a la página principal. El siguiente. El
siguiente punto de interrupción para tablet es este
punto de interrupción aquí Voy a revisar esta. Y luego sigamos adelante
y seleccionemos la mesa dos. Yo voy a
encargarme de los libros. Voy a hacerlos
un poco más pequeños. También, voy a encargarme
de la sección testimonial. Bien, sigamos adelante y
creamos nuevos medios CSS. En este estilo de archivo CSS, el ancho máximo va
a ser de 768 píxeles. Sigamos adelante y seleccionemos libro
y ponlo en ancho a 32. Corre entonces necesitamos libro
con elementos de imagen. Voy a establecer con
27 r. bien,
así que los libros se hicieron más pequeños y creo que se
veían bastante bonitos. Siguiente Voy a encargarme
de la sección testimonial. Sigamos adelante y
seleccionemos testimonios y
voy a cambiar la
altura de la sección. Digamos 2115 ver la altura de la olla. Bien, después de eso voy a encargarme de las entradas en
el pie de página. Sigamos adelante y seleccionemos grupo
de entrada
seguido de los elementos de entrada. Vamos a establecer con 226 m. Bien, creo que ya está. Acerca de la página principal. Vamos a revisar otras páginas. La página acerca de se ve bien. Tenemos que hacer aquí
un cambio de diapositiva. Voy a disminuir el ancho de las imágenes
porque como puedes ver, el icono del menú cubre la
imagen del miembro. Sigamos adelante y abramos
sobre el archivo CSS y creemos nuevos medios CS. El máximo va
a ser de 768 pixeles. Después voy a seleccionar
miembro con elementos de imagen. Vamos a establecer el ancho de
la imagen a 18 Ram. Y también necesitamos
cambiar la altura, pero 32 18 Ram también. Bien, eso se sienta sobre la página Siguiente, voy a revisar
la página de libros. Todo se ve genial. Entonces tenemos
página testimonial, se ve bien. Bien, eso se asienta
sobre los puntos de interrupción. Vamos a revisar la segunda tabla de
puntos de interrupción. A continuación, tenemos que
hacer que nuestro proyecto sensible a los teléfonos móviles. Y para eso, pasemos
a la siguiente conferencia.
29. Haz que los proyectos sean receptivos - Parte 4: En la última conferencia, hemos terminado de hacer proyecto
responsive para tablets. Tuvimos dos
puntos de interrupción diferentes. Esos puntos de interrupción,
y el proyecto
responde a ambas pantallas de
tablet A continuación, tenemos que hacer que el proyecto sea receptivo
para teléfonos móviles. Quiero decir, tenemos aquí tres puntos de interrupción
diferentes. Sigamos adelante y
seleccionemos uno móvil. Entonces, como pueden ver, aquí
todo está desordenado Entonces tenemos que hacer muchas
cosas en el punto de interrupción, vayamos al código VS y
abramos iniciar el archivo CSS Voy a crear
nuevos medios CSS. El ancho máximo va
a ser 413 píxeles. Lo primero que
voy a hacer es
cambiar el tamaño
de fuente del elemento HTML. Seleccionemos HTML y
definamos el tamaño de fuente. Voy a fijarlo en 42%
Va a disminuir los tamaños
de todos los elementos. A continuación voy a
encargarme del logo. Vamos a seleccionar Logo y moverlo un poco
hacia el lado izquierdo. Necesitamos su posición izquierda
con el valor cinco Ram. A continuación voy a
encargarme de la pancarta. Voy a disminuir el
tamaño de los elementos de rumbo. Sigamos adelante y
seleccionemos pancarta H tres. Y cambiar el tamaño del teléfono. Van a ser cinco Ram. Entonces voy a duplicar este código y seleccionar H
uno elementos de encabezado, el tamaño del teléfono
va a ser 12 Ram. Bien, entonces creo que el encabezado del
sitio web se ve bien. A continuación tenemos sobre la sección. Voy a seleccionar sobre
la sección. Definamos la altura. Va a ser 80 de altura de vista. Entonces voy a crear espacio en la parte inferior de la
sección usando relleno. Abajo, el valor
va a ser de 25 m. A continuación, voy a cambiar la
alineación de los elementos. En primer lugar, vamos a disminuir el tamaño
del número de sección. Voy a seleccionar sección seguida de
los elementos span. Disminuyamos el tamaño del teléfono. Va a ser 16 Re. Entonces voy a disminuir el espacio en el
lado derecho del número. Voy a seleccionar
sobre Content Left. Vamos a poner el relleno en
el lado derecho a cero. Entonces voy a cambiar el
acolchado por el lado derecho. Sigamos adelante y seleccionemos
sobre el contenido, derecho. Definir relleno con
los siguientes valores. Necesitamos cuatro Ram
en el lado superior, cero en el lado derecho, cero en el lado inferior y seis en el lado izquierdo. Bien, después de eso, voy a encargarme
del botón principal. Voy a colocarlo aquí. Ahora sigamos adelante
y seleccionemos sobre. Seguido por el PTM principal. Voy a establecer posición en
absoluto que necesitamos posición relativa para
los elementos de sección. Vamos a definir la posición inferior
va a ser 15 Ram. Entonces voy a
colocar el botón en el centro horizontalmente con la posición izquierda con el valor de 50% Y luego
transformar traducir x con -50% Bien, el botón es posición siguiente, voy a cuidar el
rumbo en el lado derecho Vamos a seguir adelante y seleccionar sección encabezamiento LG y
disminuir el tamaño del teléfono. Hagámoslo 2.5 Ram. Bien, después de eso
voy a encargarme de
la sección frontera. Voy a disminuir el ancho. Sigamos adelante y seleccionemos
Acerca del contenido, ¿verdad? Seguido por el
borde de la sección y establecer el ancho a 25 D. Muy bien. Creo que eso
es todo sobre el encabezado. A continuación tenemos que tomar
del párrafo. Voy a
colocarlo en el centro. Sigamos adelante y seleccionemos
sobre el contenido, ¿verdad? Seguido del elemento. Voy a poner
posición a absoluta. Entonces necesitamos posicionar para ser 50% La posición let
va a ser 50% Y luego necesitamos
centrar el elemento usando
transform translate x -50% Además,
vamos a transform translate x -50% Además, alinear el texto en el centro Ahora como puedes ver,
ambos párrafos terminaron juntos uno
encima del otro. Sigamos adelante y cambiemos la posición para el
segundo párrafo. Voy a ir en realidad, vamos a agarrar el selector de aquí y agregar al párrafo, último hijo a la clase. Voy a poner la posición al 50% Bien, así que eso es todo. La sección sobre
se ve bastante bien. A continuación tenemos que encargarnos
de la sección de libros. Sigamos adelante y
seleccionemos la cabecera de libros. Voy a poner margen en
el lado derecho a tres carnero. Entonces voy a encargarme
del número de sección. Sigamos adelante y seleccionemos libros, seguido de la sección entumecida Voy a cambiar
poniendo en el lado derecho, pongámoslo a cinco Ram. Entonces voy a
cambiar el ancho
del borde de la sección. Sigamos adelante y seleccionemos libros, seguidos del borde de sección. Y me voy a
poner con 230 Ram. En realidad, no
necesitamos esto aquí. cambia el ancho del
borde, pero como se puede ver,
cambió su posición. Tenemos que moverlo
hacia el lado derecho. Para eso, voy a usar
margen dejado con el valor a. Bien, así que eso es todo sobre el
encabezado de la sección de libros. Los libros en sí se ven bien y en realidad con
esta sección, ya terminamos. A continuación, tenemos que encargarnos
de la sección testimonial. Como pueden ver, tenemos
que hacer aquí muchos cambios. Sigamos adelante y
seleccionemos elementos de sección para los testimonios
del nombre de la clase. Voy a cambiar la altura, vamos a hacerla a 125 de altura. Después voy a
seleccionar el número de sección. Necesitamos sus testimonios
arriba seguidos la sección y
voy a cambiar de margen
en el lado derecho, digamos a cinco Ram. A continuación voy a cambiar
el lado de la frontera. Entonces, sigamos adelante y seleccionemos testimonios
seguidos del borde de la sección. En realidad, podemos utilizar aquí testimonios
sin testimonios. Arriba, voy a
establecer ancho 229 Ram. Vamos a revisar el navegador. Bien, entonces el encabezado con el
número de sección se ve bien. A continuación tenemos que
encargarnos de los comentarios. Sigamos adelante y
seleccionemos la parte superior de comentarios. Voy a cambiar
la dirección del flex, pero en este caso
voy a usar columna inversa porque quiero que los primeros elementos de la sección estén
encabezando
en lugar de la cita. Ahora como se puede ver,
el encabezado se coloca en la parte superior de la. Y la imagen siguiente, voy a deshacerme del
relleno del lado izquierdo. Vamos a ponerla a cero. Ahora el rumbo se colocará en el centro de la sección. Después de eso, voy a crear algo de espacio en la
parte inferior del encabezado. adelante y seleccionemos el encabezado de
retroalimentación y
establezcamos el margen en la
parte inferior en cinco Ram. Después de eso, voy a
cuidar los antecedentes. Sigamos adelante y seleccionemos PG. Voy a cambiar propiedades superiores
e izquierdas. Me refiero a la posición,
pongamos la posición superior 250 Ram. En cuanto a la posición izquierda, voy a las nueve. Y también aumentemos
la altura del elemento. Vamos 32 50 Ram. Bien, después de eso voy a encargarme
de la cita en sí. Entonces sigamos adelante y
seleccionemos, cambiemos la
posición de la cotización. La posición superior
va a ser 58 Ram. Entonces voy a poner la posición
izquierda a 12 Ram. Y también cambiar el
tamaño de los elementos. Necesitamos. Ancho para ser 40. También cambia la altura, hagámoslo 37 Ram. Bien, entonces la cita
se ve bastante bien. A continuación tenemos que encargarnos del contenido dentro de la cotización. Empecemos con
el teléfono atómico. Sigamos adelante y seleccionamos en
realidad encabezado. Necesitamos que el tamaño del teléfono sea cinco. Entonces voy a cambiar el
espacio entre el encabezado, me refiero al nombre
del cliente y el. Sigamos adelante y seleccionemos encabezado seguido del elemento
H one heading. Vamos a poner a
cero y luego cinco Ram. Ahora el rubro. El encabezado se ve bien. A continuación voy a
encargarme del párrafo. Sigamos adelante y seleccionemos Cuerpo, seguido de los elementos. El ancho del párrafo
va a ser 30 Ram. Entonces necesitamos tamaño de fuente. Vamos a establecerlo
en 1.4 En realidad necesitamos aquí 1.4 Entonces voy
a crear espacio en la
parte inferior usando margin. Abajo con el
valor de 3.5 Ram. Bien, entonces el contenido de
la cita se ve bien. Y en realidad con esta
sección, ya terminamos. Sigamos adelante y
cuidemos el pie de página. Voy a cambiar
la alineación
del contenido
dentro del pie de página. Sigamos adelante y
seleccionemos contenido de pie de página. Cambiemos la dirección del flex. Va a ser columna
inversa porque quiero
colocar los campos de entrada en
la parte superior del contenido. Al igual que a continuación, voy a cambiar el ancho de la
forma y también la parte social. adelante y
seleccionemos social con forma y ajustado al 100% Siguiente, voy a seleccionar Foot
Social individualmente. En realidad, antes de que nos
encarguemos del Pie Social, yo voy a encargarme de la forma porque aquí tenemos
forma en primer lugar. Vamos a seguir adelante y
seleccionar grupo de entrada y establecer su ancho en 100% Entonces voy a
seleccionar grupo de entrada, seguido por el elemento de entrada, establecer su ancho para heredar En este caso, el elemento input
heredará width
del elemento padre Como puedes ver, las
entradas se ven bien. A continuación, voy a
encargarme del fondo. Sigamos adelante y
seleccionemos fo formulario, seguido de la parte inferior. Vamos a conformarnos con al 100% Entonces necesitamos margen en
la parte inferior, diez Ram. Como puedes ver, el
fondo se ve bastante bien. A continuación, voy a
encargarme de esta parte aquí. Me refiero a Pie Social. Coloquemos el código aquí. Seleccione Pie Social. Voy a usar la caja Flex. Vamos a configurar display Flex
porque vamos a colocar
los elementos uno al
lado del otro horizontalmente. Y luego vamos a crear espacio
usando justificar el contenido. Espacio entre, como puedes ver, la dirección y el
teléfono Iconos impresionantes se colocan uno al lado del otro. Voy a mover los aesomeicones
telefónicos en Para eso podemos usar, en realidad vamos a seleccionar
las redes sociales y luego usar la propiedad llamada Align
Self con un centro de valor. Los asomíconos telefónicos se colocan
en el centro verticalmente. Bien, así que en realidad con
la landing page principal, ya
terminamos. Todo
se ve bien. Sigamos adelante y
revisemos la navegación. Voy a deshacerme
de esta imagen en su totalidad y solo dejar aquí
los elementos de navegación. adelante y
seleccionemos a la izquierda y hagamos que se
oculte usando esta jugada. No, la imagen está oculta. A continuación, tenemos que extender el lado derecho a toda
la página. Para eso, necesitamos usar el nombre de la
clase, navegar. Y entonces necesitamos suficiente, ¿verdad? Eso se dice con 100%
Bien, entonces eso es todo. La navegación se ve bastante bien. Bien, con la página
principal, ya terminamos. Sigamos adelante y
revisemos otras páginas. Vamos a revisar acerca de la página, tenemos que
sacarte de la sección de equipo. Todos los demás elementos se ven bien. Vamos a seguir adelante y abrir un archivo CSS botella y
crear nueva consulta de medios CSS. Necesitamos max con 430 pixeles. Sigamos adelante y seleccionemos
Sección de Equipo y definamos la altura. Voy a hacer que sea
100 punto de vista de altura, luego voy a colocar las imágenes verticalmente
en una columna. Sigamos adelante y seleccionemos
miembros y cambiemos la dirección de
flexión. Va a ser columna y luego voy a crear algún espacio entre los miembros. Voy a seleccionar el margen de conjunto de
miembros a cuatro M en el lado superior e inferior y seis Ram en los lados izquierdo
y derecho. Muy bien los miembros se ven bien. Tenemos que encargarnos
del rumbo. Seleccionemos equipo
seguido de los
elementos de encabezado H one y cambiemos el margen. Va a ser cero
en el lado superior, cero en el lado derecho, Diez Ram en el lado inferior y cero en el lado izquierdo. Bien, entonces la
sección del equipo se ve bien. Y en realidad con la
página doblada, ya terminamos. Sigamos adelante y revisaremos la
página de libros , todo se ve bien. Entonces tenemos página testimonial. Como pueden ver, tenemos que
hacer algunos cambios. El deslizador, las diapositivas
no se ven del todo bien. Sigamos adelante y abramos testimonios del
archivo CSS y creemos nueva consulta de medios CSS con ancho
máximo de 430 píxeles. En primer lugar, voy a cambiar el tamaño del envoltorio
testimonial. Sigamos adelante y seleccionemos envoltorio
testimonial. Voy a establecer con
60% En cuanto a la altura, va a ser de 60 gramos. A continuación, voy a cambiar el
tamaño de la diapositiva en sí. Necesitamos un ligero trasfondo. Vamos a establecer con 80% entonces la altura
va a ser 90% Además, necesitamos contenido de diapositivas. Vamos a establecer con 80% y luego
necesitamos altura 90% Bien. Después de eso, voy a
encargarme de las cotizaciones. Sigamos adelante y seleccionemos Diapositiva, seguido de los elementos. Voy a cambiar
el tamaño del teléfono. Vamos a ponerla en siete Ram. En este momento las cotizaciones no son
visibles porque tenemos que
cambiar las posiciones
del phon. Sigamos adelante y
seleccionemos la diapositiva I, seguida del selector N. Voy a seleccionar
el primer icono. Pongamos la primera posición
a -5% En cuanto las posiciones en este momento se establece en 10% Así que
no voy a cambiarlo Sigamos adelante y
dupliquemos este código. Cambia el selector
que necesitamos aquí también. Ahora voy a establecer la posición de
fondo en -5% Bien, así que aquí
tenemos las cotizaciones Están posicionados
y se ven bien. A continuación voy a cambiar
la alineación de la diapositiva. Voy a agregar aquí columna de dirección
flex. Y entonces necesitamos espacio entre los elementos flex usando
justify content space. Incluso ahora como puede ver, los elementos flexibles se colocan
verticalmente en una columna. Voy a
cuidar la imagen. Sigamos adelante y seleccionemos imagen de la
diapositiva y cambiemos el tamaño. Necesitamos que el ancho sea
75% En cuanto a la altura, voy a ponerla en 16,
entonces vamos a deshacernos del
margen del lado derecho. Vamos a ponerla a cero. Bien, así que la imagen se ve bien. Siguiente Voy a
encargarme del texto. Seleccionemos el
texto de la diapositiva y pongamos su ancho al 100% Y ahora voy a cambiar el
ancho del párrafo. Sigamos adelante y seleccionemos texto de la
diapositiva
seguido del elemento P. Voy a establecer el ancho
a 25 D. Muy bien, así que eso se sienta sobre
la página testimonial. Todo se ve
bien. En realidad, con este punto de ruptura, hemos terminado Todas estas secciones y
páginas aller se ven bastante bien. Sigamos adelante y comprobemos aquí
este punto de ruptura. Y ahora necesitamos personalizar el proyecto En el punto de interrupción, sigamos adelante y
seleccionemos el móvil Dos Voy a disminuir de nuevo, el tamaño del teléfono
del elemento HTML. Sigamos adelante y creamos una
nueva consulta de medios CSS con maxwidth igual a 393 píxeles Sigamos adelante y cambiemos el tamaño del teléfono
del elemento HTML. Voy 32, 38% Vamos a
revisar los proyectos. Como puedes ver,
todo se ve bien. Voy a revisar las páginas
sobre la página se ve bien. A continuación tenemos
página de libros, se ve bien. Y vamos a revisar la página
testimonial. Todo se ve bastante bien. Bien, sentémonos
sobre este punto de ruptura. A continuación, voy a encargarme
del siguiente punto de ruptura, que es el último Sigamos adelante y
seleccionemos Móvil tres. En este caso, tenemos que
hacer algunos cambios. Sigamos adelante y
creamos nuevos medios de comunicación S. En realidad, voy a duplicar
este código que necesitamos aquí, ancho
máximo igual a 375 píxeles. Voy a disminuir
el tamaño del teléfono. Hagámoslo 36% y
verifiquemos el proyecto. El encabezado del sitio web se ve bien. A continuación tenemos sobre la sección. Se ve bien. La
sección de libros se ve bien. Necesitamos personalizar la sección
testimonial. Sigamos adelante y
seleccionemos testimonios. Voy a cambiar la altura. Hagámoslo 150 pies de altura. Ahora el problema está solucionado y el pie de página también
se ve bien. Bien, vamos a revisar otras páginas. Tenemos aquí una
página de libro, que se ve bien. A continuación tenemos página de libros. También se ve bien. Y por último, tenemos
aquí testimonios. Voy a aumentar la altura de la sección
testimonial. Así que vamos a abrir
testimonios de archivo CSS, Crear nueva consulta de medios CSS
con ancho máximo de 375 píxeles. Después seleccione la
sección testimonial y cambie la altura. Voy a hacer que sea 130 de altura de la
ventanilla, ¿de acuerdo? Ahora bien esta sección se ve bien, y en realidad todo se ve
bastante bien, ¿de acuerdo? Podemos decir que el proyecto
responde a diferentes tamaños
de pantalla y dispositivos. Antes de terminar nuestro curso, voy a hacer algunas cosas. Echemos un vistazo
al proyecto terminado. Voy a crear
el cargador del sitio web, me refiero a esta animación aquí. Entonces deberíamos desplegar el
sitio web y hacerlo en línea. Bien, sigamos
adelante y pasemos a
la siguiente conferencia.
30. Crea un cargador de sitios web: En la última conferencia, hemos terminado de trabajar en
el modo responsive. Nuestro proyecto responde a diferentes
tamaños de pantalla y dispositivos. Ahora, como dije, vamos
a crear el cargador de sitios web. Echemos un vistazo
al proyecto terminado. Si recargamos la página, entonces aparecerá esta
animación agradable y genial Y una vez que termine la animación, entonces se
cargará la página web. En esta conferencia,
vamos a crear este bonito y genial cargador de
sitios web. Antes de eso, voy
a hacer una cosa más. Si abrimos la navegación
y hacemos clic en el enlace de contacto, entonces navegaremos
a la sección de contacto. Si abrimos otra página y volvemos a
hacer clic en el enlace de contacto, entonces navegaremos a la sección
de contacto de esa página. En nuestro proyecto, no
tenemos esta característica. Vamos al código VS. Voy a encontrar pie de página. Voy a agregar
al atributo footer ID
con el valor contact. Entonces voy a
agarrar este atributo. Vamos a copiarlo y abrir
todos los archivos HTML. Necesitamos una botella HTML, luego libros de HTML, y los testimonios de que
HTML se abre en todas partes. Tenemos que pasar el atributo
para el servidor completo. Abramos libros de
archivo HTML y agreguemos aquí ID. Por último, tenemos aquí pie de página para testimonios,
eso es insertar ID. Todo bien. Ahora si vamos
al navegador y hacemos clic en Enlace, entonces navegaremos a
la sección de contrato. Pero como se puede ver, la navegación no está cerrada. Estamos en la sección de contacto, pero necesitamos gestionar el
cierre de la navegación. Una vez que hagamos clic en el enlace de contacto, vayamos al script Java. Voy a seleccionar
el enlace de contacto. Vamos a crear un nuevo enlace de contacto
variable y luego seleccionarlo usando
el método selector de consultas de documentos. Tenemos que especificar aquí navegación
seguida de los elementos A. Y necesitamos aquí
último hijo porque enlace de
contacto es el último enlace
en los elementos de navegación. Bien, después de eso, voy a seleccionar Contacto Enlace y
agregarle un oyente de eventos Con clic Eventos,
voy a insertar aquí la función de
devolución de llamada, que se ejecutará una vez que se haga clic en
el enlace de contacto Una vez que hacemos clic en el enlace de contacto, tenemos que eliminar clase. Navega desde el contenedor. En realidad, no necesitamos aquí. Vamos a agarrar esta línea de
código en lugar de togalmove, Luego vaya al navegador Voy a ir a
cualquiera de las páginas. Hagamos clic en Enlace de contacto. Como puede ver, nos navegan
a la sección de contacto. Vamos a la
página principal. Haga clic en Contacto. Nos navegan a
la sección de contacto. Bien, así que
todo funciona bien. Vamos a la página principal. Y entonces voy a empezar
a crear el cargador. Necesitamos insertar la marca HDmon aquí dentro
de los elementos del cuerpo justo antes del contenedor Insertemos nuevos
comentarios a un cargador. Entonces voy a
abrir la etiqueta dip con el envoltorio del cargador de nombres de clase. Dentro de ese desarrollo,
voy a abrir otro dip con el cargador de nombres de clase que
se asienta sobre el marcado HTML Voy a abrir el
archivo CSS de estilo y encontrar el contenedor. Voy a ocultar
contenedor usando opacidad cero y visibilidad. Entonces voy a insertar tus nuevos comentarios
para el cargador. Voy a seleccionar envoltorio. Definamos dentro de las alturas. El ancho va
a ser del 100% entonces altura va a ser de
100 puntos de vista de altura. Cambiar el color de fondo. Vamos a establecer el color a 151515. Entonces tenemos que
cambiar la posición. Se va a arreglar. Además, voy a definir propiedades de extremo
superior izquierdo, ambas como cero. Aquí tenemos el
envoltorio. A continuación tenemos que encargarnos del cargador. Sigamos adelante y
seleccionemos el cargador. Voy a definir el ancho. Hagámoslo 40%
Entonces necesitamos altura. Voy a ponerla a 0.1 rampa y luego cambiar
el color de fondo. Va a ser blanco.
Vamos a revisar el navegador. Aquí tenemos el cargador. Voy a colocarlo en
el centro de la página. Para eso, usemos libro Flex. Aquí necesitamos mostrar flex, luego justificar el centro,
y alinear los artículos al centro. Bien, entonces aquí
tenemos el cargador. Ahora voy a
crear la animación, me refiero a CSS key frames. Agreguemos aquí los fotogramas clave
con el cargador de nombres. Vamos a tener un
par de pasos diferentes. Al 0% voy a disminuir
la escala del elemento. Vamos a usar la función scale x
y hacerla cero. También, tenemos que cambiar el origen de la transformación.
Hagámoslo a la izquierda. Al inicio de la animación, el elemento no tendrá ningún ancho y se
transformará desde su lado izquierdo. A continuación tenemos 20% Vamos a
agarrar esas dos líneas. Al 20% voy a
aumentar la escala. Hagámoslo uno.
Y el origen de la transformación
volverá a ser, a la izquierda. Después de un 20% de avance,
el elemento es completamente visible y aún se transforma
desde su lado izquierdo. Duplicemos este código. El siguiente paso es 25%
Necesitamos escala x uno. En cuanto al origen de
la transformación, va a estar bien otra vez. Al 25% de avance, el elemento
permanece completamente visible, pero ahora se transforma
desde su lado derecho. Duplicemos de nuevo el código. El siguiente paso es 45% En este
paso necesitamos escala lex cero. El origen de la
transformación volverá a ser, justo al 45% de avance, el elemento desaparece mientras se transforma
de su lado derecho. A continuación tenemos 50% necesitamos scalac cero
y transformar origen Justo al 50% de avance, el elemento permanece invisible mientras se transforma
desde su lado derecho. El siguiente paso es 70% Al 70% necesitamos calc
uno y transformar origen Derecha Al 70% de avance, el elemento reaparece mientras se transforma
desde su lado derecho Siguiente tenemos 75% Necesitamos aquí calc uno y transformar
origen a la izquierda Al 75% de progreso, el elemento permanece visible, pero ahora se transforma
desde su lado izquierdo Por último, necesitamos aquí 100%
realmente duplicar el código. Necesitamos 100% escala x cero
y transformar origen a la izquierda. Al final de la animación, el elemento desaparece mientras se transforma
desde su lado izquierdo. Bien,
para poder aplicar esas reglas, voy a agregar
animación al cargador. Necesitamos el nombre loader. Y entonces la duración
va a ser de 5 segundos. Además, quiero un poco de tiempo de
retardo, 0.5 segundos. Bien, vamos al navegador. Como puedes ver, la
animación funciona. En realidad, voy
a esconder por defecto, El cargador voy a agregar
aquí transformar escala x cero. Una vez finalizada la animación entonces
el cargador desaparecerá. Bien, todo
se ve bien. A continuación voy a agregar V
script al proyecto. Voy a abrir guión OJS. Vamos a insertar aquí, nuevos
comentarios para el cargador. Entonces voy a
seleccionar el envoltorio cargador. Vamos a crear una nueva
variable, llamémosla cargador. Y seleccione la envoltura cargadora. Necesitamos aquí la envoltura cargadora. Después de eso voy a adjuntar al
objeto window event listener Con el evento necesitamos aquí el oyente de eventos de
ventana. El evento va a ser de carga. Entonces voy a insertar
aquí la función de devolución de llamada, que se ejecutará
una vez que se cargue la ventana Ahora voy a usar
una de las
funciones integradas en Javascript
llamada set time Out. Vamos a usar set time Out. Voy a insertar
tu función cobc. Después de algún tiempo, voy a esconder el cargador. Y también después de algún
tiempo voy a exhibir de
nuevo el contenedor. Ahora voy a agregar una
nueva clase al cargador, que luego se utilizará en
CSS para ocultar el cargador. De la misma manera,
voy a agregar nueva clase
al contenedor que se
utilizará en CSS para mostrar de
nuevo el contenedor. Voy a agregar aquí lista de clases de
cargador. Voy a llamar al nombre de la
clase Ocultar Siguiente, tenemos que agregar aquí, la cantidad de retraso va a ser 6,000 me refiero a 6 segundos. Entonces voy a
duplicar este código. Necesitamos diferente cantidad
de tiempo para el contenedor. Voy a añadir aquí contenedor. Llamemos al nombre de la clase, Show. En cuanto a la cantidad de tiempo de retardo, va a ser de
5,500 milisegundos Bien, vamos al archivo
CSS y voy a agregar aquí altura
con carga el wrapper, voy a poner aquí opacidad
a cero y visibilidad Entonces voy a mostrar el
contenedor que necesitamos aquí, show seguido del contenedor. Entonces necesitamos aquí
esas dos propiedades. La capacidad va a ser una. En cuanto a la visibilidad
que necesitamos aquí, visible. Bien, vamos a revisar el
navegador, cargar la página. Aquí tenemos el
cargador con animación. Una vez que termina la animación, entonces aparece el contenedor. Si abrimos alguna de las páginas, verás que el
contenedor no es visible, pero aparecerá después de
algún tiempo. En realidad, no necesitamos eso. Voy a arreglar esos problemas. Pasemos al código VS
y abremos el archivo HTM de índice. Voy a agregar clase
al contenedor. Va a ser contenedor principal. Tenemos que usar el contenedor que se encuentra en el
HtmalPile indexado Por eso estoy agregando
aquí una nueva clase. Además de eso, voy a usar body del índice HtmalPile Voy a añadir aquí cuerpo, luego voy a
ocultar la barra de desplazamiento. Para eso necesitamos cuerpo
luego desbordamiento de calefacción. A continuación voy a
seleccionar contenedor principal. Voy a agregar esas propiedades
al contenedor principal. Y luego voy
a añadir aquí principal. Bien, Lo siguiente
que voy a hacer es agregar posición
al contenedor. Va a ser relativo. Además, necesitamos transiciones para contenedor
principal,
paul 0.5 segundos. Además, necesitamos transición
para la envoltura del cargador. Agreguemos aquí transición
paul 0.5 segundos. Bien, vamos al
navegador y recarguemos la página. Ahora tenemos aquí la animación. Una vez que termine, entonces el
contenedor se mostrará. Vamos a abrir sobre como se puede ver, ya no
tenemos
aquí los problemas. En realidad, tenemos
un pequeño problema. Una vez que termina la animación, ya no
tenemos aquí la barra de desplazamiento y
no podemos desplazarnos hacia abajo. Sigamos adelante y
arreglemos ese problema. Ir al archivo Geoskhy. Voy a seleccionar
aquí los elementos del cuerpo. Llamemos al cuerpo de la variable, luego seleccionarlo usando el método selector de
consultas. Especifique aquí el cuerpo del nombre de la
clase. Entonces voy a agregar aquí
body dot style dot overflow. Debe ser igual a auto. Una vez que se muestra el contenedor, ya no
necesitamos calefacción por
desbordamiento. Nos permitirá mostrar de
nuevo la barra de desplazamiento. Vamos al navegador. Se ejecuta la animación. Una vez que termine, entonces
el contenedor se
mostrará con
barra de desplazamiento y
podremos desplazarnos hacia abajo Ok. Entonces todo funciona a
la perfección, se crea el cargador. Lo siguiente que
voy a hacer es
hacer el sitio web en línea. Necesitamos alojarlo en
la plataforma Netlify. Para eso, pasemos
a la siguiente conferencia.
31. Implementación de sitios web: En nuestra conferencia anterior, creamos el cargador de sitios web, y ahora es el momento de pasar
al paso final, implementando nuestro sitio web en línea. Existen numerosas formas
de alojar tu sitio web, pero en este curso,
prefiero usar Netlify Netlify es una plataforma en la nube que brinda una gama de servicios para el
desarrollo y alojamiento web modernos Ofrece una plataforma como solución de servicio
que simplifica el proceso de implementación y
administración de sitios web y aplicaciones
web adelante y visitemos Netlify.com Lo primero que tenemos que hacer es registrarse, que es un proceso bastante sencillo Entonces no voy
a pasar por ello. Ya me he registrado, así que solo
voy a iniciar sesión aquí. Contamos con un dashboard del usuario. Para implementar el sitio web, puedes importar tu
repositorio Git existente o simplemente
puedes arrastrar y soltar tu carpeta de proyecto de
trabajo. Prefiero la segunda forma, voy a arrastrar y
soltar la carpeta del proyecto. Tomará algún tiempo. Bien, entonces eso se sienta. Sigamos adelante y hagamos clic en
Abrir implementación de producción. Aquí tenemos nuestro
sitio web. Está en línea. Todo funciona bien. Tenemos aquí el proyecto. Vamos a navegar por
diferentes páginas. Como puedes ver, todo
funciona bien y se ve bien. Vamos a revisar la página
testimonial. Bien, entonces nuestro sitio web está en línea. Lo único que
voy a hacer es cambiar el nombre de
dominio porque aquí
tenemos un nombre largo
con algunos caracteres. Vamos a la configuración del
sitio. Voy a cambiar el nombre del sitio. Vamos a deshacernos de
esos personajes. Voy a llamar al sitio web
y crear una biblioteca. Vamos a guardarlo. Bien,
aquí tenemos el enlace. Vamos a darle un clic. aquí nuestro sitio web con
un nuevo nombre de dominio. Puedes llamarlo como
quieras. Sé que
no es un nombre perfecto, pero eso no es lo principal. Bien, así que eso establece. Por último podemos decir que con
el proyecto estamos hechos. Enhorabuena, fantástico
trabajo por terminar este curso. Ahora estás equipado con las habilidades para crear sitios web
increíbles. Me gustaría darle las
gracias por ser parte
de este curso. Sigue aprendiendo, mantente curioso
y disfruta del viaje. Como desarrollador web, te
deseo la mejor de las suertes con todos tus proyectos futuros. Codificación feliz y sitios web de alcalde. Siempre impresionar. Buena
suerte. Adiós, adiós.
Giorgi Lomidze, UI / UX Designer
