Lexhoo/Css Gandalf

## Css Gandalf
.container .first .image img{

  top:0;
  left:0;
  width:20%;
  height:14%;
  transform:0.5;
  opacity:0.5;

}

.container .first p{
  width:30%;
  color:white;
  font-size:2.5em;
  bottom: 270px;
  margin-top:45px;
  margin-left:50px;
  margin-right:50px;
  border-radius:15px;
  position:relative;
}


.container span{
  color:#F05411
}

.container .first:hover .texte h3{
  opacity:0;
}

.container .premier:hover .image img .texte{
  opacity: 1

}
.container .first:hover p{
  color:white;
  font-size:1.5em;
  bottom: 180px;
  margin-top:45px;
  margin-left:90px;
  margin-right:450px;
  border-radius:15px;
  position:relative;
  width:50%;
}


.container .first:hover .image img{
  opacity:1;

}

.texte{
  font-family: Verdana, sans-serif;

}

 .container h3{
  bottom: 280px;
  margin-top:10px;
  margin-left:30px;
  margin-right:1059px;
  border-radius:15px;
  position:relative;
  font-size:1em;
  background-color: #EBE8E8;
  opacity: 0.8;
  padding: 9px 10px 20px 29px;

}

## Html Gandalf
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <title>findtheprecious</title>
  <link rel="stylesheet" href="monFichierDeStyle.css" />
</head>

<body>
  <h1>Find the precious</h1>
  <header>

    <ul id="menu_horizontal">

      <li>Fellows</li>


      <li>The Ring</li>


      <li>Get my reward</li>


      <li>Best hunters</li>


      <li>Join the army</li>


      <li>Contact us</li>


    </ul>

  </header>

  <div>

    <a>Dangerous fellowships try to destroy the ring</a>
    <br>

    <a> Orcs, Goblins, Balrogs, protect your master Sauron !</a>


  </div>

  <div>

    <h1 id="#Fellows">Fellows wanted dead
    </h1>

    <a>(Or alive if you want to eat them later !)</a>
    <ul id="#3">

      <li>
        <a href="#Most_wanted">
    Most wanted</a></li>

      <li>
        <a href="#Most_dangerous">
    Most dangerous</a></li>
      <li>
        <a href="#Already_captured">
    Already captured</a></li>
    </ul>
  </div>

    <div class="container">
      <div class="first">
      <div class="image">
        <img src="http://images.innoveduc.fr/integration_gandalf.png"  alt="gandalf">
      </div>
      <div class= "texte">
         <h3>reward <span>1000</span> <br /> golden coin</h3>
         <p>Gandalf</p>
      </div>

  </div>

  <section>

    <h2 id="Get_my_reward">Get my reward
    </h2>

    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor
  </a>
    <br>
    <img
      src="https://via.placeholder.com/140"
      alt="140x140">


  </section>

  <section>

    <h2 id="Best_hunters">Best hunters</h2>

    <img
      src="https://via.placeholder.com/70"
      alt="70x70">
    <a>ElvesKiller22</a>

    <img
      src="https://via.placeholder.com/70"
      alt="70x70">
    <a>Goblin45</a>


  </section>

  <section>

    <h2 id="The_Ring">About the ring</h2>

    <table>

        <tr>
        <td><b>Feature</b></td>
        <td><b>Description</b></td>
        </tr>
        <tr>
          <td>Main</td>
          <td>One ring to rules them all</td>
        </tr>
        <tr>
          <td>Invisibility</td>
          <td>You can't see me</td>
        </tr>
        <tr>
          <td>Power</td>
          <td>Destroy the world</td>
        </tr>


    </table>

  </section>

  <div>
  <br>

  <a href="#Why_the_ring_is_awesomes">Why the ring is awesome</a>


   </div>

  <section>

    <h2 id="Join_the_army">Joint the army, we need you !</h2>

    <img
      src="https://via.placeholder.com/140"
      alt="140x140">


    <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</a>

    <img
      src="https://via.placeholder.com/460x65?text=Visit+Blogging.com+Now"
      alt="40x65">

  </section>

  <section>

    <h2 id="Contact_us">Contact us</h2>

  </section>

  <footer>
    <form action="/tableau_contact" method="post">
      <div>
        <label>@ :</label>
        <input type="text"/>
      </div>
      <div>
        <label>Adresse postale :</label>
        <input type="email"/>
      </div>
      <div>
        <label>Message :</label>
        <input type="text"/>
      </div>
     </form>
  </footer>

</body>

</html>
	.container .first .image img{

	top:0;
	left:0;
	width:20%;
	height:14%;
	transform:0.5;
	opacity:0.5;

	}

	.container .first p{
	width:30%;
	color:white;
	font-size:2.5em;
	bottom: 270px;
	margin-top:45px;
	margin-left:50px;
	margin-right:50px;
	border-radius:15px;
	position:relative;
	}


	.container span{
	color:#F05411
	}

	.container .first:hover .texte h3{
	opacity:0;
	}

	.container .premier:hover .image img .texte{
	opacity: 1

	}
	.container .first:hover p{
	color:white;
	font-size:1.5em;
	bottom: 180px;
	margin-top:45px;
	margin-left:90px;
	margin-right:450px;
	border-radius:15px;
	position:relative;
	width:50%;
	}


	.container .first:hover .image img{
	opacity:1;

	}

	.texte{
	font-family: Verdana, sans-serif;

	}

	.container h3{
	bottom: 280px;
	margin-top:10px;
	margin-left:30px;
	margin-right:1059px;
	border-radius:15px;
	position:relative;
	font-size:1em;
	background-color: #EBE8E8;
	opacity: 0.8;
	padding: 9px 10px 20px 29px;

	}
	<!DOCTYPE html>
	<html lang="fr">

	<head>
	<meta charset="UTF-8" />
	<title>findtheprecious</title>
	<link rel="stylesheet" href="monFichierDeStyle.css" />
	</head>

	<body>
	<h1>Find the precious</h1>
	<header>

	<ul id="menu_horizontal">

	<li>Fellows</li>


	<li>The Ring</li>


	<li>Get my reward</li>


	<li>Best hunters</li>


	<li>Join the army</li>


	<li>Contact us</li>


	</ul>

	</header>

	<div>

	<a>Dangerous fellowships try to destroy the ring</a>
	<br>

	<a> Orcs, Goblins, Balrogs, protect your master Sauron !</a>


	</div>

	<div>

	<h1 id="#Fellows">Fellows wanted dead
	</h1>

	<a>(Or alive if you want to eat them later !)</a>
	<ul id="#3">

	<li>
	<a href="#Most_wanted">
	Most wanted</a></li>

	<li>
	<a href="#Most_dangerous">
	Most dangerous</a></li>
	<li>
	<a href="#Already_captured">
	Already captured</a></li>
	</ul>
	</div>

	<div class="container">
	<div class="first">
	<div class="image">
	<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
	</div>
	<div class= "texte">
	<h3>reward <span>1000</span> <br /> golden coin</h3>
	<p>Gandalf</p>
	</div>

	</div>

	<section>

	<h2 id="Get_my_reward">Get my reward
	</h2>

	<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor
	</a>
	<br>
	<img
	src="https://via.placeholder.com/140"
	alt="140x140">




	</section>

	<section>

	<h2 id="Best_hunters">Best hunters</h2>

	<img
	src="https://via.placeholder.com/70"
	alt="70x70">
	<a>ElvesKiller22</a>

	<img
	src="https://via.placeholder.com/70"
	alt="70x70">
	<a>Goblin45</a>


	</section>

	<section>

	<h2 id="The_Ring">About the ring</h2>

	<table>

	<tr>
	<td><b>Feature</b></td>
	<td><b>Description</b></td>
	</tr>
	<tr>
	<td>Main</td>
	<td>One ring to rules them all</td>
	</tr>
	<tr>
	<td>Invisibility</td>
	<td>You can't see me</td>
	</tr>
	<tr>
	<td>Power</td>
	<td>Destroy the world</td>
	</tr>


	</table>

	</section>

	<div>
	<br>

	<a href="#Why_the_ring_is_awesomes">Why the ring is awesome</a>




	</div>

	<section>

	<h2 id="Join_the_army">Joint the army, we need you !</h2>

	<img
	src="https://via.placeholder.com/140"
	alt="140x140">


	<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</a>

	<img
	src="https://via.placeholder.com/460x65?text=Visit+Blogging.com+Now"
	alt="40x65">

	</section>

	<section>

	<h2 id="Contact_us">Contact us</h2>

	</section>

	<footer>
	<form action="/tableau_contact" method="post">
	<div>
	<label>@ :</label>
	<input type="text"/>
	</div>
	<div>
	<label>Adresse postale :</label>
	<input type="email"/>
	</div>
	<div>
	<label>Message :</label>
	<input type="text"/>
	</div>
	</form>
	</footer>

	</body>

	</html>