Skip to content

Instantly share code, notes, and snippets.

@loloof64

loloof64/index.html

Created March 31, 2018 21:56
Show Gist options
  • Save loloof64/0b3f2cacb7b1bec562b27ff543fedf0c to your computer and use it in GitHub Desktop.
Save loloof64/0b3f2cacb7b1bec562b27ff543fedf0c to your computer and use it in GitHub Desktop.
Download ZIP
Wanted !
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Captured fellow</title>
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="reward">
<img src="./images/gandalf.png" alt="fellow_photo" />
<p class="reward_description">
reward <span class="reward_amount">1000</span>
golden points
</p>
<p class="fellow_name">Gandalf</p>
</div>
</body>
</html>
Raw
main.css
.reward {
position: absolute;
width: 500px;
height: 572px;
}
.reward img {
position: absolute;
opacity: 0.4;
}
.reward:hover img {
opacity: 1.0;
}
.reward .reward_description {
position: absolute;
top: 10%;
left: 15%;
padding: auto;
background-color: white;
opacity: 0.6;
border-radius: 12px;
font-size: 40pt;
width: 300px;
padding-left: 12px;
padding-right: 12px;
}
.reward:hover .reward_description {
position: absolute;
display: none;
}
.reward_amount {
color: darkorange;
}
.reward .fellow_name {
color: white;
font-size: 60pt;
position: absolute;
top: 28%;
left: 20%;
}
.reward:hover .fellow_name {
color: white;
font-size: 30pt;
position: absolute;
top: 70%;
left: 36%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment