muriel1995
2/8/2019 - 1:57 PM

essai62emepartie

essai62emepartie

essai62emepartie.markdown
content_copyfile_download
  • Rendered
  • Source

essai62emepartie

A Pen by muriel1995 on CodePen.

License.

index.html
content_copyfile_download
<!doctype html>

<html lang="fr">
  
<!-- challenge wanted -->

<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="precious.css">
  
   <title>FindThePrecious.com</title>
</head>

<body>          
         
  <div id="contener">
    <div id="positionimage">
        <img src="http://images.innoveduc.fr/integration_gandalf.png">
    </div>
    <div id="fond">
      <p id="reward">reward <span style="color:red">1000</span> golden coins</p>
    </div>
    <div id="gandalf">
      <p>Gandalf</p>
    </div> 
</div>

  <footer>
  </footer
</body>
</html>
style.css
content_copyfile_download
html, body {
 margin: 0;
 padding: 0;
 }
body {
 background-color: white; 
 font-family: Verdana, sans-serif; 
 font-size: 100%;
 }

/** mise en page**/
#contener{
  position:relative; height:400px}

#positionimage{
  position:absolute;
  z-index:1;
  opacity:0.4;
}

#positionimage:hover{
  opacity:1;
}

#fond{
  position:absolute;
  top:30px;left:40px; 
  width:420px; height:130px; 
  z-index:2; 
  border-radius:10px; 
  background-color:white;
}

#fond:hover{
  opacity:0; 
}

#reward{
  font-size:300%;
  margin:8px 50px 50px 50px;
}

#gandalf{
 position:absolute;
  top:250px;left:120px; 
  width:600px; height:400px; 
  z-index:2;
  font-size:400%; 
  color:white;}
   
#gandalf:hover{  
  top:450px;left:200px;
  font-size:200%;
}