FINAL PP1 ITEMS A REALIZAR

Observaciones:

Todos los puntos mencionados para los cambios mencionados debajo en el código, tienen que tener su comentario respectivo dentro del CSS, por ejemplo */*FINAL PP1 ITEM #1 - NombreDelArchivo.htal/"; donde esta aplicada la directiva CSS que se solicita NO OLVIDAR!!!! Para aprobar el examen tienen que tener aprobados al menos 3 de 5 items; en caso de aprobar; la nota se ponderará con la nota que recibieron al momento de entregar el sitio en la última charla personal que recibieron.

Tiempo Total para los cambios 48.

ITEMS 1.- Cambiar la imagen de fondo para el sitio web en todas las paginas internes y que se repita en el eje de las v (usar cualquier imagen PERO con la propiedad CSS correcta). [Puntaje Itam: 2]



/* FINAL PP1 ITEM #1 - archivo.css */
body {
    background-image: url('ruta/a/tu/imagen.jpg');
    background-repeat: repeat-y; /* Repetir en el eje vertical */
}
    background-size: cover; /* Asegura que la imagen cubra toda el área opcional*/



2.- Crear una clase, que al pasar el mouse por arriba del footerpinte las letras usadas en el mismo de VERDE, fondo AMARILLO y de tipo NEGRITA. [Puntaje Item: 2]
/* FINAL PP1 ITEM #2 - Estilo del footer al pasar el mouse */
footer:hover p {
    color: green; /* Letras en verde */
    background-color: yellow; /* Fondo amarillo */
    font-weight: bold; /* Texto en negrita */
}

/* FINAL PP1 ITEM #2 - archivo.css */
.footer:hover {
    color: green;
    background-color: yellow;
    font-weight: bold;
}



3.- Crear unASIDE, en cualquier página interna del sitio, colocarlo del lado DERECHO y que FLOTE libre al desplazar la página, alli dentro, colocar tres enlaces aleatorios. EL ASIDE tiene que tener MEDIANTE CLASE CSS -> fondo VERDE, redondeo del BORDE SUPERIOR IZQUIERDO redonded BORDE INFERIOR DERECHO y las letras del enlace en color ROJO. [Puntaje 
HTML (agrega este código en una página interna, por ejemplo jugadores.html):

<!-- FINAL PP1 ITEM #3 - Crear un ASIDE flotante -->
<aside class="floating-aside">
    <h2>Enlaces</h2>
    <ul>
        <li><a href="#link1">jugadores</a></li>
        <li><a href="#link2">Enlace 2</a></li>
        <li><a href="#link3">Enlace 3</a></li>
    </ul>
</aside>

/* FINAL PP1 ITEM #3 - Estilo del ASIDE */
.floating-aside {
    position: fixed;
    right: 0;
    top: 100px; /* Ajusta según sea necesario */
    background-color: green; /* Fondo verde */
    border-top-left-radius: 10px; /* Redondeo del borde superior izquierdo */
    border-bottom-right-radius: 10px; /* Redondeo del borde inferior derecho */
    padding: 15px;
}

.floating-aside a {
    color: red; /* Letras en rojo */
}




 4.- Crear una clase, que genere un borde en al menos 2 (dos) imágenes del sitio (elijan la que quieran), con las siguientes cualidades de "Spx", tipo DASHED y de color AZUL,en caso de no contar con las imágenes; las agregan para generar el efecto. Adicionalmente colocarle un FILTER para darle una OPACIDAD DEL 50% a las imágenes. [Puntaje Item: 2] 

/* FINAL PP1 ITEM #4 - Borde en imágenes y opacidad */
.responsive-img {
    border: 3px dashed blue; /* Borde azul, tipo dashed */
    opacity: 0.5; /* Opacidad al 50% */
}



5. Colocar una imagen cual de op LEFT de 250px, cualquier pagina Interna que cumpla con lo siguiente: una clase llamada "POSFIXIMAGEI", darle un ancho de 250px a la imagen, POSICION FIJA con TOP de 250px y de [Puntaje 2]

HTML (agrega este código en una página interna, por ejemplo contacto.html):

<!-- FINAL PP1 ITEM #5 - Imagen fija en la página -->
<img src="../img/fixed-image.jpg" alt="Imagen Fija" class="posfiximage">
/* FINAL PP1 ITEM #5 - Estilo de la imagen fija */
.posfiximage {
    position: fixed;
    left: 0;
    top: 250px; /* Ajusta según sea necesario */
    width: 250px;
}