Hola, he realizado la lectura de CSS y he ido ensayando (cacharreando varios estilos y formas), dejo mi CSS, que tiene unos elementos interanstes para ver y ensayar, quedo muy atento a comentarios y me gustaria saber como se vé este archivo en otros portafolios, gracias.
body { background-color: #e8f5e9; /* Un verde claro para el fondo / color: #2e7d32; / Un verde oscuro para el texto */ }
header { background-color: #1b5e20; /* Un verde más oscuro para el header / padding: 20px; / Añadido padding para mejor espaciado / text-align: center; / Centrar el texto */ }
h1 { font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif; font-size: 2em; font-style: oblique; color: #ffffff; /* Mantener el blanco para el título / margin: 0; / Quitar márgenes para mejor alineación */ }
h2 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 1.5em; font-style: italic; color: #388e3c; /* Verde intermedio / margin-bottom: 10px; / Añadir margen inferior */ }
p { font-family: 'Arial Narrow', Arial, sans-serif; font-size: 1em; color: #66bb6a; /* Verde más claro para el texto / line-height: 1.5; / Mejorar la legibilidad con mayor interlineado */ }
strong { color: #1b5e20; /* Verde oscuro para resaltar */ }
img { border-radius: 5%; /* Aumentar el radio de borde para un efecto más suave / border-style: solid; border-color: #2e7d32; / Verde oscuro para el borde / border-width: 3px; / Hacer el borde más visible */ }
button { font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 1em; color: #ffffff; /* Blanco para el texto del botón / background-color: #4caf50; / Verde vibrante para el fondo del botón / border-radius: 20px; / Borde redondeado para un aspecto más moderno / padding: 10px 20px; / Añadir padding para mayor tamaño / border: none; / Quitar el borde del botón / cursor: pointer; / Cambiar el cursor para indicar que es un botón / transition: background-color 0.3s; / Efecto de transición para el hover */ }
button:hover { background-color: #388e3c; /* Cambiar color al hacer hover */ }
footer { background-color: #1b5e20; /* Verde oscuro para el pie de página / color: #ffffff; / Blanco para el texto del pie de página / text-align: center; / Centrar el texto / padding: 10px 0; / Añadir padding para mejor espaciado */ }
