Create a HTML page with the 02 images (any image). Just below the images, add appropriate slogan which should blink.

Solution

<!DOCTYPE html>
<html>
<head>
    <title>Blinking Slogan Page</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        img {
            width: 250px;
            height: auto;
            margin: 20px;
        }

        .blink {
            font-size: 24px;
            font-weight: bold;
            color: red;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%   { opacity: 1; }
            50%  { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>

    <h2>Our Brand</h2>

    <img src="https://via.placeholder.com/250x150?text=Image+1" alt="Image 1">
    <img src="https://via.placeholder.com/250x150?text=Image+2" alt="Image 2">

    <p class="blink">Quality You Can Trust!</p>

</body>
</html>

▶ RUN

Output/ Explanation:

O Level Online Exam

Programming Examples

Create a HTML page with the 02 images (any image). Just below the images, add appropriate slogan which should blink.