muriel1995
2/10/2019 - 9:59 AM

Challenge CSS

Challenge CSS

challenge-css.markdown
content_copyfile_download
  • Rendered
  • Source

Challenge CSS

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 class="positionimage"><img src="http://images.innoveduc.fr/integration_gandalf.png" alt=""></div>
      <div class="fond"><p id="reward">reward <span style="color:red">1000</span> golden coins</p></div>
      <div class="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; width: 200px;height:400px}

#contener:hover .positionimage{ 
  opacity:1}
    
#contener:hover .fond{
  display:none;}

#contener:hover .gandalf{  
  top:450px;left:200px;
  font-size:200%;}

.positionimage{
  position:absolute;
  opacity:0.4;}

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

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

.gandalf{
  position:absolute;
  top:250px;left:120px; 
  width:600px; height:400px; 
  font-size:400%; 
  color:white;}