Created
January 29, 2019 21:08
-
-
Save Lexhoo/de43c8bafe73bb0166774cec0763778b to your computer and use it in GitHub Desktop.
Gandalf Dogoum Alex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container | |
{ | |
position:relative; | |
width:100%; | |
height:auto; | |
} | |
.container .first .image img | |
{ | |
position:absolute; | |
top:0; | |
left:0; | |
width:%; | |
height:auto; | |
transform:0.5s; | |
opacity:0.7; | |
} | |
.container .first h2 | |
{ | |
background-color:#EBE8E8; | |
margin-left:90px; | |
margin-right:4px; | |
position:absolute; | |
border-radius:15px; | |
padding: 4px 5px 8px 50px; | |
width:27%; | |
} | |
.container .first span | |
{ | |
color:#F05411; | |
} | |
.container .first p | |
{ | |
color:white; | |
position:absolute; | |
font-size:4.3em; | |
margin-top:280px; | |
margin-left:110px; | |
} | |
.container .first:hover .text h2 | |
{ | |
opacity:0; | |
} | |
.container .first:hover .image img .text | |
{ | |
opacity: 0; | |
} | |
.container .first:hover p | |
{ | |
color:white; | |
font-size:3.3em; | |
margin-top:450px; | |
margin-left:200px; | |
} | |
.container:hover .first .image img | |
{ | |
opacity:1; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>findtheprecious</title> | |
<link rel="stylesheet" href="monFichierDeStyle.css" /> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="first"> | |
<div class="image"> | |
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf"> | |
</div> | |
<div class= "text"> | |
<h2>reward <span>1000</span> <br /> golden coin</h2> | |
<p>Gandalf</p> | |
</div> | |
</div> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment