Skip to content

Instantly share code, notes, and snippets.

@PradalCyril

PradalCyril/Gandalft.css

Last active October 3, 2018 14:34
Show Gist options
  • Save PradalCyril/4fb4f253a72cffb258523813c79239e7 to your computer and use it in GitHub Desktop.
Save PradalCyril/4fb4f253a72cffb258523813c79239e7 to your computer and use it in GitHub Desktop.
Download ZIP
Gandalft.html
Raw
Gandalft.css
#general{
position:relative;
border-style: solid;
border-color: grey;
display:block;
float:left;
width: 500px;
}
.recompense{
position:absolute;
z-index:2;
width: 100%;
height:100%;
background-color: rgba(255,255,255,0.2)
}
.reward{
font-size: 200%;
border-style: solid;
border-color: white;
border-radius: 20px;
background-color: rgba(255,255,255,0.9);
text-align: center;
width: 50%;
height: auto;
margin: auto;
margin-top: 10%;
}
.nom{
font-size:400%;
color: white;
z-index:2;
width: 50%;
margin: auto;
margin-top: 70%;
text-align: center;
}
#gandalf{
z-index:1
}
img{
max-width:100%;
max-height:100%;
}
.pouet{
color: orange;
}
.recompense:hover .reward{
opacity: 0;
}
.recompense:hover{
background-color: rgba(255,255,255,0);
}
.recompense:hover .nom{
font-size: 2em;
}
Raw
Gandalft.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Gandalf.css">
</head>
<body>
<section id="general">
<div class="recompense">
<p class="reward">Reward <span class="pouet">1000</span> golden coins</p>
<p class="nom">gandalf</p>
</div>
<div id="gandalf">
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf">
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment