alexlucas83
2/7/2019 - 7:36 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>
    </div>
    <div>
      <h2> Gandalf</h2>
    </div>
  </body>
</html>
Gandalf style.css
content_copyfile_download
html
{
  background-color: silver;
}

#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: 150px;
  z-index:2;
}