Mi Primer Portafolio

Usando CSS

Etiqueta body

1etiquetabody
  • font-family: Arial, Helvetica, sans-serif;

    Define la fuente del texto en el cuerpo de la página. Se usa Arial primero, y si no está disponible, se usa Helvetica o cualquier fuente sans-serif.

  • line-height: 1.6;

    Establece la altura de línea en 1.6, mejorando la legibilidad al proporcionar más espacio entre las líneas de texto.

  • margin: 0;

    Elimina el margen exterior del cuerpo para que el contenido ocupe todo el ancho de la ventana del navegador..

  • padding: 0;

    Elimina el relleno interior del cuerpo, asegurando que no haya espacio adicional alrededor del contenido..

Encabezado o header

2header
  • header { background: #333; }

    Establece un fondo gris oscuro para el encabezado.

  • header { color: #fff; }

    Cambia el color del texto a blanco.

  • header { padding: 20px 0; }

    Aplica un relleno superior e inferior de 20 píxeles, centrando el contenido dentro del encabezado.

  • header { text-align: center; }

    Centra el texto dentro del encabezado.

  • nav ul { list-style: none; }

    Elimina los puntos de la lista predeterminados para las listas no ordenadas.

  • nav ul { padding: 0; }

    Elimina el relleno de la lista, asegurando que no haya espacio adicional alrededor.

  • nav ul li { display: inline; }

    Muestra los elementos de la lista en línea (horizontalmente).

  • nav ul li { margin: 0 10px; }

    Aplica un margen de 10 píxeles a la izquierda y a la derecha de cada elemento de la lista.

  • nav ul li a { color: #fff; }

    Cambia el color del texto del enlace a blanco.

  • nav ul li a { text-decoration: none; }

    Elimina el subrayado de los enlaces.

Sobre Nosotros

3about
  • #about { padding: 20px; }

    Aplica un relleno de 20 píxeles alrededor del contenido en la sección con el ID "about".

  • #about { background: #f4f4f4; }

    Establece un color de fondo gris claro (#f4f4f4) para la sección "about".

  • about h2 { margin-top: 0; }

    Elimina el margen superior del encabezado <h2> dentro de la sección "about", evitando el espacio adicional por encima del título.

Galeria

portafolio
  • .gallery { display: flex; }

    Define un contenedor de "galería" con un diseño flexible, lo que permite que los elementos internos se distribuyan en línea en una sola fila por defecto.

  • .gallery { flex-wrap: wrap; }

    Permite que los elementos dentro del contenedor "gallery" se ajusten automáticamente a nuevas líneas cuando no hay suficiente espacio en la fila.

  • .gallery { gap: 20px; }

    Establece un espacio de 20 píxeles entre cada elemento de la galería, proporcionando separación visual.

  • .gallery { justify-content: center; }

    Centra los elementos de la galería horizontalmente dentro del contenedor.

Portafolio

portafolio
  • .project { width: 300px; }

    Establece un ancho fijo de 300 píxeles para los elementos que tienen la clase .project, definiendo así el tamaño del contenedor del proyecto.

  • .project { padding: 10px; }

    Añade un espacio interno de 10 píxeles entre el borde del contenedor del proyecto y su contenido, proporcionando espacio para respirar.

  • .project { background: #fff; }

    Establece un color de fondo blanco para el contenedor del proyecto.

  • .project { border: 1px solid #ddd; }

    Añade un borde delgado de 1 píxel de grosor y color gris claro alrededor del contenedor del proyecto, lo que lo separa visualmente del fondo.

  • .project { text-align: center; }

    Centra horizontalmente el texto dentro del contenedor del proyecto.

  • .project img { max-width: 100%; }

    Asegura que las imágenes dentro del contenedor del proyecto no superen el 100% del ancho del contenedor, manteniéndolas responsivas.

  • .project img { height: auto; }

    Ajusta automáticamente la altura de las imágenes en proporción a su ancho, manteniendo su relación de aspecto.

Contactenos

contactenos
  • #contact { padding: 20px; }

    Añade un espacio de 20 píxeles alrededor de la sección de contacto, proporcionando un margen interno para que el contenido no toque los bordes del contenedor.

  • form { display: flex; }

    Utiliza el sistema de flexbox para organizar los elementos del formulario de manera flexible y eficiente.

  • form { flex-direction: column; }

    Organiza los elementos del formulario en una columna, haciendo que los campos y etiquetas se apilen uno sobre otro.

  • form label { margin-bottom: 5px; }

    Añade un margen inferior de 5 píxeles a las etiquetas del formulario, separándolas del campo correspondiente.

  • form input, form textarea { margin-bottom: 10px; }

    Añade un margen inferior de 10 píxeles a los campos de entrada y las áreas de texto, separando cada elemento del siguiente.

  • form input, form textarea { padding: 10px; }

    Proporciona un relleno interno de 10 píxeles a los campos de entrada y áreas de texto, haciendo que el contenido dentro de los campos esté más espaciado y sea más fácil de leer.

  • form input, form textarea { font-size: 16px; }

    Establece el tamaño de fuente en 16 píxeles para mejorar la legibilidad del texto dentro de los campos del formulario.

  • form[type="submit"] { background: #333; }

    Establece un fondo de color gris oscuro (#333) para el botón de envío del formulario.

  • form[type="submit"] { color: #fff; }

    Establece el color del texto del botón de envío en blanco para que contraste con el fondo oscuro.

  • form[type="submit"] { border: none; }

    Elimina el borde alrededor del botón de envío para un diseño más limpio y moderno.

  • form[type="submit"] { cursor: pointer; }

    Cambia el cursor a una mano (puntero) cuando el usuario pasa el ratón sobre el botón de envío, indicando que es un elemento clicable.

Responsive

contactenos
  • @media(max-width: 600px) {}

    Este bloque de código aplica estilos específicos cuando el ancho de la pantalla es de 600 píxeles o menos. Esto es útil para hacer que la página sea más responsiva en dispositivos móviles.

  • nav ul { display: flex; }

    Cambia la visualización del menú de navegación a flexbox para permitir una disposición más flexible de los elementos del menú.

  • nav ul { flex-direction: column; }

    Reorganiza los elementos del menú en una columna vertical, haciendo que se apilen uno sobre otro en lugar de estar en línea horizontal, ideal para pantallas pequeñas.

  • nav ul { align-items: center; }

    Centra los elementos del menú dentro del contenedor de navegación, lo que mejora su presentación en pantallas móviles.

  • .gallery { flex-direction: column; }

    Hace que los elementos de la galería se dispongan en una columna en lugar de en una fila, lo que mejora la visualización en dispositivos con pantallas más pequeñas.

  • .gallery { align-items: center; }

    Centra los elementos de la galería dentro de su contenedor cuando la pantalla es de 600 píxeles o menos, haciendo que el contenido sea más accesible y fácil de ver en dispositivos móviles.