Let's use our knowledge about HTML, CSS, and variables in JavaScript to build a user profile for an online retro game.

<html>
<head>
<style>
.name {
background-color: Cornsilk;
}

.character {
background-color:MistyRose;
}

body {
background-color: AntiqueWhite;
color: Black;
font-family: "Courier New", Courier, monospace;
text-align: center;
}

p {
border:solid 3px Black;
font-size: 22px;
border-radius: 5px;
padding: 7px 10px 7px 10px;
}

</style>
</head>
<body>
<img src="https://mimo.app/i/super-villains-logo.png">
<p id="username" class="name"></p>
<p id="character" class="character"></p>
<script>
var firstName = "Mike";
var lastName = "Tyson";
var username = "Username: " + firstName + " " + lastName;
console.log("Username: " + username);
var characterName = "Dr. Doom";
var character = "Character:" + " " + characterName;
console.log("Character: " + character);
document.getElementById("username").innerHTML = username;
document.getElementById("character").innerHTML = character;
</script>
</body>
</html>

]]>