Skip to content

Instantly share code, notes, and snippets.

@Pompidup

Pompidup/gandalfQuest.css

Last active February 13, 2019 00: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 Pompidup/5e0a5922e89cd7ff8d68a315d04792a3 to your computer and use it in GitHub Desktop.
Save Pompidup/5e0a5922e89cd7ff8d68a315d04792a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gandalfQuest.css
body {
width: 1200px;
margin: auto;
border: solid 1px;
}
#main {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.fellow {
position: relative;
border-color: black;
border: solid 1px;
padding: 10px;
margin: 5px;
}
.fellow img {
position: relative;
opacity: 0.5;
width: 300px;
z-index: -1;
}
.fellower {
position: absolute;
color: black;
left: 18%;
background-color: lightgrey;
opacity: 0.8;
width: 200px;
height: 60px;
z-index: 1;
font-size: 20px;
text-align: center;
padding-top: 10px;
border-color: black;
border: solid 1px;
border-radius: 20px;
}
.fellower strong {
color: orange;
}
.namefellow {
position: absolute;
color: white;
left: 24%;
top: 30%;
font-size: 50px;
text-align: center;
}
.fellow:hover img {
opacity: 1;
z-index: 1;
}
.fellow:hover .namefellow {
position: absolute;
color: white;
z-index: 1;
top: 70%;
left: 30%;
font-size: 30px;
text-align: center;
}
Raw
gandalfQuest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Findtheprecious</title>
</head>
<body>
<header>
<h1>FindThePrecious.com</h1>
<nav>
<div>
<ul>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#thering">The Ring</a></li>
<li><a href="#reward">Get my reward</a></li>
<li><a href="#besthunters">Best hunters</a></li>
<li><a href="#join">Join the army</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
</nav>
<div>
<a href="https://placeholder.com"><img src="https://via.placeholder.com/640x140" alt="banniere"></a>
<p>Dangerous fellowship try to destroy the ring Orcs, Goblins, Balrogs, protect your master Sauron !</p>
</div>
</header>
<section id="fellows">
<h2>Fellows wanted dead(or alive if you want to eat them later)</h2>
<ul>
<li>Most wanted</li>
<li>Most Dangerous</li>
<li>Already captured</li>
</ul>
<div id="main">
<div class="fellow">
<p class="fellower">Reward <strong>1000</strong> golden coins</p>
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="Wizard">
<p class="namefellow">Gandalf</p>
<p>small description</p>
</div>
<div class="fellow">
<p class="fellower"><strong>Dead</strong></p>
<img src="http://via.placeholder.com/200x230" alt="Hobbit #3">
<p class="namefellow">Hobbit #3</p>
<p>small description</p>
</div>
<div class="fellow">
<p class="fellower">Reward 250 gold coins</p>
<img src="http://via.placeholder.com/200x230" alt="Yummy Dwarf">
<p class="namefellow">Yummy Dwarf</p>
<p>small description</p>
</div>
</div>
</section>
<hr>
<section id="reward">
<h2>I have captured one of them, how to get my reward ?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut metus mi, bibendum eu pellentesque non, pretium a dolor. Aenean gravida, eros et imperdiet sodales, risus sem egestas quam, ac ultrices sem urna tempor leo. Suspendisse potenti. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ornare luctus ex, vel congue ipsum interdum ac. Nam et justo non purus dictum ullamcorper. Aenean consectetur
porta lorem pellentesque condimentum. Aliquam scelerisque vel nulla eu sodales. Morbi maximus erat eu augue vehicula, eget euismod felis dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin mattis nisl pellentesque dolor
varius eleifend. Praesent sed diam id nulla pellentesque porttitor. Duis aliquam diam vel justo ornare molestie. Nunc euismod maximus mauris quis dignissim. Proin id vulputate nunc, in ultrices quam.</p>
<a href="http://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="reward"></a>
<a href="#contact">Contact us</a>
</section>
<hr>
<section id="besthunters">
<h2>Best hunters</h2>
<div>
<a href="http://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="ElvesKiller22"></a>
<p><strong>ElvesKiller22</strong></p>
<p>2 captures -<a href="">Profile</a></p>
<input type="button" value="Like">
</div>
<div>
<a href="http://placeholder.com"><img src="http://via.placeholder.com/70x70" alt="Goblin45"></a>
<p><strong>Goblin45</strong></p>
<p>1 captures -<a href="">Profile</a></p>
<input type="button" value="Like">
</div>
</section>
<hr>
<section id="thering">
<h2>About the ring</h2>
<h3>Ring Capabilities</h3>
<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>
<h3>Why the ring is awesome ?</h3>
<p>My preciooooooussssss ! Hrk Hrk, we want our preecioooouuuussss!!
<p>
<p>Gollum
<p>
<a href="http://placeholder.com"><img src="http://via.placeholder.com/110x110" alt="Gollum"></a>
</section>
<hr>
<section id="join">
<h2>Join Mordor Army, we need you !</h2>
<p>In magna lorem, consequat non quam egestas, hendrerit convallis risus. Integer feugiat ac tortor sit amet tincidunt. Sed eu massa id mauris fermentum ornare. Nulla blandit, magna a pretium accumsan, ex nibh rutrum nibh, quis varius augue magna at
lectus. Nulla aliquam metus at arcu euismod lobortis. Sed egestas nibh nec nibh venenatis sollicitudin eu at turpis. In aliquet augue tincidunt laoreet mollis. Donec porttitor nibh eu sapien efficitur volutpat eget id mauris. Sed ut dolor non leo
convallis rhoncus. Integer luctus arcu est, id interdum lacus accumsan eget. Maecenas at orci sit amet nisi efficitur posuere ut sed urna. Morbi nec ullamcorper dui. Etiam in justo ac purus vestibulum placerat ac porta dolor.</p>
<a href="http://placeholder.com"><img src="http://via.placeholder.com/140x140" alt="joinus"></a>
<a href="http://www.sauronrulesthemall.com">More info on SauronRulesThemAll.com</a>
</section>
<hr>
<section id="contact">
<h2>Contact us</h2>
<form method="post" action="traitement.php">
<p><label for="email">Your E-mail</label> : <input type="email" name="email" id="email" placeholder="example : pseudo@email.com" /></p>
<p><label for="adresse">Your adress</label> : <input type="text" name="adresse" id="adresse" placeholder="10 road blue, NY city" /></p>
<p><label for="subject">Subject</label> :
<select name="subject" id="subject">
<option value="see">I have seen one of them</option>
<option value="kill">I have kill one of them</option>
<option value="neighbour" selected>My neighbour is one of them</option>
<option value="iam">I am one of them</option>
</select>
</p>
<p><label for="message">Your message</label> : <textarea name="message" id="message" placeholder="I have found one, come quickly !" rows="10" cols="50"></textarea></p>
</form>
</section>
<footer>
<ul>
<li><a href="aboutus">About us</a></li>
<li><a href="#fellows">Fellows</a></li>
<li><a href="#join">Join the army</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#reward">Reward conditions</a></li>
<li><a href="#mentions">Legal mentions</a></li>
<li><a href="www.sauron4ever.com">Sauron4Ever.com</a></li>
<li><a href="twitter.com">Follow him 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