Skip to content

Instantly share code, notes, and snippets.

@sdesalas

sdesalas/gandalf.css

Forked from evadav/gandalf.css
Created April 4, 2019 13:34
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 sdesalas/def3ad44f34f0300b250d1b96a44f855 to your computer and use it in GitHub Desktop.
Save sdesalas/def3ad44f34f0300b250d1b96a44f855 to your computer and use it in GitHub Desktop.
Download ZIP
02 - Give style with CSS
Raw
gandalf.css
body {
font-family: Arial, Helvetica, sans-serif;
}
.gandalf{
position:relative;
max-width: 420px;
height: 500px;
padding: 40px;
text-align: center;
background-image: url("http://images.innoveduc.fr/integration_gandalf.png");
display: flex;
justify-content: space-around;
flex-direction: column;
}
.gandalf image{
opacity: 0.5;
}
.gandalf:hover{
opacity: 1;
justify-content: flex-end;
}
.gandalf:hover .reward {
display:none;
}
.reward{
/*position: absolute;
top:10;
left:80;*/
background-color:white;
opacity: 0.8;
padding-left:100;
padding-right:100;
color:black;
border-radius:10px;
font-weight:bold;
font-size:25px;
}
.reward span { color: orange; }
.span{
color:orange ;
}
.name{
color: white;
/*position: absolute;
top: 300px;
left:125px;*/
font-size:50px;
}
.gandalf:hover .name{
top:500px;
left:165px;
font-size: 20px;
}
Raw
gandalf.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="CSS quest Wild Code School"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="misEstilos.css" />
<title>Gandalf</title>
</head>
<body>
<div class="gandalf">
<div class="reward">
<p>reward <span>1000 </span>golden coins</p>
</div>
<div class="name">Gandalf</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment