naberz95
commented
1 month ago Se indica Ejemplo de cómo realizar el Banner, para esto se utiliza la etiqueta header
`
¡Bienvenido al Blog de Tecnología!
Descubre las últimas tendencias y novedades en el mundo tecnológico.
</header>` Referente al Css:
.banner { background-image: url('/src/img/Blog\ Tecnologia.png'); / Ruta de tu imagen / background-size: cover; / Asegura que la imagen cubra todo el contenedor / background-position: center; / Centra la imagen / padding: 60px 0; / Espacio superior e inferior / text-align: center; / Centra el texto / }
/ Contenedor del texto con fondo semitransparente / .banner .text-container { background-color: rgba(255, 255, 255, 0.7); / Fondo blanco semitransparente / padding: 20px; / Espaciado alrededor del texto / border-radius: 10px; / Bordes redondeados / display: inline-block; / Permite centrar el contenedor del texto / }
.banner h1 { font-size: 2.5rem; / Tamaño del título / margin-bottom: 10px; / Espacio inferior / color: rgb(0, 0, 0); / Color del título / text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); / Sombra de texto / }
.banner p { font-size: 1.2rem; / Tamaño del párrafo / color: rgb(0, 0, 0); / Color del párrafo / text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); / Sombra de texto / }
la imagen que se adjunto es la siguiente:
ahora todo acomodado se ve asi:
Se debe de realizar la cabecera de la página que sea tipo Banner con una imagen, la idea es que sea un título llamativo, se puede realizar como una imagen o con un fondo de colores,si se va realizar con colores, se debe de validar primero para tener en cuenta el cambio, y asegurarse que este se encuentre en su propio contenedor para no afectar las demás secciones o contenedores.