Skip to content

Instantly share code, notes, and snippets.

@soner8

soner8/findThePrecious.html

Created February 22, 2018 19:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save soner8/0bc902593cb3aa2bf4aed15e2f28a6a2 to your computer and use it in GitHub Desktop.
Save soner8/0bc902593cb3aa2bf4aed15e2f28a6a2 to your computer and use it in GitHub Desktop.
Download ZIP
Structurer une page HTML Macodou
Raw
findThePrecious.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>findThePrecious.com</title>
</head>
<body>
<header>
<h1>findThePrecious.com</h1>
<nav>
<ul>
<li>Fellows</li>
<li>Ring</li>
<li>Hunters</li>
<li>Join</li>
<li>Reward</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section>
<h2>Dangerous Fellowship</h2>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="Fellow"></a>
<p>Dangerous Fellowship try to destroy the ring</p>
</section>
<section>
<h2>Fellows</h2>
<ul>
<li>Most Wanted</li>
<li>Most Dangerous</li>
<li>Already Captured</li>
</ul>
<ul>
<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/40x40" alt="wizard">Wizard</a></li>
<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/40x40" alt="Hobbit">Hobbit</a></li>
<li><a href="https://placeholder.com"><img src="http://via.placeholder.com/40x40" alt="Dwarf">Dwarf</a></li>
</ul>
</section>
<section>
<h2>Reward</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="reward"></a>
<button>Contact Us</button>
</section>
<section>
<h2>Best Hunters</h2>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="Profile pic"></a>
<p>Elves Killer <br/>2 captures<a href="profile.html">-Profile</a></p>
<p>Like</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="Profile pic2"></a>
<p>Gobling <br/> 1 capture<a href="profile2.html">-Profile</a></p>
<p>Like</p>
</section>
<section>
<h2>About the ring</h2>
<h5>Ring Capabilities</h5>
<p>What can our master Sauron do with the ring ?</p>
<table>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
<tr>
<th>Main</th>
<th>Rule them all</th>
</tr>
<tr>
<th>Invisibility</th>
<th>Can't see them</th>
</tr>
<tr>
<th>Power</th>
<th>Destroy the World</th>
</tr>
</table>
<h5>Why is the ring awesome ?</h5>
<p>Lorem ipsum dolor sit amet,</p>
<p>Golum</p>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/110x110" alt="ring"></a>
</section>
<section>
<h2>Join Mordor Army, we need you !</h2>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="army"></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<button>More Info on SauronRulesThemAll.com</button>
</section>
<section>
<h2>Contact Us</h2>
<form action="contact" method="post">
<div>
<label for="mail">e-mail</label>
<input type="text" id="mail" />
</div>
<div>
<label for="adresse">adresse </label>
<input type="email" id="adresse" />
</div>
<div>
<select name="destinataire">
<option value="destinataire1@domaine.fr">I have seen one of them</option>
<option value="destinataire2@domaine.fr">I have captured one of them</option>
<option value="destinataire3@domaine.fr">I wanna join the army</option></select>
</div>
<div>
<label for="message">Your Message</label>
<textarea id="message"></textarea>
</div>
</form>
</section>
<br>
<footer>
<table>
<tr>
<th>About Us</th>
<th>FAQ</th>
</tr>
<tr>
<th>Fellows</th>
<th>Reward Conditions</th>
</tr>
<tr>
<th>Join our Army</th>
<th>Legal Mentions</th>
</tr>
</table>
<p>Sauron4Ever.com <br/>Follow him also on twitter</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment