JuBertoo
8/31/2018 - 1:33 PM

Gandalf.html

gistfile1.txt
content_copyfile_download

header {
width: 440px;
height: 150px;
border-radius: 10px;
background-color: rgb(255, 255, 255, 0.70);
text-align: center;
position: absolute;
z-index: 3;
margin: 120px 120px;
}

header h4 {
margin-top: 30px;
font-size: 40px;
font-family: 'Montserrat', sans-serif;
}

span {
color: rgb(255, 195, 0);
}

img {
width: 480px;
height: 570px;
margin: 100px;
position: absolute;
z-index: 1;
}

section {
width: 480px;
height: 570px;
margin: 100px;
background-color: rgb(255, 255, 255, 0.50);
position: absolute;
z-index: 2;
}

section h3 {
position: absolute;
margin: 300px 70px;
z-index: 2;
font-size: 80px;
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
}

footer {
width: 320px;
height: 170px;
margin: 100px 100px;
padding-top: 400px;
padding-left: 160px; 
background-image: url("http://images.innoveduc.fr/integration_gandalf.png");
position: absolute;
z-index: 4;
color: #FFFFFF;
font-size: 60px;
font-family: 'Montserrat', sans-serif;
display: none;
}

section:hover + footer {
display: inline-block;
}

footer:hover {
display: inline-block;
}
Gandalf.html
content_copyfile_download
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="Gandalf.css" />
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <title>Gandalf</title> 
    </head>
    <body>
    	
    	<header><h4>reward <span>1000</span> golden coins</h4></header>
    	
    	<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Gandalf"/>
    	<section><h3>Gandalf</h3></section>

    	<footer><h6>Gandalf</h6></footer>

    </body>
 </html>