Untitled

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    .greeting-card {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: red;
      animation: movePicture 10s infinite;
    }
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      object-fit: cover;
      animation: changeColor 10s infinite;
    }
    @keyframes movePicture {
      0% { left: 0; top: 0; background-color: red; }
      25% { left: calc(100% - 200px); top: 0; background-color: green; }
      50% { left: calc(100% - 200px); top: calc(100% - 200px); background-color: orange; }
      75% { left: 0; top: calc(100% - 200px); background-color: purple; }
      100% { left: 0; top: 0; background-color: red; }
    }
    @keyframes changeColor {
      0% { background-color: red; }
      25% { background-color: green; }
      50% { background-color: orange; }
      75% { background-color: purple; }
      100% { background-color: red; }
    }
  </style>
</head>
<body>
  <div class="greeting-card">
    <p id="message">Click me!</p>
    <img src="C:\Users\student\Downloads\download.jpg" alt="Greeting Card Image">
  </div>
  <script>
    const card = document.querySelector('.greeting-card');
card.style.left = '0';
card.style.top = '0';
    
    const message = document.getElementById('message');
    let clickCount = 0;
    
    card.addEventListener('click', () => {
        clickCount++;
        
        if (clickCount % 4 === 1) {
            message.textContent = "Hello!";
        } else if (clickCount % 4 === 2) {
            message.textContent = "Bonjour!";
        } else if (clickCount % 4 === 3) {
            message.textContent = "Hola!";
        } else {
            message.textContent = "Ciao!";
        }
    });
</script>
</body>
</html>
Editor is loading...