index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 1- DE CUADRADO A CÍRCULO
Tienes un cuadrado de un color, y cuando pasas el ratón por encima, se cambia a un círculo y de otro color.
2- ANIMACIÓN PELOTA
Con @keyframes: hacer que una pelota rebote verticalmente. Puede añadirse distorsión a la pelota o no (cuando choca contra el suelo se aplasta). Hacer un loop infinito.
Recordar que hacen falta al menos: el nombre, la duración y la cantidad de veces de la animación:
animation: iryvenir 2s 3;
3- ANIMACIÓN ANUNCIO
Con @keyframes:
Crear un anuncio con al menos tres elementos: un logo, un slogan y una imagen (de fondo o no). Implica crear tres o más animaciones diferentes, una para cada elemento.
También se le puede dar un delay para que no arranque al momento.
Ejemplo: logo: concesionario PACO, slogan: “nos los quitan de las manos”, imagen: coches que cruzan.
No descartar tema imagen o gif animado. -->

    <header>
        <img src="Img/logo.webp" alt="Logo colorido"  class="logo">
    </header>

    <div class="eslogan">Game Zone  diversión en colores</div>

    <div class="container">
        <div class="cuadrado1 c"></div>
        <div class="cuadrado2 c"></div>
        <div class="cuadrado3 c"></div>
        <div class="cuadrado4 c"></div>
        <div class="cuadrado5 c"></div>
        <div class="cuadrado6 c"></div>
    </div>

    <!-- <a href="https://www.gifsanimados.org/cat-deportes-279.htm"><img src="https://www.gifsanimados.org/data/media/279/deporte-imagen-animada-0494.gif" border="0" alt="deporte-imagen-animada-0494" /></a> -->
        
            <img src="https://www.gifsanimados.org/data/media/279/deporte-imagen-animada-0494.gif" alt="salto elástico" class="gif">
        


</body>
</html>