findtheprecious css+html

css findtheprecious

html {
	background-color: grey;
	font-family: cursive;
}
a {
	text-decoration: none;
	color: white;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   section head   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
header {
	display: flex;
	justify-content: center;
	padding: 00px;
	background-color: black;
	box-shadow: 0px 0px 10px 2px black;
	border-radius: 10px;
	position: fixed;
	left: 400px;
	z-index: 2;
}
ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	list-style-type: none;
	width: 200px;
	height: 75px;

}
#titre {
	display: flex;
	flex: 1;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
	color: white;
}
.transi1 {
	text-decoration: none; color: white;
	transition: 1s ease;
	border-top: 5px solid black;
	border-bottom: 5px solid black;
	padding: 20px;
}
.transi1:hover {
	border-top: 5px solid gold;
	border-bottom: 5px solid gold;
	padding:4px;
	color: gold;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Fellows part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#felhead {
	text-align: center;
	font-size: 20px;
}
#felhead h1 {
	position: relative;
	top: 300px;
	transition: 1s ease;
	z-index: 1;
	text-shadow: 2px 2px 15px black;
}
#felhead h2 {
	position: relative;
	top: 300px;
	transition: 1s ease;
	z-index: 1 ;
	text-shadow: 2px 2px 15px black;
}
#felhead img {
	opacity: 0.3;
	transition: 1s ease;
	z-index: -1; 
	border: 2px solid black;
	box-shadow: 2px 2px 100px black;
}
#felhead:hover h1, #felhead:hover h2 {
	opacity: 0;
}
#felhead:hover img {
	opacity: 1;
}
#wanted {
	text-align: center;
	text-shadow: 1px 1px 15px black;
}
#wanted h2 {
	font-size: 35px;
}
#wantcategory {
	display: flex;
	justify-content: center;
}
#wantcategory a {
	transition: 0.7s ease;
	padding: 0 10px;
	margin: 0 10px;
	font-size: 20px;
}
#wantcategory a:hover {
	background-color: black;
	box-shadow: 2px 2px 10px black;
	border-radius: 10px;
	color: grey;
	padding: 10px 10px;
}
#mostclass {
	display: flex;
	justify-content: center;
}
#mostclass img {
	transition: 0.5s ease;
	opacity: 0.2;
	z-index: 1;
}
#mostclass img:hover {
	opacity: 1;
}
.most{
	border: 1px solid black;
}
.goldcoins {
	position: relative;
	bottom: 250px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	z-index: -1;
	background-color: black;
}
span {
	color: #FF8C00;
}
#deadreward {
	position: relative;
	bottom: 220px;
	font-size: 50px;
	font-weight: bold;
	z-index: -1;
}
.namereward {
	position: relative;
	bottom: 120px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	z-index: -1;
	background-color: #FF8C00;
}
.racereward {
	font-size: 30px;
	position: relative;
	bottom: 50px;
	background-color: #FF8C00;
}
#racedead {
	font-size: 30px;
	position: relative;
	bottom: 93.5px;
	background-color: #FF8C00;
}
#blabladead {
	position: relative;
	bottom: 53px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Ring part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
table {
	border-collapse: collapse;
	margin: 30px;
	box-shadow: 2px 2px 20px black;
}
td, th {
	border: 1px solid black;
	padding: 15px 15px;
	width: 50%;
	text-align: center;
}
.lineimpair {
	background-color: #BBB;
}
.linepair {
	background-color: #EEE;
}
#tablering {
	border: 2px solid black;
	border-radius: 5px;
	margin-right: 695px;
	margin-left: 695px;
	padding-left: 70px;
	background-color: #FF8C00;
}
#tablering p {
	position: relative;
	text-shadow: 3px 3px 10px black;
	left: 220px;
	font-size: 20px;
	text-decoration: underline;
}
#capring {
	padding-bottom: 20px;
	text-decoration: underline; 
}
#ring {
	text-align: center;	
	text-shadow: 1px 1px 10px #FF8C00;
	font-size: 35px;
}
#comgollum {
	border: 2px solid black;
	border-radius: 5px;
	margin-right: 695px;
	margin-left: 695px;
	margin-top: 50px;
	background-color: #EEE;
}
#comgollum p {
}
#comgollum img {
	position: relative;
	left: 600px;
	bottom: 50px;
	border-radius: 50%;
}
#question {
	border: 1px solid black;
	border-radius: 5px;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	bottom: 17px;
	background-color: #FF8C00;
}
#reponse, #gollum {
	position: relative;
	top: 40px;
	right: 235px;
	text-align: right;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Reward part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.repart {
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
#secreward h2 {
	font-size: 35px;
	text-shadow: 1px 1px 15px black;
}
#imgreward {
	position: relative;
	left: 1500px;
}
#buttonrew {
	background-color: black;
	background-image: linear-gradient(#FF8C00, black);
	color: white;
	padding: 18px 18px;
	border-radius: 15px;
	position: relative;
	left: 600px;
	bottom: 75px;
}
#buttonrew:hover {
	background-image: linear-gradient(black, #FF8C00);
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Hunters part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#hunters {
	text-align: center;
	font-size: 35px;
	text-shadow: 1px 1px 15px black;
}
#besthunters1 {
	display: inline-flex;
	flex-direction: column;
	text-shadow: 2px 2px 10px black;
	padding-left: 700px;
}
#besthunters2 {
	display: inline-flex;
	flex-direction: column;
	text-shadow: 2px 2px 10px black;
	padding-left: 700px;
}
#besthunters1 img {
	position: relative;
	right: 100px;
	top: 90px;
	border-radius: 10px;
	box-shadow: 2px 2px 15px black;
}
#besthunters2 img {
	position: relative;
	right: 100px;
	top: 90px;
	border-radius: 10px;
	box-shadow: 2px 2px 15px black;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Army part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#army h2 {
	text-align: center;
	font-size: 35px;
	text-shadow: 1px 1px 15px black;
}
#army img {
	float: left;
	margin-right: 30px
}
#army p {
	text-align: justify;
}
#army input {
	position: relative;
	left: 45%;
	padding: 10px 10px;
	border-radius: 15px;
	background-image: linear-gradient(#FF8C00, black);
}
#army input:hover {
	background-image: linear-gradient(black, #FF8C00);
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Contact part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#contactus {
	text-align: center;
}
#contact {
	text-align: center;
	font-size: 35px;
	text-shadow: 1px 1px 15px black;	
}
#contactus div form input {
	padding-right: 53px;
}
#contactus div form textarea {
	padding-right: 20px;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Footer part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
#footer {
	background-color: black;
}
.foot {
	display: inline-flex;
	flex-direction: column;
}
.frtfoot {
	margin-left: 20px;
	justify-content: flex-start;
}
.sndfoot {
	margin-left: 500px;
	justify-content: flex-start;
}
.thrdfoot {
	margin-left: 900px;
	justify-content: flex-start;
}
.colorfoot:hover {
	color: #FF8C00;
}

html findtheprecious

<!DOCTYPE html>
<html lang="zxx">
<head>
	<title>FindThePrecious.com</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="mordorstyle2.css">
</head>
<body>
	<header>
		<h2 id="titre">FindThePrecious.com</h2>
		<nav>
			<ul>
				<li><a class="transi1" href="#fellows">Fellows</a></li><!--
				--><li><a class="transi1" href="#ring">The Ring</a></li><!--
				--><li><a class="transi1" href="#reward">Get my reward</a></li><!--
				--><li><a class="transi1" href="#hunters">Best Hunters</a></li><!--
				--><li><a class="transi1" href="#army">Join the army</a></li><!--
				--><li><a class="transi1" href="#contact">Contact us</a>div</li>
			</ul>
		</nav>
	</header>
	<br/><br/><br/><br/><br/>
	<hr/>
	<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Fellows part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
		<div id="felhead">
			<h1 id="fellows">Dangerous fellowship try to destroy the ring</h1>
			<h2>Orcs, Goblins, Balrogs, protect you master Sauron !</h2>
			<img src="https://thecinematicexperiance.files.wordpress.com/2015/01/lord-of-the-rings-1-the-fellowship-of-the-ring-10.jpg" alt="fellowship of the dead" id="fellowsimg">
		</div><br/><br/><br/>
	<section id="wanted">
		<h2>Fellows wanted dead</h2>
		<p>(or alive if you want to eat them later)</p>
		<nav id="wantcategory">
			<ul>
				<li><a href="wanted">Most wanted</a></li>
				<li><a href="dangerous">Most dangerous</a></li>
				<li><a href="captured">Already captured</a></li>
			</ul>
		</nav>
		<div id="mostclass">
			<div class="most"><!--most wanted-->
				<img src="https://i.pinimg.com/236x/b2/22/25/b22225154aaf0f19be8c605384bcfadf--lord-of-the-rings-the-lord.jpg" height="250" width="250" alt="un sorcier cosplayer"> 
				<p class="goldcoins">Reward <span>1000</span> gold coins</p>
				<p class="namereward">Gandalf De Kitty</p>
				<p class="racereward">The Wizard </p>
				<p>Blablablablabla, blablabla,<br/> blablablablablabla!</p>
			</div>
			<div class="most">
				<img src="http://cinemaneuf.no/wp-content/uploads/2013/01/The-Hobbit-HERO-2.jpeg" height="250" width="250" alt="nabot">
				<p id="deadreward">DEAD</p>
				<p id="racedead">Hobbit #3</p>
				<p id="blabladead">Blablablablabla, blablabla,<br/> blablablablablabla!</p>
			</div>
			<div class="most">
				<img src="http://storage.competir.com/post/tolkien-nacimiento/Images/enano.jpg" alt="ventre à pattes">
				<p class="goldcoins">Rewards <span>250</span> gold coins</p>
				<p class="namereward">Ventra Patte</p>
				<p class="racereward">Yummy Dwarf </p>
				<p>Blablablablabla, blablabla,<br/> blablablablablabla!</p>
			</div>
		</div>
	</section>
	<hr/>
	<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   The Ring part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<aside>
		<h2 id="ring">About the ring</h2>
		<div id="tablering">
			<p>Ring Capapbilities</p>
			<table>
				<caption id="capring">What can our master Sauron do with the ring ?</caption>
				<thead>
					<tr>
						<th>Feature</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody>
					<tr class="lineimpair">
						<td>Main</td>
						<td>One ring to rules them all</td>
					</tr>
					<tr class="linepair">
						<td>Invisibility</td>
						<td>You can't see me, nananananèreu</td>
					</tr>
					<tr class="lineimpair">
						<td>Power</td>
						<td>Destroy the world</td>
					</tr>
				</tbody>
			</table>
		</div>
	</aside>
	<div id="comgollum">
		<p id="question">Why the ring is awesome ?</p>
		<p id="reponse">My preciooooousssss ! Hrk Hrk, we want our preeeecioooousssss !!</p>
		<p id="gollum">Gollum</p>
		<img src="https://vignette.wikia.nocookie.net/seigneur-des-anneaux/images/8/8d/Gollum.jpg/revision/latest?cb=20121104195515&path-prefix=fr" height="110" width="110" alt="une image">
	</div>
	<hr/>	
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Get My Reward part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<section id="secreward">
		<h2 id="reward" class="repart">I have captured one of them, how to get my reward ?</h2>
		<div>
			<p class="repart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<img src="https://en.norwegianreward.com/upload/rewards/limited-edition/limited-edition-rewards-icon.png" height="140" width="140" alt="une image" id="imgreward" class="repart">
			<input type="button" name="contact" value="Contact us" onclick="window.location='#contact'" id="buttonrew" class="repart">
		</div>
	</section>
	<hr/>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Best Hunters part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<section>
		<h2 id="hunters">Best hunters</h2>
		<div id="besthunters1">
			<img src="https://cdna.artstation.com/p/assets/images/images/011/458/312/large/michael-robson-01.jpg?1529677630" height="70" width="70" alt="freaky orc">
			<p>ElvesKiller22</p>
			<p>2 capture - <a href="profile.php"> profile </a> <br/> <input type="button" name="like" value="Like"> </p>
		</div>
		<div id="besthunters2">
			<img src="https://guildberkeley.files.wordpress.com/2017/09/goblin-king.jpg" height="70" width="70" alt="happy goblin">
			<p>Goblin45</p>
			<p>1 capture - <a href="profile.php"> profile </a> <br/> <input type="button" name="like" value="Like"> </p>
		</div>
	</section>
	<hr/>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Army part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<section id="army">
		<h2>Join Mordor Army, we need you</h2>
		<div>
			<img src="https://png2.kisspng.com/20180612/zea/kisspng-sauron-the-lord-of-the-rings-evil-eye-ojos-5b1ffe8f4d5e38.7596215215288234393169.png" height="140" width="140" alt="sauron eyes">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<input type="button" name="sauron" value="More info on SauronRulesThemAll.com" onclick="window.location='https://SauronRulesThemAll.com'">
		</div>
	</section>
	<hr/>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Contact us part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<section id="contactus">
		<h2 id="contact">Contact us</h2>
		<div>
			<form method="post" action="traitement.php">

				<input type="email" name="email" placeholder="@"><br/><br/>

				<input type="text" name="home" placeholder="Address"><br/><br/>

				<select name="reasoncontact">
					<option value="I have seen one of them">I have seen one of them</option>
					<option value="I have captured one of them">I have captured one of them</option>
					<option value="I have killed one of them">I have killed one of them</option>
					<option value="I have eating one of them">I have eating one of them</option>
				</select><br/><br/>

				<textarea name="message" placeholder="Your message"></textarea>
			</form>
		</div>
	</section>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   Footer part   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
	<footer id="footer">
		<ul class="foot">
			<li class="frtfoot"><a class="colorfoot" href="#">About us</a></li>
			<li class="frtfoot"><a class="colorfoot" href="fellows.html">Fellows</a></li>
			<li class="frtfoot"><a class="colorfoot" href="army.html">Join our army</a></li>
		</ul>
		<ul class="foot">
			<li class="sndfoot"><a class="colorfoot" href="#">FAQ</a></li>
			<li class="sndfoot"><a class="colorfoot" href="#">Reward conditions</a></li>
			<li class="sndfoot"><a class="colorfoot" href="#">Legal mentions</a></li>
		</ul>
		<ul class="foot">
			<li class="thrdfoot"><a class="colorfoot" href="https://www.Sauron4Ever.com">Sauron4Ever.com</a></li>
			<li class="thrdfoot"><a class="colorfoot" href="#">Follow him also on twitter</a></li>
		</ul>
	</footer>
</body>
</html>