ConstanceHT/gandalf.html

## gandalf.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href= "monFichierDeStyle.css"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Gandalf</title>
  </head>
  <body>

    <wrapper>
      <div class="pic">
          <img src="http://images.innoveduc.fr/integration_gandalf.png" />
          <div class="reward">
              <p class="texte">reward <span>1000</span><br/>golden coins</p>
          </div>
          <div class="name">
              <h3 class="gandalf">Gandalf</h3>
          </div>
      </div>
      </wrapper>
  </body>
</html>


## monFichierDeStyle.css
body
{
font-family: 'Arial', sans-serif;
width: 960px;
}

.pic
{
position: relative;
width: 300px;
}

img
{
opacity: 0.4;
}

.pic:hover img {
opacity: 1;
transition : 0.7s ease-in-out;
}


.texte
{
position: absolute;
width: 300px;
top: 3%;
left: 30%;
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
color: #000000;
border-radius: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 3em;
}

.pic:hover .texte
{
display:none;
}

.name
{
position: absolute;
top: 40%;
left: 50%;
color: #FFFFFF;
font-size: 2em;
}

.pic:hover .name {
font-size: 1.em;
top: 80%;
left: 50%;
transition : 0.4s ease-in-out;
}

span
{
color:#e9993d;
}


wrapper
{
  postion: relative;
  display: block;
  width: 300px;
  margin-left: 60%;
  margin-top: 10%;
  margin-bottom: 10%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href= "monFichierDeStyle.css"/>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<title>Gandalf</title>
	</head>
	<body>

	<wrapper>
	<div class="pic">
	<img src="http://images.innoveduc.fr/integration_gandalf.png" />
	<div class="reward">
	<p class="texte">reward <span>1000</span><br/>golden coins</p>
	</div>
	<div class="name">
	<h3 class="gandalf">Gandalf</h3>
	</div>
	</div>
	</wrapper>
	</body>
	</html>
	body
	{
	font-family: 'Arial', sans-serif;
	width: 960px;
	}

	.pic
	{
	position: relative;
	width: 300px;
	}

	img
	{
	opacity: 0.4;
	}

	.pic:hover img {
	opacity: 1;
	transition : 0.7s ease-in-out;
	}


	.texte
	{
	position: absolute;
	width: 300px;
	top: 3%;
	left: 30%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.9);
	color: #000000;
	border-radius: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 3em;
	}

	.pic:hover .texte
	{
	display:none;
	}

	.name
	{
	position: absolute;
	top: 40%;
	left: 50%;
	color: #FFFFFF;
	font-size: 2em;
	}

	.pic:hover .name {
	font-size: 1.em;
	top: 80%;
	left: 50%;
	transition : 0.4s ease-in-out;
	}

	span
	{
	color:#e9993d;
	}


	wrapper
	{
	postion: relative;
	display: block;
	width: 300px;
	margin-left: 60%;
	margin-top: 10%;
	margin-bottom: 10%;
	}