lesson-3-banner-in-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner</title>

    <style>
        h1 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 0.3em;
            color: white;
        }

        p {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 1em;
            line-height: 1.3em;
            color: white;
        }

        img {
            height: 100px;
        }

        button {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: transparent;
            color: white;
            border-style: solid;
            border-color: white;
            border-radius: 10px;
            padding: 6px 24px 6px 24px;
            margin-bottom: 10px;
        }

        button:hover {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #fff;
            color: #000;
            border-style: solid;
            border-color: #fff;
            border-radius: 10px;
            padding: 6px 24px;
            margin-bottom: 10px;
            cursor: pointer;
        }

        /* Class */
        .logo {
            padding-right: 10px;
        }

        .banner {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px;
            padding: 10px;
            border-radius: 20px;
            height: 120px;
            background: linear-gradient(-45deg, #e79e00, #ff0000, #ffe96c, #ff0000);
            background-size: 200% 200%;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }

            50% { background-position: 100% 50%; }

            100% { background-position: 0% 50%; }
        }
    </style>

</head>
<body>
    <div class="banner" onclick="myFunction()">
        <script>
            function myFunction() {
                alert("Thanks a lot!");
            }
        </script>

        <div class="logo">
            <img src="https://picsum.photo/200" alt="random image">
        </div>

        <div class="content">
            <h1>Maiona Coding Course</h1>
            <p>Coding is a creative process and we believe anyone can learn to code.</p>
            <button>Sign up now!</button>
        </div>
    </div>
</body>
</html>