b0ndurant/ftp.html

## ftp.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<title>FindThePrecious</title>
	</head>
	<body>
		<header>
			<nav>
				<ul>
					<li>FindThePrecious.com</li>
					<li><a href="#fellows">Fellows</a></li>
					<li><a href="#about">The Ring</a></li>
					<li><a href="#reward">Get my reward</a></li>
					<li><a href="#best">Best Hunters</a></li>
					<li><a href="#army">Join the army</a></li>
					<li><a href="#contact">Contact us</a></li>
				</ul>
			</nav>
			<img src="http://via.placeholder.com/140x140" alt="photo1">
		</header>
		<section class="section_fellows">
			<h2 id="fellows">Fellows wanted dead(or alive if you wantto eat them later)</h2>
			<p class="mma">
				<button>Most wanted</button>
				<button>Most dangerous</button>
				<button>Already captured</button>
			</p>
			<div class="conteneur">
				<aside class="vignette">
					<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="" class="img_gandalf">
					<div class="text">
						<p class="rewardgandalf">reward <span class="mille">1000</span> golden coins</p>
						<p class="gandalf">Gandalf</p>
					</div>
				</aside>
				<aside class="vignette">
					<img src="http://via.placeholder.com/300x300" alt="">
					<p>Hobbit</p>
				</aside>
				<aside class="vignette">
					<img src="http://via.placeholder.com/300x300" alt="">
					<p>Yummy Dwarf</p>
				</aside>
			</div>
		</section>
		<hr/>
		<section class="section_reward">
			<h2 id="reward">I have captured one of them, how to get my reward ?</h2>
			<p> 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</p>
			<img src="http://via.placeholder.com/140x140" alt="photo2">
			<p>Contact us</p>
		</section>
		<hr/>
		<section class="section_best">
			<h2 id="best">Best hunters</h2>
			<div class="screen">
				<aside><img src="http://via.placeholder.com/70x70" alt="photo3">Pseudo</aside>
				<aside><img src="http://via.placeholder.com/70x70" alt="photo4">Pseudo</aside>
			</div>
		</section>
		<hr/>
		<section class="section_about">
			<h2 id="about">About the ring</h2>
			<h3>Ring Capabilities</h3>
			<table>
				<thead>
					<tr>
						<th>Feature</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody>
					<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>
				</tbody>
			</table>
			<h3>Why the ring is awesome ?</h3>
			<p>My preciooooouuuussssss ! Hrk Hrk, we want our preeciooouuuss !!</p>
			<img src="http://via.placeholder.com/110x110" alt="photo5">
		</section>
		<hr/>
		<section class="section_army">
			<h2 id="army">Join Mordor Army, we need you !</h2>
			<img src="http://via.placeholder.com/140x140" alt="photo6">
			<p>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</p>
			<p>More info on SAuronRulesthemAll.com</p>
		</section>
		<hr/>
		<section class="section_contactus">
			<h2 id="contact">Contact us</h2>
			<form method="post" action="page_fictive.php">
				<p>
	            	<input type="text" name="e-mail" id="e-mail" placeholder="@" required />
	            </p>
	            <p>
	                <input type="text" name="adress" id="adress" placeholder="Your adress here" required />
	            </p>
	            <p>
	            	<textarea name="message" id="message" rows="5" cols="60" placeholder="your message" required></textarea>
	            </p>
	        </form>
		</section>
		<footer>
			<p>About us<br/>
			   Fellow<br/>
			   Join the army
			</p>
			<p>FAQ<br/>
			   Reward conditions<br/>
			   Legal mentions
			</p>
			<p>Sauron4Ever.com<br/>
			   Follow him also on twitter
			</p>
		</footer>
	</body>
</html>

