Skip to content

Instantly share code, notes, and snippets.

@angelique-w

angelique-w/findThePrecious.html

Last active August 30, 2019 12:11
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 angelique-w/7dee53c1c72d3df386920e320e13c16e to your computer and use it in GitHub Desktop.
Save angelique-w/7dee53c1c72d3df386920e320e13c16e to your computer and use it in GitHub Desktop.
Download ZIP
findThePrecious
Raw
findThePrecious.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FindThePrecious</title>
<meta name="author" content="Angélique Wons">
<meta name="description" content="Support the hunt for hobbits and other enemies of the tyrant Sauron : rewards against the capture dead or alive fellows who try to destroy the ring.">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<h1>FindThePrecious.com</h1>
<nav class="main_nav">
<ul>
<li class="li_main_nav "><a class= "lien_main_nav" href="#fellows" title="Find wanted fellows">Fellows</a></li>
<li class="li_main_nav"><a class= "lien_main_nav" href="#ring" title="About the ring" >The Ring</a></li>
<li class="li_main_nav"><a class= "lien_main_nav" href="#reward" title="How to get my reward">Get my reward</a></li>
<li class="li_main_nav"><a class= "lien_main_nav" href="#hunters" title="Ranking of the best hunters">Best hunters</a></li>
<li class="li_main_nav"><a class= "lien_main_nav" href="#army" title="How to join the army">Join the army</a></li>
<li class="li_main_nav"><a class= "lien_main_nav" href="#contact" title="How to contact us">Contact us</a></li>
</ul>
</nav>
</header>
<section class="baniere">
<div class="texte_baniere">
<h2>Dangerous fellowship try to destroy the ring</h2>
<p>Orcs, Goblins, Balrogs, protect your master Sauron !</p>
</div>
</section>
<section class="section_fellows">
<h2 id="fellows">Fellows wanted dead <span class="suite_h2_fellows">(or alive if you want to eat them later)</span></h2>
<ul class="fellows_nav">
<li><a class="lien_fellows_nav" href="#" title="Find fellows most wanted">Most wanted</a></li>
<li><a class="lien_fellows_nav" href="#" title="Find fellows most dangerous">Most dangerous</a></li>
<li><a class="lien_fellows_nav" href="#" title="Fellows already captured">Already captured</a></li>
</ul>
<div class="fellows_profils">
<section class="profil profil_gandalf">
<img class="profil_wanted_img" src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf"/>
<p class="coins_reward_gandalf">reward <span class="coins">1000</span> golden coins</p>
<h3 class="h3_fellows_gandalf">Gandalf</h3>
<p class="small_description small_description_gandalf">Small description...</p>
</section>
<section class="profil">
<img class="profil_wanted_img" src="https://via.placeholder.com/200x150" alt="placeholder"/>
<p class="coins_reward">Reward 1000 gold coins</p>
<h3 class="h3_fellows_wanted">The Wizard</h3>
<p class ="small_description">Small description...</p>
</section>
<section class="profil">
<img class="profil_wanted_img" src="https://via.placeholder.com/200x150/808080" alt="placeholder"/>
<p class="dead">DEAD</p>
<h3 class="h3_fellows_wanted">Hobbit#3</h3>
<p class ="small_description">Small description...</p>
</section>
<section class="profil">
<img class="profil_wanted_img" src="https://via.placeholder.com/200x150" alt="placeholder"/>
<p class="coins_reward">Reward 250 gold coins</p>
<h3 class="h3_fellows_wanted">Yummy Dward</h3>
<p class ="small_description">Small description...</p>
</section>
</div>
</section>
<hr>
<section class="section_reward">
<img class= "img_reward" src="https://via.placeholder.com/140" alt="placeholder"/>
<h2 id="reward">I have captured one of them, how to get my reward ?</h2>
<p class="p_avant_lien_btn">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>
<div class="l_btn_redirection" ><a class="lien_btn" href="#contact" title="Click here to contact us">Contact us</a></div>
</section>
<hr>
<section class="hunters_section">
<h2 id="hunters">Best hunters</h2>
<div class="block_hunters_profil">
<section class="hunters_profil">
<img class="img_hunter" src="https://via.placeholder.com/70" alt="placeholder"/>
<h3 class="h3_hunters">ElvesKiller22</h3>
<p class="description_hunters">2 captures - <a class="lien_hunter_profil" href="#" title="Click here to see hunter profile">Profile</a></p>
<button class="btn_hunters" type="button">Like</button>
</section>
<section class="hunters_profil">
<img class="img_hunter" src="https://via.placeholder.com/70" alt="placeholder"/>
<h3 class="h3_hunters">Goblin45</h3>
<p class="description_hunters">1 capture - <a class="lien_hunter_profil" href="#" title="Click here to see hunter profile">Profile</a></p>
<button class="btn_hunters" type="button">Like</button>
</section>
</div>
</section>
<hr>
<section class="section_ring">
<h2 id="ring">About the ring</h2>
<section class="ring_part">
<div class="gris">
<h3 class="h3_ring">Ring Capabilities</h3>
</div>
<p class="p_ring_capabilities">What can our master Sauron do with the ring ?</p>
<table>
<thead>
<tr>
<th class="th_table_ring">Feature</th>
<th class="th_table_ring">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>
</section>
<section class="ring_part ring_part_gollum">
<div class="gris">
<h3 class="h3_ring">Why the ring is awesome ?</h3>
</div>
<img class="img_ring" src="https://via.placeholder.com/110x110" alt="placeholder"/>
<p>My préciooooousssssss ! Hrk Hrk, we want our preecioooouuuuussss !!</p>
<p class="auteur_citation">Gollum</p>
</section>
</section>
<hr>
<section class="section_army">
<h2 id="army">Join Mordor Army, we need you !</h2>
<div id="text_army">
<img class="img_army" src="https://via.placeholder.com/140" alt="placeholder"/>
<p class="p_avant_lien_btn">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>
<div class="l_btn_redirection" ><a class="lien_btn" href="" title="Click here to read more information about how to join Mordor Army">More info on SauronRulesThemAll.com</a></div>
</div>
</section>
<hr>
<section class="section_contact">
<h2 id="contact">Contact us</h2>
<form class="form_contact" action="traitement.php" method="post">
<div>
<label for="mail">E-mail :</label>
<input id="mail" class="form_element form_email" type="email" name="email" placeholder="&#64;"/>
</div>
<div>
<label for="adresse">Adresse :</label>
<input id="adresse" class="form_element form_adresse" type="text" name="adresse" placeholder="&#127968;"/>
</div>
<div>
<label for="selection">Select :</label>
<select id="selection" class="form_element form_select" name="selection">
<option>I have seen one of them</option>
<option>...</option>
</select>
</div>
<div>
<label for="message">Your message :</label>
<textarea id="message" class="form_element form_message" name="message" placeholder="Your message"></textarea>
</div>
<input class="submit" type="submit" value="Submit" />
</form>
</section>
<footer>
<ul class="nav_footer_page">
<li><a class="lien_footer" href="#" title="Learn more about us">About us</a></li>
<li><a class="lien_footer" href="#fellows" title="Find wanted fellows">Fellows</a></li>
<li><a class="lien_footer" href="#army" title="How to join the army">Join our army</a></li>
</ul>
<ul class="nav_footer_conditions">
<li><a class="lien_footer" href="#" title="Click here to find answers to your questions">FAQ</a></li>
<li><a class="lien_footer" href="#" title="Click here to access to reward condition">Reward conditions</a></li>
<li><a class="lien_footer" href="#" title="Click here to reach legal mentions">Legal mentions</a></li>
</ul>
<div class="div_lien_footer_site">
<p><a class="lien_footer site" href="#" title="Le site officile de Sauron">Sauron4Ever.com</a><br />
<a class="lien_footer site" href="#" title="How to follow him">Follow him also on twitter</a></p>
</div>
</footer>
</body>
</html>
Raw
style.css
/*Base (color, font, border...)*/
/*Base générale*/
body {
font-family: sans-serif;
}
p {
color: #424242;
}
h1 {
color: #eeeeee;
font-size: 1.6em;
font-weight: lighter;
}
h2 {
color: #424242;
font-weight: lighter;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
border-radius: 5px;
}
.lien_btn {
color: black;
letter-spacing: 1px;;
border: 1px solid #eeeeee;
border-radius: 5px;
}
/*Base header*/
.lien_main_nav {
color: #eeeeee;
font-size: 1em;
}
header {
background-color: #424242;
}
/*Base Section Baniere*/
.baniere {
background-color: #eeeeee;
border-radius: 0px 0px 5px 5px;
}
/*Base Section Fellows*/
.suite_h2_fellows {
font-size: 0.7em;
}
.lien_fellows_nav {
color: #757575;
text-decoration: none;
}
.profil {
border: 2px solid #eeeeee;
}
.profil_wanted_img {
opacity: 0.7;
}
.coins_reward_gandalf {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
font-size: 1.2em;
}
.coins {
color: #ff6600;
}
.coins_reward {
background-color: rgba(189, 189, 189, 0.8);
border-radius: 5px;
font-size: 0.9em;
color: white;
}
.dead {
font-weight: bold;
font-size: 1.2em;
}
.h3_fellows_wanted {
font-size: 1.5em;
font-weight: lighter;
}
.small_description {
font-size: 0.9em;
}
.h3_fellows_gandalf {
font-size: 1.8em;
font-weight: lighter;
color: white;
}
/*Base Section Reward*/
/*Base Section Hunters*/
.h3_hunters {
font-size: 1em;
}
.description_hunters {
font-size: 0.9em;
}
.lien_hunter_profil {
color: #000000;
text-decoration: underline;
font-weight: bold;
}
/*Base Section Ring*/
.ring_part {
border: 2px solid #eeeeee;
border-radius: 5px;
}
.gris {
border: 2px solid #eeeeee;
background-color: #eeeeee;
}
.p_ring_capabilities {
font-size: 0.9em;
}
.th_table_ring {
color: #eeeeee;
font-weight: lighter;
}
.auteur_citation {
color: #eeeeee;
}
/*Base Section Army*/
/*Base Section Contact*/
/*Base Footer*/
footer {
background-color: #424242;
}
.lien_footer {
color: #eeeeee;
}
.site {
font-weight: bold;
}
/*Layout*/
/*Layout général*/
.l_btn_redirection {
text-align: center;
margin-bottom: 30px;
}
.lien_btn {
padding: 10px 25px 10px 25px;
}
.p_avant_lien_btn {
margin-bottom: 40px;
}
/*Layout Header*/
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
position: fixed;
top: 0px;
z-index: 1000;
width: 97%;
height: 60px;
padding: 0px 15px 0px 15px;
}
.li_main_nav {
display: inline;
height: 60px;
margin: 0px 5px 0px 5px;
padding: 24px 0px 15px 0px;
}
.lien_main_nav {
width: 60px;
padding: 24px 25px 15px 25px;
}
/*Layout baniere*/
.baniere {
height: 250px;
padding: 40px 0px 0px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*Layout Fellows*/
.fellows_nav {
display: flex;
flex-direction: row;
justify-content: center;
}
.fellows_nav li {
margin: 0px 10px 0px 10px;
padding: 15px 0px 15px 0px;
}
.lien_fellows_nav {
height: 10px;
width: 70px;
padding: 30px 25px 30px 25px;
}
.fellows_profils {
display: flex;
flex-direction: row;
justify-content: center;
}
.profil img {
width: 200px;
}
/*Profil gandalf*/
.profil_gandalf {
position: relative;
}
.coins_reward_gandalf {
margin: 10px 10px 80px 10px;
padding: 5px 35px 5px 35px;
position: absolute;
top: 10px;
left: 0px;
}
.h3_fellows_gandalf {
position: absolute;
top: 90px;
left: 45px;
}
.small_description_gandalf {
position: absolute;
bottom: 0px;
}
/*Profils classqiues wanted*/
.profil {
margin: 5px 10px 5px 10px;
padding: 3px;
width: 200px;
height: 280px;
position: relative;
}
.profil_wanted_img {
position: absolute;
}
.h3_fellows_wanted {
position: absolute;
top: 150px;
left: 30px;
}
.small_description {
position: absolute;
bottom: 0px;
left: 10px;
}
.coins_reward {
margin: 10px 10px 80px 10px;
padding: 5px 5px 5px 5px;
position: absolute;
top: 10px;
left: 15px;
}
/*Profils DEAD*/
.dead {
position: absolute;
top: 50px;
left: 70px;
}
/*Layout reward*/
.img_reward {
float: right;
margin: 20px;
}
/*Layout Hunters*/
.block_hunters_profil {
display: flex;
flex-direction: row;
margin-bottom: 30px;
}
.hunters_profil {
width: 50%
}
.img_hunter {
float: left;
margin: 5px 10px;
}
.h3_hunters {
margin: 5px 5px 5px 5px;
}
.description_hunters {
margin: 0px 0px 5px 0px;
}
/*Layout Ring*/
.h3_ring {
padding-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.ring_part {
margin-bottom: 20px;
}
.p_ring_capabilities {
margin-left: 30px;
}
.img_ring {
float: right;
margin: 20px 20px 20px 40px;
border-radius: 55px
}
.ring_part_gollum {
height: 180px;
}
.ring_part_gollum p {
text-align: right;
margin-top: 30px;
}
/*Layout Army*/
.section_army {
min-height: 200px;
}
.img_army {
float: left;
margin-right: 30px;
margin-left: 10px;
}
/*Layout footer*/
footer {
display: flex;
flex-direction: row;
align-items: center;
}
.nav_footer_page {
flex-grow: 1;
}
.nav_footer_conditions {
flex-grow: 3;
}
.div_lien_footer_site {
flex-grow: 1;
}
/*Modules*/
/*Modules généraux*/
/*Modules Hunters*/
.btn_hunters {
padding: 1px 5px 1px 5px;
background-color: #757575;
border-color: #eeeeee;
border-radius: 5px;
letter-spacing: 1px;
}
/*Modules ring*/
table {
border-collapse: collapse;
margin-left: 30px;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid black;
}
th, td {
width: 20%;
height: 30px;
}
th {
background-color: #757575;
}
td {
text-align: center;
}
tr:nth-child(2n+1) {
background-color: #f2f2f2;
}
/*Modules army*/
/*Modules contact us*/
.form_contact {
width: 600px;
margin-left: auto;
margin-right: auto;
}
.form_element {
width: 100%;
margin-bottom: 10px;
}
.form_select {
border-color: #eeeeee;
border-radius: 5px;
}
.form_message {
height: 100px;
}
.submit {
background: white;
border-color: #eeeeee;
border-radius: 5px;
letter-spacing: 1px;
display: block;
margin: 0 auto;
padding: 10px 20px 10px 20px;
margin-bottom: 30px;
}
/*Etats*/
/*Etats header*/
.li_main_nav:hover {
background-color: #e0e0e0;
border: 1px solid #757575;
}
.lien_main_nav:hover {
color: #424242;
}
/*Etats fellows*/
.fellows_nav li:hover {
background-color: #757575;
border-radius: 5px;
}
.lien_fellows_nav:hover {
color: #eeeeee;
}
.profil_wanted_img:hover {
opacity: 1;
}
.profil_wanted_img:hover ~ .coins_reward_gandalf {
visibility: hidden;
}
.profil_wanted_img:hover ~ .coins_reward {
visibility: hidden;
}
.profil_wanted_img:hover ~ .dead {
visibility: hidden;
}
.profil_wanted_img:hover ~ .h3_fellows_gandalf {
top: 160px;
left: 55px;
font-size: 1.4em;
}
/*Etats footer*/
.lien_footer:hover {
text-decoration: underline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment