-
-
Save brendaMan/b8b5445107a964b222ae8a9d29a90355 to your computer and use it in GitHub Desktop.
Gandalf
This file contains hidden or 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
| .picture { | |
| opacity: 0.6; | |
| } | |
| .reward { | |
| text-align: center; | |
| font-size: 3em; | |
| font-family: 'Arial Narrow Bold', sans-serif; | |
| background-color: antiquewhite; | |
| opacity: 0.6; | |
| position: absolute; | |
| top: 20px; left: 40px; | |
| border-radius: 35px 35px 35px 35px; | |
| width: 380px; | |
| height: 130px; | |
| padding: 12px 25px; | |
| } | |
| .name { | |
| margin: auto; | |
| padding: 275px 110px; | |
| position: absolute; | |
| bottom: 30px; | |
| font-family: 'Arial Narrow Bold', sans-serif; | |
| font-size: 4em; | |
| color: white; | |
| } | |
| .price { | |
| color: orangered; | |
| } | |
| /* hover effect*/ | |
| .picture:hover .reward { | |
| opacity: 0; | |
| } | |
| .picture:hover { | |
| opacity: 1; | |
| } | |
| .picture:hover .name { | |
| padding: 450px 150px; | |
| font-size: 2em; | |
| bottom: -290px; left: 40px; | |
| } |
This file contains hidden or 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="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="index2.css" type="text/css"> | |
| <title>Gandalf</title> | |
| </head> | |
| <body> | |
| <div class="picture"> | |
| <img src="images\integration_gandalf.png" alt="Gandalf"/> | |
| <div class="reward">reward<span class="price"> 1000</span><br/>gold coins</div> | |
| <div class="name">Gandalf</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment