FaroukDev/findThePrecious.html

## findThePrecious.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FindThePrecious</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <header>
      <nav>
          <h1>FindThePrecious</h1>
        <ul>
          <li><a href="#">Fellows</a></li>
          <li><a href="#">The Ring</a></li>
          <li><a href="#">Get my reward</a></li>
          <li><a href="#">Join the army</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <div class="slider">
        <a href="#"><h2>Dangerous fellowship try to destroy the Ring</h2><img src="https://via.placeholder.com/140" alt="slider"><span>Orcs,Goblins,Balrogs,protect your master Sauron !</span></a>
      </div>
    </section>
    <section>
      <div class="wanted">
        <h2>Fellows wanted dead (or alive if you want eat them later)</h2>
        <div class="bouton">
          <button>Most wanted</button>
          <button>Most Dangerous</button>
          <button>Already captured</button>
        </div>
        <div id="perso">
          <div id="bloc_img">
            <div id="img1" class="img1bis">
              <img src="gandalf.png" alt="Gandalf" />
              <div id="text1" class="text1_bis">
                  <h4>reward <span>1000</span></h4>
                  <h4>golden coins</h4>
              </div>
                <div id="text2" class="text2_bis">
                  <span>Gandalf</span>
                </div>
                <div id="text3" class="text3_bis">
                  <span>Gandalf</span>
                </div>
            </div>
          </div>
            <figure>
              <img src="https://via.placeholder.com/100" alt="hobbit" />
                <figcaption><h4>Dead</h4><h3>Hobbit #3</h3> </figcaption>
            </figure>
            <figure>
              <img src="https://via.placeholder.com/100" alt="yummy dwarf" />
                <figcaption><h4>Reward 250 gold coins</h4><h3>Yummy Dwarf</h3> </figcaption>
            </figure>
        </div>
        <hr>
      </div>
    </section>
    <section>
    <div class="reward">
      <h2>I have captured one of them, how to get my reward ?</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien libero, aliquam nec vestibulum non, venenatis non eros. Donec feugiat semper cursus. Ut sodales justo eu nibh feugiat, ut tempor erat varius. Donec sed diam vel nulla tempus volutpat. Etiam risus nunc, imperdiet a ullamcorper non, pulvinar et mauris. Fusce auctor elementum dui, vitae tristique neque venenatis vel. Curabitur mattis odio at tempor fringilla. Proin viverra enim ac tortor ornare elementum. Vivamus non felis ut lectus ultrices ornare. </p>
      <button>Contact us</button>
    </div>
    <div class="reward_img">
        <img src="https://via.placeholder.com/140" alt="reward">
    </div>
    </section>
    <hr>
    <section>
      <div class="hunter">
        <h2>Best hunters</h2>
        <div class="hunter1">
            <img src="https://via.placeholder.com/70" alt="ElvesKiller">
            <span>ElvesKiller22</span>
            <span>2 captures-<a href="#">Profile</a></span>
            <button>like 68K</button>
        </div>
        <div class="hunter2">
            <img src="https://via.placeholder.com/70" alt="Goblin4(">
            <span>Goblin45</span>
            <span>1 capture-<a href="#">Profile</a></span>
            <button>like 68K</button>
        </div>
      </div>
    </section>
    <hr>
    <section>
      <div class="ring">
        <h2>About the ring</h2>
        <p> Ring Capabilities</p>
        <p>What can our master Sauron do with the ring?</p>
        <table>
            <tr>
              <td>Features</td>
              <td>Description</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 my world</td>
            </tr>
          </table>
          <p>Why the ring is awesome</p>
          <p>My precioooooussssss! Hrk Hrk, we want our preeciooouuusss!!</p><span>Gollum</span><img src="https://via.placeholder.com/110" alt="gollum">
      </div>
    </section>
    <hr>
    <section>
      <div class="mordor">
        <h2>Join Mordor, we need you!</h2>
        <img src="https://via.placeholder.com/110" alt="mordor army">
        <button>More info on SauronRulesThemAll.com</button>
      </div>
    </section>
    <hr>
    <section>
      <div class="contact">
        <h2>Contact</h2>
        <form method="post" action="#">
          <label for="email1"></label>
          <input type="email" id="email1" name="email1" placeholder="@">
          <label for="adress"></label>
          <input type="text" id="adress" name="adress" placeholder="adress">
          <SELECT name="nom" size="1">
            <OPTION>I have seen one of them
            <OPTION>I have seen The wizard
            <OPTION>I have seen an orc
            </SELECT>
          <label for="message">Message</label>
          <textarea name="message" id="message" required="" placeholder="your message here"></textarea>
        </form>
      </div>
    </section>
  <footer>
    <div class="footer1">
        <ul>
            <li><a href="#">About us</a></li>
            <li><a href="#">Fellows</a></li>
            <li><a href="#">Join our army</a></li>
        </ul>
    </div>
    <div class="footer2">
        <ul>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Reward conditions</a></li>
            <li><a href="#">Legal mentions</a></li>
        </ul>
    </div>
    <div class="website">
        <a href="#">Sauron4Ever.com</a>
        <a href="#">Follow him also on twitter</a>
    </div>
  </footer>
</div>
</body>
</html>

## style.css
body{
    font-family:'Open Sans', sans-serif;
}

#perso img{
    width: 300px;
    height:300px;
}
#img1{
    width:300px;
    height:300px;
    margin-bottom:100px;
}

#img1 img{
    opacity: 0.5;
    margin-top:20px;

}

#text1 h4{
    text-align: center;
    font-size: 20px;
    line-height: 20px;

}

#text1{

    opacity: 0.8;
    position: relative;
    bottom: 320px;
    left: 25px;
    height: 80px;
    width: 250px;
    background-color: white;
    border-radius: 10px;


}

#text1 h4 span{
    color: orange;
}


#text2 span{
    text-align: center;
    font-size: 40px;
    position: absolute;
    bottom: 60px;
    left: 70px;
    color: white;
    font-weight: bold;
}

#text3 span{
    text-align:center;
    font-size:20px;
    color: white;
    position: absolute;
    bottom: 25px;
    left:105px;
    font-weight:bold;

}

#bloc_img{
    position:relative;
}

.text3_bis{
    display:none;
}

#img1:hover .text3_bis{
    display:block;


}

#img1 img:hover{
    opacity:1;
}

.text1_bis{
    display: block;
}
#img1:hover .text1_bis{
    display:none;
}

.text2_bis{
    display: block;
}
#img1:hover .text2_bis{
    display:none;
}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>FindThePrecious</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="container">
	<header>
	<nav>
	<h1>FindThePrecious</h1>
	<ul>
	<li><a href="#">Fellows</a></li>
	<li><a href="#">The Ring</a></li>
	<li><a href="#">Get my reward</a></li>
	<li><a href="#">Join the army</a></li>
	<li><a href="#">Contact us</a></li>
	</ul>
	</nav>
	</header>
	<section>
	<div class="slider">
	<a href="#"><h2>Dangerous fellowship try to destroy the Ring</h2><img src="https://via.placeholder.com/140" alt="slider"><span>Orcs,Goblins,Balrogs,protect your master Sauron !</span></a>
	</div>
	</section>
	<section>
	<div class="wanted">
	<h2>Fellows wanted dead (or alive if you want eat them later)</h2>
	<div class="bouton">
	<button>Most wanted</button>
	<button>Most Dangerous</button>
	<button>Already captured</button>
	</div>
	<div id="perso">
	<div id="bloc_img">
	<div id="img1" class="img1bis">
	<img src="gandalf.png" alt="Gandalf" />
	<div id="text1" class="text1_bis">
	<h4>reward <span>1000</span></h4>
	<h4>golden coins</h4>
	</div>
	<div id="text2" class="text2_bis">
	<span>Gandalf</span>
	</div>
	<div id="text3" class="text3_bis">
	<span>Gandalf</span>
	</div>
	</div>
	</div>
	<figure>
	<img src="https://via.placeholder.com/100" alt="hobbit" />
	<figcaption><h4>Dead</h4><h3>Hobbit #3</h3> </figcaption>
	</figure>
	<figure>
	<img src="https://via.placeholder.com/100" alt="yummy dwarf" />
	<figcaption><h4>Reward 250 gold coins</h4><h3>Yummy Dwarf</h3> </figcaption>
	</figure>
	</div>
	<hr>
	</div>
	</section>
	<section>
	<div class="reward">
	<h2>I have captured one of them, how to get my reward ?</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien libero, aliquam nec vestibulum non, venenatis non eros. Donec feugiat semper cursus. Ut sodales justo eu nibh feugiat, ut tempor erat varius. Donec sed diam vel nulla tempus volutpat. Etiam risus nunc, imperdiet a ullamcorper non, pulvinar et mauris. Fusce auctor elementum dui, vitae tristique neque venenatis vel. Curabitur mattis odio at tempor fringilla. Proin viverra enim ac tortor ornare elementum. Vivamus non felis ut lectus ultrices ornare. </p>
	<button>Contact us</button>
	</div>
	<div class="reward_img">
	<img src="https://via.placeholder.com/140" alt="reward">
	</div>
	</section>
	<hr>
	<section>
	<div class="hunter">
	<h2>Best hunters</h2>
	<div class="hunter1">
	<img src="https://via.placeholder.com/70" alt="ElvesKiller">
	<span>ElvesKiller22</span>
	<span>2 captures-<a href="#">Profile</a></span>
	<button>like 68K</button>
	</div>
	<div class="hunter2">
	<img src="https://via.placeholder.com/70" alt="Goblin4(">
	<span>Goblin45</span>
	<span>1 capture-<a href="#">Profile</a></span>
	<button>like 68K</button>
	</div>
	</div>
	</section>
	<hr>
	<section>
	<div class="ring">
	<h2>About the ring</h2>
	<p> Ring Capabilities</p>
	<p>What can our master Sauron do with the ring?</p>
	<table>
	<tr>
	<td>Features</td>
	<td>Description</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 my world</td>
	</tr>
	</table>
	<p>Why the ring is awesome</p>
	<p>My precioooooussssss! Hrk Hrk, we want our preeciooouuusss!!</p><span>Gollum</span><img src="https://via.placeholder.com/110" alt="gollum">
	</div>
	</section>
	<hr>
	<section>
	<div class="mordor">
	<h2>Join Mordor, we need you!</h2>
	<img src="https://via.placeholder.com/110" alt="mordor army">
	<button>More info on SauronRulesThemAll.com</button>
	</div>
	</section>
	<hr>
	<section>
	<div class="contact">
	<h2>Contact</h2>
	<form method="post" action="#">
	<label for="email1"></label>
	<input type="email" id="email1" name="email1" placeholder="@">
	<label for="adress"></label>
	<input type="text" id="adress" name="adress" placeholder="adress">
	<SELECT name="nom" size="1">
	<OPTION>I have seen one of them
	<OPTION>I have seen The wizard
	<OPTION>I have seen an orc
	</SELECT>
	<label for="message">Message</label>
	<textarea name="message" id="message" required="" placeholder="your message here"></textarea>
	</form>
	</div>
	</section>
	<footer>
	<div class="footer1">
	<ul>
	<li><a href="#">About us</a></li>
	<li><a href="#">Fellows</a></li>
	<li><a href="#">Join our army</a></li>
	</ul>
	</div>
	<div class="footer2">
	<ul>
	<li><a href="#">FAQ</a></li>
	<li><a href="#">Reward conditions</a></li>
	<li><a href="#">Legal mentions</a></li>
	</ul>
	</div>
	<div class="website">
	<a href="#">Sauron4Ever.com</a>
	<a href="#">Follow him also on twitter</a>
	</div>
	</footer>
	</div>
	</body>
	</html>
	body{
	font-family:'Open Sans', sans-serif;
	}

	#perso img{
	width: 300px;
	height:300px;
	}
	#img1{
	width:300px;
	height:300px;
	margin-bottom:100px;
	}

	#img1 img{
	opacity: 0.5;
	margin-top:20px;

	}

	#text1 h4{
	text-align: center;
	font-size: 20px;
	line-height: 20px;

	}

	#text1{

	opacity: 0.8;
	position: relative;
	bottom: 320px;
	left: 25px;
	height: 80px;
	width: 250px;
	background-color: white;
	border-radius: 10px;


	}

	#text1 h4 span{
	color: orange;
	}


	#text2 span{
	text-align: center;
	font-size: 40px;
	position: absolute;
	bottom: 60px;
	left: 70px;
	color: white;
	font-weight: bold;
	}

	#text3 span{
	text-align:center;
	font-size:20px;
	color: white;
	position: absolute;
	bottom: 25px;
	left:105px;
	font-weight:bold;

	}

	#bloc_img{
	position:relative;
	}

	.text3_bis{
	display:none;
	}

	#img1:hover .text3_bis{
	display:block;


	}

	#img1 img:hover{
	opacity:1;
	}

	.text1_bis{
	display: block;
	}
	#img1:hover .text1_bis{
	display:none;
	}

	.text2_bis{
	display: block;
	}
	#img1:hover .text2_bis{
	display:none;
	}