Skip to content

Instantly share code, notes, and snippets.

@florentinH

florentinH/quete css

Created February 15, 2018 18:01
Show Gist options
  • Save florentinH/5d5863d2586b27318dffa20faf2f452b to your computer and use it in GitHub Desktop.
Save florentinH/5d5863d2586b27318dffa20faf2f452b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
@font-face {
font-family: 'robotoregular';
src: url('roboto-webfont.eot');
src: url('roboto-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto-webfont.woff') format('woff'),
url('roboto-webfont.ttf') format('truetype'),
url('roboto-webfont.svg#cac_champagneregular') format('svg');
}
#profil
{
background: url(http://images.innoveduc.fr/integration_gandalf.png) no-repeat;
display: flex;
color: grey;
opacity: 0.7;
width: 500px;
height: 572px;
flex-direction: column;
align-items: center;
position: absolute;
}
#profil:hover
{
background: url(http://images.innoveduc.fr/integration_gandalf.png) no-repeat;
display: flex;
opacity: 1;
width: 500px;
height: 572px;
flex-direction: column;
align-items: center;
position: absolute;
}
p
{
font-size: 3.8em;
color: black;
border: 3px white solid;
border-radius: 20px;
background-color: white;
height: 150px;
width: 450px;
text-align: center;
margin-top: 25px;
font-family: roboto, sans-serif;
}
#profil:hover>p
{
font-size: 0em;
height: 0px;
width: 0px;
}
mark
{
background-color: white;
color: orangered;
}
h1
{
font-size: 6.5em;
color: white;
margin-top: 30px;
font-family: roboto, sans-serif;
}
#profil:hover>h1
{
font-size: 2.5em;
color: white;
margin-top: 12em;
}
Raw
quete css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="profil">
<p>reward <mark>1000</mark> golden coins</p>
<h1>Gandalf</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment