Skip to content

Instantly share code, notes, and snippets.

@stephanBerger

stephanBerger/index.html

Last active August 23, 2019 19:54
Show Gist options
  • Save stephanBerger/3f3cac59ab3fd2f22b1358fae0b1af13 to your computer and use it in GitHub Desktop.
Save stephanBerger/3f3cac59ab3fd2f22b1358fae0b1af13 to your computer and use it in GitHub Desktop.
Download ZIP
03 - Structurer une page HTML
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Integration Quest - Wild Code School">
<meta name="author" content="Stéphan BERGER">
<meta name="language" content="en">
<link rel="stylesheet" href="styles.css">
<title>FindThePrecious.com</title>
</head>
<body>
<header class="header">
<h1>FindThePrecious.com</h1>
<nav class="menu">
<ul>
<li class="menu-item"><a href="#fellows" title="Go to the Fellows section">Fellows</a></li>
<li class="menu-item"><a href="#ring" title="Go to the Ring section">The Ring</a></li>
<li class="menu-item"><a href="#reward" title="Go to my Reward section">Get my reward</a></li>
<li class="menu-item"><a href="#hunters" title="Go to the Hunters section">Best hunters</a></li>
<li class="menu-item"><a href="#army" title="Go to the Army section">Join the army</a></li>
<li class="menu-item"><a href="#contact" title="Go to the Contact section">Contact us</a></li>
</ul>
</nav>
<div class="carousel">
<a href="https://placeholder.com"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566566666-frodo.png" alt="Caroussel"></a>
<h2>Dangerous fellowship try to destroy the ring</h2>
<h3>Orcs, Goblins, Balrogs, protect your master Sauron !</h3>
</div>
</header>
<!-- SECTION FELLOWS -->
<section id="fellows">
<div class="fellows-section">
<h2>Fellow wanted dead or alive if you want to eat them later)</h2>
<ul class="wanted-menu">
<li><a href="#wanted" title="show the most wanted">Most wanted</a></li>
<li><a href="#dangerous" title="show the most dangerous">Most dangerous</a></li>
<li><a href="#captured" title="show the already captured">Already captured</a></li>
</ul>
<div class="wanted-content">
<div id="wanted">
<div class="profiles">
<div id="profile1">
<figure>
<a href="http://images.innoveduc.fr/integration_gandalf.png" title="Gandalf"><img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Picture of Gandalf" width="250" height="286"></a>
<figcaption>The Wizard</figcaption>
</figure>
<p>Small description</p>
</div>
<div id="profile2">
<figure>
<a href="https://image.noelshack.com/fichiers/2019/34/5/1566566364-hobbit.jpg" title="The hobbit"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566566364-hobbit.jpg" alt="picture of the hobbit" width="250" height="286"></a>
<figcaption>The Hobbit#3</figcaption>
</figure>
<p>Small description</p>
</div>
<div id="profile3">
<figure>
<a href="https://image.noelshack.com/fichiers/2019/34/5/1566566363-dwarf.jpg" title="The Dwarf"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566566363-dwarf.jpg" alt="picture of the Yummy Dwarf" width="250" height="286"></a>
<figcaption>Yummy Dwarf</figcaption>
</figure>
<p>Small description</p>
</div>
</div>
</div>
<div id="dangerous">
</div>
<div id="captured">
</div>
</div>
</div>
</section>
<hr>
<!-- SECTION FELLOWS -->
<section id="reward">
<div class="reward-section">
<h2>I have captured one of them, how to get my reward ?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lacus erat. Mauris vel dignissim lacus. Ut porta dolor lectus, sed accumsan mi vehicula eget. Maecenas lacinia fermentum dolor. Sed iaculis pulvinar vehicula. Nam sed volutpat magna. Ut egestas vel erat quis sodales.</p>
<a href="#contact" title="Go to the Contact section"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566567118-pice-en-or-noiretblanc.jpg" alt="gold coin bag"></a>
<input type="button" onclick="window.location.href='#contact'" value="Contact us" title="Go to the contact section">
</div>
</section>
<hr>
<!-- SECTION HUNTERS -->
<section id="hunters">
<div class="hunters-section">
<h2>Best hunters</h2>
<div class="hunter">
<div id="hunter1">
<img src="https://image.noelshack.com/fichiers/2019/34/5/1566567647-aragorn-noiretblanc.jpg" alt="ElvesKiller22's picture">
<div class="hunters-info">
<p>Aragorn</p>
<p>2 captures</p><a href="#">Profile</a>
</div>
</div>
<div id="hunter2">
<img src="https://image.noelshack.com/fichiers/2019/34/5/1566567656-legolas-noiretblanc.jpg" alt="Legola's picture">
<div class="hunters-info">
<p>Legolas</p>
<p>1 capture</p><a href="#">Profile</a>
</div>
</div>
</div>
</div>
</section>
<hr>
<!-- SECTION RING -->
<section id="ring">
<div class="ring-section">
<h2>About the ring</h2>
<article class="capabilities">
<h2>Ring Capabilities</h2>
<p>What can our master Sauron do with the ring?</p>
<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>
</article>
<article class="ring-awesome">
<h2>Why the ring is awesome ?</h2>
<p>My preciooooooussssss ! Hrk Hrk, we want our preeciooooouuusssss !!</p>
<img src="https://image.noelshack.com/fichiers/2019/34/5/1566567966-gollum-hobbit-noiretblanc.jpg" alt="Gollum's picture">
<footer>
<p>Gollum</p>
</footer>
</article>
</div>
</section>
<hr>
<!-- SECTION ARMY -->
<section id="army">
<div class="army-section">
<h2>Join Mordor Army, we need you !</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed lacus erat. Mauris vel dignissim lacus. Ut porta dolor lectus, sed accumsan mi vehicula eget. Maecenas lacinia fermentum dolor. Sed iaculis pulvinar vehicula. Nam sed volutpat magna. Ut egestas vel erat quis sodales.</p>
<img src="https://image.noelshack.com/fichiers/2019/34/5/1566568164-mordor.jpg" alt="Mordor picture">
<input type="submit" onclick="window.location.href='https://SauronRulesThemAll.com'" formtarget="_blank" value="More info on SauronRulesThemAll.com" title="Redirect to the Sauron web site">
</div>
</section>
<hr>
<!-- SECTION CONTACT -->
<section id="contact">
<div class="contact-section">
<h2>Contact us</h2>
<form action="/my-handling-from-page" method="post">
<div>
<label for="mail">E-mail :</label>
<input type="email" id="mail" name="user_mail" placeholder="Your mail" required>
</div>
<div>
<label for="name">Name :</label>
<input type="text" id="name" name="user_name" placeholder="Your name" required>
</div>
<label for="your-choice">Choose your sentence</label>
<select name="user_choice" id="your-choice">
<option value="seen">I have seen one of them</option>
<option value="head">I killed him but I lost his head</option>
<option value="reward">I have captured one of them, how to get my reward ?</option>
</select>
<div>
<label for="msg">Message :</label>
<textarea name="user_message" id="msg" cols="30" rows="10" placeholder="Your message" title="Enter you message to sauron" required minlength="10" maxlength="310"></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
<ul>
<li><a href="#" title="Redirect to the page about us" target="_blank">About us</a></li>
<li><a href="#fellows" title="Go to the Fellows section">Fellows</a></li>
<li><a href="#army" title="Go to the Army section">Join our army</a></li>
</ul>
<ul>
<li>FAQ</li>
<li>Reward conditions</li>
<li>Legal Mentions</li>
</ul>
<ul>
<li><a href="https://sauron4ever.com" title="Redirect to the Sauron web site" target="_blank">Sauron4ever.com</a></li>
<li><a href="https://twitter.com/lordofmordor?lang=fr" title="Redirect to de Sauron's twitter" target="_blank">Follow him also on twitter</a></li>
</ul>
</footer>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment