Skip to content

Instantly share code, notes, and snippets.

@MartinsAlexandre

MartinsAlexandre/findThePrecious

Last active February 14, 2018 14:29
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 MartinsAlexandre/f20195d9cb2bbd073fe6f6689f11faf0 to your computer and use it in GitHub Desktop.
Save MartinsAlexandre/f20195d9cb2bbd073fe6f6689f11faf0 to your computer and use it in GitHub Desktop.
Download ZIP
quête Structurer une page HTML
Raw
findThePrecious
<!doctype HTML>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>findThePrecious</title>
</head>
<!-- le script est pensé pour etre mise en forme avec flexbox -->
<body>
<header>
<h1>FindThePrecious.com</h1>
<nav id="menuPage">
<ul>
<li class="eltMenuPage" id="liFellows">
<a class="lienNavPage" href="#fellows">Fellow</a>
</li>
<li class="eltMenuPage" id="liThering">
<a class="lienNavPage" href="#theRing">The Ring</a>
</li>
<li class="eltMenuPage" id="liGetMyReward">
<a class="lienNavPage" href="#reward">Get my reward</a>
</li>
<li class="eltMenuPage" id="liBestHunters">
<a class="lienNavPage" href="#bestHunters">Best Hunters</a>
</li>
<li class="eltMenuPage" id="liJoinTheArmy">
<a class="lienNavPage" href="#joinMordor">Join the army</a>
</li>
<li class="eltMenuPage" id="liContactUs">
<a class="lienNavPage" href="#contactUs">Contact us</a>
</li>
</ul>
</nav>
</header>
<div id="banner">
<div id="ctnBanner">
<!-- ctnBanner position absolute z-index:1 -->
<img id="bannerInfo" src="http://via.placeholder.com/600x200" alt="banner info" />
<!-- pour la taille de l'image exacte on verra à la mise en page css -->
</div>
<div id="ctnTextBanner">
<!-- ctnTextBanner position absolute z-index:2 left top pour le positionement -->
<p id="textBanner"></p>
</div>
</div>
<section id="fellows" class="bodyChild">
<header class="headSections">
<div class="ctnTitleSections">
<h2 class="titleSections">Fellows wanted dead</h2>
<p class="titleSectionsMore">(or alive if you want to eat them later)</p>
</div>
<div id="navFellows">
<input type="button" class="liNavFollows" value="Most Wanted">
<input type="button" class="liNavFollows" value="Most dangerous">
<input type="button" class="liNavFollows" value="Alfready captured">
</div>
</header>
<div id="conteneurPersos">
<div class="persos" id="theWizard">
<div class="lookPersos">
<div class="ctnPhotoPersos">
<!-- ctnPhotoPersos position absolute z-index:1 -->
<img class="photoPersos" src="http://via.placeholder.com/150x150" alt="character photo" />
</div>
<div class="coinsPersos">
<!-- coinsPersos position absolute z-index:2 left top pour le positionement par dessus ctnPhotoPersos -->
<p class="infosCoinsPersos" id="infosCoinsTheWizard">Reward 1000 gold coins</p>
</div>
</div>
<aside class="infosPersos">
<h3 class="namePersos">The Wizard</h3>
<p class="describePersos">Small description</p>
</aside>
</div>
<div class="persos" id="hobbit#3">
<div class="lookPersos">
<div class="ctnPhotoPersos">
<img class="photoPersos" src="http://via.placeholder.com/150x150" alt="character photo" />
</div>
<div class="coinsPersos">
<p class="infosCoinsPersos">DEAD</p>
<!-- place le para au centre avec css puis, div coinsPersos background color gray opacity 0.5 -->
</div>
</div>
<aside class="infosPersos">
<h3 class="namePersos">Hobbit#3</h3>
<p class="describePersos">Small description</p>
</aside>
</div>
<div class="persos" id="yummyDwarf">
<div class="lookPersos">
<div class="ctnPhotoPersos">
<img class="photoPersos" src="http://via.placeholder.com/150x150" alt="character photo" />
</div>
<div class="coinsPersos">
<p class="infosCoinsPersos">Reward 250 gold coins</p>
</div>
</div>
<aside class="infosPersos">
<h3 class="namePersos">Yummy Dwarf</h3>
<p class="describePersos">Small description</p>
</aside>
</div>
</div>
<!-- pas de noeud pour la barre de separation car elle serat ajouter avec : section border bottom -->
</section>
<section id="reward" class="bodyChild">
<header class="headSections">
<h2 class="titleSections">I have captured one of them, how to get my reward ?</h2>
</header>
<div id="ctnReward">
<p id="paraReward"> 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 </p>
<input type="button" id="btnLienContactUs" value="Contact Us">
</div>
<img id="imgContactUs" src="http://via.placeholder.com/140x140" alt="photo contact us" />
</section>
<section id="bestHunters" class="bodyChild">
<header class="headSections">
<h2 class="titleSections">Best Hunters</h2>
</header>
<div id="ctnPlayers">
<article class="players" id="elvestKiller22">
<img src="http://via.placeholder.com/70x70" alt="image players" />
<div class="describePlayers">
<h3 class="namePlayers">ElvesKiller22</h3>
<p class="infosPlayers">capture - <a href="">Profile</a></p>
<a class="lienLikeFacebook" href="">
<div>
<img src="http://via.placeholder.com/20x20" alt="like facebook" />
<p>Like 68K</p>
</div>
<!-- lien créé juste pour la démo car sinon on peut utilisé un bouton officiel -->
</a>
</div>
</article>
<article class="players" id="Gobelin45">
<img src="http://via.placeholder.com/70x70" alt="image players" />
<div class="describePlayers">
<h3 class="namePlayers">Gobelin45</h3>
<p class="infosPlayers">capture - <a href="">Profile</a></p>
<a class="lienLikeFacebook" href="">
<div>
<img src="http://via.placeholder.com/20x20" alt="like facebook" />
<p>Like 68K</p>
</div>
<!-- lien créé juste pour la démo car sinon on peut utilisé un bouton officiel -->
</a>
</div>
</article>
</div>
</section>
<section id="theRing" class="bodyChild">
<header class="headSections">
<h2 class="titleSections">About the ring</h2>
</header>
<section class="theRingChild">
<header class="headTheRingChild">
<h3>Ring Capabilities</h3>
</header>
<div class="bodyTheRingChild">
<p>What can our master Sauron do with the ring ?</p>
<table id="tableTheRing">
<tr>
<th>Feature</th>
<th>Description</th>
</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 the world</td>
</tr>
</table>
</div>
</section>
<section class="theRingChild">
<header class="headTheRingChild">
<h3>Why the ring is awesome ?</h3>
</header>
<div class="bodyTheRingChild">
<div id="ctnTextGollum">
<p>My preciooooouuuussssss ! Hrk Hrk, we want our preecioooouuuussssss !!</p>
<p id="gollum">Gollum</p>
<!-- les 2 p seront en colone de même largeur, le 2éme aura sont text align à droite -->
</div>
<img src="http://via.placeholder.com/110x110" alt="img de gollum" />
</div>
</section>
</section>
<section id="joinMordor" class="bodyChild">
<header class="headSections">
<h2 class="titleSections">Join Mordor Army, we need you !</h2>
</header>
<img src="http://via.placeholder.com/140x140" alt="logo modor army">
<div id="ctnMoreInfo">
<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 </p>
<input type="button" value="More info on SauronRulesThemAll.com" />
</div>
</section>
<section id="contactUs" class="bodyChild">
<header class="headSections">
<h2 class="titleSections">Contact us</h2>
</header>
<form id="contact">
<input type="email" name="userEmail" placeholder="@" required>
<input type="text" name="userAdress" placeholder="123 rue Abc " required>
<select name="choice" id="choice">
<option value="answer">I have seen on of them</option>
<option value="answer">I have not seen</option>
</select>
<textarea name="userMessage" placeholder="Enter text here..." cols="30" rows="5" required></textarea>
<input type="submit" value="Send">
</form>
</section>
<footer id="foot" class="bodyChild">
<table id="tableFoot">
<tr>
<td><a href="">About us</a></td>
<td><a href="">Fellows</a></td>
<td><a href="">Join our army</a></td>
</tr>
<tr>
<td><a href="">FAQ</a></td>
<td><a href="">Reward condition</a></td>
<td><a href="">legal mentions</a></td>
</tr>
</table>
<div id="ctnLiens">
<a href="">Sauron4Ever.com</a>
<a href="">Follow him also on twitter</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment