html – Trying to make logo animated on Twitch stream-ThrowExceptions

Exception or error:

I am trying to make my logo appear on my Twitch stream for ~10 seconds before disappearing and then reappearing ~5 minutes later. I can’t figure out how to get my logo to show up when opening the file as a tab on my browser. I copied the code from another streamer however I wanted something different animated than what he had on his stream.

Here is the code I am using for my logo

<html>
<head>
    <title>Animated Logo</title>
    <meta http-equiv="refresh" content="300">
    <style>
            }
        #reminderContainer {
            width: 0px;
            height: 0px;
            background: #ffffff00;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            color: white;
            -moz-box-shadow: 0px 0px 20px #0f3369;
            -moz-animation: animateReminder 10s 0s 1;
            }
        #reminderContent {
            width: 256px;
            height: 256px;
            background: #ffffff00;
            position: relative;
            overflow: hidden;
            color: white;
            }
        #CKBulldogHead256x256 {
            width: 90px;
            height: 90px;
            float: center;
            }    
        @-moz-keyframes animateReminder {
            0%, 100% {
                width: 0px;
                height: 24px;
                }
            20%, 80% {
                width: 400px;
                height: 24px;
                }
            30%, 70% {
                width: 400px;
                height: 120px;
                }
            }
    </style>        
</head>
<body>
            <div id="reminderContent">
            <image id="CKBulldogHead2 256x256" src="imgur.com/gallery/c9vZXfF">
            <div="reminderContentText">
                </span>
            </div>
        </div>
    </div>
</body>

Here is the source code I copied from and re-did to make it my own.

<html>
<head>
    <title>My Stream Animated Panels</title>
    <meta http-equiv="refresh" content="60">
    <style>
        @font-face {
            font-family: 'Dolce Vita';
            src: url('fonts/Dolce Vita.ttf');
            }
        #reminderContainer {
            width: 0px;
            height: 0px;
            background: #2e5794;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            color: white;
            font-family: 'Dolce Vita';
            -webkit-box-shadow: 0px 0px 20px #0f3369;
            -webkit-animation: animateReminder 10s 0s 1;
            }
        #reminderHeader {
            width: 400px;
            height: 26px;
            background: #0f3369;
            position: relative;
            overflow: hidden;
            text-align: center;
            font-size: 24px;
            }
        #reminderContent {
            width: 400px;
            height: 94px;
            background: #2e5794;
            position: relative;
            overflow: hidden;
            color: white;
            }
        #twitchLogo {
            width: 90px;
            height: 90px;
            float: left;
            }

        @-webkit-keyframes animateReminder {
            0%, 100% {
                width: 0px;
                height: 24px;
                }
            20%, 80% {
                width: 400px;
                height: 24px;
                }
            30%, 70% {
                width: 400px;
                height: 120px;
                }
            }
    </style>        
</head>
<body>
    <div id="reminderContainer">
        <div id="reminderHeader">
            <span>Reminder:</span>
        </div>
        <div id="reminderContent">
            <image id="twitchLogo" src="images\twitchLogo.png">
            <div="reminderContentText">
                <span>
                    Like what you see in the stream?<br>
                    Hit that follow button below!
                </span>
            </div>
        </div>
    </div>
</body>

His code has text in it that I don’t need as I am just wanting the logo to be animated. I may have deleted some important stuff. I am not a coder in any way, shape, or form just trying to get something to work for my stream.

Thanks,

CzarKilo

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *