%%html

<style>
.Header{
    background-color: aqua;
    color: black;
    font-family: cursive;
}
.p1{
    background-color: darkorchid;
    font-family:'Franklin Gothic Medium';
}
.p2{
    background-color:darkred;
    color:lightskyblue;
    font-family: Impact;
}
</style>

<div>
<h3 class="Header">Web Programming HTML Test</h3>
    <p class="p1">Want to get an annoying alert?</p>
    <button id="button" title="You sure?">Click me to get an alert!</button>
    <script>
        var button = document.getElementById("button");
        button.addEventListener('click', function() {
            alert("You clicked the button!");
        });
    </script>
</div>

<div>
    <a href="https://media.discordapp.net/attachments/1143438030749847604/1156139470861647913/Man.png?ex=6513e249&is=651290c9&hm=0465268409fce7b051eeddea83e6a1efb9ac5441e4babe5cb048c99714603ef7&=&width=973&height=605" target="_blank" title="Thank you for">Random meme 1</a>
    <br>
    <a href="https://media.discordapp.net/attachments/1143438030749847604/1156140085243293797/Intimidation_is_key.jpg?ex=6513e2dc&is=6512915c&hm=ede45e69c7d5c19595f12e5437867a1b4192869a26f5a0e8837fddcf17bf6f16&=&width=636&height=605" target="_blank" title="reading the below text!">Random meme 2</a>
    <p class="p2">Above you will see two links. Hover over them for a special message, and click them to go to random memes I found in my computer at 1 am.</p>
</div>

Web Programming HTML Test

Want to get an annoying alert?

Random meme 1
Random meme 2

Above you will see two links. Hover over them for a special message, and click them to go to random memes I found in my computer at 1 am.