Created
January 27, 2019 16:52
-
-
Save Lexhoo/2879012ce8128c46e5646e68c50055b8 to your computer and use it in GitHub Desktop.
Gandalf.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container .first .image img{ | |
top:0; | |
left:0; | |
width:28%; | |
height:10%; | |
transform:0.5; | |
opacity:0.5; | |
} | |
.container .first p{ | |
width:30%; | |
color:white; | |
font-size:1.5em; | |
bottom: 14px; | |
margin-top:45px; | |
margin-left:35px; | |
margin-right:450px; | |
border-radius:15px; | |
position:absolute; | |
} | |
.container span{ | |
color:#F05411 | |
} | |
.container .first:hover .texte h3{ | |
opacity:0; | |
} | |
.container .premier:hover .image img .texte{ | |
opacity: 1 | |
} | |
.container .first:hover p{ | |
color:white; | |
font-size:1em; | |
bottom: 2px; | |
margin-top:45px; | |
margin-left:59px; | |
margin-right:450px; | |
border-radius:15px; | |
position:absolute; | |
width:50%; | |
} | |
.container .first:hover .image img{ | |
opacity:1; | |
} | |
.texte{ | |
font-family: Verdana, sans-serif; | |
} | |
.container h3{ | |
bottom: 100px; | |
margin-top:45px; | |
margin-left:28px; | |
margin-right:450px; | |
border-radius:15px; | |
position:absolute; | |
font-size:0.5em; | |
background-color: #EBE8E8; | |
opacity: 0.8; | |
padding: 3px 12px 3px 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>findtheprecious</title> | |
<link rel="stylesheet" href="monFichierDeStyle.css" /> | |
</head> | |
<body> | |
<h1>Find the precious</h1> | |
<header> | |
<ul id="menu_horizontal"> | |
<li>Fellows</li> | |
<li>The Ring</li> | |
<li>Get my reward</li> | |
<li>Best hunters</li> | |
<li>Join the army</li> | |
<li>Contact us</li> | |
</ul> | |
</header> | |
<div> | |
<a>Dangerous fellowships try to destroy the ring</a> | |
<br> | |
<a> Orcs, Goblins, Balrogs, protect your master Sauron !</a> | |
</div> | |
<div> | |
<h1 id="#Fellows">Fellows wanted dead | |
</h1> | |
<a>(Or alive if you want to eat them later !)</a> | |
<ul id="#3"> | |
<li> | |
<a href="#Most_wanted"> | |
Most wanted</a></li> | |
<li> | |
<a href="#Most_dangerous"> | |
Most dangerous</a></li> | |
<li> | |
<a href="#Already_captured"> | |
Already captured</a></li> | |
</ul> | |
</div> | |
<div class="container"> | |
<div class="first"> | |
<div class="image"> | |
<img src="http://images.innoveduc.fr/integration_gandalf.png" alt="gandalf"> | |
</div> | |
<div class= "texte"> | |
<h3>reward <span>1000</span> <br /> golden coin</h3> | |
<p>Gandalf</p> | |
</div> | |
</div> | |
<section> | |
<h2 id="Get_my_reward">Get my reward | |
</h2> | |
<a>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 | |
</a> | |
<br> | |
<img | |
src="https://via.placeholder.com/140" | |
alt="140x140"> | |
</section> | |
<section> | |
<h2 id="Best_hunters">Best hunters</h2> | |
<img | |
src="https://via.placeholder.com/70" | |
alt="70x70"> | |
<a>ElvesKiller22</a> | |
<img | |
src="https://via.placeholder.com/70" | |
alt="70x70"> | |
<a>Goblin45</a> | |
</section> | |
<section> | |
<h2 id="The_Ring">About the ring</h2> | |
<table> | |
<tr> | |
<td><b>Feature</b></td> | |
<td><b>Description</b></td> | |
</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> | |
</section> | |
<div> | |
<br> | |
<a href="#Why_the_ring_is_awesomes">Why the ring is awesome</a> | |
</div> | |
<section> | |
<h2 id="Join_the_army">Joint the army, we need you !</h2> | |
<img | |
src="https://via.placeholder.com/140" | |
alt="140x140"> | |
<a>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. Pellentesque congue.</a> | |
<img | |
src="https://via.placeholder.com/460x65?text=Visit+Blogging.com+Now" | |
alt="40x65"> | |
</section> | |
<section> | |
<h2 id="Contact_us">Contact us</h2> | |
</section> | |
<footer> | |
<form action="/tableau_contact" method="post"> | |
<div> | |
<label>@ :</label> | |
<input type="text"/> | |
</div> | |
<div> | |
<label>Adresse postale :</label> | |
<input type="email"/> | |
</div> | |
<div> | |
<label>Message :</label> | |
<input type="text"/> | |
</div> | |
</form> | |
</footer> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment