I am trying to have an alert message (how to play a game) pop up when the site loads, and have an "x" button to close it. The funny thing is, the button is visible when the font-family is something else like "Courier" etc., but my game is Harry Potter themed and I want to use a special font, which always seems to somehow "hide" the button. I want to know if there's a way to use the "HarryPotter7" font and also have my "x" button show up. Any help would really be appreciated!
body {
font-family: helvetica, arial, sans-serif;
margin: 2em;
}
h1 {
color: #6e2c60;
}
@font-face {
font-family: 'Harry P';
src: url('http://www.fontsaddict.com/fontface/harry-p.TTF');
}
@font-face {
font-family: 'HarryPotter7';
src: url('http://www.fontsaddict.com/fontface/harrypotter7.ttf');
}
<style>
.alert
{
font-family: "HarryPotter7";
padding: 20px;
background-color: rgba(255, 255, 255, 0.52);
color: purple;
}
.closebtn
{
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover
{
color: red;
}
</style>
<body>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong style="font-size: 150%">How to Play:</strong>
<br> ✥ Type the full name and then hit enter or click on the "CHECK" button.
<br> ✥ The system is case insensitive, but the spelling must be right! Start and pause the timer as you want, or reset the entire game with the reset button.
<br> ✥ If time is up, the page will automatically reload to the scores page, or, you can click on "Finish Game" button towards the bottom.
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire