Skip to content

Instantly share code, notes, and snippets.

@ConnorFM

ConnorFM/index.html

Created February 13, 2019 17:15
Show Gist options
  • Save ConnorFM/409623567401826d5a45bd026708b057 to your computer and use it in GitHub Desktop.
Save ConnorFM/409623567401826d5a45bd026708b057 to your computer and use it in GitHub Desktop.
Download ZIP
find the precious
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>findThePrecious.com</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>findThePrecious.com</h1>
<nav>
<ul>
<li><a href="#">Fellows</a></li>
<li><a href="#">The Ring</a></li>
<li><a href="#">Get my reward</a></li>
<li><a href="#">Best hunters</a></li>
<li><a href="#">Join the army</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<section>
<h2>Dangerous fellowship try to destroy the ring</h2>
<img src="http://via.placeholder.com/1400x140" alt="banner" />
<p>Orcs, Goblins, Balrogs, protect your master Sauron!</p>
<article>
<h2>Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
<nav>
<ul>
<li><a href="#">Most Wanted</a></li>
<li><a href="#">Most Dangerous</a></li>
<li><a href="#">Already Captured</a></li>
</ul>
</nav>
<article>
<div>
<div>
<div class="avatar">
<img class="image" src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf">
<div class="text">
<p class="reward">reward <span class="number">1000</span><br>golden coins</p>
<h3 class="name">Gandalf</h3>
</div>
</div>
<h3>The Wizard</h3>
<p>Small description...</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" alt="avatar">
<h3>Hobbit #3</h3>
<p>Small description...</p>
</div>
<div>
<img src="http://via.placeholder.com/200x200" alt="avatar">
<h3>Yummy Dwarf</h3>
<p>Small description...</p>
</div>
</div>
</article>
</article>
</section>
<hr>
<section>
<h2>I have captured one of them, how to get my reward?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh volutpat leo molestie ullamcorper vel sit amet nisi. Duis mollis mauris odio, id luctus est aliquam vitae. Suspendisse vel nisl laoreet est faucibus bibendum ut et urna. Sed neque ante, dapibus tincidunt tellus ac, cursus facilisis libero. Donec at leo felis. Proin at egestas libero. Fusce aliquam augue mauris, ut congue dolor venenatis quis. Morbi tempus, diam tincidunt tincidunt congue, massa tellus auctor risus, sit amet placerat sem quam quis eros.</p>
<button type="button">Contact us</button>
<aside>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="background" /></a>
</aside>
</section>
<hr>
<section>
<h2>Best hunters</h2>
<article>
<div>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="profile"></a>
<h3>ElvesKiller22</h3>
<p>2 captures</p>
<a href="...">Profile</a>
<input type="Submit" value="Like 66K">
</div>
<div>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="profile"></a>
<h3>Goblin45</h3>
<p>1 capture</p>
<a href="...">Profile</a>
<input type="Submit" value="Like 36K">
</div>
</article>
</section>
<hr>
<section>
<h2>About the ring</h2>
<table>
<caption>Ring Capabilities</caption>
<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>
<p>Why the ring is awesome?</p>
<p>My precioooooouuuuuuussssss! Hrk Hrk, We want our precioooooouuuuuuussssss</p>
<aside>
<a href="https://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="illustration"></a>
</aside>
</section>
<hr>
<section>
<h2>Join Mordor Army, we need you!</h2>
<aside>
<img src="http://via.placeholder.com/140x140" alt="illustration">
</aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a nibh volutpat leo molestie ullamcorper vel sit amet nisi. Duis mollis mauris odio, id luctus est aliquam vitae. Suspendisse vel nisl laoreet est faucibus bibendum ut et urna. Sed neque ante, dapibus tincidunt tellus ac, cursus facilisis libero. Donec at leo felis. Proin at egestas libero. Fusce aliquam augue mauris, ut congue dolor venenatis quis. Morbi tempus, diam tincidunt tincidunt congue, massa tellus auctor risus, sit amet placerat sem quam quis eros.</p>
<button type="button">More info on SauronRulesThemAll.com</button>
</section>
<hr>
<section>
<h2>Contact us</h2>
<form method="post" action="traitement.php">
<p><input type="text" name="mail" id="mail" placeholder="@" size="70" maxlength="30" /></p>
<p><input type="text" name="adress" id="adress" placeholder="M" size="70" maxlength="30" /></p>
</form>
<form method="post" action="traitement.php">
<p>
<select name="choix" id="choix">
<option value="...">I have seen one of them</option>
</select>
</p>
</form>
<form method="post" action="traitement.php">
<p>
<textarea name="ameliorer" id="ameliorer" rows="5" cols="69">Your message</textarea>
</p>
</form>
<footer>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Fellows</a></li>
<li><a href="#">Join our army</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Reward conditions</a></li>
<li><a href="#">Legal mentions</a></li>
<li><a href="#">Sauron4Ever.com</a></li>
<li><a href="#">Follow Him also on twitter</a></li>
</ul>
</footer>
</section>
</body>
</html>
Raw
style.css
.avatar {
position: relative;
height: 200px;
width: 200px;
}
.image {
height: 200px;
width: 200px;
opacity: 0.5;
}
.text {
position: absolute;
top: 1px;
left: 40px;
font-family: Arial, Helvetica, sans-serif;
}
.reward {
background-color: white;
opacity: 0.7;
border:10px solid white;
border-radius: 5px;
}
.number {
color: #f78031;
}
.name {
color: white;
}
.avatar:hover .image{
opacity: 1;
}
.avatar:hover .text{
top: 140px;
}
.avatar:hover .reward{
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment