- Armonía de colores en CSS
Imagina que estás trabajando en el desarrollo de un sitio web personal. Utiliza la Rueda de Colores de Adobe para crear una paleta de colores armoniosa. Elige un color principal y dos colores secundarios para tu sitio. Luego, aplica estos colores en el archivo style.css de tu proyecto, usando el color principal para el background-color y los colores secundarios para el color de dos tipos diferentes de texto (por ejemplo, títulos y párrafos).
- Identificación y corrección de errores de colores en CSS
Te han asignado corregir un error en un proyecto web donde el texto no es visible debido a un problema de color. El cuerpo de la página tiene background-color: #000000; y el color del texto se ha definido como negro, haciéndolo invisible. Tu tarea es corregir este error cambiando el valor de color a un color visible, como #F6F6F6 u otro color claro, asegurando la legibilidad del texto.
- Jugando con colores RGB en CSS
Vamos a experimentar con la representación de colores en RGB en CSS. Elige dos colores que te gusten, uno para el fondo (background-color) y otro para el texto (color). Utiliza la notación hexadecimal RGB para definir estos colores en el archivo style.css. Por ejemplo, puedes usar #FF5733 para un color naranja vibrante y #00FF00 para un verde brillante. Aplica estos colores en el cuerpo de tu página y observa cómo interactúan.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio de Paul Vidal Zamora</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- Menú o logotipo iría aquí -->
<p>Mantenimiento y Soluciones Tecnológicas</p>
</header>
<main>
<h1>
Optimizo y mantengo tus sistemas <strong>para que tu negocio funcione sin problemas</strong>
</h1>
<p>
¡Hola! Soy Paul Vidal Zamora, ingeniero en sistemas computacionales especializado en mantenimiento
de computadoras y soluciones tecnológicas. Ayudo a empresas y particulares a mantener sus equipos
en óptimas condiciones. ¿Necesitas ayuda? ¡Contáctame!
</p>
<a href="https://www.instagram.com/">Instagram</a>
<a href="https://www.github.com/">GitHub</a>
<a href="https://www.facebook.com/">GitHub</a>
<a href="https://www.tiktok.com/">GitHub</a>
<a href="https://www.youtube.com/">GitHub</a>
<img src="reparacion-computadoras.png" alt="Paul Vidal Zamora reparando una computadora">
</main>
<footer>
<p>Contacto: paul.vidal@example.com | © 2023 Paul Vidal Zamora</p>
</footer>
</body>
</html>
style.css
body {
background-color: blue; /* Fondo azul */
color: yellow; /* Texto amarillo */
}
strong {
color: white;
}
a {
color: red;
}
a:hover {
color: white;
}