## style.css
aside
{
	width: 300px;
	height: 350px;
}
button
{
	font-size: 1.5em
}
.mma
{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.conteneur{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.img_gandalf
{
	height: 300px;
	width: 300px;
	opacity: 0.5;
}
.mille
{
	color: orange;
}
.text
{
	position: relative;
	top: -300px;
}
.rewardgandalf
{
	border-radius: 10px;
	opacity: 0.7;
	text-align: center;
	background-color: white;
	width: 250px;
	font-size: 1.8em;
	font-weight: bold;
	position: relative;
	top: -15px;
	left: 25px;
}
.gandalf
{
	color: white;
	font-size: 2.9em;
	font-weight: bold;
	position: relative;
	top: 30px;
	left: 63px;
}
.vignette:hover .rewardgandalf
{
	display: none;
}
.vignette:hover .gandalf
{
	position: relative;
	top: 230px;
	left: 105px;
	font-size: 1.4em;
}
.vignette:hover .img_gandalf
{
	opacity: 0.9;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<title>FindThePrecious</title>
	</head>
	<body>
	<header>
	<nav>
	<ul>
	<li>FindThePrecious.com</li>
	<li><a href="#fellows">Fellows</a></li>
	<li><a href="#about">The Ring</a></li>
	<li><a href="#reward">Get my reward</a></li>
	<li><a href="#best">Best Hunters</a></li>
	<li><a href="#army">Join the army</a></li>
	<li><a href="#contact">Contact us</a></li>
	</ul>
	</nav>
	<img src="http://via.placeholder.com/140x140" alt="photo1">
	</header>
	<section class="section_fellows">
	<h2 id="fellows">Fellows wanted dead(or alive if you wantto eat them later)</h2>
	<p class="mma">
	<button>Most wanted</button>
	<button>Most dangerous</button>
	<button>Already captured</button>
	</p>
	<div class="conteneur">
	<aside class="vignette">
	<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="" class="img_gandalf">
	<div class="text">
	<p class="rewardgandalf">reward <span class="mille">1000</span> golden coins</p>
	<p class="gandalf">Gandalf</p>
	</div>
	</aside>
	<aside class="vignette">
	<img src="http://via.placeholder.com/300x300" alt="">
	<p>Hobbit</p>
	</aside>
	<aside class="vignette">
	<img src="http://via.placeholder.com/300x300" alt="">
	<p>Yummy Dwarf</p>
	</aside>
	</div>
	</section>
	<hr/>
	<section class="section_reward">
	<h2 id="reward">I have captured one of them, how to get my reward ?</h2>
	<p> 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</p>
	<img src="http://via.placeholder.com/140x140" alt="photo2">
	<p>Contact us</p>
	</section>
	<hr/>
	<section class="section_best">
	<h2 id="best">Best hunters</h2>
	<div class="screen">
	<aside><img src="http://via.placeholder.com/70x70" alt="photo3">Pseudo</aside>
	<aside><img src="http://via.placeholder.com/70x70" alt="photo4">Pseudo</aside>
	</div>
	</section>
	<hr/>
	<section class="section_about">
	<h2 id="about">About the ring</h2>
	<h3>Ring Capabilities</h3>
	<table>
	<thead>
	<tr>
	<th>Feature</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<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>
	</tbody>
	</table>
	<h3>Why the ring is awesome ?</h3>
	<p>My preciooooouuuussssss ! Hrk Hrk, we want our preeciooouuuss !!</p>
	<img src="http://via.placeholder.com/110x110" alt="photo5">
	</section>
	<hr/>
	<section class="section_army">
	<h2 id="army">Join Mordor Army, we need you !</h2>
	<img src="http://via.placeholder.com/140x140" alt="photo6">
	<p>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</p>
	<p>More info on SAuronRulesthemAll.com</p>
	</section>
	<hr/>
	<section class="section_contactus">
	<h2 id="contact">Contact us</h2>
	<form method="post" action="page_fictive.php">
	<p>
	<input type="text" name="e-mail" id="e-mail" placeholder="@" required />
	</p>
	<p>
	<input type="text" name="adress" id="adress" placeholder="Your adress here" required />
	</p>
	<p>
	<textarea name="message" id="message" rows="5" cols="60" placeholder="your message" required></textarea>
	</p>
	</form>
	</section>
	<footer>
	<p>About us<br/>
	Fellow<br/>
	Join the army
	</p>
	<p>FAQ<br/>
	Reward conditions<br/>
	Legal mentions
	</p>
	<p>Sauron4Ever.com<br/>
	Follow him also on twitter
	</p>
	</footer>
	</body>
	</html>
	aside
	{
	width: 300px;
	height: 350px;
	}
	button
	{
	font-size: 1.5em
	}
	.mma
	{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	}
	.conteneur{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	}
	.img_gandalf
	{
	height: 300px;
	width: 300px;
	opacity: 0.5;
	}
	.mille
	{
	color: orange;
	}
	.text
	{
	position: relative;
	top: -300px;
	}
	.rewardgandalf
	{
	border-radius: 10px;
	opacity: 0.7;
	text-align: center;
	background-color: white;
	width: 250px;
	font-size: 1.8em;
	font-weight: bold;
	position: relative;
	top: -15px;
	left: 25px;
	}
	.gandalf
	{
	color: white;
	font-size: 2.9em;
	font-weight: bold;
	position: relative;
	top: 30px;
	left: 63px;
	}
	.vignette:hover .rewardgandalf
	{
	display: none;
	}
	.vignette:hover .gandalf
	{
	position: relative;
	top: 230px;
	left: 105px;
	font-size: 1.4em;
	}
	.vignette:hover .img_gandalf
	{
	opacity: 0.9;
	}