Custom Html Code Here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 body {
    background-image: url('https://i.imgur.com/pnQpNlB.jpeg');
    background: flex;
  }
    /* Apply transition to smooth the animation */
    a {
        display: inline-block; /* Necessary for animation to work */
        text-decoration: none;
        font-size: 14pt;
        color: gold; /* Set default color to gold */
        position: relative; /* Set position to relative */
    }

/* Fade-in effect */
    a::before {
        content: ''; /* No content for the before pseudo-element */
        position: absolute; /* Position the pseudo-element */
        left: 0; /* Align to left */
        bottom: 0; /* Align to bottom */
        width: 100%; /* Full width */
        height: 2px; /* Underline height */
        background-color: gold; /* Underline color */
        transition: height 0.3s ease; /* Add transition */
        z-index: -1; /* Ensure underline is behind text */
    }

/* Show underline animation on hover */
    a:hover::before {
        height: 100%; /* Expand height to full */
    }

/* Other link styles */
    a:visited {
        /* Style for visited links */
    }
    
    a:active {
        /* Style for active links */
    }
</style>

</center>

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crafted By: R.Y.U</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000000;
            margin: 0;
            padding: 0;
        }

.container {
            width: 60%;
            margin: 50px auto;
            text-align: center;
        }

.profile-box {
            display: inline-block;
            padding: 6px 12px;
            background-color: #CEE3F6; /* Lighter blue background */
            border: 2px solid #1E90FF; /* Darker blue border */
            border-radius: 5px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
            font-size: 14px;
            color: #1E90FF; /* Change text color to darker blue */
            width: auto;
            height: auto;
            box-shadow: 0 0 0 rgba(30, 144, 255, 0.5); /* Initial shadow */
        }

.profile-box:hover {
            background-color: #CEE3F6; /* Keep the background color as #CEE3F6 on hover */
            box-shadow: 0 0 15px rgba(30, 144, 255, 0.7); /* Adjusted glow effect on hover */
        }

.profile-box a {
            text-decoration: none;
            color: #1E90FF; /* Change text color to darker blue */
            font-weight: bold;
            transition: color 0.3s ease; /* Add transition effect */
        }

.profile-box a:hover {
            color: #00008B; /* Change text color to darker blue on hover */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-box"> <a href="https://www.myleague.com/misfits/profile/Riot"> Crafted by: R.Y.U </a> </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shaded Box Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000000;
            margin: 0;
            padding: 0;
        }

.shaded-box {
            background-color: #CEE3F6; /* Lighter blue background */
            border: 2px solid #1E90FF; /* Darker blue border */
            border-radius: 5px; /* Rounded corners */
            padding: 5px; /* Adjusted padding */
            width: 400px; /* Adjusted width */
            height: 20px; /* Decreased height */
            /* Center the content vertically */
            display: flex;
            justify-content: center;
            align-items: center;
        }

.shaded-box p {
            font-size: 14px; /* Increased font size */
            color: #1E90FF; /* Change text color to darker blue */
        }

.shaded-box a {
            text-decoration: none;
            color: #1E90FF; /* Change text color to darker blue */
            font-weight: bold;
            transition: color 0.3s ease; /* Add transition effect */
        }

.shaded-box a:hover {
            color: #00008B; /* Change text color to darker blue on hover */
        }

/* Apply effects only to the "Riot" text */
        .shaded-box a span {
            transition: transform 0.3s ease; /* Add transition effect */
        }

.shaded-box a:hover span {
            transform: scale(1.1); /* Scale up on hover */
        }
    </style>
</head>
<body>
    <div class="shaded-box">
        <p>Note: Want your desired tour page? Fill up the form! ðŸ“<a href="https://forms.office.com/pages/responsepage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAANAAWjuvURUOEZIRjk3REhaSkVPTlNaMkxRWUpaRTk3Ry4u">Riot</a></p>
    </div>
</body>
</html>
<br />

Copy and Paste the following into *Background Image