Skip to content

Instantly share code, notes, and snippets.

@Morzanne

Morzanne/index.html

Created January 14, 2019 18:37
Show Gist options
  • Save Morzanne/c12d24581c3d538fe00d4a67d0271c2e to your computer and use it in GitHub Desktop.
Save Morzanne/c12d24581c3d538fe00d4a67d0271c2e to your computer and use it in GitHub Desktop.
Download ZIP
Sauron css style
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Find out how we are going to rule the world and what our master Sauron is planning to do" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>FindThePrecious.com</title>
</head>
<body>
<section>
<h2>Fellows wanted dead (or alive if you ant to eat them later)</h2>
<a href="">Most wanted</a>
<a href="">Most dangerous</a>
<a href="">Already captured</a>
<br>
<div id="fellowsbloc">
<div class="image">
<img src="https://i.goopics.net/E2xn7.png?texte="Gandalf height="200" width="200" alt="Wizard picture" />
<h3>Gandalf</h3><p class="reward">reward <span class="amount">1000</span> gold coins</p><p>Small description...</p>
</div>
<div class="image">
<img src="https://i.goopics.net/Oy9nQ.jpg" alt="Hobbit picture" />
<h3>Frodon</h3><p>Small description...</p>
</div>
<div class="image">
<img src="https://i.goopics.net/KeE13.jpg" alt="Dwarf picture" />
<h3>Gimli</h3><p class="reward">reward <span class="amount">250</span> gold coins</p><p>Small description...</p>
</div>
</div>
</section>
</body>
</html>
Raw
stylesheet.css
img{
opacity:0.5;
}
#fellowsbloc{
display:flex;
padding-top:10%;
}
.image{
display:flex;
flex-direction:column;
margin-left:10%;
text-align:center;
position:relative;
}
.reward{
position:absolute;
left:1%;
font-size:25px;
font-weight:bold;
border:1px none white;
background-color:rgba(255, 255, 255, 0.5);
border-radius:10px;
padding:4px;
margin-left:10px;
margin-right:10px;
margin-top:5px;
}
h3{
font-size:30px;
font-weight:lighter;
color:white;
position: absolute;
top:30%;
left:22%;
}
.amount{ color:orange;
}
.image:hover img{
opacity:1;
}
.image:hover .reward{
display:none;
}
.image:hover h3 {
font-size:20px;
top:55%;
right:30%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment