alexlucas83
2/8/2019 - 12:41 PM

Gandalf

Gandalf

Gandalf index.html
content_copyfile_download
<!DOCTYPE>
<html lang="en">
   
  <head>
    <meta charset="UTF-8">
    <title> Gandalf</title>
     <link rel="stylesheet" href="style.css">
  </head>
  <body>
   
    <div> 
      <img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf" id="gandalf"/>
    
    <h1> Reward <span>1000</span><br>golden coins</h1>
    
    
      <h2>Gandalf</h2>
    </div>
  </body>
</html>
Gandalf style.css
content_copyfile_download
html
{
  background-color: black;
}

#gandalf
{
  position: relative;
  border : 4px grey solid;
  border-radius:10px;
  opacity:0.4;
  box-shadow:10px 10px 0px white;
}

h1
{
  font-size: 30px;
  color: black;
  text-align: center;
  background-color: white;
  border-style: solid;
  border-color: black;
  border-radius:10px;
  width:300px;
  height:100px;
  padding-top:20px;
  position: absolute;
  top:20px;
  margin-left: 100px;
}
#gandalf:hover
{
  opacity:1;
  z-index:2; 
}

h1:hover 
{
  opacity:0;
}
span
{
  color: orange;
}

 h2
{
  color:white;
  font-size:60px;
  position: absolute;
  top:450px;
  left: 160px;
  opacity:1;
  z-index:1;
}

 h2:hover 
{
  position:absolute;
  opacity:0;
  z-index:1; 
}